mac platform supports lrc in top bar

package.json

@@ -29,6 +29,7 @@
     "axios": "^0.18.0",
     "electron-squirrel-startup": "^1.0.0",
     "lodash": "^4.17.11",
+    "lyrics.js": "^0.4.2",
     "mkdirp": "^0.5.1",
     "moment": "^2.24.0",
     "qiniu": "^7.2.1",

src/actions/CurrentAction.ts

@@ -60,7 +60,7 @@ export class CurrentAction {
             dispatch({ type: CURRENT, action: UPDATE_PROPERTY, path: 'current', data: next });
             dispatch({ type: CURRENT, action: UPDATE_PROPERTY, path: 'list', data: playlist });
 
-            if (!get(song, 'user.image') && get(song, 'user.id') !== -1) {
+            if (get(song, 'dynamicWords') === void 0) {
                 song = await SongAction.getSong(song.id, song.kind);
             }
 

src/actions/SongAction.ts

@@ -40,7 +40,8 @@ export class SongAction {
                 id: data.user.ID,
                 nickname: data.user.NN,
                 image: data.user.I
-            }
+            },
+            dynamicWords: data.dynamicWords ? data.dynamicWords : '',
         };
     }
 

src/constants/Events.ts

@@ -12,3 +12,4 @@ export const OPEN_LOGIN_WINDOW = 'OPEN_LOGIN_WINDOW';
 export const LOGOUT_EVENT = 'LOGOUT_EVENT';
 export const LOGIN_SUCCESS_EVENT = 'LOGIN_SUCCESS_EVENT';
 export const SYNC_CACHE_EVENT = 'SYNC_CACHE_EVENT';
+export const SYNC_LRC_EVENT = 'SYNC_LRC_EVENT';

src/interfaces/ISong.ts

@@ -11,4 +11,5 @@ export interface ISong {
     hqurl?: string;
     squrl?: string;
     lqurl?: string;
+    dynamicWords?: string;
 }

src/main/lrcTray.ts

@@ -0,0 +1,13 @@
+import { Tray, BrowserWindow } from 'electron';
+import { resolve } from "path";
+
+export const initLrcTray = (window: BrowserWindow) => {
+    const platform = process.platform;
+    if (platform === 'darwin') {
+        const trayObj = new Tray(resolve(__dirname, '../../src/assets/tray/empty.png'));
+        trayObj.setTitle('');
+        return trayObj;
+    }
+
+    return void 0;
+};

src/main/main.ts

@@ -8,7 +8,7 @@ import {
     LOGOUT_EVENT,
     OPEN_LOGIN_WINDOW,
     SEND_STORE_CACHE_EVENT,
-    SYNC_CACHE_EVENT
+    SYNC_CACHE_EVENT, SYNC_LRC_EVENT
 } from "../constants/Events";
 import { REDUX_STORE } from "../constants/Store";
 import { LoginWindow } from "./windows/LoginWindow";
@@ -72,6 +72,15 @@ app.on('ready', async () => {
             store.sync();
         }, 0);
     });
+    ipcMain.on(SYNC_LRC_EVENT, (evt, lrc) => {
+        if (!lrc) {
+            lrc = { text: '' };
+        }
+        const tray = MainWindow.getLrcTray();
+        if (tray) {
+            tray.setTitle(lrc.text);
+        }
+    })
 });
 
 // Quit when all windows are closed.

src/main/windows/MainWindow.ts

@@ -2,11 +2,13 @@ import { BrowserWindow, Tray, TouchBar } from "electron";
 import { initTouchBar } from "../touch-bar";
 import { initTray } from "../tray";
 import { initAppMenu } from "../menu";
+import { initLrcTray } from "../lrcTray";
 
 export class MainWindow {
     private static instance: BrowserWindow;
     private static tray: Tray;
     private static touchBar: TouchBar;
+    private static lrcTray: Tray;
 
     private constructor() {
     }
@@ -19,7 +21,11 @@ export class MainWindow {
         return this.touchBar;
     }
 
-    public static create() {
+    public static getLrcTray() {
+        return this.lrcTray;
+    }
+
+    public static create(): MainWindow {
         return this.instance = this.createWindow();
     }
 
@@ -80,6 +86,7 @@ export class MainWindow {
 
         this.touchBar = initTouchBar(mainWindow);
         this.tray = initTray(mainWindow);
+        this.lrcTray = initLrcTray(mainWindow);
         initAppMenu(mainWindow);
 
         return mainWindow;

src/modules/core/Player.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { get } from 'lodash';
+import { ipcRenderer } from 'electron';
 import { connect } from 'react-redux';
+import * as Lyrics from 'lyrics.js';
 import { Progress, Timer } from 'react-soundplayer/components';
 import * as styles from './Player.module.less';
 import * as defaultUserImage from '../../assets/i5sing.png';
@@ -15,6 +17,7 @@ import { ISong } from "../../interfaces/ISong";
 import { Link } from "react-router-dom";
 import { toMap } from "../../utils/DataUtil";
 import { PlaySongs } from "./PlaySongs";
+import { SYNC_LRC_EVENT } from "../../constants/Events";
 
 export interface IPlayerProps {
     current?: number;
@@ -40,6 +43,7 @@ class Player extends React.Component<IPlayerProps, IPlayerState> {
         preload: false,
         visible: false,
     };
+    private lrc = null;
 
     componentDidMount(): void {
         this.props.soundCloudAudio.on('ended', () => {
@@ -53,6 +57,15 @@ class Player extends React.Component<IPlayerProps, IPlayerState> {
             console.log('play interrupted');
             this.next();
         });
+        this.props.soundCloudAudio.on('timeupdate', () => {
+            if (this.lrc) {
+                const index = this.lrc.select(this.props.currentTime);
+                const text = this.lrc.getLyric(index);
+                ipcRenderer.send(SYNC_LRC_EVENT, text);
+            } else {
+                ipcRenderer.send(SYNC_LRC_EVENT, { text: this.props.currentTime < 3 ? '暂无歌词' : '' });
+            }
+        })
     }
 
     next(index?: number) {
@@ -100,6 +113,12 @@ class Player extends React.Component<IPlayerProps, IPlayerState> {
             icon: song.user.image || defaultUserImage,
             silent: true
         });
+
+        if (song.dynamicWords) {
+            this.lrc = new Lyrics(song.dynamicWords);
+        } else {
+            this.lrc = null;
+        }
     }
 
     love(hasLoved: boolean, song: ISong) {

yarn.lock

@@ -3662,6 +3662,10 @@ lru-queue@0.1:
   dependencies:
     es5-ext "~0.10.2"
 
+lyrics.js@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/lyrics.js/-/lyrics.js-0.4.2.tgz#648c7da30b2dec9533fd5d63b80299e15e7caf8b"
+
 macos-alias@~0.2.5:
   version "0.2.11"
   resolved "https://registry.yarnpkg.com/macos-alias/-/macos-alias-0.2.11.tgz#feeea6c13ba119814a43fc43c470b31e59ef718a"