feat: support flash lyrics display in electron(50%)

package.json

@@ -65,7 +65,7 @@
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.2",
     "dayjs": "^1.9.4",
-    "electron": "^10.1.3",
+    "electron": "^10.1.5",
     "electron-devtools-installer": "^3.1.0",
     "electron-icon-builder": "^1.0.2",
     "eslint": "^6.7.2",
@@ -89,7 +89,7 @@
     "typescript": "^4.0.3",
     "url-loader": "^4.1.1",
     "v-easy-components": "2.0.0-beta.12",
-    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4"
+    "vue-cli-plugin-electron-builder": "^2.0.0-rc.5"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

src/app/app.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs } from 'vue'
 import { ErrorBoundary } from '@/components/error-boundary/index'
 import { Container } from '@/layout/container'
 import { FullScreen } from '@/components/full-screen'
@@ -11,10 +11,10 @@ import './app.less'
 export default defineComponent({
   name: 'APP',
   setup() {
-    const { meta } = useRoute()
+    const { meta } = toRefs(useRoute())
     return () => (
       <ErrorBoundary ref="ErrorBoundary">
-        {meta.full ? <FullScreen></FullScreen> : <Container></Container>}
+        {meta.value.full ? <FullScreen></FullScreen> : <Container></Container>}
       </ErrorBoundary>
     )
   }

src/background.ts

@@ -20,6 +20,7 @@ function createWindow() {
   win = new BrowserWindow({
     width: width / 1.5,
     height: height / 1.5,
+    useContentSize: true,
     frame: false,
     titleBarStyle: 'hidden',
     show: false,
@@ -54,6 +55,10 @@ function createWindow() {
     win = null
   })
 
+  win.on('unresponsive', (e: any) => {
+    console.log(e)
+  })
+
   eventInit(win)
 }
 

src/components/process-bar/index.tsx

@@ -67,9 +67,11 @@ export const ProgressBar = defineComponent({
 
     const setIndicatorX = (x: number, w: number) => {
       const width = toFixed((x / w) * 100, 6)
-      const format = width > 100 ? 100 : width < 0 ? 0 : width
-      if (onCurrent?.value) {
-        onCurrent.value(format)
+      if (width) {
+        const format = width > 100 ? 100 : width < 0 ? 0 : width
+        if (onCurrent?.value) {
+          onCurrent.value(format)
+        }
       }
     }
 

src/electron/event/action-types.ts

@@ -5,3 +5,8 @@ export const enum Action {
   CLOSE_WINDOW = 'CLOSE_WINDOW',
   CREATE_WINDOW = 'CREATE_WINDOW'
 }
+
+export const enum Lyrice {
+  LYRICE_UPDATE = 'LYRICE_UPDATE',
+  LYRICE_UPDATE_RENDER = 'LYRICE_UPDATE_RENDER'
+}

src/electron/event/ipc-browser.ts

@@ -0,0 +1,10 @@
+import { IpcRenderer } from '@/electron/event/ipc-renderer'
+
+export const importIpc = () => {
+  return import('@/electron/event/ipc-renderer').then((v: IpcRenderer) => {
+    return {
+      sendAsyncIpcRendererEvent: v.sendAsyncIpcRendererEvent,
+      sendSyncIpcRendererEvent: v.sendSyncIpcRendererEvent
+    }
+  })
+}

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

@@ -1,5 +1,5 @@
-import { ipcMain, IpcMainEvent, BrowserWindow } from 'electron'
-import { Action } from '../action-types'
+import { ipcMain, IpcMainEvent, BrowserWindow, screen } from 'electron'
+import { Action, Lyrice } from '../action-types'
 
 export const onIpcMainEvent = (win: BrowserWindow) => {
   let bounds = win.getBounds()
@@ -17,4 +17,33 @@ export const onIpcMainEvent = (win: BrowserWindow) => {
   ipcMain.on(Action.CLOSE_WINDOW, (event: IpcMainEvent, arg) => {
     win.close()
   })
+  ipcMain.on(Action.CREATE_WINDOW, (event: IpcMainEvent, arg) => {
+    const { width, height } = screen.getPrimaryDisplay().workAreaSize
+    const syrice = new BrowserWindow({
+      width: 724,
+      height: 100,
+      x: width / 2 - 724 / 2,
+      y: height - 100 * 2,
+      show: false,
+      // frame: false,
+      titleBarStyle: 'hidden',
+      webPreferences: {
+        nodeIntegration: true
+      }
+    })
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+      console.log(process.env.WEBPACK_DEV_SERVER_URL)
+      syrice.loadURL(
+        process.env.WEBPACK_DEV_SERVER_URL + 'electron-lyrice-flash'
+      )
+    }
+    syrice.once('ready-to-show', () => {
+      syrice && syrice.show()
+    })
+  })
+  // ipcMain.on(Lyrice.LYRICE_UPDATE, (event: IpcMainEvent, arg) => {
+  //   console.log('主窗口接受到数据')
+  //   console.log('主窗口发送数据到子窗口')
+  //   event.reply(Lyrice.LYRICE_UPDATE_RENDER, arg)
+  // })
 }

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

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

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

@@ -0,0 +1,100 @@
+import { defineComponent, computed, toRefs, watch, watchEffect } from 'vue'
+import { uesModuleStore } from '@/hooks/index'
+import { toFixed } from '@/utils/index'
+import { ENV } from '@/interface/app'
+import {
+  NAMESPACED as LayoutNamespace,
+  State as LayoutState,
+  Size
+} from '@/layout/module'
+import { NAMESPACED, State, Getter, Mutations } from '../../module'
+import { Platform } from '@/config/build'
+import LyriceFlash from './index'
+import './index.less'
+
+const { VUE_APP_PLATFORM } = window as ENV
+
+export const BrowserLyriceFlash = defineComponent({
+  name: 'BrowserLyriceFlash',
+  setup() {
+    const { useState, useGetter, useMutations } = uesModuleStore<State, Getter>(
+      NAMESPACED
+    )
+    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
+
+    const { currentTime, playing, visibleFlash, musicUrl } = toRefs(useState())
+    const { screenSize } = toRefs(LayoutModule.useState())
+
+    if (VUE_APP_PLATFORM === Platform.ELECTRON) {
+      useMutations(Mutations.VISIBLE_FLASH, true)
+    }
+
+    const lyrice = computed(() =>
+      useGetter('musicLyrics').filter(value => value.lyric)
+    )
+
+    watch(screenSize, v => {
+      if (musicUrl.value) {
+        useMutations(Mutations.VISIBLE_FLASH, v === Size.SM)
+      }
+    })
+
+    const index = computed(() => {
+      if (visibleFlash.value) {
+        const len = lyrice.value.length
+        return (
+          lyrice.value.findIndex((value, index) => {
+            return currentTime.value >= value.time && len - 1 === index
+              ? true
+              : currentTime.value < lyrice.value[index + 1]?.time
+          }) || 0
+        )
+      }
+      return 0
+    })
+
+    const flashMagic = computed(() => {
+      if (visibleFlash.value) {
+        const cur = lyrice.value[index.value]
+        // const schedule = cur.duration - (currentTime.value - cur.time)
+        const d = toFixed(cur?.duration, 2)
+        if (d) {
+          return {
+            animationDuration: `${d}s`
+          }
+        } else {
+          return {
+            animationDuration: ''
+          }
+        }
+      }
+      return {
+        animationDuration: ''
+      }
+    })
+
+    watchEffect(() => {
+      useMutations(Mutations.UPDATE_ELECTRON_LYRICE, {
+        flashMagic: flashMagic.value,
+        index: index.value,
+        playing: playing.value,
+        lyrice: lyrice.value
+      })
+    })
+
+    return () => (
+      <>
+        {VUE_APP_PLATFORM === Platform.BROWSER && (
+          <LyriceFlash
+            screenSize={screenSize.value}
+            visibleFlash={visibleFlash.value}
+            lyrice={lyrice.value}
+            index={index.value}
+            playing={playing.value}
+            flashMagic={flashMagic.value}
+          ></LyriceFlash>
+        )}
+      </>
+    )
+  }
+})

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

@@ -0,0 +1,49 @@
+import { defineComponent, reactive } from 'vue'
+import LyriceFlash from './index'
+import { Size } from '@/layout/module'
+import { Lyrics } from '@/pages/footer/module'
+import { ipcRenderer } from 'electron'
+import { Lyrice } from '@/electron/event/action-types'
+
+export interface PostData {
+  screenSize: Size
+  visibleFlash: boolean
+  lyrice: Lyrics[]
+  index: number
+  playing: boolean
+  flashMagic: {
+    animationDuration: string
+  }
+}
+
+export default defineComponent({
+  name: 'Lyrice',
+  setup() {
+    const postData: PostData = reactive({
+      screenSize: Size.SM,
+      visibleFlash: true,
+      lyrice: [],
+      index: 0,
+      playing: true,
+      flashMagic: {
+        animationDuration: ''
+      }
+    })
+
+    ipcRenderer.on(Lyrice.LYRICE_UPDATE_RENDER, (event, any) => {
+      console.log('子窗口接受到主窗口的数据')
+      console.log(any)
+    })
+
+    return () => (
+      <LyriceFlash
+        screenSize={postData.screenSize}
+        visibleFlash={postData.visibleFlash}
+        lyrice={postData.lyrice}
+        index={postData.index}
+        playing={postData.playing}
+        flashMagic={postData.flashMagic}
+      ></LyriceFlash>
+    )
+  }
+})

src/pages/footer/component/lyrice-flash/index.less

@@ -5,6 +5,8 @@
   overflow: hidden;
   transform: matrix(1, 0, 0, 1, 0, 0);
   user-select: none;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
   > div {
     position: absolute;
     left: 100%;
@@ -47,4 +49,10 @@
     width: 784px;
     font-size: 56px;
   }
+  &-electron {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
 }