2 |
3 |
4 | 
5 |
6 |
7 | Hyperamp
8 |
9 |
10 |
11 | a humble music player
12 |
13 |
14 |
15 |
16 | **NOTE:** This project was a lot of fun, but is thoroughly dead. The repo and builds will be kept around for historical reference as long as the maintenance automation and free hosting will afford. If you want to pick up this project, I recommend starting over however there are still a lot of interesting ideas and designs in this project and issues section. Have fun and happy hacking!
17 |
18 | **Hyperamp** is a project by the [hypermodules](https://hypermodul.es/) team to make a simple and free audio player that anyone can improve. We designed it to be fast and compact, with no strings attached to a store or anything else. Here's what it looks like:
19 |
20 |
21 |
22 | 
23 | 
24 |
25 |
26 |
27 | [](https://github.com/hypermodules/hyperamp/actions/workflows/test.yml)
28 |
29 | ## Download
30 |
31 | See the [releases][release-url] page to download the latest version for your platform.
32 |
33 | [![Total Downloads][release-downloads-img]][release-url]
34 |
35 | ## Contributing
36 |
37 | Want to help make Hyperamp better? Great! Head over to the [contributing guidelines](CONTRIBUTING.md) to get started.
38 |
39 | ## License
40 |
41 | © 2024 [HYPERMODULES LLC](https://hypermodul.es)
42 | [GPLv3](LICENSE.md)
43 |
44 | [stability-img]: https://img.shields.io/badge/stability-experimental-orange.svg
45 | [stability-url]: https://nodejs.org/api/documentation.html#documentation_stability_index
46 | [build-img]: https://img.shields.io/travis/hypermodules/hyperamp/master.svg
47 | [build-url]: https://travis-ci.org/hypermodules/hyperamp
48 | [standard-img]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
49 | [standard-url]: https://github.com/feross/standard
50 | [appveyor-img]: https://ci.appveyor.com/api/projects/status/so74ca9bg452qpny/branch/master?svg=true
51 | [appveyor-url]: https://ci.appveyor.com/project/bcomnes/hyperamp/branch/master
52 | [irc-url]: https://www.irccloud.com/invite?channel=%23hypermodules&hostname=irc.freenode.net&port=6697&ssl=1
53 | [irc-img]: https://img.shields.io/badge/freenode-%23hypermodules-1e72ff.svg
54 | [release-version-img]: https://img.shields.io/github/release/hypermodules/hyperamp.svg
55 | [release-downloads-img]: https://img.shields.io/github/downloads/hypermodules/hyperamp/total.svg
56 | [release-url]: https://github.com/hypermodules/hyperamp/releases/latest
57 |
--------------------------------------------------------------------------------
/build/README.md:
--------------------------------------------------------------------------------
1 | # Build Resources
2 |
3 | This directory is for storing build resources for `electron-builder`. Please make sure you read and understand the [build configuration](https://www.electron.build/configuration/configuration) before changing anything here.
4 |
--------------------------------------------------------------------------------
/build/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/build/icon.icns
--------------------------------------------------------------------------------
/build/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/build/icon.ico
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Hyperamp Docs
2 |
3 | Welcome to the Hyperamp docs! This area is 🚧 under construction 🚧.
4 |
--------------------------------------------------------------------------------
/docs/architecture.graffle:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/architecture.graffle
--------------------------------------------------------------------------------
/docs/hyperamp-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/hyperamp-icon.png
--------------------------------------------------------------------------------
/docs/hyperamp-icon.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/hyperamp-icon.sketch
--------------------------------------------------------------------------------
/docs/ipc.graffle:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/ipc.graffle
--------------------------------------------------------------------------------
/docs/screenshot-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/screenshot-2.png
--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/screenshot.png
--------------------------------------------------------------------------------
/docs/splash-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/splash-square.png
--------------------------------------------------------------------------------
/docs/splash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/docs/splash.jpg
--------------------------------------------------------------------------------
/lib/README.md:
--------------------------------------------------------------------------------
1 | # Library
2 |
3 | This directory is for program files that need to be shared between `main` and `renderer` processes.
4 |
--------------------------------------------------------------------------------
/main/README.md:
--------------------------------------------------------------------------------
1 | # Main
2 |
3 | This directory is for files run in the `main` electron process.
4 |
5 | The entry point of the application is `index.js`.
6 |
--------------------------------------------------------------------------------
/main/artwork.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const { app } = require('electron')
3 | const ArtworkCache = require('./lib/artwork-cache')
4 | const artwork = module.exports = {
5 | cache: null,
6 | init
7 | }
8 |
9 | function init () {
10 | const configPath = app.getPath('userData')
11 | artwork.cache = new ArtworkCache(path.join(configPath, 'artwork-cache'))
12 | }
13 |
--------------------------------------------------------------------------------
/main/config.js:
--------------------------------------------------------------------------------
1 | const { app } = require('electron')
2 | const Config = require('electron-store')
3 |
4 | const config = new Config({ name: 'hyperamp-config' })
5 | if (config.size === 0) config.set(defaults())
6 |
7 | function defaults () {
8 | return {
9 | paths: [app.getPath('music')]
10 | }
11 | }
12 |
13 | module.exports = config
14 |
--------------------------------------------------------------------------------
/main/index.js:
--------------------------------------------------------------------------------
1 | const log = require('electron-log')
2 | log.initialize()
3 | const electron = require('electron')
4 | const { app, ipcMain } = electron
5 | const remoteMain = require('@electron/remote/main')
6 | remoteMain.initialize()
7 | const Config = require('electron-store')
8 | const get = require('lodash.get')
9 | const xtend = require('xtend')
10 | const userConfig = require('./config')
11 | const menu = require('./menu')
12 | const artwork = require('./artwork')
13 | const makeTrackDict = require('./track-dict')
14 | const audio = require('./windows/audio')
15 | const player = require('./windows/player')
16 | const AudioLibrary = require('./lib/audio-library')
17 | const autoUpdater = require('electron-updater').autoUpdater
18 | autoUpdater.logger = log
19 | autoUpdater.autoDownload = true
20 |
21 | // handle uncaught exceptions before calling any functions
22 | process.on('uncaughtException', (err) => {
23 | log.error(err)
24 | })
25 |
26 | const windows = [player, audio]
27 |
28 | const persist = new Config({ name: 'hyperamp-persist' })
29 | const libraryPersist = new Config({ name: 'hyperamp-library' })
30 |
31 | const state = xtend({
32 | paths: [], // USERCONFIG: Paths for searching for songs
33 | loading: false, // Mutex for performing a scan for new tracks
34 | volume: 0.50,
35 | playing: false,
36 | muted: false
37 | }, persist.store, userConfig.store)
38 |
39 | const al = new AudioLibrary(libraryPersist.store)
40 |
41 | module.exports = state
42 | module.exports.al = al
43 |
44 | const gotTheLock = app.requestSingleInstanceLock()
45 |
46 | if (!gotTheLock) {
47 | app.quit()
48 | }
49 |
50 | app.on('second-instance', (commandLine, workingDirectory) => {
51 | //
52 | // Someone tried to run a second instance, we should focus our window.
53 | if (player.win) {
54 | if (player.win.isMinimized()) player.win.restore()
55 | player.win.focus()
56 | } else {
57 | al.recall()
58 | player.init()
59 | }
60 | })
61 |
62 | app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required')
63 |
64 | app.on('ready', function appReady () {
65 | menu.init()
66 | audio.init()
67 | player.init()
68 | artwork.init()
69 |
70 | electron.powerMonitor.on('suspend', function pauseOnWake () {
71 | log.info('Entering sleep, pausing')
72 | ipcMain.emit('pause')
73 | })
74 |
75 | // register IPC handlers
76 | ipcMain.on('volume', volume)
77 | ipcMain.on('queue', queue)
78 | ipcMain.on('play', play)
79 | ipcMain.on('playing', playing)
80 | ipcMain.on('pause', pause)
81 | ipcMain.on('paused', paused)
82 | ipcMain.on('prev', prev)
83 | ipcMain.on('next', next)
84 | ipcMain.on('mute', mute)
85 | ipcMain.on('unmute', unmute)
86 | ipcMain.on('shuffle', shuffle)
87 | ipcMain.on('unshuffle', unshuffle)
88 | ipcMain.on('timeupdate', timeupdate)
89 | ipcMain.on('seek', seek)
90 | ipcMain.on('update-library', updateLibrary)
91 | ipcMain.on('search', search)
92 | ipcMain.on('recall', recall)
93 | ipcMain.on('sync-state', syncState)
94 |
95 | // register autoUpdater
96 | if (!process.env.DEV_SERVER) {
97 | setTimeout(() => {
98 | log.info('autoUpdater: Auto update initalized...')
99 | autoUpdater.checkForUpdatesAndNotify()
100 | }, 1000 * 3)
101 | }
102 |
103 | autoUpdater.on('error', (err) => {
104 | broadcast('au:error', err)
105 | console.error(err)
106 | })
107 |
108 | autoUpdater.on('checking-for-update', () => {
109 | broadcast('log', 'autoUpdater: Checking for update...')
110 | log.info('autoUpdater: Checking for update...')
111 | broadcast('au:checking-for-update')
112 | })
113 |
114 | autoUpdater.on('update-available', (info) => {
115 | broadcast('log', 'autoUpdater: Update available!')
116 | log.info('autoUpdater: Update available!')
117 | broadcast('au:update-available', info)
118 | })
119 |
120 | autoUpdater.on('update-not-available', (info) => {
121 | broadcast('log', 'autoUpdater: No update available')
122 | log.info('autoUpdater: No update available')
123 | broadcast('au:update-not-available', info)
124 | })
125 |
126 | autoUpdater.on('download-progress', (progress) => {
127 | broadcast('au:progress', progress)
128 | })
129 |
130 | autoUpdater.on('update-downloaded', (info) => {
131 | broadcast('log', 'autoUpdater: Update downloaded')
132 | log.info('autoUpdater: Update downloaded')
133 | broadcast('au:update-downloaded', info)
134 | })
135 |
136 | // ACTIONS
137 | // NOTE: I really don't like having all of these actions stuck in this scope.
138 | // Would be nice to move this to a separate file eventually. -ungoldman
139 |
140 | // Emit things to all windows
141 | function broadcast (/* args */) {
142 | const args = [].slice.call(arguments, 0)
143 | windows.forEach((winObj) => {
144 | if (winObj.win) winObj.win.send.apply(winObj.win, args)
145 | })
146 | }
147 |
148 | function volume (ev, level) {
149 | // player -> audio
150 | state.volume = level
151 | if (audio.win) audio.win.send('volume', level)
152 | }
153 |
154 | function queue (ev, newIndex) {
155 | const newTrack = al.queue(newIndex)
156 | broadcast('log', newTrack)
157 | log.info(newTrack)
158 | broadcast('new-track', newTrack)
159 | if (player.win) {
160 | player.win.send('new-index', al.index)
161 | player.win.send('is-new-query', al.isNewQuery)
162 | }
163 | if (state.playing) { broadcast('play') }
164 | updateArtwork()
165 | }
166 |
167 | function updateArtwork () {
168 | if (!get(al, 'currentTrack.artwork')) {
169 | artwork.cache.getPath(al.currentKey, handleGetPath)
170 | }
171 | }
172 |
173 | function handleGetPath (err, blobPath) {
174 | if (err) return broadcast('log', err)
175 | if (err) return log.error(err)
176 | al.currentTrack.artwork = blobPath
177 | if (player.win) {
178 | player.win.send('new-track', al.currentTrack)
179 | player.win.send('new-index', al.index)
180 | }
181 | if (audio.win) {
182 | audio.win.send('new-artwork', al.currentTrack)
183 | }
184 | }
185 |
186 | function play () {
187 | state.playing = true
188 | broadcast('play')
189 | }
190 |
191 | function playing () {
192 | state.playing = true
193 | broadcast('playing')
194 | }
195 |
196 | function pause () {
197 | state.playing = false
198 | broadcast('pause')
199 | }
200 |
201 | function paused () {
202 | state.playing = false
203 | broadcast('paused')
204 | }
205 |
206 | // function playPause () {
207 | // state.playing ? pause() : play()
208 | // }
209 |
210 | function prev () {
211 | broadcast('new-track', al.prev())
212 | if (player.win) player.win.send('new-index', al.index)
213 | if (state.playing) { broadcast('play') }
214 | updateArtwork()
215 | }
216 |
217 | function next () {
218 | broadcast('new-track', al.next())
219 | if (player.win) player.win.send('new-index', al.index)
220 | if (state.playing) { broadcast('play') }
221 | updateArtwork()
222 | }
223 |
224 | function mute (ev) {
225 | state.muted = true
226 | broadcast('mute')
227 | }
228 |
229 | function unmute (ev) {
230 | state.muted = false
231 | broadcast('unmute')
232 | }
233 |
234 | function timeupdate (ev, currentTime) {
235 | // audio -> player
236 | state.currentTime = currentTime
237 | if (player.win) player.win.send('timeupdate', currentTime)
238 | }
239 |
240 | function shuffle (ev) {
241 | al.shuffle()
242 | if (player.win) player.win.send('shuffle')
243 | }
244 |
245 | function unshuffle (ev) {
246 | al.unshuffle()
247 | if (player.win) player.win.send('unshuffle')
248 | }
249 |
250 | function seek (ev, newTime) {
251 | // player -> audio
252 | state.currentTime = newTime
253 | if (audio.win) audio.win.send('seek', newTime)
254 | }
255 |
256 | function handleNewTracks (err, newTrackDict) {
257 | state.loading = false
258 | broadcast('loading', false)
259 | if (err) return broadcast('log', err)
260 | if (err) return log.warn(err)
261 | const newState = al.load(newTrackDict)
262 | if (player.win) player.win.send('track-dict', newState.trackDict, newState.order, state.paths)
263 | console.timeEnd('update-library')
264 | broadcast('log', 'Done scanning. Found ' + Object.keys(newState.trackDict).length + ' tracks.')
265 | log.info('Done scanning. Found ' + Object.keys(newState.trackDict).length + ' tracks.')
266 | }
267 |
268 | function updateLibrary (ev, paths) {
269 | if (state.loading) state.loading.destroy()
270 | broadcast('log', 'Updating library with new path(s): ' + paths)
271 | console.time('update-library')
272 | state.paths = paths
273 | state.loading = makeTrackDict(paths, handleNewTracks)
274 | broadcast('loading', true)
275 | }
276 |
277 | function search (ev, searchString) {
278 | if (player.win) {
279 | player.win.send('track-order', al.search(searchString))
280 | player.win.send('is-new-query', al.isNewQuery)
281 | }
282 | }
283 |
284 | function recall () {
285 | if (player.win) player.win.send('recall', al.recall(), al.searchTerm)
286 | }
287 |
288 | function syncState (event) {
289 | event.sender.send('sync-state', {
290 | trackDict: al.trackDict,
291 | order: al.order,
292 | paths: state.paths
293 | })
294 | }
295 | })
296 |
297 | app.on('activate', function activate () {
298 | if (player.win === null) {
299 | al.recall()
300 | player.init()
301 | }
302 | })
303 |
304 | app.on('will-quit', function (e) {
305 | // nothing
306 | })
307 |
308 | app.on('before-quit', function beforeQuit (e) {
309 | if (app.isQuitting) return
310 |
311 | app.isQuitting = true
312 | e.preventDefault()
313 | setTimeout(function () {
314 | console.log('Saving state took too long. Quitting.')
315 | app.quit()
316 | }, 20000) // quit after 5 secs, at most
317 | persist.set({
318 | volume: state.volume
319 | })
320 |
321 | libraryPersist.set(al.persist())
322 | app.quit()
323 | })
324 |
--------------------------------------------------------------------------------
/main/lib/artwork-cache/README.md:
--------------------------------------------------------------------------------
1 | # ArtworkCache
2 |
3 |
--------------------------------------------------------------------------------
/main/lib/artwork-cache/index.js:
--------------------------------------------------------------------------------
1 | // var electron = require('electron')
2 | const path = require('path')
3 | // var mkdirp = require('mkdirp')
4 | const pump = require('pump')
5 | const crypto = require('crypto')
6 | const { artwork } = require('./util')
7 | const BufferList = require('bl')
8 | const fs = require('fs')
9 |
10 | // var configPath = (electron.app || electron.remote.app).getPath('userData')
11 | // var artworkCachePath = path.join(configPath, 'artwork-cache')
12 | //
13 | // mkdirp.sync(artworkCachePath)
14 | const blobs = require('content-addressable-blob-store')
15 |
16 | class ArtworkCache {
17 | // TODO refeactor callback hexell
18 | constructor (dir) {
19 | this._directory = dir || path.join(process.cwd(), 'artwork-cache')
20 | fs.mkdirSync(this._directory, { recursive: true })
21 | this._algo = 'sha256'
22 | // this._db = level(path.join(this._directory, 'cache-db'))
23 | this._blobs = blobs({
24 | path: path.join(this._directory, 'blobs'),
25 | algo: 'sha256'
26 | })
27 | }
28 |
29 | getPath (filePath, cb) {
30 | const self = this
31 | artwork(filePath, function (err, buff) {
32 | if (err) return cb(err)
33 | if (buff === null) return cb(null, null)
34 | const digest = crypto.createHash(self._algo).update(buff).digest('hex')
35 | self._blobs.resolve(digest, function (err, blobPath) {
36 | if (err) return cb(err)
37 | if (blobPath) {
38 | return cb(null, blobPath)
39 | } else {
40 | const writeStream = self._blobs.createWriteStream()
41 | pump((new BufferList()).append(buff), writeStream, function (err) {
42 | if (err) return cb(err)
43 | return self._blobs.resolve(writeStream.key, cb)
44 | })
45 | }
46 | })
47 | })
48 | }
49 | }
50 |
51 | module.exports = ArtworkCache
52 |
--------------------------------------------------------------------------------
/main/lib/artwork-cache/test-data/index.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | exports.mp3WithArtwork = path.join(__dirname, 'needle.mp3')
3 | exports.mp3WithoutArtowork = path.join(__dirname, 'loop.mp3')
4 |
--------------------------------------------------------------------------------
/main/lib/artwork-cache/test-data/loop.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/main/lib/artwork-cache/test-data/loop.mp3
--------------------------------------------------------------------------------
/main/lib/artwork-cache/test-data/needle.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/main/lib/artwork-cache/test-data/needle.mp3
--------------------------------------------------------------------------------
/main/lib/artwork-cache/test.js:
--------------------------------------------------------------------------------
1 | const test = require('tape')
2 | const { artwork } = require('./util')
3 | const path = require('path')
4 | const concatStream = require('concat-stream')
5 | const isBuffer = require('is-buffer')
6 | const pump = require('pump')
7 | const bufferEqual = require('buffer-equal')
8 | const tmp = require('p-temporary-directory/cb')
9 | const ArtworkCache = require('./index.js')
10 | const testData = require('./test-data')
11 | const BufferList = require('bl')
12 |
13 | test('get artwork from file', function (t) {
14 | artwork(testData.mp3WithArtwork, function (err, imageBuf) {
15 | t.error(err, 'got artwork buffer')
16 | t.true(isBuffer(imageBuf), 'can get arwork from mp3s')
17 | t.end()
18 | })
19 | })
20 |
21 | test('can stream buffers', function (t) {
22 | artwork(testData.mp3WithArtwork, bufferTests)
23 |
24 | function bufferTests (err, imageBuf) {
25 | t.error(err, 'got artwork buffer')
26 | const imageBufferStream = new BufferList()
27 | imageBufferStream.append(imageBuf)
28 | const concat = concatStream(gotPic)
29 | let streamedBuff
30 |
31 | function gotPic (buf) {
32 | streamedBuff = buf
33 | }
34 |
35 | function streamEnded (err) {
36 | t.error(err, 'stream ended without error')
37 | t.true(bufferEqual(imageBuf, streamedBuff), 'buffers are the same after streaming')
38 | t.end()
39 | }
40 |
41 | pump(imageBufferStream, concat, streamEnded)
42 | }
43 | })
44 |
45 | test('artwork cache for existing file', function (t) {
46 | tmp(created)
47 |
48 | function created (err, dir, cleanup) {
49 | t.error(err, 'created temp dir')
50 | const cache = new ArtworkCache(path.join(dir))
51 | cache.getPath(testData.mp3WithArtwork, handlePath)
52 |
53 | function handlePath (err, blobPath) {
54 | t.error(err, 'got path without error')
55 | t.equal(typeof blobPath, 'string', 'got a path back')
56 |
57 | cache.getPath(testData.mp3WithArtwork, handlePathAgain)
58 | }
59 |
60 | function handlePathAgain (err, blobPath) {
61 | t.error(err, 'got path without error')
62 | t.equal(typeof blobPath, 'string', 'got same path back')
63 | cleanup(cleanedUp)
64 | }
65 | }
66 |
67 | function cleanedUp (err) {
68 | t.error(err, 'cleaned up')
69 | t.end()
70 | }
71 | })
72 |
73 | test('artwork cache for missing file', function (t) {
74 | tmp(created)
75 |
76 | function created (err, dir, cleanup) {
77 | t.error(err, 'created temp dir')
78 | const cache = new ArtworkCache(path.join(dir))
79 | cache.getPath(path.join(__dirname, 'foo'), handlePath)
80 |
81 | function handlePath (err, blobPath) {
82 | t.equal(err.code, 'ENOENT', 'errors propgated up from the bottom')
83 | cache.getPath(path.join(__dirname, 'foo'), handlePathAgain)
84 | }
85 |
86 | function handlePathAgain (err, blobPath) {
87 | t.equal(err.code, 'ENOENT', 'errors propgated up from the bottom')
88 | cleanup(cleanedUp)
89 | }
90 | }
91 |
92 | function cleanedUp (err) {
93 | t.error(err, 'cleaned up')
94 | t.end()
95 | }
96 | })
97 |
98 | test('artwork cache for existing file without art', function (t) {
99 | tmp(created)
100 |
101 | function created (err, dir, cleanup) {
102 | t.error(err, 'created temp dir')
103 | const cache = new ArtworkCache(path.join(dir))
104 | cache.getPath(testData.mp3WithoutArtowork, handlePath)
105 |
106 | function handlePath (err, blobPath) {
107 | t.error(err, 'no error')
108 | t.equal(blobPath, null, 'blob path is null when it doesnt exist')
109 | cache.getPath(testData.mp3WithoutArtowork, handlePathAgain)
110 | }
111 |
112 | function handlePathAgain (err, blobPath) {
113 | t.error(err, 'no error')
114 | t.equal(blobPath, null, 'blob path is null when it doesnt exist from cache!')
115 | cleanup(cleanedUp)
116 | }
117 | }
118 |
119 | function cleanedUp (err) {
120 | t.error(err, 'cleaned up')
121 | t.end()
122 | }
123 | })
124 |
--------------------------------------------------------------------------------
/main/lib/artwork-cache/util.js:
--------------------------------------------------------------------------------
1 | const mm = require('music-metadata')
2 | const get = require('lodash.get')
3 | const fs = require('fs')
4 |
5 | function metadata (path, cb) {
6 | fs.stat(path, function (err, stats) {
7 | if (err) return cb(err)
8 | mm.parseFile(path, {
9 | native: true,
10 | duration: true,
11 | skipCovers: false
12 | }).then(function (md) {
13 | return cb(null, md)
14 | }).catch(function (err) {
15 | return cb(err)
16 | })
17 | })
18 | }
19 |
20 | exports.artwork = artwork
21 |
22 | function artwork (path, cb) {
23 | metadata(path, lookupArtwork)
24 |
25 | function lookupArtwork (err, meta) {
26 | if (err) return cb(err)
27 | const artBuff = get(meta, 'common.picture[0].data')
28 | if (!artBuff) return cb(null, null)
29 | return cb(null, artBuff)
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/main/lib/audio-library/README.md:
--------------------------------------------------------------------------------
1 | # AudioLibrary
2 |
3 | A class to manage playback state
4 |
5 | ## API
6 | ### `al = new AudioLibrary([state])`
7 | Create a new `AuditLibrary` instance. Optionally pass a state object with the following values:
8 |
9 | ```js
10 | {
11 | trackDict: {}, // Dictionary of track objects
12 | order: [], // Array of track object keys defining order of display and playback
13 | index: 0, // Index of currently queued track
14 | shuffleOrder: null, // array of index's pointing to keys in the order array
15 | shuffleIndex: 0, // index of shuffleOrder index of order
16 | searchTerm: '' // search term used to generate current order array
17 | }
18 | ```
19 |
20 | ### `al.isNewQuery`
21 | Getter that returns true if `al` is in a search state.
22 |
23 | ### `al.shuffling`
24 | Getter that returns true if `al` is shuffling playback order.
25 |
26 | ### `al.currentKey`
27 | Getter that returns the key of the currently keyed track.
28 |
29 | ### `al.currentTrack`
30 | Getter that returns the currently queued track object.
31 |
32 | ### `al.visibleOrder`
33 | Getter that returns the correct `order` array to display regardless of query state.
34 |
35 | ### `queuedTrack = al.queue(index)`
36 | Queue the track at `index` in the `visibleOrder` array. If `al` is in a query state, the active query will become the primary order and the query state will be cleared. Returns the track object at `index`.
37 |
38 | ### `nextTrack = al.next()`
39 | Advance playback to correct next track, depending on shuffle state. Does not affect query state and returns the next track in the currently playing `order`.
40 |
41 | ### `prevTrack = al.prev()`
42 | Advance playback to correct previous track, depending on shuffle state. Does not affect query state and returns the previous track in the currently playing `order`.
43 |
44 | ### `al.shuffle()`
45 | Put `al` into shuffle mode. If `al` is already shuffling, the shuffle order will be reshuffled.
46 |
47 | ### `al.unshuffle()`
48 | Resume unshuffle order from the current `index`.
49 |
50 | ### `queryOrder = al.search(term)`
51 | Perform a search on the currently loaded `trackDict`. Puts `al` into query mode (`al.isNewQuery === true`). In query mode `al.visibleOrder` returns the `al.query.order` so that the interface performing the search can preview the results of the search. If `al.queue(index)` is called in query mode, `al.query.order` is assigned to `al.order` and the query is cleared and the query order becomes the play order.
52 |
53 | ### `playOrder = al.recall()`
54 | If in query mode, calling `al.recall()` will clear the query and `al.visibleOrder` returns `al.order`.
55 |
56 |
57 | ### `{trackDict, order} = al.update(newTrackDict)`
58 | Load a new `trackDict`. Returns the minimal state nessisary to display the updated library.
59 |
--------------------------------------------------------------------------------
/main/lib/audio-library/filter.js:
--------------------------------------------------------------------------------
1 | function filter (term, [key, track]) {
2 | const { title, album, artist, genre } = track
3 | const artistStr = Array.isArray(artist) ? artist.join('') : artist
4 | const genreStr = Array.isArray(genre) ? genre.join('') : genre
5 | const trackStr = (title + album + artistStr + genreStr).toLowerCase().replace(/\s+/g, '')
6 |
7 | return trackStr.includes(term.toLowerCase().replace(/\s+/g, ''))
8 | }
9 |
10 | module.exports = filter
11 |
--------------------------------------------------------------------------------
/main/lib/audio-library/index.js:
--------------------------------------------------------------------------------
1 | const Nanobus = require('nanobus')
2 | const shuffleArray = require('fy-shuffle')
3 | const filter = require('./filter')
4 | const sort = require('./sort')
5 |
6 | class AudioLibrary extends Nanobus {
7 | constructor (state) {
8 | super('AudioLibrary')
9 |
10 | state = Object.assign({
11 | trackDict: {},
12 | order: [],
13 | shuffleOrder: null,
14 | index: 0,
15 | shuffleIndex: 0,
16 | searchTerm: ''
17 | }, state)
18 |
19 | this.trackDict = state.trackDict
20 | this.order = state.order.length
21 | ? state.order
22 | : this._search(state.search)
23 | this.shuffleOrder = Array.isArray(state.shuffleOrder)
24 | ? state.shuffleOrder
25 | : null
26 | this.shuffleIndex = state.shuffleIndex
27 | this.index = state.index
28 | this.searchTerm = state.searchTerm
29 |
30 | this.query = null // Set to object so we can clear easily
31 | }
32 |
33 | persist () {
34 | return {
35 | trackDict: this.trackDict,
36 | order: this.order,
37 | index: this.index,
38 | shuffleOrder: this.shuffleOrder,
39 | shuffleIndex: this.shuffleIndex,
40 | searchTerm: this.searchTerm
41 | }
42 | }
43 |
44 | get isNewQuery () {
45 | return !!this.query
46 | }
47 |
48 | get shuffling () {
49 | return Array.isArray(this.shuffleOrder)
50 | }
51 |
52 | get currentKey () {
53 | return this.order[this.index]
54 | }
55 |
56 | get currentTrack () {
57 | return this.trackDict[this.currentKey]
58 | }
59 |
60 | get visibleOrder () {
61 | if (this.isNewQuery) return this.query.order
62 | else return this.order
63 | }
64 |
65 | queue (index) {
66 | this.index = index
67 |
68 | if (this.isNewQuery) {
69 | this.order = this.query.order.slice()
70 | this.searchTerm = this.query.searchTerm
71 | this.recall()
72 | }
73 |
74 | if (this.shuffling) this.shuffle()
75 |
76 | return this.currentTrack
77 | }
78 |
79 | _nextShuffle () {
80 | const newShuffleIndex = this.shuffleIndex < this.shuffleOrder.length - 1 ? this.shuffleIndex + 1 : 0
81 | this.index = this.shuffleOrder[newShuffleIndex]
82 | this.shuffleIndex = newShuffleIndex
83 | return this.currentTrack
84 | }
85 |
86 | _next () {
87 | const newIndex = this.index < this.order.length - 1 ? this.index + 1 : 0
88 | this.index = newIndex
89 | return this.currentTrack
90 | }
91 |
92 | next () { // set and return the next track 🔁
93 | return this.shuffling ? this._nextShuffle() : this._next()
94 | }
95 |
96 | _prevShuffle () {
97 | this.shuffleIndex = this.shuffleIndex > 0 ? this.shuffleIndex - 1 : this.shuffleOrder.length - 1
98 | this.index = this.shuffleOrder[this.shuffleIndex]
99 | return this.currentTrack
100 | }
101 |
102 | _prev () {
103 | this.index = this.index > 0 ? this.index - 1 : this.order.length - 1
104 | return this.currentTrack
105 | }
106 |
107 | prev () { // set and return the prev track 🔁
108 | return this.shuffling ? this._prevShuffle() : this._prev()
109 | }
110 |
111 | shuffle () {
112 | this.shuffleOrder = shuffleArray(Object.keys(this.order).map(Number))
113 | this.shuffleIndex = this.shuffleOrder.indexOf(this.index)
114 | }
115 |
116 | unshuffle () {
117 | this.shuffleOrder = null
118 | this.shuffleIndex = 0
119 | }
120 |
121 | _search (term) {
122 | return term
123 | ? Object.entries(this.trackDict).filter(filter.bind(null, term)).sort(sort).map(keys)
124 | : Object.entries(this.trackDict).sort(sort).map(keys)
125 | }
126 |
127 | search (term) {
128 | this.query = {
129 | searchTerm: term,
130 | order: this._search(term)
131 | }
132 | return this.query.order
133 | }
134 |
135 | recall () { // reset any outstanding queries and show current play order
136 | this.query = null
137 | return this.order
138 | }
139 |
140 | load (newTrackDict) {
141 | this.trackDict = newTrackDict
142 | this.search('')
143 | this.queue(-1)
144 | return {
145 | trackDict: this.trackDict,
146 | order: this.order
147 | }
148 | }
149 | }
150 |
151 | function keys (entry) {
152 | return entry[0]
153 | }
154 |
155 | module.exports = AudioLibrary
156 |
--------------------------------------------------------------------------------
/main/lib/audio-library/sort.js:
--------------------------------------------------------------------------------
1 | const existy = require('existy')
2 |
3 | function sort ([keyA, aObj], [keyB, bObj]) {
4 | // sort by albumartist
5 | // if (aObj.albumartist[0] < bObj.albumartist[0]) return -1
6 | // if (aObj.albumartist[0] > bObj.albumartist[0]) return 1
7 |
8 | // send tracks with no artist to bottom
9 | if (isEmpty(aObj.artist) && !isEmpty(bObj.artist)) return 1
10 | if (!isEmpty(aObj.artist) && isEmpty(bObj.artist)) return -1
11 |
12 | // sort by artist
13 | if (aObj.artist < bObj.artist) return -1
14 | if (aObj.artist > bObj.artist) return 1
15 |
16 | // then by album
17 | if (aObj.album < bObj.album) return -1
18 | if (aObj.album > bObj.album) return 1
19 |
20 | // then by disc no
21 | const aHasDisk = existy(aObj.disk)
22 | const bHasDisk = existy(bObj.disk)
23 |
24 | if (aHasDisk && bHasDisk) {
25 | if (aObj.disk.no < bObj.disk.no) return -1
26 | if (aObj.disk.no > bObj.disk.no) return 1
27 | }
28 |
29 | // then by track no
30 | const aHasTrack = existy(aObj.track)
31 | const bHasTrack = existy(bObj.track)
32 |
33 | if (aHasTrack && bHasTrack) {
34 | if (aObj.track.no < bObj.track.no) return -1
35 | if (aObj.track.no > bObj.track.no) return 1
36 | }
37 |
38 | // then by title
39 | if (aObj.title < bObj.title) return -1
40 | if (aObj.title > bObj.title) return 1
41 |
42 | // then by filepath
43 | if (aObj.filepath < bObj.filepath) return -1
44 | if (aObj.filepath > bObj.filepath) return 1
45 |
46 | return 0
47 | }
48 |
49 | function isEmpty (val) {
50 | return !existy(val) || val === ''
51 | }
52 |
53 | module.exports = sort
54 |
--------------------------------------------------------------------------------
/main/lib/audio-library/test.js:
--------------------------------------------------------------------------------
1 | const test = require('tape')
2 | const AudioLibrary = require('./index')
3 | const libraryA = require('./test-data/library-a.json')
4 | const libraryB = require('./test-data/library-b.json')
5 |
6 | test('instantiate, next, prev AudioLibrary', function (t) {
7 | const al = new AudioLibrary(libraryA)
8 |
9 | t.ok(al, 'AudioLibrary can instantiate with library object')
10 | t.equal(al.index, libraryA.index, 'index is instantiated from state correctly')
11 |
12 | t.equal(al.currentKey, libraryA.order[libraryA.index], 'current index is set correctly')
13 |
14 | t.deepEqual(al.visibleOrder, libraryA.order, 'visible order returns the correct order')
15 |
16 | t.ok(al.next(), 'can advance to the next track')
17 | t.ok(al.next(), 'can advance to the next track again')
18 | t.ok(al.next(), 'can advance to the next track one more time')
19 |
20 | t.equal(al.index, libraryA.index + 3, 'index is advanced by 3')
21 | t.deepEqual(al.currentTrack, libraryA.trackDict[libraryA.order[libraryA.index + 3]], 'we get the currentTrack')
22 |
23 | t.ok(al.prev(), 'can advance in reverse to the previous track')
24 | t.ok(al.prev(), 'can advance in reverse to the previous track again')
25 | t.ok(al.prev(), 'can advance in reverse to the previous track one more time')
26 |
27 | t.equal(al.index, libraryA.index, 'index reduced by 3')
28 | t.deepEqual(al.currentTrack, libraryA.trackDict[libraryA.order[libraryA.index]], 'we get the currentTrack')
29 |
30 | t.end()
31 | })
32 |
33 | function getRandomInt (min, max) {
34 | min = Math.ceil(min)
35 | max = Math.floor(max)
36 | return Math.floor(Math.random() * (max - min)) + min // The maximum is exclusive and the minimum is inclusive
37 | }
38 |
39 | test('instantiate and queue', { timeout: 500 }, function (t) {
40 | const al = new AudioLibrary(libraryA)
41 |
42 | t.plan(2)
43 |
44 | const newIndex = getRandomInt(0, libraryA.length - 1)
45 |
46 | al.queue(newIndex)
47 | t.deepEqual(al.currentTrack, libraryA.trackDict[libraryA.order[newIndex]], 'can queue a track when not searching or sorting')
48 | t.deepEqual(al.visibleOrder, al.order, 'visible order is showing the correct order')
49 | })
50 |
51 | test('visibleOrder and search', { timeout: 500 }, function (t) {
52 | const al = new AudioLibrary(libraryA)
53 | t.deepEqual(al.visibleOrder, al.order, 'visible order is showing the intial order')
54 | t.equal(al.query, null, 'query is null')
55 | t.equal(al.isNewQuery, false, 'not in a new query state')
56 |
57 | const expectedResults = ['/Users/bret/Resilio Sync/Music/BLVCK CEILING/meridian/08 25 cobainen.mp3']
58 | console.log('search for 25 cobainen')
59 | const results = al.search('25 cobainen')
60 |
61 | t.deepEqual(results, expectedResults, 'search returns a new order with results')
62 | t.deepEqual(al.query.order, expectedResults, 'there is a new order')
63 | t.equal(al.isNewQuery, true, 'we are in a new query state')
64 | t.deepEqual(al.visibleOrder, al.query.order, 'visible order is showing the new order')
65 |
66 | console.log('next()')
67 | al.next()
68 | t.deepEqual(
69 | al.currentTrack,
70 | libraryA.trackDict[libraryA.order[libraryA.index + 1]],
71 | ' we can still advance and get the next track of whatever is currently playing'
72 | )
73 | t.deepEqual(al.visibleOrder, al.query.order, 'we are still seeing our new query')
74 |
75 | console.log('recall()')
76 | al.recall()
77 |
78 | t.equal(al.query, null, 'new order cleared')
79 | t.equal(al.isNewQuery, false, 'no longer in a new query')
80 |
81 | console.log('search and queue')
82 | al.search('25 cobainen')
83 | al.queue(0)
84 |
85 | t.deepEqual(
86 | al.currentTrack,
87 | libraryA.trackDict[expectedResults[0]],
88 | 'queuing something from our query saves to order and clears new order'
89 | )
90 |
91 | t.deepEqual(al.visibleOrder, al.order, 'visible order is showing play order')
92 | t.equal(al.query, null, 'new order cleared')
93 | t.equal(al.isNewQuery, false, 'no longer in a new query')
94 |
95 | console.log('next()')
96 | al.next()
97 |
98 | t.deepEqual(
99 | al.currentTrack,
100 | libraryA.trackDict[expectedResults[0]],
101 | 'only one result so 🔂'
102 | )
103 |
104 | console.log('search(\'\') and queue()')
105 | al.search('') // clear search
106 | al.queue(0) // play from the full library
107 |
108 | t.equal(al.query, null, 'new order cleared')
109 | t.equal(al.isNewQuery, false, 'no longer in a new query')
110 |
111 | t.equal(al.visibleOrder.length, libraryA.order.length, 'visible order returns the correct order')
112 |
113 | t.end()
114 | })
115 |
116 | test('truffle shuffle', function (t) {
117 | const al = new AudioLibrary(libraryA)
118 |
119 | console.log('shuffle()')
120 | al.shuffle()
121 | const initialShuffleIndex = al.shuffleIndex
122 | console.log('next()')
123 | console.log('next()')
124 | al.next()
125 | al.next()
126 |
127 | t.equal(al.shuffleIndex, initialShuffleIndex + 2, 'shuffle index advances')
128 | t.deepEqual(al.currentTrack, al.trackDict[al.order[al.shuffleOrder[al.shuffleIndex]]], 'adancing returns the correct next track')
129 |
130 | console.log('prev()')
131 | al.prev()
132 |
133 | t.equal(al.shuffleIndex, initialShuffleIndex + 1, 'go back in shuffle order')
134 | t.deepEqual(al.currentTrack, al.trackDict[al.order[al.shuffleOrder[al.shuffleIndex]]], 'prev returns the previous track')
135 | const preUnshuffleIndex = al.index
136 |
137 | console.log('unshuffle()')
138 | al.unshuffle()
139 | t.equal(al.index, preUnshuffleIndex, 'index stays the same')
140 | t.equal(al.shuffling, false, 'not shuffling any more')
141 | t.equal(al.shuffleOrder, null, 'clear shuffle order')
142 | console.log('next()')
143 | al.next()
144 | t.equal(al.index, preUnshuffleIndex + 1, 'advances in the next direction')
145 | t.end()
146 | })
147 |
148 | test('just a track dict', function (t) {
149 | console.log('create a AL with just a trackDict')
150 | const al = new AudioLibrary(libraryB)
151 | t.equal(al.index, 0, 'index === 0')
152 | t.deepEqual(al.visibleOrder, al.order, 'visible order returns the play order')
153 | t.equal(al.shuffling, false, 'not shuffling')
154 |
155 | console.log('go forward and back')
156 | t.ok(al.prev())
157 | t.ok(al.prev())
158 | t.ok(al.next())
159 | t.ok(al.next())
160 | t.ok(al.next())
161 |
162 | t.equal(al.index, 1, 'index === 1')
163 |
164 | al.shuffle()
165 | t.ok(al.next())
166 |
167 | t.end()
168 | })
169 |
170 | test('no state zone!', function (t) {
171 | console.log('create a AL with no state provided')
172 | const al = new AudioLibrary()
173 |
174 | t.deepEqual(al.trackDict, {}, 'trackDict === {}')
175 | t.deepEqual(al.order, [], 'order === []')
176 | t.equal(al.index, 0, 'index === 0')
177 | t.equal(al.shuffleOrder, null, 'shuffleOrder === null')
178 | t.equal(al.shuffleIndex, 0, 'shuffleIndex === 0')
179 | t.equal(al.searchTerm, '', 'searchTerm === \'\'')
180 | t.equal(al.query, null, 'query === null')
181 |
182 | t.equal(al.isNewQuery, false, 'isNewQuery === false')
183 | t.equal(al.shuffling, false, 'shuffling === false')
184 | t.equal(al.currentKey, undefined, 'currentKey === undefined')
185 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
186 | t.deepEqual(al.visibleOrder, al.order, 'visibleOrder -> order')
187 |
188 | console.log('next')
189 | al.next()
190 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
191 | t.equal(al.index, 0, 'index === 0')
192 | console.log('prev')
193 | al.prev()
194 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
195 | t.equal(al.index, -1, 'index === -1')
196 | console.log('next')
197 | al.next()
198 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
199 | t.equal(al.index, 0, 'index === 0')
200 | console.log('queue 100')
201 | al.queue(100)
202 |
203 | t.equal(al.isNewQuery, false, 'isNewQuery === false')
204 | t.equal(al.shuffling, false, 'shuffling === false')
205 | t.equal(al.currentKey, undefined, 'currentKey === undefined')
206 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
207 | t.deepEqual(al.visibleOrder, al.order, 'visibleOrder -> order')
208 |
209 | console.log('next')
210 | al.next()
211 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
212 | t.equal(al.index, 0, 'index === 0')
213 |
214 | console.log('search derp and queue 50')
215 | al.search('derp')
216 | t.deepEqual(al.query, { searchTerm: 'derp', order: [] }, 'query === { searchTerm: \'derp\', order: [] }')
217 | al.queue(50)
218 |
219 | t.equal(al.isNewQuery, false, 'isNewQuery === false')
220 | t.equal(al.shuffling, false, 'shuffling === false')
221 | t.equal(al.currentKey, undefined, 'currentKey === undefined')
222 | t.equal(al.currentTrack, undefined, 'currentTrack === undefined')
223 | t.deepEqual(al.visibleOrder, al.order, 'visibleOrder -> order')
224 |
225 | t.end()
226 | })
227 |
228 | test('load more state', function (t) {
229 | const al = new AudioLibrary()
230 |
231 | al.load(libraryA.trackDict)
232 |
233 | t.deepEqual(al.trackDict, libraryA.trackDict)
234 |
235 | t.end()
236 | })
237 |
--------------------------------------------------------------------------------
/main/menu.js:
--------------------------------------------------------------------------------
1 | const { app, shell, Menu } = require('electron')
2 | const defaultMenu = require('electron-default-menu')
3 | const audio = require('./windows/audio')
4 | const player = require('./windows/player')
5 | const pkg = require('../package.json')
6 |
7 | module.exports = {
8 | init
9 | }
10 |
11 | function getSubmenu (menus, label) {
12 | return menus.reduce(function (accum, menu) {
13 | if (menu.label === label) return menu
14 | else return accum
15 | }, null).submenu
16 | }
17 |
18 | const menuTemplate = defaultMenu(app, shell)
19 | const viewMenu = getSubmenu(menuTemplate, 'View')
20 | const helpMenu = getSubmenu(menuTemplate, 'Help')
21 |
22 | viewMenu.splice(1, 0, {
23 | label: 'Hard Reload (Clear Cache)',
24 | accelerator: 'CmdOrCtrl+Shift+R',
25 | click (item, focusedWindow) {
26 | if (focusedWindow) focusedWindow.webContents.reloadIgnoringCache()
27 | }
28 | })
29 |
30 | viewMenu.push({
31 | label: 'Show Audio Process',
32 | accelerator: process.platform === 'darwin'
33 | ? 'Alt+Command+P'
34 | : 'Ctrl+Shift+P',
35 | click: () => audio.toggleDevTools()
36 | })
37 |
38 | viewMenu.push({
39 | label: 'Always On Top',
40 | type: 'checkbox',
41 | click: () => player.toggleAlwaysOnTop()
42 | })
43 |
44 | helpMenu[0] = {
45 | label: 'Learn More',
46 | click () { shell.openExternal(pkg.homepage) }
47 | }
48 |
49 | helpMenu[1] = {
50 | label: 'Report an Issue',
51 | click () { shell.openExternal(pkg.bugs.url) }
52 | }
53 |
54 | function init () {
55 | const menu = Menu.buildFromTemplate(menuTemplate)
56 | Menu.setApplicationMenu(menu)
57 | }
58 |
--------------------------------------------------------------------------------
/main/track-dict.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const walker = require('folder-walker')
3 | const mm = require('music-metadata')
4 | const writer = require('flush-write-stream')
5 | const filter = require('through2-filter')
6 | const pump = require('pump')
7 | const log = require('electron-log')
8 | const validExtensions = ['m4a', 'mp3', 'ogg', 'flac']
9 |
10 | module.exports = makeTrackDict
11 |
12 | const FileFilter = filter.objCtor(isValidFile)
13 |
14 | function makeTrackDict (paths, cb) {
15 | const newTrackDict = {}
16 | const dest = concatTrackDict(newTrackDict)
17 | pump(walker(paths), FileFilter(), dest, handleEos)
18 | // Return dest so we can destroy it
19 | return dest
20 |
21 | function handleEos (err) {
22 | if (err) return cb(err)
23 | log.info('')
24 | cb(null, newTrackDict)
25 | }
26 | }
27 | function isValidFile (data, enc, cb) {
28 | if (data.type !== 'file') return false
29 | const ext = path.extname(data.basename).substring(1)
30 | return validExtensions.includes(ext)
31 | }
32 |
33 | function concatTrackDict (obj) {
34 | function writeTrackDict (data, enc, cb) {
35 | log.info(`Scanning ${data.filepath}`)
36 | parseMetadata(data, handleMeta)
37 |
38 | function handleMeta (err, meta) {
39 | if (err) throw err
40 | obj[meta.filepath] = meta
41 | cb(null)
42 | }
43 | }
44 | return writer.obj(writeTrackDict)
45 | }
46 |
47 | function parseMetadata (data, cb) {
48 | const { filepath } = data
49 | mm.parseFile(filepath, {
50 | duration: false,
51 | native: false,
52 | skipCovers: true
53 | }).then(meta => {
54 | let {
55 | albumartist,
56 | title,
57 | artist,
58 | album,
59 | year,
60 | track,
61 | disk,
62 | genre
63 | } = meta.common
64 |
65 | const { duration } = meta.format
66 | if (!title) {
67 | const { basename } = data
68 | const ext = path.extname(basename)
69 | title = path.basename(basename, ext)
70 | }
71 |
72 | return Promise.resolve({
73 | albumartist,
74 | title,
75 | artist,
76 | album,
77 | duration,
78 | filepath,
79 | year,
80 | track,
81 | disk,
82 | genre
83 | })
84 | }).catch(err => {
85 | // Ignore errors
86 | log.info(err.message += ` (file: ${filepath})`)
87 | const { basename } = data
88 | const ext = path.extname(basename)
89 | const title = path.basename(basename, ext)
90 | return Promise.resolve({ title, filepath })
91 | }).then(meta => {
92 | cb(null, meta)
93 | })
94 | }
95 |
--------------------------------------------------------------------------------
/main/windows/audio.js:
--------------------------------------------------------------------------------
1 | const { app, BrowserWindow } = require('electron')
2 | const path = require('path')
3 | const log = require('electron-log')
4 | const remoteMain = require('@electron/remote/main')
5 | const AUDIO_WINDOW = 'file://' + path.resolve(__dirname, '..', '..', 'renderer', 'audio', 'index.html')
6 | const audio = module.exports = {
7 | init,
8 | show,
9 | toggleDevTools,
10 | win: null
11 | }
12 |
13 | function init () {
14 | const win = audio.win = new BrowserWindow({
15 | title: 'hyperamp-hidden-window',
16 | backgroundColor: '#1E1E1E',
17 | center: true,
18 | fullscreen: false,
19 | fullscreenable: false,
20 | height: 100,
21 | maximizable: false,
22 | minimizable: false,
23 | resizable: false,
24 | show: false,
25 | skipTaskbar: true,
26 | useContentSize: true,
27 | width: 200,
28 | webPreferences: {
29 | nodeIntegration: true,
30 | nodeIntegrationInWorker: true,
31 | webSecurity: true,
32 | contextIsolation: false,
33 | enableRemoteModule: true
34 | }
35 | })
36 |
37 | remoteMain.enable(win.webContents)
38 |
39 | win.loadURL(AUDIO_WINDOW)
40 |
41 | // prevent killing the audio process
42 | win.on('close', function (e) {
43 | if (app.isQuitting) return
44 | e.preventDefault()
45 | win.hide()
46 | })
47 | }
48 |
49 | function show () {
50 | if (!audio.win) return
51 | audio.win.show()
52 | }
53 |
54 | function toggleDevTools () {
55 | if (!audio.win) return
56 | log.info('[AUDIO] Toggling dev tools')
57 | if (audio.win.webContents.isDevToolsOpened()) {
58 | audio.win.webContents.closeDevTools()
59 | audio.win.hide()
60 | } else {
61 | audio.win.webContents.openDevTools({ detach: true })
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/main/windows/player.js:
--------------------------------------------------------------------------------
1 | const { BrowserWindow, app } = require('electron')
2 | const windowStateKeeper = require('electron-window-state')
3 | const path = require('path')
4 | const log = require('electron-log')
5 | const remoteMain = require('@electron/remote/main')
6 | const PLAYER_WINDOW = 'file://' + path.resolve(__dirname, '..', '..', 'renderer', 'player', 'index.html')
7 |
8 | const player = module.exports = {
9 | init,
10 | toggleAlwaysOnTop,
11 | win: null,
12 | windowState: null
13 | }
14 |
15 | let alwaysOnTop = false
16 |
17 | import('electron-debug').then(({ default: debug }) => {
18 | debug({ showDevTools: 'undocked' })
19 | }).catch(err => {
20 | console.error('Failed to load electron-debug:', err)
21 | })
22 |
23 | import('electron-context-menu').then(({ default: contextMenu }) => {
24 | contextMenu({
25 | showSaveImageAs: true
26 | })
27 | }).catch(err => {
28 | console.error('Failed to load electron-context-menu:', err)
29 | })
30 |
31 | function init () {
32 | player.windowState = windowStateKeeper({ width: 800, height: 600 })
33 | const win = player.win = new BrowserWindow({
34 | title: 'Hyper Amp',
35 | x: player.windowState.x,
36 | y: player.windowState.y,
37 | width: player.windowState.width,
38 | height: player.windowState.height,
39 | minWidth: 580,
40 | minHeight: 76,
41 | titleBarStyle: 'hiddenInset',
42 | useContentSize: true,
43 | show: false,
44 | backgroundColor: '#fff',
45 | thickFrame: true,
46 | alwaysOnTop,
47 | webPreferences: {
48 | nodeIntegration: true,
49 | nodeIntegrationInWorker: true,
50 | webSecurity: true,
51 | contextIsolation: false
52 | }
53 | })
54 |
55 | remoteMain.enable(win.webContents)
56 |
57 | player.windowState.manage(win)
58 |
59 | win.loadURL(PLAYER_WINDOW)
60 |
61 | win.once('ready-to-show', win.show)
62 |
63 | win.on('closed', () => {
64 | player.win = null
65 | })
66 |
67 | if (process.platform !== 'darwin') { // TODO System tray on windows (maybe linux)
68 | // since window-all-closed doesn't fire with our hidden audio process
69 | player.win.once('closed', () => {
70 | app.quit()
71 | })
72 | }
73 | }
74 |
75 | function toggleAlwaysOnTop () {
76 | if (!player.win) return
77 | log.info('[PLAYER] Toggling Always on Top')
78 | if (player.win.isAlwaysOnTop()) {
79 | alwaysOnTop = false
80 | player.win.setAlwaysOnTop(alwaysOnTop)
81 | } else {
82 | alwaysOnTop = true
83 | player.win.setAlwaysOnTop(alwaysOnTop)
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hyperamp",
3 | "description": "Indescribable music player",
4 | "version": "1.2.0",
5 | "author": "Hypermodules (https://github.com/hypermodules)",
6 | "browserify": {
7 | "transform": [
8 | "envify",
9 | "yo-yoify",
10 | "electron-renderify"
11 | ]
12 | },
13 | "bugs": {
14 | "url": "https://github.com/hypermodules/hyperamp/issues"
15 | },
16 | "build": {
17 | "appId": "com.hypermodules.hyperamp",
18 | "publish": {
19 | "provider": "github",
20 | "releaseType": "release"
21 | },
22 | "files": [
23 | "lib/",
24 | "main/",
25 | "node_modules/",
26 | "renderer/"
27 | ],
28 | "mac": {
29 | "category": "public.app-category.music",
30 | "appId": "com.hypermodules.hyperamp",
31 | "notarize": true,
32 | "hardenedRuntime": true,
33 | "target": [
34 | {
35 | "target": "default",
36 | "arch": [
37 | "universal"
38 | ]
39 | }
40 | ]
41 | },
42 | "linux": {
43 | "category": "Audio",
44 | "target": [
45 | {
46 | "target": "AppImage",
47 | "arch": [
48 | "x64",
49 | "armv7l",
50 | "arm64"
51 | ]
52 | }
53 | ]
54 | },
55 | "nsis": {
56 | "perMachine": true
57 | },
58 | "win": {
59 | "target": [
60 | {
61 | "target": "nsis",
62 | "arch": [
63 | "x64"
64 | ]
65 | }
66 | ]
67 | }
68 | },
69 | "contributors": [
70 | "Bret Comnes 🎵
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /renderer/audio/index.js: -------------------------------------------------------------------------------- 1 | const el = require('electron-log/renderer') 2 | el.info('Log from the autio process') 3 | const { ipcRenderer } = require('electron') 4 | const log = require('nanologger')('player') 5 | const AudioPlayer = require('./audio-player') 6 | const remote = require('@electron/remote') 7 | const path = require('path') 8 | // We don't need to sync-state since we just sync load state 9 | const mainState = remote.require('./index.js') 10 | const needle = 'file://' + path.resolve(__dirname, 'needle.mp3') 11 | let startupNode = document.querySelector('#needle') 12 | 13 | needleSound(startupNode, needle, mainState.volume, mainState.muted) 14 | 15 | const audioNode = document.querySelector('#audio') 16 | const player = window.player = new AudioPlayer(audioNode, mainState) 17 | 18 | player.on('*', function (event, data) { 19 | if (data === undefined) return log.info(event) 20 | log.info(event, data) 21 | }) 22 | 23 | player.on('ended', function () { 24 | ipcRenderer.send('next') 25 | }) 26 | 27 | player.on('timeupdate', function (time) { 28 | ipcRenderer.send('timeupdate', time) 29 | }) 30 | 31 | player.on('playing', function () { 32 | ipcRenderer.send('playing') 33 | }) 34 | 35 | player.on('paused', function () { 36 | ipcRenderer.send('paused') 37 | }) 38 | 39 | player.on('next', function () { 40 | ipcRenderer.send('next') 41 | }) 42 | 43 | player.on('prev', function () { 44 | ipcRenderer.send('prev') 45 | }) 46 | 47 | ipcRenderer.on('new-track', function (ev, track = {}) { 48 | player.load(track) 49 | }) 50 | 51 | ipcRenderer.on('new-artwork', (ev, track = {}) => { 52 | player._updateArtwork(track) 53 | }) 54 | 55 | ipcRenderer.on('play', function (ev, data) { 56 | player.play() 57 | }) 58 | 59 | ipcRenderer.once('play', function (ev, data) { 60 | startupNode.remove() 61 | startupNode = null 62 | }) 63 | 64 | ipcRenderer.on('pause', function (ev, data) { 65 | player.pause() 66 | }) 67 | 68 | ipcRenderer.on('volume', function (ev, lev) { 69 | player.volume(lev) 70 | }) 71 | 72 | ipcRenderer.on('mute', function () { 73 | player.mute() 74 | }) 75 | 76 | ipcRenderer.on('unmute', function () { 77 | player.unmute() 78 | }) 79 | 80 | ipcRenderer.on('seek', function (ev, newTime) { 81 | player.seek(newTime) 82 | }) 83 | 84 | function needleSound (node, file, volume, muted) { 85 | node.volume = volume 86 | node.muted = muted 87 | node.src = file 88 | node.play() 89 | } 90 | -------------------------------------------------------------------------------- /renderer/audio/loader.js: -------------------------------------------------------------------------------- 1 | require('./index.js') 2 | -------------------------------------------------------------------------------- /renderer/audio/needle.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/renderer/audio/needle.mp3 -------------------------------------------------------------------------------- /renderer/player/default-artwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hypermodules/hyperamp/899d21de3794946fc29eecad52c13681b2bbdcdf/renderer/player/default-artwork.png -------------------------------------------------------------------------------- /renderer/player/elements/button/button-group.js: -------------------------------------------------------------------------------- 1 | const html = require('choo/html') 2 | const styles = require('./styles') 3 | 4 | function btnGroup (props, children) { 5 | const { className } = props 6 | return html` 7 |
8 | ${children || ''}
9 |
10 | `
11 | }
12 |
13 | module.exports = btnGroup
14 |
--------------------------------------------------------------------------------
/renderer/player/elements/button/index.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 | const icon = require('../icon')
3 | const styles = require('./styles')
4 |
5 | function button (props, children) {
6 | const { className, onclick, iconName, disabled } = props
7 | return html`
8 |
14 | `
15 | }
16 |
17 | module.exports = button
18 |
--------------------------------------------------------------------------------
/renderer/player/elements/button/styles.js:
--------------------------------------------------------------------------------
1 | const css = require('csjs-inject')
2 |
3 | module.exports = css`
4 | .btn {
5 | display: inline-flex;
6 | align-items: center;
7 | padding: 3px 8px;
8 | margin-bottom: 0;
9 | font-size: 1em;
10 | line-height: 1.4;
11 | min-height: 24px;
12 | text-align: center;
13 | white-space: nowrap;
14 | vertical-align: middle;
15 | background-image: none;
16 | border: 1px solid transparent;
17 | border-radius: var(--default-border-radius);
18 | -webkit-app-region: no-drag;
19 | color: var(--copy);
20 | background: transparent;
21 | }
22 |
23 | .btn svg { fill: var(--copy) }
24 | .btn.inverse svg { fill: var(--bg) }
25 | .btn:active, .btn.active { color: var(--link) }
26 | .btn:active svg, .btn.active svg { fill: var(--link) }
27 | .btn[disabled] svg { fill: var(--lighter) }
28 | .btn[disabled] { background-color: var(--bg) }
29 |
30 | .btn:focus {
31 | outline: none;
32 | box-shadow: none;
33 | }
34 |
35 | .btnGroup {
36 | display: inline-flex;
37 | flex-direction: row;
38 | justify-content: center;
39 | }
40 |
41 | .btnGroup .btn:not(:last-child) { border-right: none }
42 | .btnGroup .btn:not(:first-child):not(:last-child) { border-radius: 0 }
43 |
44 | .btnGroup .btn:first-child {
45 | border-top-right-radius: 0;
46 | border-bottom-right-radius: 0;
47 | }
48 |
49 | .btnGroup .btn:last-child {
50 | border-top-left-radius: 0;
51 | border-bottom-left-radius: 0;
52 | }
53 | `
54 |
--------------------------------------------------------------------------------
/renderer/player/elements/form/styles.js:
--------------------------------------------------------------------------------
1 | const css = require('csjs-inject')
2 |
3 | module.exports = css`
4 | .form {
5 | padding-bottom: 1em;
6 | margin-bottom: 1em;
7 | border-bottom: var(--border);
8 | }
9 |
10 | .formControl {
11 | color: var(--copy);
12 | display: inline-block;
13 | width: 100%;
14 | min-height: 25px;
15 | padding: var(--padding-less) var(--padding);
16 | font-family: var(--font-family-default);
17 | font-size: var(--font-size-default);
18 | font-weight: var(--font-weight-default);
19 | line-height: var(--line-height-default);
20 | background: var(--darken);
21 | border: var(--border);
22 | border-radius: var(--default-border-radius);
23 | outline: none;
24 | }
25 |
26 | .formControl:focus {
27 | border: 1px solid var(--darker);
28 | }
29 |
30 | .formGroup {
31 | display: flex;
32 | align-items: center;
33 | }
34 |
35 | .formGroup label {
36 | margin-right: 1em;
37 | width: 30%;
38 | white-space: nowrap;
39 | }
40 |
41 | .formGroup input {
42 | display: inline-flex;
43 | flex; 1;
44 | }
45 | `
46 |
--------------------------------------------------------------------------------
/renderer/player/elements/header/index.js:
--------------------------------------------------------------------------------
1 | const remote = require('@electron/remote')
2 | const { webUtils } = require('electron')
3 | const { app, dialog } = remote
4 | const html = require('choo/html')
5 | const Component = require('nanocomponent')
6 | const Search = require('./search')
7 | const button = require('../button')
8 | const config = remote.require('./config.js')
9 | const css = require('csjs-inject')
10 |
11 | const styles = css`
12 | .toolbar {
13 | -webkit-app-region: drag;
14 | height: 40px;
15 | padding: 0 .5em 0 6.5em;
16 | display: flex;
17 | align-items: center;
18 | justify-content: space-between;
19 | }
20 |
21 | .toolbarLeft, .toolbarRight {
22 | display: flex;
23 | align-items: center;
24 | }
25 | .toolbarLeft { flex: 1 }
26 | .toolbarRight {
27 | font-size: 1.5em;
28 | margin-left: auto;
29 | }
30 |
31 | @keyframes ckw {
32 | 0% { transform: rotate(0deg) }
33 | 100% { transform: rotate(360deg) }
34 | }
35 |
36 | .spin { animation: ckw 4s infinite linear }
37 | `
38 |
39 | class Header extends Component {
40 | constructor (opts) {
41 | super(opts)
42 |
43 | this.emit = null
44 | this.search = ''
45 | this.dialogOpen = false
46 |
47 | this.handleSearch = this.handleSearch.bind(this)
48 | this.handleAddButton = this.handleAddButton.bind(this)
49 | this.handlePaths = this.handlePaths.bind(this)
50 | this.handleNav = this.handleNav.bind(this)
51 | this.handleDrop = this.handleDrop.bind(this)
52 |
53 | this.searchComp = new Search()
54 | }
55 |
56 | handleSearch (val) {
57 | this.search = val
58 | this.emit('library:search', val)
59 | }
60 |
61 | handleAddButton () {
62 | if (!this.dialogOpen) {
63 | this.dialogOpen = true
64 | const paths = config.get('paths')
65 | const defaultPath = paths ? paths[paths.length - 1] : app.getPath('music')
66 | dialog.showOpenDialog({
67 | defaultPath,
68 | properties: ['openFile', 'openDirectory', 'multiSelections']
69 | })
70 | .then(this.handlePaths)
71 | .catch(err => {
72 | this.dialogOpen = false
73 | console.error(err)
74 | })
75 | }
76 | }
77 |
78 | handlePaths ({ filePaths }) {
79 | this.dialogOpen = false
80 | if (Array.isArray(filePaths) && filePaths.length > 0) {
81 | this.emit('config:set', { filePaths })
82 | this.emit('library:update-library', filePaths)
83 | }
84 | }
85 |
86 | handleNav () {
87 | this.emit('pushState', '#preferences')
88 | }
89 |
90 | handleDrop (event) {
91 | event.preventDefault()
92 | const { files } = event.dataTransfer
93 |
94 | const paths = Array(files.length).fill(0).map((_, i) => webUtils.getPathForFile(files.item(i)))
95 | this.handlePaths({ filePaths: paths })
96 | }
97 |
98 | createElement (state, emit) {
99 | this.emit = emit
100 | this.search = state.library.search
101 | this.loading = state.library.loading
102 |
103 | // `this._emit` is undefined if this is assigned in the constructor
104 | document.body.ondrop = this.handleDrop
105 | document.ondragover = event => event.preventDefault()
106 |
107 | return html`
108 |
77 |
78 |
79 | `
80 | }
81 |
--------------------------------------------------------------------------------
/renderer/player/elements/player/artwork.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 | const Component = require('nanocomponent')
3 | const fileUrlFromPath = require('../../../shared/file-url')
4 | const path = require('path')
5 | const defaultBG = path.resolve(window.__dirname, 'default-artwork.png')
6 | const compare = require('nanocomponent/compare')
7 | const css = require('csjs-inject')
8 |
9 | const styles = css`
10 | .albumCover {
11 | position: relative;
12 | width: 76px;
13 | height: 76px;
14 | overflow: hidden;
15 | float: left;
16 | flex-shrink: 0;
17 | }
18 | .albumCover:before {
19 | content: '';
20 | display: block;
21 | padding-top: 100%; /* initial ratio of 1:1*/
22 | }
23 | .albumArt {
24 | position: absolute;
25 | top: 0;
26 | left: 0;
27 | bottom: 0;
28 | right: 0;
29 |
30 | background: var(--bg);
31 | background-size: cover;
32 | background-position: center;
33 | }
34 | `
35 |
36 | class Artwork extends Component {
37 | constructor () {
38 | super()
39 | this.arguments = []
40 | }
41 |
42 | createElement (artworkPath) {
43 | this.arguments = arguments
44 |
45 | const fileUrl = fileUrlFromPath(artworkPath || defaultBG)
46 | const style = fileUrl
47 | ? `background-image: url(${fileUrl})`
48 | : ''
49 |
50 | return html`
51 |
52 |
53 |
54 | `
55 | }
56 |
57 | update () {
58 | return compare(arguments, this.arguments)
59 | }
60 | }
61 |
62 | module.exports = Artwork
63 |
--------------------------------------------------------------------------------
/renderer/player/elements/player/controls.js:
--------------------------------------------------------------------------------
1 | const Component = require('nanocomponent')
2 | const button = require('../button')
3 | const buttonGroup = require('../button/button-group')
4 | const buttonStyles = require('../button/styles')
5 | const css = require('csjs-inject')
6 |
7 | const styles = css`
8 | .controls {
9 | font-size: 1.5em;
10 | flex-direction: column;
11 | align-items: center;
12 | justify-content: center;
13 | align-self: center;
14 | display: flex;
15 | flex-direction: row;
16 | }
17 | `
18 |
19 | class PlayerControls extends Component {
20 | constructor (opts) {
21 | super(opts)
22 |
23 | // State
24 | this.key = null
25 | this.emit = null
26 | this.playing = false
27 |
28 | // Bound Methods
29 | this.handlePrev = this.handlePrev.bind(this)
30 | this.handleNext = this.handleNext.bind(this)
31 | this.handlePlayPause = this.handlePlayPause.bind(this)
32 | this.shuffleToggle = this.shuffleToggle.bind(this)
33 | }
34 |
35 | handlePrev () { this.emit('player:prev') }
36 |
37 | handleNext () { this.emit('player:next') }
38 |
39 | handlePlayPause () {
40 | if (this.playing) this.emit('player:pause')
41 | else this.emit('player:play')
42 | }
43 |
44 | shuffleToggle () {
45 | if (this.shuffling) this.emit('player:unshuffle')
46 | else this.emit('player:shuffle')
47 | }
48 |
49 | createElement (state, emit) {
50 | const { playing, shuffling, currentTrack = {} } = state.player
51 |
52 | this.emit = emit
53 | this.key = currentTrack.key
54 | this.playing = playing
55 | this.shuffling = shuffling
56 |
57 | return buttonGroup({ className: styles.controls },
58 | [
59 | button({
60 | onclick: this.handlePrev,
61 | iconName: 'entypo-controller-fast-backward'
62 | }),
63 | button({
64 | onclick: this.handlePlayPause,
65 | iconName: `entypo-controller-${this.playing ? 'paus' : 'play'}`
66 | }),
67 | button({
68 | onclick: this.handleNext,
69 | iconName: 'entypo-controller-fast-forward'
70 | }),
71 | button({
72 | onclick: this.shuffleToggle,
73 | iconName: 'entypo-shuffle',
74 | className: shuffling ? buttonStyles.active : null
75 | })
76 | ]
77 | )
78 | }
79 |
80 | update (state, emit) {
81 | const { currentTrack = {}, playing, shuffling } = state.player
82 | this.emit = emit
83 | if (this.key !== currentTrack.key) return true
84 | if (this.playing !== playing) return true
85 | if (this.shuffling !== shuffling) return true
86 | return false
87 | }
88 | }
89 |
90 | module.exports = PlayerControls
91 |
--------------------------------------------------------------------------------
/renderer/player/elements/player/index.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 | const Component = require('nanocomponent')
3 | const Controls = require('./controls')
4 | const Progress = require('./progress')
5 | const Volume = require('./volume')
6 | const Meta = require('./meta')
7 | const css = require('csjs-inject')
8 |
9 | const styles = css`
10 | .player {
11 | -webkit-app-region: drag;
12 | border-top: var(--border);
13 | align-items: center;
14 | text-align: center;
15 | position: fixed;
16 | left: 0;
17 | right: 0;
18 | bottom: 0;
19 | height: 77px;
20 | justify-content: space-between;
21 | will-change: transform;
22 | contain: layout;
23 | display: flex;
24 | padding: 0 2% 0 0;
25 | background: var(--bg);
26 | }
27 | `
28 |
29 | class Player extends Component {
30 | constructor (opts) {
31 | if (!opts) opts = {}
32 | super(opts)
33 | this.opts = Object.assign({}, opts)
34 |
35 | // state
36 | this.emit = null
37 | this.key = null
38 | this.pictureHash = null
39 |
40 | // owned children
41 | this.controls = new Controls()
42 | this.progress = new Progress()
43 | this.volume = new Volume()
44 | this.meta = new Meta()
45 | }
46 |
47 | createElement (state, emit) {
48 | const { currentTrack = {} } = state.player
49 |
50 | this.emit = emit
51 | this.key = currentTrack.key
52 |
53 | return html`
54 |
55 | ${this.meta.render(currentTrack, emit)}
56 | ${this.controls.render(state, emit)}
57 | ${this.progress.render(state, emit)}
58 | ${this.volume.render(state, emit)}
59 |
60 | `
61 | }
62 |
63 | update (state, emit) {
64 | this.emit = emit
65 |
66 | const { currentTrack = {} } = state.player
67 |
68 | if (this.key !== currentTrack.key) return true
69 |
70 | this.controls.render(state, emit)
71 | this.progress.render(state, emit)
72 | this.volume.render(state, emit)
73 | this.meta.render(currentTrack, emit)
74 |
75 | return false
76 | }
77 | }
78 |
79 | module.exports = Player
80 |
--------------------------------------------------------------------------------
/renderer/player/elements/player/meta.js:
--------------------------------------------------------------------------------
1 | const Component = require('nanocomponent')
2 | const compare = require('nanocomponent/compare')
3 | const Artwork = require('./artwork')
4 | const html = require('choo/html')
5 | const css = require('csjs-inject')
6 |
7 | const styles = css`
8 | .nowPlaying {
9 | position: relative;
10 | min-width: 220px;
11 | max-width: 300px;
12 | flex: 1 0 30%;
13 | display: flex;
14 | align-items: center;
15 | padding-right: 2%;
16 | overflow: hidden;
17 | border-right: var(--border);
18 | margin-right: 2%;
19 | height: 100%;
20 | }
21 |
22 | .meta {
23 | font-size: 12px;
24 | text-align: left;
25 | padding-left: 10px;
26 | overflow: hidden;
27 | -webkit-app-region: no-drag;
28 | }
29 | .title, .artist {
30 | margin: 0;
31 | white-space: nowrap;
32 | overflow: hidden;
33 | text-overflow: ellipsis;
34 | }
35 | .title { font-weight: 600 }
36 | `
37 |
38 | class Meta extends Component {
39 | constructor () {
40 | super()
41 |
42 | // state
43 | this.arguments = []
44 |
45 | // owned children
46 | this.artwork = new Artwork()
47 |
48 | this.handleClick = this.handleClick.bind(this)
49 | }
50 |
51 | handleClick () {
52 | this.emit('library:recall')
53 | }
54 |
55 | createElement (track = {}, emit) {
56 | this.arguments = arguments
57 | this.emit = emit
58 |
59 | const { title, artist } = track
60 |
61 | return html`
62 |
74 | `
75 | }
76 |
77 | update (_, emit) {
78 | this.emit = emit
79 | return compare(arguments, this.arguments)
80 | }
81 | }
82 |
83 | module.exports = Meta
84 |
--------------------------------------------------------------------------------
/renderer/player/elements/player/progress.js:
--------------------------------------------------------------------------------
1 | const Component = require('nanocomponent')
2 | const html = require('choo/html')
3 | const truthy = require('@bret/truthy')
4 | const button = require('../button')
5 | const Range = require('../range')
6 | const fd = require('format-duration')
7 | const css = require('csjs-inject')
8 | const get = require('lodash.get')
9 |
10 | const styles = css`
11 | .progress {
12 | display: flex;
13 | width: 100%;
14 | padding: 0 2%;
15 | justify-content: center;
16 | }
17 | .time {
18 | font-size: 11px;
19 | display: inline-flex;
20 | align-items: center;
21 | min-width: 3em;
22 | font-variant-numeric: tabular-nums;
23 | line-height: 1;
24 | }
25 | .time:first-child { justify-content: flex-end }
26 | .time:last-child { justify-content: flex-start }
27 | .range { width: 100% }
28 | .scrubber {
29 | cursor: default;
30 | position: relative;
31 | vertical-align: middle;
32 | -webkit-app-region: no-drag;
33 | width: 100%;
34 | }
35 | @media (max-width: 640px) {
36 | .range {
37 | width: 0;
38 | padding: 0 .5em 0 0;
39 | pointer-events: none;
40 | }
41 | .range::after {
42 | content: '/';
43 | margin-left: -.25em;
44 | }
45 | }
46 | `
47 |
48 | class Progress extends Component {
49 | constructor (opts) {
50 | if (!opts) opts = {}
51 | super(opts)
52 | this.opts = Object.assign({
53 | min: 0,
54 | max: 100,
55 | step: 0.1,
56 | default: 0,
57 | id: 'position'
58 | }, opts)
59 |
60 | // State
61 | this.position = 0
62 | this.currentIndex = null
63 | this.emit = null
64 | this.disabled = false
65 | this.duration = 1
66 |
67 | // Bound Methods
68 | this.scalePosition = this.scalePosition.bind(this)
69 | this.handleSeek = this.handleSeek.bind(this)
70 |
71 | // Owned Children
72 | this.positionSlider = new Range(this.opts)
73 | }
74 |
75 | scalePosition (position, duration) {
76 | return (position / duration) * this.opts.max || 0
77 | }
78 |
79 | handleSeek (val) {
80 | const newTime = (val / this.opts.max) * this.duration
81 | this.emit('player:seek', newTime)
82 | this.position = newTime
83 | }
84 |
85 | createElement (state, emit) {
86 | const { currentTrack, currentTime } = state.player
87 |
88 | this.emit = emit
89 | this.key = get(currentTrack, 'key')
90 | this.position = currentTime
91 | this.disabled = !truthy(currentTrack)
92 |
93 | if (currentTrack) this.duration = currentTrack.duration
94 |
95 | return html`
96 |
97 |
108 | `
109 | }
110 |
111 | update (state, emit) {
112 | this.emit = emit
113 | if (this.disabled !== !truthy(state.player.currentTrack)) return true
114 | if (this.key !== get(state, 'player.currentTrack.key')) return true
115 | if (this.position !== state.player.currentTime) return true
116 | if (this.duration !== get(state, 'player.currentTrack.duration')) return true
117 | return false
118 | }
119 | }
120 |
121 | module.exports = Progress
122 |
--------------------------------------------------------------------------------
/renderer/player/elements/player/volume.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 | const button = require('../button')
3 | const buttonStyles = require('../button/styles')
4 | const Component = require('nanocomponent')
5 | const Range = require('../range')
6 | const css = require('csjs-inject')
7 |
8 | const styles = css`
9 | .volumeGroup {
10 | flex: 1 1 30%;
11 | max-width: 110px;
12 | min-width: 80px;
13 | }
14 | .volumeButton { padding-right: 0 }
15 | .range {
16 | width: 100%;
17 | padding: 0 3px;
18 | }
19 | .volumeSlider {
20 | position: relative;
21 | cursor: default;
22 | display: inline-block;
23 | vertical-align: middle;
24 | -webkit-app-region: no-drag;
25 | margin: 0 5px;
26 | width: 100%;
27 | }
28 | `
29 |
30 | class Volume extends Component {
31 | constructor (opts) {
32 | if (!opts) opts = {}
33 | super(opts)
34 | this.opts = Object.assign({
35 | min: 0,
36 | max: 1,
37 | default: 0.5,
38 | step: 0.01
39 | }, opts)
40 |
41 | // State
42 | this.emit = null
43 | this.volume = 0
44 | this.muted = false
45 |
46 | // Bound Methods
47 | this.changeVolume = this.changeVolume.bind(this)
48 | this.toggleMute = this.toggleMute.bind(this)
49 |
50 | // Owned Children
51 | this.volumeSlider = new Range(this.opts)
52 | }
53 |
54 | changeVolume (volume) {
55 | this.volume = volume
56 | if (this.emit) this.emit('player:changeVolume', volume)
57 | }
58 |
59 | toggleMute () {
60 | if (this.muted) this.emit('player:unmute')
61 | else this.emit('player:mute')
62 | }
63 |
64 | createElement (state, emit) {
65 | const { muted, volume } = state.player
66 | this.muted = muted
67 | this.volume = volume
68 | this.emit = emit
69 | return html`
70 |
84 | `
85 | }
86 |
87 | update (state) {
88 | const { muted, volume } = state.player
89 | if (this.muted !== muted || this.volume !== volume) {
90 | return true
91 | }
92 | return false
93 | }
94 | }
95 |
96 | module.exports = Volume
97 |
--------------------------------------------------------------------------------
/renderer/player/elements/playlist/index.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 | const Component = require('nanocomponent')
3 | const Header = require('../../elements/header')
4 | const styles = require('./styles')
5 | const TrackView = require('./track-view')
6 | const loader = require('../loader')
7 |
8 | class Playlist extends Component {
9 | constructor (opts) {
10 | if (!opts) opts = {}
11 | super(opts)
12 | this.opts = Object.assign({}, opts)
13 |
14 | // Owned Children
15 | this.header = new Header()
16 | this.trackView = new TrackView()
17 | }
18 |
19 | createElement (state, emit) {
20 | this.loading = state.library.loading
21 |
22 | return html`
23 | ${fd(this.position * 1000)}
98 | ${button({ className: styles.range }, /* eslint-disable indent */
99 | this.positionSlider.render({
100 | onchange: this.handleSeek,
101 | value: currentTrack ? this.scalePosition(this.position, currentTrack.duration) : 0,
102 | className: styles.scrubber,
103 | disabled: this.disabled
104 | })
105 | )/* eslint-enable indent */}
106 | ${fd(this.duration * 1000)}
107 |
24 | ${this.header.render(state, emit)}
25 | ${this.loading /* eslint-disable indent */
26 | ? loader()
27 | : this.trackView.render(state, emit)/* eslint-enable indent */}
28 |
29 | `
30 | }
31 |
32 | update (state, emit) {
33 | if (this.loading !== state.library.loading) return true
34 | this.trackView.render(state, emit)
35 | this.header.render(state, emit)
36 | return false
37 | }
38 | }
39 |
40 | module.exports = Playlist
41 |
--------------------------------------------------------------------------------
/renderer/player/elements/playlist/lib.js:
--------------------------------------------------------------------------------
1 | exports.formatCount = formatCount
2 |
3 | function formatCount (countObj) {
4 | if (!countObj.no && !countObj.of) return ''
5 | if (!countObj.of) return countObj.no.toString()
6 | return `${countObj.no} of ${countObj.of}`
7 | }
8 |
--------------------------------------------------------------------------------
/renderer/player/elements/playlist/styles.js:
--------------------------------------------------------------------------------
1 | const css = require('csjs-inject')
2 |
3 | module.exports = css`
4 | .playlist {
5 | position: absolute;
6 | left: 0;
7 | top: 0;
8 | right: 0;
9 | bottom: 77px;
10 | }
11 |
12 | .tableScrollWindow {
13 | position: absolute;
14 | top: 40px;
15 | right: 0;
16 | left: 0;
17 | bottom: 0;
18 | overflow: auto;
19 | }
20 |
21 | .tableContainer { position: relative }
22 |
23 | .mediaList {
24 | table-layout: fixed;
25 | width: 100%;
26 | min-width: 1000px;
27 | border-spacing: 0;
28 | border: 0;
29 | border-collapse: separate;
30 | text-align: left;
31 | position: absolute;
32 | contain: layout;
33 | }
34 |
35 | .mediaList td {
36 | white-space: nowrap;
37 | overflow: hidden;
38 | text-overflow: ellipsis;
39 | }
40 |
41 | /* .mediaList tr:nth-child(even),
42 | thead { background: var(--darken) } */
43 |
44 | .mediaList th {
45 | font-weight: var(--font-weight-default);
46 | /* border-right: var(--border);
47 | border-bottom: var(--border); */
48 | }
49 | /* .mediaList td { border-right: var(--border) }
50 | .mediaList th:last-child { border-right: none } */
51 |
52 | .stickyHead th {
53 | position: sticky;
54 | top: 0px;
55 | background-color: var(--bg);
56 | font-weight: 500;
57 | border-bottom: var(--border);
58 | }
59 |
60 | .mediaList td, th {
61 | height: 3em;
62 | padding: 2px 15px;
63 | }
64 |
65 | .mediaList tr:nth-child(even) { background: var(--darken) }
66 | .mediaList tbody tr.selected { background: rgba(255,102,51,.1) }
67 |
68 | /* use colgroup to sanely apply width properties */
69 | /* https://docs.webplatform.org/wiki/html/elements/colgroup */
70 | .mediaList .title { width: 12em }
71 | .mediaList .time { width: 4em }
72 | .mediaList .artist { width: 10em }
73 | .mediaList .album { width: 8em }
74 | .mediaList .track { width: 4em }
75 | .mediaList .disk { width: 4em }
76 | .mediaList .year { width: 4em }
77 | .mediaList .genre { width: 4em }
78 | .playing { font-weight: 500 }
79 | `
80 |
--------------------------------------------------------------------------------
/renderer/player/elements/playlist/test.js:
--------------------------------------------------------------------------------
1 | const test = require('tape')
2 | const { formatCount } = require('./lib')
3 |
4 | test('format disk and track objects correctly', function (t) {
5 | const tests = [
6 | {
7 | in: { no: 14, of: 17 },
8 | expect: '14 of 17'
9 | },
10 | {
11 | in: { no: 0, of: 0 },
12 | expect: ''
13 | },
14 | {
15 | in: { no: 5, of: 0 },
16 | expect: '5'
17 | }
18 | ]
19 |
20 | tests.forEach(function (testCase) {
21 | t.equal(formatCount(testCase.in), testCase.expect, `${JSON.stringify(testCase.in)} formats to ${testCase.expect}`)
22 | })
23 |
24 | t.end()
25 | })
26 |
--------------------------------------------------------------------------------
/renderer/player/elements/playlist/track-view.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 | const fd = require('format-duration')
3 | const cn = require('classnames')
4 | const Component = require('nanocomponent')
5 | const document = require('global/document')
6 | const { formatCount } = require('./lib')
7 | const { COLUMNS } = require('../../lib/constants')
8 | const styles = require('./styles')
9 | const remote = require('@electron/remote')
10 | const { Menu, MenuItem, getCurrentWindow, shell } = remote
11 |
12 | const OFFSET_BUFFER = 50
13 |
14 | class TrackView extends Component {
15 | constructor (opts) {
16 | if (!opts) opts = {}
17 | super(opts)
18 | this.opts = Object.assign({}, opts)
19 |
20 | // State
21 | this.emit = null
22 | this.trackOrder = []
23 | this.trackDict = {}
24 | this.currentIndex = null
25 | this.selectedIndex = null
26 | this.sliceLength = 200
27 | this.sliceStartIndex = 0
28 | this.rowHeight = 39
29 | this.scrollWindowHeight = 1024
30 | this.ticking = false // https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Example
31 | this.columns = {}
32 |
33 | // Bound methods
34 | // NOTE: not sure most of these are needed
35 | this.selectTrack = this.selectTrack.bind(this)
36 | this.deselect = this.deselect.bind(this)
37 | this.playTrack = this.playTrack.bind(this)
38 | this.rowMap = this.rowMap.bind(this)
39 | this.renderSlice = this.renderSlice.bind(this)
40 | this.mutateCurrentIndex = this.mutateCurrentIndex.bind(this)
41 | this.mutateSelectedIndex = this.mutateSelectedIndex.bind(this)
42 | this.handleOnScroll = this.handleOnScroll.bind(this)
43 | this.metaMenu = this.metaMenu.bind(this)
44 | this.scrollTo = this.scrollTo.bind(this)
45 | this.scrollCurrent = this.scrollCurrent.bind(this)
46 | }
47 |
48 | get topVisibleRowIndex () {
49 | return Math.floor(this.element.scrollTop / this.rowHeight)
50 | }
51 |
52 | get bottomVisibleRowIndex () {
53 | const { clientHeight } = this.element
54 | return Math.floor(clientHeight / this.rowHeight) + this.topVisibleRowIndex
55 | }
56 |
57 | get midIndexOffset () {
58 | return Math.floor((this.bottomVisibleRowIndex - this.topVisibleRowIndex - 1) / 2)
59 | }
60 |
61 | get topOffset () {
62 | return this.topVisibleRowIndex - this.sliceStartIndex
63 | }
64 |
65 | get bottomOffset () {
66 | const lastRenderedIndex = this.sliceStartIndex + this.sliceLength
67 | return lastRenderedIndex - this.bottomVisibleRowIndex
68 | }
69 |
70 | get maxScrollTop () {
71 | return this.element.scrollHeight - this.element.clientHeight
72 | }
73 |
74 | scrollTo (index) {
75 | window.requestAnimationFrame(() => {
76 | let middleScrollTop = ((index - this.midIndexOffset) * this.rowHeight)
77 | if (middleScrollTop < 0) middleScrollTop = 0
78 | if (middleScrollTop > this.maxScrollTop) middleScrollTop = this.maxScrollTop
79 | if (index < this.topVisibleRowIndex + 1 || index > this.bottomVisibleRowIndex - 1) {
80 | this.element.scrollTop = middleScrollTop
81 | }
82 | })
83 | }
84 |
85 | scrollCurrent () {
86 | this.scrollTo(this.currentIndex)
87 | }
88 |
89 | selectTrack (ev) {
90 | let t = ev.target
91 | while (t && !t.id) t = t.parentNode // Bubble up
92 | if (t && t.tagName === 'TR') {
93 | ev.stopPropagation()
94 | const index = Number(t.id.replace('track-', ''))
95 | this.emit('library:select', index)
96 | }
97 | }
98 |
99 | playTrack (ev) {
100 | let t = ev.target
101 | while (t && !t.id) t = t.parentNode // Bubble up
102 | if (t && t.tagName === 'TR') {
103 | const index = Number(t.id.replace('track-', ''))
104 | this.emit('library:queue', index)
105 | this.emit('player:play')
106 | }
107 | }
108 |
109 | mutateCurrentIndex (newIndex) {
110 | const oldIndex = this.currentIndex
111 | const oldEl = document.getElementById(`track-${oldIndex}`)
112 | const newEl = document.getElementById(`track-${newIndex}`)
113 |
114 | if (oldEl) oldEl.classList.toggle(styles.playing, false)
115 | if (newEl) newEl.classList.toggle(styles.playing, true)
116 |
117 | this.currentIndex = newIndex
118 | }
119 |
120 | mutateSelectedIndex (newIndex) {
121 | const oldIndex = this.selectedIndex
122 | const oldEl = document.getElementById(`track-${oldIndex}`)
123 | const newEl = document.getElementById(`track-${newIndex}`)
124 |
125 | if (oldEl) oldEl.classList.toggle(styles.selected, false)
126 | if (newEl) newEl.classList.toggle(styles.selected, true)
127 |
128 | if (this.selectedIndex != null) {
129 | const selected = document.querySelector(styles.selected.selector)
130 | if (selected != null) selected.scrollIntoViewIfNeeded(false)
131 | }
132 |
133 | this.selectedIndex = newIndex
134 | }
135 |
136 | // TODO: figure out Y offset for top element when scrolling up
137 | rowMap (key, idx) {
138 | // Look up track info
139 | const track = this.trackDict[key]
140 | const columns = Object.keys(this.columns).filter(col => this.columns[col])
141 |
142 | // create meta display values
143 | const meta = Object.assign({}, track, {
144 | time: track.duration ? fd(track.duration * 1000) : '',
145 | track: track.track ? formatCount(track.track) : '',
146 | disk: track.disk ? formatCount(track.disk) : ''
147 | })
148 |
149 | // Generate state based styles
150 | const classes = cn({
151 | [styles.playing]: this.currentIndex === idx + this.sliceStartIndex && !this.isNewQuery,
152 | [styles.selected]: this.selectedIndex === idx + this.sliceStartIndex
153 | })
154 |
155 | return html`
156 |
193 |
208 | `
209 | }
210 |
211 | deselect () {
212 | this.emit('library:select', null)
213 | }
214 |
215 | handleOnScroll (ev) {
216 | const self = this
217 |
218 | const maxStart = this.trackOrder.length - this.sliceLength > 0 ? this.trackOrder.length - this.sliceLength : 0
219 | const closeToBottom = this.bottomOffset < OFFSET_BUFFER && this.sliceStartIndex !== maxStart
220 | const closeToTop = this.topOffset < OFFSET_BUFFER && this.sliceStartIndex !== 0
221 |
222 | if (closeToBottom) {
223 | const frontSlice = this.topVisibleRowIndex - OFFSET_BUFFER
224 | this.sliceStartIndex = frontSlice > maxStart ? maxStart : frontSlice
225 | }
226 |
227 | if (closeToTop) {
228 | const backSlice = this.bottomVisibleRowIndex + OFFSET_BUFFER - this.sliceLength
229 | this.sliceStartIndex = backSlice > 0 ? backSlice : 0
230 | }
231 |
232 | if (!this.ticking && (closeToTop || closeToBottom)) {
233 | window.requestAnimationFrame(function () {
234 | self.render(null, null, true)
235 | self.ticking = false
236 | })
237 | this.ticking = true
238 | }
239 | }
240 |
241 | createElement (state, emit) {
242 | if (emit) this.emit = emit
243 | if (state) {
244 | // Save references to state track order and dicts
245 | this.trackOrder = state.library.trackOrder
246 | this.trackDict = state.library.trackDict
247 | // Save state
248 | // Current index is the index of a queued track
249 | this.currentIndex = state.library.currentIndex
250 | this.isNewQuery = state.library.isNewQuery
251 | // Selected index is the index of the highlighted track
252 | this.selectedIndex = state.library.selectedIndex
253 | // set of currently displayed columns
254 | this.columns = Object.assign({}, state.library.columns) // must be cloned for comparison
255 | }
256 |
257 | return this.renderSlice()
258 | }
259 |
260 | update (state, emit, scroll) {
261 | // Re-render
262 | // Note, these are only shallow compares. You must slice or reobject your state
263 | if (scroll) return true
264 | if (this.trackOrder !== state.library.trackOrder) return true
265 | if (this.trackDict !== state.library.trackDict) return true
266 | if (this.isNewQuery !== state.library.isNewQuery) return true
267 | if (shouldColumnsUpdate(this.columns, state.library.columns)) return true
268 | // Mutate
269 | if (this.currentIndex !== state.library.currentIndex && !this.isNewQuery) {
270 | this.mutateCurrentIndex(state.library.currentIndex)
271 | }
272 | if (this.selectedIndex !== state.library.selectedIndex) {
273 | this.mutateSelectedIndex(state.library.selectedIndex)
274 | }
275 | // Cache!
276 | return false
277 | }
278 |
279 | beforerender (el) {
280 | const self = this
281 | window.requestAnimationFrame(function () {
282 | el.scrollTop = self.sliceStartIndex * self.rowHeight
283 | })
284 | }
285 | }
286 |
287 | function shouldColumnsUpdate (cols, newCols) {
288 | return Object.keys(cols).filter(k => cols[k] !== newCols[k]).length !== 0
289 | }
290 |
291 | function capitalize (string) {
292 | return string.charAt(0).toUpperCase() + string.slice(1)
293 | }
294 |
295 | function trackMenu (filepath) {
296 | return function onTrackContextMenu (event) {
297 | event.preventDefault()
298 | const menu = new Menu()
299 | menu.append(new MenuItem({
300 | // TODO: show appropriate labels for windows & linux
301 | label: 'Reveal in Finder',
302 | click: () => shell.showItemInFolder(filepath)
303 | }))
304 | menu.popup(getCurrentWindow())
305 | }
306 | }
307 |
308 | function arrToStr (arr) {
309 | if (Array.isArray(arr)) return arr.join(', ')
310 | return arr
311 | }
312 |
313 | module.exports = TrackView
314 |
--------------------------------------------------------------------------------
/renderer/player/elements/range.js:
--------------------------------------------------------------------------------
1 | const Component = require('nanocomponent')
2 | const html = require('choo/html')
3 | const assert = require('assert')
4 | const css = require('csjs-inject')
5 |
6 | const styles = css`
7 | .range {
8 | cursor: default;
9 | position: relative;
10 | vertical-align: middle;
11 | -webkit-app-region: no-drag;
12 | width: 100%;
13 | }
14 | `
15 |
16 | class Range extends Component {
17 | constructor (opts) {
18 | if (!opts) opts = {}
19 | super(opts)
20 | this._opts = Object.assign({
21 | min: 0,
22 | max: 1,
23 | default: 0.5,
24 | step: 0.01,
25 | id: ''
26 | }, opts)
27 | this._value = this._opts.default
28 | this._onchange = null
29 | this._disabled = false
30 | this._className = styles.range
31 | this._handleInput = this._handleInput.bind(this)
32 | }
33 |
34 | _handleInput (e) {
35 | if (this._onchange) this._onchange(this.element.value)
36 | }
37 |
38 | createElement ({ value, onchange, className, disabled }) {
39 | assert.strict.equal(typeof onchange, 'function', 'Range: onchange should be a function')
40 |
41 | this._onchange = onchange
42 | this._value = value
43 | if (className !== undefined) this._className = className
44 | this._disabled = disabled
45 |
46 | return html`
47 |
56 | `
57 | }
58 |
59 | // Lets mutate!
60 | update ({ value, onchange, className, disabled }) {
61 | assert.strict.equal(typeof onchange, 'function', 'Range: onchange should be a function')
62 |
63 | if (this._onchange !== onchange) {
64 | this._onchange = onchange
65 | }
66 | if (this._className !== className) {
67 | this._className = className
68 | this.element.class = className
69 | }
70 | if (this._value !== value) {
71 | // Mutate value changes
72 | this._value = value
73 | this.element.value = this._value
74 | }
75 | if (this._disabled !== disabled) {
76 | this._disabled = disabled
77 | if (this._disabled) {
78 | this.element.setAttribute('disabled', '')
79 | } else {
80 | this.element.removeAttribute('disabled')
81 | }
82 | }
83 | return false
84 | }
85 | }
86 |
87 | module.exports = Range
88 |
--------------------------------------------------------------------------------
/renderer/player/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
194 |
195 |
196 |
206 |
207 | | ${capitalize(col)} | 199 | `)} 200 |
|---|
31 | ${header.render(state, emit)}
32 |
51 | ${player.render(state, emit)}
52 |
33 |
50 |
34 |
44 | ${button({ /* eslint-disable indent */
45 | onclick: () => emit('pushState', '#'),
46 | iconName: 'entypo-chevron-left'
47 | }, 'Back')/* eslint-disable indent */}
48 |
49 |