perf: lyric code optimization

src/electron/event/action-types.ts

@@ -6,7 +6,14 @@ export const enum Action {
   CREATE_WINDOW = 'CREATE_WINDOW'
 }
 
-export const enum Lyrice {
+export const enum LyriceAction {
   LYRICE_UPDATE = 'LYRICE_UPDATE',
   LYRICE_UPDATE_RENDER = 'LYRICE_UPDATE_RENDER'
 }
+
+export const enum UpdateType {
+  UPDATE_INDEX = 'UPDATE_INDEX',
+  UPDATE_LYRICE = 'UPDATE_LYRICE',
+  UPDATE_PLAYING = 'UPDATE_PLAYING',
+  UPDATE_MAGIC = 'UPDATE_MAGIC'
+}

src/electron/event/ipc-main/index.ts

@@ -1,9 +1,9 @@
 import { ipcMain, IpcMainEvent, BrowserWindow, screen } from 'electron'
-import { Action, Lyrice } from '../action-types'
+import { Action, LyriceAction, UpdateType } from '../action-types'
 
 export const onIpcMainEvent = (win: BrowserWindow) => {
   let bounds = win.getBounds()
-  let syrice: BrowserWindow
+  let syrice: null | BrowserWindow
   ipcMain.on(Action.MINIMIZE_WINDOW, (event: IpcMainEvent, arg) => {
     win.minimize()
   })
@@ -47,11 +47,23 @@ export const onIpcMainEvent = (win: BrowserWindow) => {
         syrice.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'lyrice')
       }
       syrice.once('ready-to-show', () => {
-        syrice.show()
+        syrice && syrice.show()
+      })
+      syrice.once('closed', () => {
+        syrice = null
       })
     }
   })
-  ipcMain.on(Lyrice.LYRICE_UPDATE, (event: IpcMainEvent, arg) => {
-    syrice && syrice.webContents.send(Lyrice.LYRICE_UPDATE_RENDER, arg)
-  })
+  ipcMain.on(
+    LyriceAction.LYRICE_UPDATE,
+    (
+      event: IpcMainEvent,
+      arg: {
+        type: UpdateType
+        payload: any
+      }
+    ) => {
+      syrice && syrice.webContents.send(LyriceAction.LYRICE_UPDATE_RENDER, arg)
+    }
+  )
 }

src/electron/event/ipc-renderer/index.ts

@@ -6,28 +6,26 @@ and then process some things that the main process can handle (for example, chan
 */
 
 import { ipcRenderer } from 'electron'
-import { Action, Lyrice } from '../action-types'
+import { Action, LyriceAction, UpdateType } from '../action-types'
 
 type Message = any
+type ActionType = Action | LyriceAction | UpdateType
 
 export function sendAsyncIpcRendererEvent(
-  action: Action | Lyrice,
+  action: ActionType,
   message?: Message
 ) {
   ipcRenderer.send(action, message)
 }
 
 export function sendSyncIpcRendererEvent(
-  action: Action | Lyrice,
+  action: ActionType,
   message?: Message
 ) {
   return ipcRenderer.sendSync(action, message)
 }
 
 export interface IpcRenderer {
-  sendAsyncIpcRendererEvent: (
-    action: Action | Lyrice,
-    message?: Message
-  ) => void
-  sendSyncIpcRendererEvent: <T>(action: Action | Lyrice, message?: Message) => T
+  sendAsyncIpcRendererEvent: (action: ActionType, ...message: Message[]) => void
+  sendSyncIpcRendererEvent: <T>(action: ActionType, ...message: Message) => T
 }

src/pages/footer/component/lyrice-flash/browser-lyrice.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed, toRefs, watch, watchEffect } from 'vue'
+import { defineComponent, computed, toRefs, watch } from 'vue'
 import { uesModuleStore } from '@/hooks/index'
 import { toFixed } from '@/utils/index'
 import { ENV } from '@/interface/app'
@@ -10,6 +10,8 @@ import {
 import { NAMESPACED, State, Getter, Mutations } from '../../module'
 import { Platform } from '@/config/build'
 import LyriceFlash from './index'
+import { ipcUpdateLyrice } from './electron-lyrice'
+import { UpdateType } from '@/electron/event/action-types'
 import './index.less'
 
 const { VUE_APP_PLATFORM } = window as ENV
@@ -73,13 +75,17 @@ export const BrowserLyriceFlash = defineComponent({
       }
     })
 
