1. 新增桌面歌词功能；

2. 新增touch bar显示歌词功能；
FrzMtrsprt · Nov 27, 2023 · 6cdb6a6 · 6cdb6a6
1 parent a96e7da
commit 6cdb6a6
Show file tree

Hide file tree

Showing 15 changed files with 423 additions and 72 deletions.
diff --git a/public/osdLyric_index.html b/public/osdLyric_index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<html>
+
+<head>
+</head>
+
+<body>
+  <div id="root">
+  </div>
+</body>
+
+</html>
+
diff --git a/src/assets/icons/osd-lyrics.svg b/src/assets/icons/osd-lyrics.svg
diff --git a/src/background.js b/src/background.js
@@ -84,6 +84,7 @@ const closeOnLinux = (e, win, store) => {
 class Background {
   constructor() {
     this.window = null;
+    this.osdlyrics = null;
     this.ypmTrayImpl = null;
     this.store = new Store({
       windowWidth: {
@@ -159,12 +160,13 @@ class Background {
       this.window.webContents
         .executeJavaScript('window.yesplaymusic.player')
         .then(result => {
-          res.send({
+          const player = {
             currentTrack: result._isPersonalFM
               ? result._personalFMTrack
               : result._currentTrack,
             progress: result._progress,
-          });
+          };
+          res.send(player);
         });
     });
     this.expressApp = expressApp.listen(27232, '127.0.0.1');
@@ -264,6 +266,88 @@ class Background {
     }
   }
 
+  createOSDWindow() {
+    this.osdlyrics = new BrowserWindow({
+      x: this.store.get('osdlyrics.x_pos') || 0,
+      y: this.store.get('osdlyrics.y_pos') || 0,
+      width: this.store.get('osdlyrics.width') || 840,
+      height: this.store.get('osdlyrics.height') || 110,
+      transparent: true,
+      backgroundColor: '#00000000',
+      frame: false,
+      show: false,
+      skipTaskbar: true,
+      alwaysOnTop: true,
+      hiddenInMissionControl: true,
+      hasShadow: false,
+      title: 'YesPlayMusic-桌面歌词',
+      webPreferences: {
+        webSecurity: false,
+        nodeIntegration: true,
+        enableRemoteModule: true,
+        contextIsolation: false,
+      },
+    });
+
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+      // Load the url of the dev server if in development mode
+      this.osdlyrics.loadURL(
+        `${process.env.WEBPACK_DEV_SERVER_URL}/osdlyric.html`
+      );
+    } else {
+      createProtocol('app');
+      this.osdlyrics.loadURL('http://localhost:27232/osdlyric.html');
+    }
+  }
+
+  initOSDLyrics() {
+    const osdState = this.store.get('osdlyrics.show') || false;
+    if (osdState) {
+      this.showOSDLyrics();
+    }
+  }
+
+  toggleOSDLyrics() {
+    const osdState = this.store.get('osdlyrics.show') || false;
+    if (osdState) {
+      this.hideOSDLyrics();
+    } else {
+      this.showOSDLyrics();
+    }
+  }
+
+  receiveLyric(arg) {
+    if (this.osdlyrics) {
+      this.osdlyrics.webContents.send('lyric', arg);
+    }
+  }
+
+  sendLyricIndex(idx) {
+    if (this.osdlyrics) {
+      this.osdlyrics.webContents.send('index', idx);
+    }
+  }
+
+  showOSDLyrics() {
+    this.store.set('osdlyrics.show', true);
+    if (!this.osdlyrics) {
+      this.createOSDWindow();
+      this.handleOSDEvents();
+    }
+  }
+
+  hideOSDLyrics() {
+    this.store.set('osdlyrics.show', false);
+    if (this.osdlyrics) {
+      this.osdlyrics.close();
+    }
+  }
+
+  resizeOSDLyrics(height) {
+    const width = this.store.get('osdlyrics.width') || 840;
+    this.osdlyrics.setSize(width, height);
+  }
+
   checkForUpdates() {
     if (isDevelopment) return;
     log('checkForUpdates');
@@ -282,7 +366,7 @@ class Background {
         .then(result => {
           if (result.response === 0) {
             shell.openExternal(
-              'https://github.com/stark81/YesPlayMusic/releases/'
+              'https://github.com/stark81/my_yesplaymusic/releases/'
             );
           }
         });
@@ -293,6 +377,32 @@ class Background {
     });
   }
 
+  handleOSDEvents() {
+    this.osdlyrics.once('ready-to-show', () => {
+      const osdState = this.store.get('osdlyrics.show') || false;
+      if (osdState) {
+        this.osdlyrics.showInactive();
+      }
+    });
+
+    this.osdlyrics.on('closed', () => {
+      log('OSD close event');
+      this.osdlyrics = null;
+    });
+
+    this.osdlyrics.on('resized', () => {
+      let { height, width } = this.osdlyrics.getBounds();
+      this.store.set('osdlyrics.width', width);
+      this.store.set('osdlyrics.height', height);
+    });
+
+    this.osdlyrics.on('moved', () => {
+      var pos = this.osdlyrics.getPosition();
+      this.store.set('osdlyrics.x_pos', pos[0]);
+      this.store.set('osdlyrics.y_pos', pos[1]);
+    });
+  }
+
   handleWindowEvents() {
     this.window.once('ready-to-show', () => {
       log('window ready-to-show event');
@@ -385,14 +495,21 @@ class Background {
       });
       this.handleWindowEvents();
 
+      this.initOSDLyrics();
+
       // create tray
       if (isCreateTray) {
         this.trayEventEmitter = new EventEmitter();
         this.ypmTrayImpl = createTray(this.window, this.trayEventEmitter);
       }
 
       // init ipcMain
-      initIpcMain(this.window, this.store, this.trayEventEmitter);
+      initIpcMain(this.window, this.store, this.trayEventEmitter, {
+        resizeOSDLyrics: height => this.resizeOSDLyrics(height),
+        toggleOSDLyrics: () => this.toggleOSDLyrics(),
+        receiveLyric: lyric => this.receiveLyric(lyric),
+        sendLyricIndex: index => this.sendLyricIndex(index),
+      });
 
       // set proxy
       const proxyRules = this.store.get('proxy');
@@ -414,6 +531,7 @@ class Background {
 
       // create touch bar
       const createdTouchBar = createTouchBar(this.window);
+      log('createdTouchBar = ', createdTouchBar);
       if (createdTouchBar) this.window.setTouchBar(createdTouchBar);
 
       // register global shortcuts

diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -101,6 +101,13 @@
       <div class="right-control-buttons">
         <div class="blank"></div>
         <div class="container" @click.stop>
+          <button-icon
+            v-if="osdState"
+            :title="$t('player.osdLyrics')"
+            :class="{ active: settings.showOsdLyric }"
+            @click.native="toggleOSDLyrics"
+            ><svg-icon icon-class="osd-lyrics" style="transform: scale(1.2)"
+          /></button-icon>
           <button-icon
             :title="$t('player.nextUp')"
             :class="{
@@ -181,6 +188,10 @@
 </template>
 
 <script>
+const electron =
+  process.env.IS_ELECTRON === true ? window.require('electron') : null;
+const ipcRenderer =
+  process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
 import { mapState, mapMutations, mapActions } from 'vuex';
 import '@/assets/css/slider.css';
 
@@ -217,10 +228,22 @@ export default {
         ? '音源来自酷我音乐'
         : '';
     },
+    osdState() {
+      return Boolean(ipcRenderer);
+    },
   },
   methods: {
     ...mapMutations(['toggleLyrics']),
     ...mapActions(['showToast', 'likeATrack']),
+    toggleOSDLyrics() {
+      if (ipcRenderer) {
+        this.$store.commit('updateSettings', {
+          key: 'showOsdLyric',
+          value: !this.settings.showOsdLyric,
+        });
+        ipcRenderer.send('toggleOSDLyrics');
+      }
+    },
     playPrevTrack() {
       this.player.playPrevTrack();
     },

diff --git a/src/electron/ipcMain.js b/src/electron/ipcMain.js
@@ -1,11 +1,12 @@
-import { app, dialog, globalShortcut, ipcMain, nativeTheme } from 'electron';
+import { app, dialog, globalShortcut, ipcMain } from 'electron';
 import UNM from '@unblockneteasemusic/rust-napi';
 import { registerGlobalShortcut } from '@/electron/globalShortcut';
 import cloneDeep from 'lodash/cloneDeep';
 import shortcuts from '@/utils/shortcuts';
 import { createMenu } from './menu';
 import { isCreateTray, isMac } from '@/utils/platform';
 
+let lyrics;
 const clc = require('cli-color');
 const log = text => {
   console.log(`${clc.blueBright('[ipcMain.js]')} ${text}`);
@@ -133,14 +134,7 @@ function parseSourceStringToList(executor, sourceString) {
     });
 }
 
-function watchNativeTheme(win) {
-  nativeTheme.on('updated', () => {
-    const isDarkMode = nativeTheme.shouldUseDarkColors;
-    win.send('changeTheme', isDarkMode);
-  });
-}
-
-export function initIpcMain(win, store, trayEventEmitter) {
+export function initIpcMain(win, store, trayEventEmitter, lrc) {
   // WIP: Do not enable logging as it has some issues in non-blocking I/O environment.
   // UNM.enableLogging(UNM.LoggingType.ConsoleEnv);
   const unmExecutor = new UNM.Executor();
@@ -280,12 +274,31 @@ export function initIpcMain(win, store, trayEventEmitter) {
     );
   });
 
-  ipcMain.on('removeProxy', (event, arg) => {
+  ipcMain.on('removeProxy', () => {
     log('removeProxy');
     win.webContents.session.setProxy({});
     store.set('proxy', '');
   });
 
+  ipcMain.on('resizeOSDLyrics', (event, arg) => {
+    lrc.resizeOSDLyrics(arg);
+  });
+
+  ipcMain.on('toggleOSDLyrics', () => {
+    lrc.toggleOSDLyrics();
+  });
+  ipcMain.on('sendLyrics', (_, arg) => {
+    lyrics = arg;
+    lrc.receiveLyric(arg);
+    if (isCreateTray) trayEventEmitter.emit('lyricsReceived', arg[0]);
+  });
+  ipcMain.handle('onloadLyric', () => {
+    return lyrics;
+  });
+  ipcMain.on('lyricIndex', (_, index) => {
+    lrc.sendLyricIndex(index);
+  });
+
   ipcMain.on('switchGlobalShortcutStatusTemporary', (e, status) => {
     log('switchGlobalShortcutStatusTemporary');
     if (status === 'disable') {
@@ -315,8 +328,8 @@ export function initIpcMain(win, store, trayEventEmitter) {
     globalShortcut.unregisterAll();
     registerGlobalShortcut(win, store);
   });
+
   if (isCreateTray) {
-    watchNativeTheme(win);
     ipcMain.on('updateTrayTooltip', (_, title) => {
       trayEventEmitter.emit('updateTooltip', title);
     });
@@ -326,16 +339,9 @@ export function initIpcMain(win, store, trayEventEmitter) {
     ipcMain.on('updateTrayLikeState', (_, isLiked) => {
       trayEventEmitter.emit('updateLikeState', isLiked);
     });
-    ipcMain.on('sendLyrics', (_, lyrics) => {
-      trayEventEmitter.emit('lyricsReceived', lyrics);
-    });
     ipcMain.on('windowShow', () => {
       win.show();
     });
-    ipcMain.handle('getNativeTheme', () => {
-      const isDarkMode = nativeTheme.shouldUseDarkColors;
-      return isDarkMode;
-    });
     ipcMain.on('switchShowTray', (_, ops) => {
       trayEventEmitter.emit('ifShowTray', ops);
     });