Added support for controlling playback with media keys.

TODO.md

@@ -4,4 +4,4 @@
 * Add option to show lyrics "subtitle-style".
 * ~Add application icon~.
 * Add proper error handling where needed.
-* Add support for using media keys to control playback.
+* ~Add support for using media keys to control playback.~

index.html

@@ -22,7 +22,6 @@
 <script>
     const {ipcRenderer} = require('electron');
     var webview = document.getElementById("myweb");
-
     // When everything is ready, trigger the events without problems
     webview.addEventListener("dom-ready", function() {
     var path = require('path');
@@ -79,6 +78,18 @@
     });
     // alert-something
     webview.send("initialize");
+    ipcRenderer.on("media:playpause", function () {
+        webview.send("media:playpause");
+    })
+    // ipcRenderer.on("media:stop", function () {
+    //     webview.send("media:stop");
+    // })
+    ipcRenderer.on("media:next", function () {
+        webview.send("media:next");
+    })
+    ipcRenderer.on("media:previous", function () {
+        webview.send("media:previous");
+    })
 
     // change-text-element manipulating the DOM
     // webview.send("change-text-element",{

index.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron')
 const { mmGetLyrics } = require('./musixMatch.js')
 const { autoUpdater } = require("electron-updater")
 
@@ -25,6 +25,41 @@ autoUpdater.checkForUpdatesAndNotify()
       // when you should delete the corresponding element.
       win = null
     })
+
+    var registered = globalShortcut.register('medianexttrack', function () {
+      win.webContents.send("media:next");
+    });
+    if (!registered) {
+      console.log('medianexttrack registration failed');
+    } else {
+      console.log('medianexttrack registration bound!');
+    }
+
+    // registered = globalShortcut.register('mediastop', function () {
+    //   win.webContents.send("media:stop");
+    // });
+    // if (!registered) {
+    //   console.log('mediastop registration failed');
+    // } else {
+    //   console.log('mediastop registration bound!');
+    // }
+
+    registered = globalShortcut.register('mediaprevioustrack', function () {
+      win.webContents.send("media:previous");
+    });
+    if (!registered) {
+      console.log('mediaprevioustrack registration failed');
+    } else {
+      console.log('mediaprevioustrack registration bound!');
+    }
+    registered = globalShortcut.register('mediaplaypause', function () {
+      win.webContents.send("media:playpause");
+    });
+    if (!registered) {
+      console.log('mediaplaypause registration failed');
+    } else {
+      console.log('mediaplaypause registration bound!');
+    }
   }
 
   // This method will be called when Electron has finished
@@ -72,8 +107,4 @@ autoUpdater.checkForUpdatesAndNotify()
     if (win === null) {
       createWindow()
     }
-  })
-
-  // In this file you can include the rest of your app's specific main process
-  // code. You can also put them in separate files and require them here.
-
+  })

injector.js

@@ -8,6 +8,18 @@ ipcRenderer.on('request', function(){
 ipcRenderer.on("mm:set-icon", function (event, data) {
     document.getElementById("musix-match-lyrics-btn").src = data;
 })
+ipcRenderer.on("media:playpause", function () {
+    document.getElementById("play-pause-button").click();
+})
+// ipcRenderer.on("media:stop", function () {
+//     document.getElementById("play-pause-button").click();
+// })
+ipcRenderer.on("media:next", function () {
+    document.querySelector("#left-controls > div > paper-icon-button.next-button.style-scope.ytmusic-player-bar").click();
+})
+ipcRenderer.on("media:previous", function () {
+    document.querySelector("#left-controls > div > paper-icon-button.previous-button.style-scope.ytmusic-player-bar").click();
+})
 ipcRenderer.on("initialize",function(event,data){
     // Set up events for getting playback
     // Gets the current progress through the current track in seconds.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youtube-music-desktop",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An unofficial YouTube Music app for desktop.",
   "main": "index.js",
   "author": "Martin Aaby Finnerup",