Merge pull request #20 from eNkru/feature/media-keyboard

Feature/media keyboard

Author: eNkru

package.json

@@ -23,10 +23,11 @@
   "author": "Howard Ju <howard.ju@outlook.com>",
   "license": "MIT",
   "devDependencies": {
-    "electron": "~1.7.10",
+    "electron": "~1.8.2",
     "electron-builder": "^19.8.0"
   },
   "dependencies": {
+    "dbus-native": "^0.2.5",
     "electron-dl": "^1.10.0",
     "electron-json-storage": "^4.0.2",
     "electron-settings": "^3.1.1",

src/controller/app-tray-controller.js

@@ -24,7 +24,7 @@ class AppTray {
     //set the context menu
     const context = Menu.buildFromTemplate([
       {label: Locale.TRAY_SHOW_MAIN, click: () => this.togglePlayerWindow()},
-      {label: Locale.TRAY_PLAY_PAUSE, click: () => this.togglePlay()},
+      {label: Locale.TRAY_PLAY_PAUSE, click: () => this.playerController.toggle()},
       {label: Locale.TRAY_NEXT, click: () => this.playerController.next()},
       {label: Locale.TRAY_PREVIOUS, click: () => this.playerController.previous()},
       {label: 'Separator', type: 'separator'},
@@ -61,12 +61,6 @@ class AppTray {
     }
   }
 
-  togglePlay() {
-    this.playerController.window.webContents.executeJavaScript("document.querySelector('.pause-btn')", (result) => {
-      result ? this.playerController.pause() : this.playerController.play();
-    });
-  }
-
   toggleLyrics() {
     if (!this.lyricsController.window.isVisible()) {
       this.playerController.addPlaytimeObserver();

src/controller/player-controller.js

@@ -1,4 +1,5 @@
-const {app, BrowserWindow, Notification, ipcMain} = require('electron');
+const {app, BrowserWindow, Notification, ipcMain, TouchBar, nativeImage} = require('electron');
+const {TouchBarLabel, TouchBarButton} = TouchBar
 const urlLib = require('url');
 const http = require('http');
 const path = require('path');
@@ -74,6 +75,9 @@ class XiamiPlayer {
     // load xiami player page.
     this.window.loadURL(playerUrl);
 
+    // set the touch bar.
+    this.window.setTouchBar(this.createTouchBar());
+
     // inject the custom layout.
     this.window.webContents.on('dom-ready', () => {
 
@@ -160,6 +164,12 @@ class XiamiPlayer {
     this.window.webContents.executeJavaScript("document.querySelector('.play-btn').dispatchEvent(new MouseEvent('click'));");
   }
 
+  toggle() {
+    this.window.webContents.executeJavaScript("document.querySelector('.pause-btn')", (result) => {
+      result ? this.pause() : this.play();
+    });
+  }
+
   next() {
     this.window.webContents.executeJavaScript("document.querySelector('.next-btn').dispatchEvent(new MouseEvent('click'));");
   }
@@ -168,6 +178,26 @@ class XiamiPlayer {
     this.window.webContents.executeJavaScript("document.querySelector('.prev-btn').dispatchEvent(new MouseEvent('click'));");
   }
 
+  /**
+   * Create the touch bar for macOS
+   */
+  createTouchBar() {
+    return new TouchBar([
+      new TouchBarButton({
+        icon: nativeImage.createFromNamedImage('NSTouchBarRewindTemplate', [-1, 0, 1]),
+        click: () => this.previous()
+      }),
+      new TouchBarButton({
+        icon: nativeImage.createFromNamedImage('NSTouchBarPlayPauseTemplate', [-1, 0, 1]),
+        click: () => this.toggle()
+      }),
+      new TouchBarButton({
+        icon: nativeImage.createFromNamedImage('NSTouchBarFastForwardTemplate', [-1, 0, 1]),
+        click: () => this.next()
+      })
+    ]);
+  }
+
   /**
    * Add the listener to monitor the play time.
    */

src/main.js

@@ -1,5 +1,6 @@
-const {app} = require('electron');
+const {app, globalShortcut} = require('electron');
 const fs = require('fs-extra')
+const dbus = require('dbus-native');
 const PlayerController = require('./controller/player-controller');
 const SettingsController = require('./controller/settings-controller');
 const AppTray = require('./controller/app-tray-controller');
@@ -40,6 +41,9 @@ class ElectronXiami {
       this.createSettings();
       this.createPlayer(this.lyricsController);
       this.createTray(this.settingsController, this.lyricsController, this.playerController);
+
+      this.registerMediaKeys('gnome');
+      this.registerMediaKeys('mate');
     });
 
     // Quit when all windows are closed.
@@ -84,6 +88,41 @@ class ElectronXiami {
   createTray(settingController, lyricsController, playerController) {
     this.tray = new AppTray(playerController, settingController, lyricsController);
   }
+
+  registerMediaKeys(desktopEnvironment) {
+    try {
+      const sessionBus = dbus.sessionBus();
+      sessionBus.getService(`org.${desktopEnvironment}.SettingsDaemon.MediaKeys`).getInterface(
+        `/org/${desktopEnvironment}/SettingsDaemon/MediaKeys`, 
+        `org.${desktopEnvironment}.SettingsDaemon.MediaKeys`, (error, mediaKeys) => {
+          if(!error) {
+            mediaKeys.on('MediaPlayerKeyPressed', (n, keyName) => {
+              switch (keyName) {
+                case 'Next': this.playerController.next(); return;
+                case 'Previous': this.playerController.previous(); return;
+                case 'Play': this.playerController.toggle(); return;
+                case 'Stop': this.playerController.pause(); return;
+              }
+            });
+  
+            mediaKeys.GrabMediaPlayerKeys('org.gnome.SettingsDaemon.MediaKeys', 0);
+          } else {
+            this.addMediaGlobalShortcut();
+          }
+        }
+      )
+    } catch (error) {
+      this.addMediaGlobalShortcut();
+    }
+  }
+
+  addMediaGlobalShortcut() {
+    globalShortcut.register('MediaPlayPause', () => this.playerController.toggle());
+    globalShortcut.register('MediaNextTrack', () => this.playerController.next());
+    globalShortcut.register('MediaPreviousTrack', () => this.playerController.previous());
+    globalShortcut.register('MediaStop', () => this.playerController.pause());
+  }
+
 }
 
 new ElectronXiami().init();