Add desktop lyrics feature

src/App.vue

@@ -21,6 +21,7 @@
     <transition v-if="enablePlayer" name="slide-up">
       <Lyrics v-show="showLyrics" />
     </transition>
+    <DesktopLyricsBridge v-if="isElectron" />
   </div>
 </template>
 
@@ -35,6 +36,7 @@ import { ipcRenderer } from './electron/ipcRenderer';
 import { isAccountLoggedIn, isLooseLoggedIn } from '@/utils/auth';
 import Lyrics from './views/lyrics.vue';
 import { mapState } from 'vuex';
+import DesktopLyricsBridge from './components/DesktopLyricsBridge.vue';
 
 export default {
   name: 'App',
@@ -46,6 +48,7 @@ export default {
     ModalNewPlaylist,
     Lyrics,
     Scrollbar,
+    DesktopLyricsBridge,
   },
   data() {
     return {

src/api/track.js

@@ -8,6 +8,8 @@ import {
   getLyricFromCache,
 } from '@/utils/db';
 
+const lyricRequestCache = new Map();
+
 /**
  * 获取音乐 url
  * 说明 : 使用歌单详情接口后 , 能得到的音乐的 id, 但不能得到的音乐 url, 调用此接口, 传入的音乐 id( 可多个 , 用逗号隔开 ), 可以获取对应的音乐的 url,
@@ -74,6 +76,10 @@ export function getTrackDetail(ids) {
  * @param {number} id - 音乐 id
  */
 export function getLyric(id) {
+  if (lyricRequestCache.has(id)) {
+    return lyricRequestCache.get(id);
+  }
+
   const fetchLatest = () => {
     return request({
       url: '/lyric',
@@ -87,11 +93,20 @@ export function getLyric(id) {
     });
   };
 
-  fetchLatest();
+  const lyricRequest = getLyricFromCache(id)
+    .then(result => {
+      if (result) {
+        fetchLatest().catch(() => null);
+        return result;
+      }
+      return fetchLatest();
+    })
+    .finally(() => {
+      setTimeout(() => lyricRequestCache.delete(id), 5000);
+    });
 
-  return getLyricFromCache(id).then(result => {
-    return result ?? fetchLatest();
-  });
+  lyricRequestCache.set(id, lyricRequest);
+  return lyricRequest;
 }
 
 /**

src/assets/icons/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import SvgIcon from '@/components/SvgIcon';
 
-Vue.component('svg-icon', SvgIcon);
+Vue.component('SvgIcon', SvgIcon);
 const requireAll = requireContext => requireContext.keys().map(requireContext);
 const req = require.context('./', true, /\.svg$/);
 requireAll(req);

src/background.js

@@ -1,5 +1,5 @@
 'use strict';
-import {
+const {
   app,
   protocol,
   BrowserWindow,
@@ -8,7 +8,7 @@ import {
   globalShortcut,
   nativeTheme,
   screen,
-} from 'electron';
+} = require('electron');
 import {
   isWindows,
   isMac,
@@ -17,16 +17,16 @@ import {
   isCreateTray,
   isCreateMpris,
 } from '@/utils/platform';
-import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
+import createProtocol from 'vue-cli-plugin-electron-builder/lib/createProtocol';
 import { startNeteaseMusicApi } from './electron/services';
 import { initIpcMain } from './electron/ipcMain.js';
 import { createMenu } from './electron/menu';
 import { createTray } from '@/electron/tray';
 import { createTouchBar } from './electron/touchBar';
 import { createDockMenu } from './electron/dockMenu';
 import { registerGlobalShortcut } from './electron/globalShortcut';
+import { createDesktopLyricsManager } from './electron/desktopLyrics';
 import { autoUpdater } from 'electron-updater';
-import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
 import { EventEmitter } from 'events';
 import express from 'express';
 import expressProxy from 'express-http-proxy';
@@ -94,6 +94,7 @@ class Background {
     this.neteaseMusicAPI = null;
     this.expressApp = null;
     this.willQuitApp = !isMac;
+    this.desktopLyrics = null;
 
     this.init();
   }
@@ -130,6 +131,9 @@ class Background {
   async initDevtools() {
     // Install Vue Devtools extension
     try {
+      const devtoolsInstaller = require('electron-devtools-installer');
+      const installExtension = devtoolsInstaller.default || devtoolsInstaller;
+      const { VUEJS_DEVTOOLS } = devtoolsInstaller;
       await installExtension(VUEJS_DEVTOOLS);
     } catch (e) {
       console.error('Vue Devtools failed to install:', e.toString());
@@ -396,7 +400,13 @@ class Background {
       }
 
       // init ipcMain
-      initIpcMain(this.window, this.store, this.trayEventEmitter);
+      this.desktopLyrics = createDesktopLyricsManager(this.window, this.store);
+      initIpcMain(
+        this.window,
+        this.store,
+        this.trayEventEmitter,
+        this.desktopLyrics
+      );
 
       // set proxy
       const proxyRules = this.store.get('proxy');
@@ -422,7 +432,16 @@ class Background {
 
       // register global shortcuts
       if (this.store.get('settings.enableGlobalShortcut') !== false) {
-        registerGlobalShortcut(this.window, this.store);
+        registerGlobalShortcut(this.window, this.store, this.desktopLyrics);
+      }
+
+      const desktopLyricsSettings = this.store.get('settings.desktopLyrics');
+      if (
+        desktopLyricsSettings &&
+        desktopLyricsSettings.enabled &&
+        desktopLyricsSettings.visible
+      ) {
+        this.desktopLyrics.show();
       }
 
       // try to start osdlyrics process on start
@@ -468,6 +487,9 @@ class Background {
     });
 
     app.on('quit', () => {
+      if (this.desktopLyrics) {
+        this.desktopLyrics.destroy();
+      }
       this.expressApp.close();
     });
 
@@ -477,7 +499,7 @@ class Background {
     });
 
     if (!isMac) {
-      app.on('second-instance', (e, cl, wd) => {
+      app.on('second-instance', () => {
         if (this.window) {
           this.window.show();
           if (this.window.isMinimized()) {