-    watchEffect(() => {
-      useMutations(Mutations.UPDATE_ELECTRON_LYRICE, {
-        flashMagic: flashMagic.value,
-        index: index.value,
-        playing: playing.value,
-        lyrice: lyrice.value
-      })
+    watch(flashMagic, v => {
+      ipcUpdateLyrice(UpdateType.UPDATE_MAGIC, v)
+    })
+    watch(index, v => {
+      ipcUpdateLyrice(UpdateType.UPDATE_INDEX, v)
+    })
+    watch(lyrice, v => {
+      ipcUpdateLyrice(UpdateType.UPDATE_LYRICE, v)
+    })
+    watch(playing, v => {
+      ipcUpdateLyrice(UpdateType.UPDATE_PLAYING, v)
     })
 
     return () => (

src/pages/footer/component/lyrice-flash/electron-lyrice.tsx

@@ -1,9 +1,11 @@
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, toRaw } from 'vue'
 import LyriceFlash from './index'
 import { Size } from '@/layout/module'
 import { Lyrics } from '@/pages/footer/module'
+import { LyriceAction, UpdateType } from '@/electron/event/action-types'
+import { ErrorBoundary } from '@/components/error-boundary/index'
+import { importIpc } from '@/electron/event/ipc-browser'
 import { ipcRenderer } from 'electron'
-import { Lyrice } from '@/electron/event/action-types'
 
 export interface PostData {
   screenSize: Size
@@ -16,6 +18,15 @@ export interface PostData {
   }
 }
 
+export const ipcUpdateLyrice = (type: UpdateType, payload?: any) => {
+  importIpc().then(event => {
+    event.sendAsyncIpcRendererEvent(LyriceAction.LYRICE_UPDATE, {
+      type: type,
+      payload: toRaw(payload)
+    })
+  })
+}
+
 export default defineComponent({
   name: 'Lyrice',
   setup() {
@@ -36,24 +47,49 @@ export default defineComponent({
       }
     })
 
-    ipcRenderer.on(Lyrice.LYRICE_UPDATE_RENDER, (event, any) => {
-      postData.index = any.index
-      if (any.lyrice?.length) {
-        postData.lyrice = any.lyrice
+    ipcRenderer.on(
+      LyriceAction.LYRICE_UPDATE_RENDER,
+      (
+        event,
+        arg: {
+          type: UpdateType
+          payload: any
+        }
+      ) => {
+        const { type, payload } = arg
+        if (payload === undefined) return
+        switch (type) {
+          case UpdateType.UPDATE_INDEX:
+            postData.index = payload
+            break
+          case UpdateType.UPDATE_LYRICE:
+            if (payload.length) {
+              postData.lyrice = payload
+            }
+            break
+          case UpdateType.UPDATE_MAGIC:
+            postData.flashMagic = payload
+            break
+          case UpdateType.UPDATE_PLAYING:
+            postData.playing = payload
+            break
+          default:
+            break
+        }
       }
-      postData.playing = any.playing
-      postData.flashMagic = any.flashMagic
-    })
+    )
 
     return () => (
-      <LyriceFlash
-        screenSize={postData.screenSize}
-        visibleFlash={postData.visibleFlash}
-        lyrice={postData.lyrice}
-        index={postData.index}
-        playing={postData.playing}
-        flashMagic={postData.flashMagic}
-      ></LyriceFlash>
+      <ErrorBoundary ref="ErrorBoundary">
+        <LyriceFlash
+          screenSize={postData.screenSize}
+          visibleFlash={postData.visibleFlash}
+          lyrice={postData.lyrice}
+          index={postData.index}
+          playing={postData.playing}
+          flashMagic={postData.flashMagic}
+        ></LyriceFlash>
+      </ErrorBoundary>
     )
   }
 })

src/pages/footer/sage.ts

@@ -1,16 +1,8 @@
-import { toRaw } from 'vue'
 import { ActionTree, MutationTree, GetterTree } from 'vuex'
 import { isNumber, timeTos, toFixed } from '@/utils/index'
 import { getSongUrl, getSongDetail, getLyric } from './api/index'
 import { State, Getter } from './state'
 import { RootState } from '@/store/index'
-import { PostData } from './component/lyrice-flash/electron-lyrice'
-import { importIpc } from '@/electron/event/ipc-browser'
-import { Lyrice } from '@/electron/event/action-types'
-import { ENV } from '@/interface/app'
-import { Platform } from '@/config/build'
-
-const { VUE_APP_PLATFORM } = window as ENV
 
 export const enum Actions {
   SET_MUSIC = 'SET_MUSIC_URL',
@@ -26,8 +18,7 @@ export const enum Mutations {
   UPDATE_CURRENT_TIME = 'UPDATE_CURRENT_TIME',
   CAN_PLAY = 'CAN_PLAY',
   SET_VOLUME = 'SET_VOLUME',
-  VISIBLE_FLASH = 'VISIBLE_FLASH',
-  UPDATE_ELECTRON_LYRICE = 'UPDATE_electron_Lyrice'
+  VISIBLE_FLASH = 'VISIBLE_FLASH'
 }
 const dominateMediaSession = (
   title: string,
@@ -192,19 +183,5 @@ export const mutations: MutationTree<State> = {
   },
   [Mutations.VISIBLE_FLASH](state, visible: boolean) {
     state.visibleFlash = visible
-  },
-  [Mutations.UPDATE_ELECTRON_LYRICE](state, playond: PostData) {
-    state.electronLyrice = {
-      ...state.electronLyrice,
-      ...playond
-    }
-    if (VUE_APP_PLATFORM === Platform.ELECTRON) {
-      importIpc().then(event => {
-        event.sendAsyncIpcRendererEvent(
-          Lyrice.LYRICE_UPDATE,
-          toRaw(state.electronLyrice)
-        )
-      })
-    }
   }
 }