support global media keys for prev, next, play, pause and stop

index.html

@@ -17,6 +17,32 @@
         }
       }, 500)
 
+      const ipcRenderer = require('electron').ipcRenderer;
+      ipcRenderer.on('playback-control', function(event, arg) {
+        var doc = document.querySelector("iframe").contentDocument
+
+        switch (arg) {
+          case "MediaPlayPause":
+            var playBtn = doc.querySelector("button.js-play")
+            var pauseBtn = doc.querySelector("button.js-pause")
+            if (pauseBtn.style.display == "none") playBtn.click()
+            else pauseBtn.click()
+            break;
+
+          case "MediaNextTrack":
+            doc.querySelector("button.js-next").click();
+            break;
+
+          case "MediaPreviousTrack":
+            doc.querySelector("button.js-previous").click();
+            break;
+
+          case "MediaStop":
+            doc.querySelector("button.js-pause").click();
+            break;
+        }
+      });
+
     </script>
   </body>
 </html>

main.js

@@ -53,7 +53,17 @@ app.on('ready', function() {
   mainWindow.loadUrl('file://' + __dirname + '/index.html');
 
   // Emitted when the window is closed.
-  mainWindow.on('closed', function() {    
+  mainWindow.on('closed', function() {
     mainWindow = null;
   });
+
+  console.log("APP READY")
+
+  // handle media keys
+  var routeShortcuts = ["MediaPreviousTrack", "MediaNextTrack", "MediaPlayPause", "MediaStop"]
+  routeShortcuts.forEach(shortcut => {    
+    globalShortcut.register(shortcut, function() {
+      mainWindow.webContents.send("playback-control", shortcut)
+    })
+  })
 });