From c3e2c1380810d156d9d6863fffc804242171bec0 Mon Sep 17 00:00:00 2001 From: Sem Vissscher Date: Wed, 16 Dec 2020 15:52:01 +0100 Subject: [PATCH 1/6] added initial touchbar support --- plugins/touchbar/back.js | 61 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 plugins/touchbar/back.js diff --git a/plugins/touchbar/back.js b/plugins/touchbar/back.js new file mode 100644 index 0000000000..44ddea77ad --- /dev/null +++ b/plugins/touchbar/back.js @@ -0,0 +1,61 @@ +const { TouchBar } = require('electron') +const { + TouchBarButton, + TouchBarLabel, + TouchBarSpacer, + TouchBarSegmentedControl, + TouchBarScrubber +} = TouchBar + +// this selects the title +const titleSelector = '.title.style-scope.ytmusic-player-bar' + +// these keys will be used to go backwards, pause and skip songs +const keys = ['k','space','j'] + +const presskey = (window, key) => { + window.webContents.sendInputEvent({ + type: "keydown", + keyCode: key + }) +} + +// grab the title using the selector +const getTitle = (win) => { + return win.webContents.executeJavaScript( + `document.querySelector('` + titleSelector + `').innerText` + ).catch(e => { + console.log(e) + }) +} + +module.exports = (win) => { + // songtitle label + let songTitle = new TouchBarLabel({label: ''}) + + // the song control buttons (keys to press are in the same order) + const buttons = new TouchBarSegmentedControl({ + mode: 'buttons', + segments: [ + new TouchBarButton({label: '<'}), + new TouchBarButton({label: '⏯️'}), + new TouchBarButton({label: '>'}) + ], + change: (i) => presskey(win,keys[i]) + }) + + // this is the touchbar object, this combines everything with proper layout + const touchBar = new TouchBar({ + items: [ + new TouchBarScrubber({items: [songTitle], continuous: false}), + new TouchBarSpacer({size:'flexible'}), + buttons + ] + }) + + // if the page title changes, update touchbar and song title + win.on("page-title-updated", async () => { + songTitle.label = await getTitle(win) + win.setTouchBar(touchBar) + }) +} From 7473677477071ca5e7b18bda3193e345d7fd549f Mon Sep 17 00:00:00 2001 From: Sem Vissscher Date: Wed, 16 Dec 2020 15:57:24 +0100 Subject: [PATCH 2/6] touchbar plugin - fixed code style --- plugins/touchbar/back.js | 119 ++++++++++++++++++++++----------------- 1 file changed, 67 insertions(+), 52 deletions(-) diff --git a/plugins/touchbar/back.js b/plugins/touchbar/back.js index 44ddea77ad..558038921a 100644 --- a/plugins/touchbar/back.js +++ b/plugins/touchbar/back.js @@ -1,61 +1,76 @@ -const { TouchBar } = require('electron') +const { + TouchBar +} = require('electron'); const { TouchBarButton, TouchBarLabel, TouchBarSpacer, TouchBarSegmentedControl, - TouchBarScrubber -} = TouchBar + TouchBarScrubber +} = TouchBar; -// this selects the title -const titleSelector = '.title.style-scope.ytmusic-player-bar' +// This selects the title +const titleSelector = '.title.style-scope.ytmusic-player-bar'; -// these keys will be used to go backwards, pause and skip songs -const keys = ['k','space','j'] +// These keys will be used to go backwards, pause and skip songs +const keys = ['k', 'space', 'j']; const presskey = (window, key) => { - window.webContents.sendInputEvent({ - type: "keydown", - keyCode: key - }) -} - -// grab the title using the selector -const getTitle = (win) => { - return win.webContents.executeJavaScript( - `document.querySelector('` + titleSelector + `').innerText` - ).catch(e => { - console.log(e) - }) -} - -module.exports = (win) => { - // songtitle label - let songTitle = new TouchBarLabel({label: ''}) - - // the song control buttons (keys to press are in the same order) - const buttons = new TouchBarSegmentedControl({ - mode: 'buttons', - segments: [ - new TouchBarButton({label: '<'}), - new TouchBarButton({label: '⏯️'}), - new TouchBarButton({label: '>'}) - ], - change: (i) => presskey(win,keys[i]) - }) - - // this is the touchbar object, this combines everything with proper layout - const touchBar = new TouchBar({ - items: [ - new TouchBarScrubber({items: [songTitle], continuous: false}), - new TouchBarSpacer({size:'flexible'}), - buttons - ] - }) - - // if the page title changes, update touchbar and song title - win.on("page-title-updated", async () => { - songTitle.label = await getTitle(win) - win.setTouchBar(touchBar) - }) -} + window.webContents.sendInputEvent({ + type: 'keydown', + keyCode: key + }); +}; + +// Grab the title using the selector +const getTitle = win => { + return win.webContents.executeJavaScript( + 'document.querySelector(\'' + titleSelector + '\').innerText' + ).catch(error => { + console.log(error); + }); +}; + +module.exports = win => { + // Songtitle label + const songTitle = new TouchBarLabel({ + label: '' + }); + + // The song control buttons (keys to press are in the same order) + const buttons = new TouchBarSegmentedControl({ + mode: 'buttons', + segments: [ + new TouchBarButton({ + label: '<' + }), + new TouchBarButton({ + label: '⏯️' + }), + new TouchBarButton({ + label: '>' + }) + ], + change: i => presskey(win, keys[i]) + }); + + // This is the touchbar object, this combines everything with proper layout + const touchBar = new TouchBar({ + items: [ + new TouchBarScrubber({ + items: [songTitle], + continuous: false + }), + new TouchBarSpacer({ + size: 'flexible' + }), + buttons + ] + }); + + // If the page title changes, update touchbar and song title + win.on('page-title-updated', async () => { + songTitle.label = await getTitle(win); + win.setTouchBar(touchBar); + }); +}; From 3ea859de0988c705c7b228ea2c17a1662cf73168 Mon Sep 17 00:00:00 2001 From: Sem Vissscher Date: Wed, 16 Dec 2020 19:44:26 +0100 Subject: [PATCH 3/6] Added song image --- plugins/touchbar/back.js | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/plugins/touchbar/back.js b/plugins/touchbar/back.js index 558038921a..f4c156ef93 100644 --- a/plugins/touchbar/back.js +++ b/plugins/touchbar/back.js @@ -1,5 +1,5 @@ const { - TouchBar + TouchBar, nativeImage } = require('electron'); const { TouchBarButton, @@ -8,10 +8,14 @@ const { TouchBarSegmentedControl, TouchBarScrubber } = TouchBar; +const fetch = require('node-fetch'); -// This selects the title +// This selects the song title const titleSelector = '.title.style-scope.ytmusic-player-bar'; +// This selects the song image +const imageSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img'; + // These keys will be used to go backwards, pause and skip songs const keys = ['k', 'space', 'j']; @@ -31,12 +35,24 @@ const getTitle = win => { }); }; +// Grab the image src using the selector +const getImage = win => { + return win.webContents.executeJavaScript( + 'document.querySelector(\'' + imageSelector + '\').src' + ).catch(error => { + console.log(error); + }); +}; + module.exports = win => { // Songtitle label const songTitle = new TouchBarLabel({ label: '' }); + // This will store the song image once available + const songImage = {}; + // The song control buttons (keys to press are in the same order) const buttons = new TouchBarSegmentedControl({ mode: 'buttons', @@ -58,7 +74,7 @@ module.exports = win => { const touchBar = new TouchBar({ items: [ new TouchBarScrubber({ - items: [songTitle], + items: [songImage, songTitle], continuous: false }), new TouchBarSpacer({ @@ -70,7 +86,19 @@ module.exports = win => { // If the page title changes, update touchbar and song title win.on('page-title-updated', async () => { + // Set the song title songTitle.label = await getTitle(win); + + // Get image source + const imageSrc = await getImage(win); + + // Fetch and set song image + await fetch(imageSrc) + .then(response => response.buffer()) + .then(data => { + songImage.icon = nativeImage.createFromBuffer(data).resize({height: 23}); + }); + win.setTouchBar(touchBar); }); }; From d99aa0242fbcfc24a9b413f7043030451c2c6595 Mon Sep 17 00:00:00 2001 From: Sem Vissscher Date: Wed, 16 Dec 2020 19:54:44 +0100 Subject: [PATCH 4/6] Added like and dislike buttons --- plugins/touchbar/back.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/plugins/touchbar/back.js b/plugins/touchbar/back.js index f4c156ef93..21c8201aff 100644 --- a/plugins/touchbar/back.js +++ b/plugins/touchbar/back.js @@ -17,7 +17,7 @@ const titleSelector = '.title.style-scope.ytmusic-player-bar'; const imageSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img'; // These keys will be used to go backwards, pause and skip songs -const keys = ['k', 'space', 'j']; +const keys = ['k', 'space', 'j', '+', '_']; const presskey = (window, key) => { window.webContents.sendInputEvent({ @@ -58,13 +58,19 @@ module.exports = win => { mode: 'buttons', segments: [ new TouchBarButton({ - label: '<' + label: '⏮' }), new TouchBarButton({ label: '⏯️' }), new TouchBarButton({ - label: '>' + label: '⏭' + }), + new TouchBarButton({ + label: '👍' + }), + new TouchBarButton({ + label: '👎' }) ], change: i => presskey(win, keys[i]) From ba3779db0769556b11b8b4c6bf6db386753c323d Mon Sep 17 00:00:00 2001 From: Sem Vissscher Date: Wed, 16 Dec 2020 20:10:05 +0100 Subject: [PATCH 5/6] Updated comment - touchbar plugin --- plugins/touchbar/back.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/touchbar/back.js b/plugins/touchbar/back.js index 21c8201aff..9bead4d2af 100644 --- a/plugins/touchbar/back.js +++ b/plugins/touchbar/back.js @@ -16,7 +16,7 @@ const titleSelector = '.title.style-scope.ytmusic-player-bar'; // This selects the song image const imageSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img'; -// These keys will be used to go backwards, pause and skip songs +// These keys will be used to go backwards, pause, skip songs, like songs, dislike songs const keys = ['k', 'space', 'j', '+', '_']; const presskey = (window, key) => { From f71e0e9da99db3d5fe8068c8d3cee281a55d3982 Mon Sep 17 00:00:00 2001 From: Sem Vissscher Date: Wed, 16 Dec 2020 20:30:01 +0100 Subject: [PATCH 6/6] Switched like/dislike positions Switched like/dislike positions to match youtube musics layout --- plugins/touchbar/back.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/touchbar/back.js b/plugins/touchbar/back.js index 9bead4d2af..e165950fff 100644 --- a/plugins/touchbar/back.js +++ b/plugins/touchbar/back.js @@ -17,7 +17,7 @@ const titleSelector = '.title.style-scope.ytmusic-player-bar'; const imageSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img'; // These keys will be used to go backwards, pause, skip songs, like songs, dislike songs -const keys = ['k', 'space', 'j', '+', '_']; +const keys = ['k', 'space', 'j', '_', '+']; const presskey = (window, key) => { window.webContents.sendInputEvent({ @@ -67,10 +67,10 @@ module.exports = win => { label: '⏭' }), new TouchBarButton({ - label: '👍' + label: '👎' }), new TouchBarButton({ - label: '👎' + label: '👍' }) ], change: i => presskey(win, keys[i])