diff --git a/app/assets/pause.png b/app/assets/pause.png new file mode 100644 index 0000000..5329883 Binary files /dev/null and b/app/assets/pause.png differ diff --git a/app/assets/play.png b/app/assets/play.png new file mode 100644 index 0000000..48abc15 Binary files /dev/null and b/app/assets/play.png differ diff --git a/app/assets/skip-next.png b/app/assets/skip-next.png new file mode 100644 index 0000000..41aa1ba Binary files /dev/null and b/app/assets/skip-next.png differ diff --git a/app/assets/skip-previous.png b/app/assets/skip-previous.png new file mode 100644 index 0000000..6cad0cc Binary files /dev/null and b/app/assets/skip-previous.png differ diff --git a/app/background.js b/app/background.js index f46cd55..4010d63 100644 --- a/app/background.js +++ b/app/background.js @@ -7,6 +7,7 @@ let tray; let settings; let shouldExit = false; +let playing = false; //Get path to asset function assetPath(a) { @@ -74,26 +75,38 @@ async function createWindow() { return false; }); + //Thumbnail Toolbars + setThumbarButtons(); } //Create window app.on('ready', async () => { createWindow(); - //Create tray + //Create Tray tray = new Tray(assetPath("icon-taskbar.png")); tray.on('double-click', () => win.show()); tray.on('click', () => win.show()); - //Tray menu + setTray(); +}); + +//Update tray context menu +function setTray() { const contextMenu = Menu.buildFromTemplate([ { label: 'Restore', type: 'normal', click: () => win.show() }, + playing ? { - label: 'Play/Pause', + label: 'Pause', + type: 'normal', + click: () => win.webContents.send('togglePlayback') + } + : { + label: 'Play', type: 'normal', click: () => win.webContents.send('togglePlayback') }, @@ -117,6 +130,42 @@ app.on('ready', async () => { } ]); tray.setContextMenu(contextMenu); +} + +//Update Thumbnail Toolbars (Windows) +function setThumbarButtons() { + win.setThumbarButtons([ + { + tooltip: 'Skip Previous', + icon: assetPath('skip-previous.png'), + click: () => win.webContents.send('skipPrev') + }, + //Play/Pause + playing ? + { + tooltip: 'Pause', + icon: assetPath('pause.png'), + click: () => win.webContents.send('togglePlayback') + } : + { + tooltip: 'Play', + icon: assetPath('play.png'), + click: () => win.webContents.send('togglePlayback') + }, + //Skip next + { + tooltip: 'Skip Next', + icon: assetPath('skip-next.png'), + click: () => win.webContents.send('skipNext') + }, + ]); +} + +//Playing state change from UI +ipcMain.on('playing', (event, args) => { + playing = args; + setThumbarButtons(); + setTray(); }); //Update settings from ui diff --git a/app/client/src/App.vue b/app/client/src/App.vue index 78bb1df..ecb1933 100644 --- a/app/client/src/App.vue +++ b/app/client/src/App.vue @@ -371,8 +371,8 @@ export default { }); // /search - document.addEventListener('keypress', (event) => { - if (event.keyCode != 47) return; + document.addEventListener('keypress', (e) => { + if (e.keyCode != 47) return; this.$refs.searchBar.focus(); setTimeout(() => { if (this.searchQuery.startsWith('/')) this.searchQuery = this.searchQuery.substring(1); @@ -394,6 +394,9 @@ export default { if (this.$root.audio) this.$root.audio.volume = this.volume; this.$root.volume = this.volume; }, + '$root.volume'() { + this.volume = this.$root.volume; + }, //Update position '$root.position'() { this.position = (this.$root.position / this.$root.duration()) * 100; diff --git a/app/client/src/components/LibraryTracks.vue b/app/client/src/components/LibraryTracks.vue index 682d213..1f69d44 100644 --- a/app/client/src/components/LibraryTracks.vue +++ b/app/client/src/components/LibraryTracks.vue @@ -1,19 +1,35 @@