feat: lyrics display after minimized

src/components/teleport-layout/index.tsx

@@ -16,16 +16,23 @@ export const TeleportToAny = defineComponent({
     visible: {
       type: Boolean as PropType<boolean>,
       default: false
+    },
+    class: {
+      type: String as PropType<string>,
+      default: ''
     }
   },
   setup(props, context) {
     const slot = (context.slots as unknown) as Slots
     return () => (
       <Teleport to={props.container}>
         <div
-          class={classnames('cover-container', {
-            'cover-container-show': props.visible
-          })}
+          class={
+            props.class ||
+            classnames('cover-container', {
+              'cover-container-show': props.visible
+            })
+          }
         >
           {slot.default()}
         </div>

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

@@ -0,0 +1,24 @@
+.lyrice-flash {
+  height: 100%;
+  width: 100%;
+  transform: matrix(1, 0, 0, 1, 0, 0);
+  text-align: center;
+  > div {
+    position: absolute;
+    left: 100%;
+    width: 100%;
+  }
+  div&-active {
+    left: 0;
+  }
+  &-contanier {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    bottom: 120px;
+    height: 100px;
+    width: 784px;
+    font-size: 56px;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,57 @@
+import { defineComponent, computed, toRefs } from 'vue'
+import { uesModuleStore } from '@/hooks/index'
+import { TeleportToAny } from '@/components/teleport-layout/index'
+import {
+  NAMESPACED as LayoutNamespace,
+  State as LayoutState,
+  Size
+} from '@/layout/module'
+import classnames from 'classnames'
+import { NAMESPACED, State, Getter } from '../../module'
+import './index.less'
+
+export const LyriceFlash = defineComponent({
+  name: 'LyriceFlash',
+  setup() {
+    const { useState, useGetter } = uesModuleStore<State, Getter>(NAMESPACED)
+    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
+
+    const { screenSize } = toRefs(LayoutModule.useState())
+    const { currentTime } = toRefs(useState())
+
+    const lyrice = computed(() =>
+      useGetter('musicLyrics').filter(value => value.lyric)
+    )
+    const visible = computed(() => screenSize.value === Size.SM)
+
+    const index = computed(() => {
+      if (visible.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 () => (
+      <TeleportToAny container="body" class="lyrice-flash-contanier">
+        <div v-show={visible.value} class="lyrice-flash">
+          {lyrice.value.map((item, i) => (
+            <div
+              data-time={item.time}
+              class={classnames({
+                'lyrice-flash-active': index.value === i
+              })}
+            >
+              {item.lyric}
+            </div>
+          ))}
+        </div>
+      </TeleportToAny>
+    )
+  }
+})

src/pages/footer/component/lyrice/index.tsx

@@ -47,18 +47,19 @@ export const PlayLyrice = defineComponent({
 
     const index = computed(() => {
       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
-      })
+      return (
+        lyrice.value.findIndex((value, index) => {
+          return currentTime.value >= value.time && len - 1 === index
+            ? true
+            : currentTime.value < lyrice.value[index + 1]?.time
+        }) || 0
+      )
     })
 
     const updateOffset = () => {
       nextTick(() => {
         offset.value = contanier.value.clientHeight / 2 - 50
         disabled.value = !visible.value
-        console.log(offset.value, disabled.value)
       })
     }
 
@@ -69,7 +70,9 @@ export const PlayLyrice = defineComponent({
     })
 
     const resize = () => {
-      updateOffset()
+      if (visible.value) {
+        updateOffset()
+      }
     }
 
     onMounted(() => {

src/pages/footer/view/index.tsx

@@ -1,12 +1,4 @@
-import {
-  defineComponent,
-  ref,
-  toRefs,
-  resolveDynamicComponent,
-  resolveComponent,
-  watchEffect,
-  computed
-} from 'vue'
+import { defineComponent, ref, toRefs, computed } from 'vue'
 import { NAMESPACED, State, LayoutActions } from '@/layout/module'
 import { uesModuleStore } from '@/hooks/index'
 import { MusicControl } from '../component/music-controller'
@@ -27,6 +19,7 @@ import {
   Size
 } from '@/layout/module'
 import { AsyncComponent } from '../component/lyrice/index'
+import { LyriceFlash } from '../component/lyrice-flash/index'
 import classnames from 'classnames'
 import './index.less'
 
@@ -87,6 +80,7 @@ export const Footer = defineComponent({
             </div>
           </div>
           <Com visible={visibleLyrice.value}></Com>
+          <LyriceFlash></LyriceFlash>
           {/* Failed to locate Teleport target with selector "#cover-container" */}
           {/* {<PlayLyrice visible={visibleLyrice.value}></PlayLyrice>} */}
         </div>

src/utils/index.ts

@@ -48,6 +48,11 @@ export function on(container: any, type: any, listener: any): void {
   container.addEventListener(type, listener)
 }
 
+export function off<T extends keyof ElectronWindowEventMap>(
+  container: Window,
+  type: T,
+  listener: (ev: ElectronWindowEventMap[T]) => void
+): void
 export function off<T extends keyof WindowEventMap>(
   container: Window,
   type: T,