feat: support lyrics scrolling

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

@@ -5,10 +5,26 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  background-color: white;
+  padding: 0 40px;
+  background-color: #fafafa;
   &-left {
-    width: 50%;
+    width: 30%;
     height: 100%;
+    margin-right: 8%;
+    margin-left: 20%;
+    &-pic {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 386px;
+      height: 386px;
+      > div {
+        width: 70%;
+        height: 70%;
+        border-radius: 50%;
+        background-size: contain;
+      }
+    }
   }
   &-right {
     flex: 1;
@@ -18,11 +34,19 @@
       height: 100%;
       overflow: hidden;
       &-contanier {
-        padding: 10px;
+        padding: 50% 10px;
         div {
           height: 50px;
           line-height: 50px;
         }
+        .lyrice-active {
+          font-weight: bold;
+          font-size: 16px;
+          color: var(--primary-theme-text);
+        }
+        .lyrice-placeholder {
+          height: 50%;
+        }
       }
       .v-easy-scroll {
         height: 100%;

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

@@ -2,15 +2,17 @@ import {
   defineComponent,
   PropType,
   toRefs,
-  ref,
   Transition,
   defineAsyncComponent,
-  watch,
-  watchEffect
+  watchEffect,
+  computed,
+  ref,
+  nextTick
 } from 'vue'
 import { uesModuleStore } from '@/hooks/index'
 import { TeleportToAny } from '@/components/teleport-layout/index'
 import { NAMESPACED, State, Getter } from '../../module'
+import classnams from 'classnames'
 import './index.less'
 
 const prefix = 'song-details'
@@ -22,30 +24,75 @@ export const PlayLyrice = defineComponent({
       type: Boolean as PropType<boolean>,
       required: true,
       default: false
-    },
-    lyrice: {
-      type: Array as PropType<Getter['musicLyrics']>,
-      required: true,
-      default: []
     }
   },
   setup(props) {
-    const { visible, lyrice } = toRefs(props)
+    const { visible } = toRefs(props)
+    const disabled = ref(true)
+    const contanier = ref()
+    const offset = ref(0)
+
+    const { useState, useGetter } = uesModuleStore<State, Getter>(NAMESPACED)
+
+    const lyrice = computed(() => useGetter('musicLyrics'))
+    const { currentTime } = toRefs(useState())
+
+    const url = computed(() => {
+      const state = useState()
+      return state.music?.al.picUrl
+    })
+
+    const index = computed(() => {
+      return lyrice.value.findIndex((value, index) => {
+        return (
+          currentTime.value >= value.time &&
+          currentTime.value < lyrice.value[index + 1]?.time
+        )
+      })
+    })
+
+    watchEffect(() => {
+      if (visible.value) {
+        nextTick(() => {
+          offset.value = contanier.value.clientHeight / 2 - 50
+          disabled.value = false
+        })
+      }
+    })
 
     return () => (
       <TeleportToAny
         v-slots={{
           default: () => (
             <Transition name="visible">
               <div v-show={visible.value} class={`${prefix}`}>
-                <div class={`${prefix}-left`}></div>
+                <div class={`${prefix}-left`}>
+                  <div class={`${prefix}-left-pic`}>
+                    <div style={{ backgroundImage: `url(${url.value})` }}></div>
+                  </div>
+                  <div class={`${prefix}-left-extra`}></div>
+                </div>
                 <div class={`${prefix}-right`}>
                   <div class={`${prefix}-right--title`}></div>
-                  <div class={`${prefix}-right--lyrice`}>
-                    <ve-scroll>
+                  <div ref={contanier} class={`${prefix}-right--lyrice`}>
+                    <ve-scroll
+                      duartion={200}
+                      to={index.value}
+                      disabled={disabled.value}
+                      offset={offset.value}
+                      onStart={() => (disabled.value = true)}
+                      onStop={() => (disabled.value = false)}
+                    >
                       <ul class={`${prefix}-right--lyrice-contanier`}>
-                        {lyrice.value.map(item => (
-                          <div data-time={item.time}>{item.lyric}</div>
+                        {lyrice.value.map((item, i) => (
+                          <div
+                            class={classnams({
+                              'lyrice-active': index.value === i
+                            })}
+                            data-time={item.time}
+                          >
+                            {item.lyric}
+                          </div>
                         ))}
                       </ul>
                     </ve-scroll>
@@ -63,6 +110,7 @@ export const PlayLyrice = defineComponent({
 // Fixed the to property of Teleport component could not find Element
 export const AsyncComponent = defineAsyncComponent({
   loader: async () => {
+    // Parameter penetration
     return <PlayLyrice></PlayLyrice>
   }
 })

src/pages/footer/component/music-controller/index.tsx

@@ -36,20 +36,15 @@ export const MusicControl = defineComponent({
       currentTime
     } = toRefs(useState())
 
-    const duration = useGetter('duration')
-
     const durationTime = computed(() => {
+      const duration = useGetter('duration')
       return formatTime(duration || 0, 's')
     })
 
     const currentTimeFormat = computed(() => {
       return formatTime(currentTime.value, 's')
     })
 
-    watchEffect(() => {
-      playingIcon.value = playing.value ? 'pause' : 'play'
-    })
-
     const handlePlayPaues = () => {
       if (playing.value) {
         useMutations(Mutations.PAUES_MUSIC)
@@ -92,6 +87,7 @@ export const MusicControl = defineComponent({
 
     const progress = () => {
       if (audioElement.value) {
+        const duration = useGetter('duration')
         const timeRanges = audioElement.value.buffered
         const start = timeRanges.start(timeRanges.length - 1)
         const end = timeRanges.end(timeRanges.length - 1)
@@ -113,6 +109,12 @@ export const MusicControl = defineComponent({
         audioElement.value.addEventListener('progress', progress)
         audioElement.value.addEventListener('timeupdate', timeUpdate)
         audioElement.value.addEventListener('ended', ended)
+        audioElement.value.addEventListener('playing', () => {
+          playingIcon.value = 'pause'
+        })
+        audioElement.value.addEventListener('pause', () => {
+          playingIcon.value = 'play'
+        })
         audioElement.value.addEventListener('canplay', () => {
           useMutations(Mutations.CAN_PLAY, true)
           useMutations(Mutations.PLAY_MUSIC)

src/pages/footer/sage.ts

@@ -42,9 +42,17 @@ export const getters: GetterTree<State, RootState> = {
       .trim()
       .split('\n')
       .map(item => {
+        let time: RegExpMatchArray | null | string = item.match(/\[.+\]/)
+        let lyric: RegExpMatchArray | null | string = item.match(/\].+/)
+        if (time) {
+          time = time[0].slice(1, -1)
+        }
+        if (lyric) {
+          lyric = lyric[0].slice(1).trim()
+        }
         return {
-          time: timeTos(item.slice(1, 10)),
-          lyric: item.slice(12)
+          time: timeTos(time as string),
+          lyric: lyric
         }
       })
       .filter(item => item.time)

src/pages/footer/view/index.tsx

@@ -9,7 +9,6 @@ import {
 } from 'vue'
 import { NAMESPACED, State, LayoutActions } from '@/layout/module'
 import { uesModuleStore } from '@/hooks/index'
-import { timeTos } from '@/utils/index'
 import { MusicControl } from '../component/music-controller'
 import { VolumeAndHistory } from '../component/volume-history/index'
 import {
@@ -22,6 +21,11 @@ import {
   State as MainState,
   Mutations as MainMutations
 } from '@/pages/main/module'
+import {
+  NAMESPACED as LayoutNamespace,
+  State as LayoutState,
+  Size
+} from '@/layout/module'
 import { AsyncComponent } from '../component/lyrice/index'
 import classnames from 'classnames'
 import './index.less'
@@ -33,19 +37,25 @@ export const Footer = defineComponent({
   name: 'Footer',
   setup() {
     const visibleLyrice = ref(false)
+
     const { useState, useMutations } = uesModuleStore<State>(NAMESPACED)
     const FooterModule = uesModuleStore<FooterState, FooterGetter>(
       FooterNamespace
     )
     const MainModule = uesModuleStore<MainState>(MainNamespace)
+    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
 
     const footerState = FooterModule.useState()
-    const lyrice = computed(() => FooterModule.useGetter('musicLyrics'))
+    const layoutState = LayoutModule.useState()
 
     const { rebackSize } = toRefs(useState())
 
+    const canShowSongDetail = computed(
+      () => footerState.music && layoutState.screenSize !== Size.SM
+    )
+
     const unfoldLyrice = () => {
-      if (footerState.music) {
+      if (canShowSongDetail.value) {
         visibleLyrice.value = !visibleLyrice.value
         MainModule.useMutations(
           MainMutations.IS_SHOW_COVER_CONTAINER,
@@ -60,15 +70,15 @@ export const Footer = defineComponent({
           <div class="footer-music-thumbnail">
             <div
               class={classnames('music-pic', {
-                'music-pic-active': footerState.music
+                'music-pic-active': canShowSongDetail.value
               })}
               style={{
                 backgroundImage: `url(${footerState.music?.al.picUrl})`
               }}
               onClick={unfoldLyrice}
             ></div>
           </div>
-          <Com visible={visibleLyrice.value} lyrice={lyrice.value}></Com>
+          <Com visible={visibleLyrice.value}></Com>
           {/* Failed to locate Teleport target with selector "#cover-container" */}
           {/* {<PlayLyrice visible={visibleLyrice.value}></PlayLyrice>} */}
         </div>

src/utils/index.ts

@@ -12,7 +12,11 @@ export const formatTime = (time: number, unit: OpUnitType): string => {
 
 export const timeTos = (time: string): number => {
   dayjs.extend(customParseFormat)
-  return dayjs(time, 'mm:ss.SSS').diff(dayjs('00:00.000', 'mm:ss.SSS')) / 1000
+  return (
+    dayjs(time, ['mm:ss.SSS', 'mm:ss.SS']).diff(
+      dayjs('00:00.000', 'mm:ss.SSS')
+    ) / 1000
+  )
 }
 
 export function hasOwnProperty<X extends {}, Y extends PropertyKey>(

yarn.lock

@@ -16357,10 +16357,10 @@ uuid@^8.0.0:
   resolved "https://registry.npm.taobao.org/uuid/download/uuid-8.3.1.tgz?cache=0&sync_timestamp=1601826526166&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
   integrity sha1-K6LmygANpg/OWhlpVKskETHgWjE=
 
-v-easy-components@^2.0.0-beta.11:
-  version "2.0.0-beta.11"
-  resolved "https://registry.npm.taobao.org/v-easy-components/download/v-easy-components-2.0.0-beta.11.tgz#5e777703416f7a55fe1d7ac66090a876f735508f"
-  integrity sha1-Xnd3A0FvelX+HXrGYJCodvc1UI8=
+v-easy-components@2.0.0-beta.12:
+  version "2.0.0-beta.12"
+  resolved "https://registry.npm.taobao.org/v-easy-components/download/v-easy-components-2.0.0-beta.12.tgz?cache=0&sync_timestamp=1604651612960&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv-easy-components%2Fdownload%2Fv-easy-components-2.0.0-beta.12.tgz#c2ad99cb164cd15d5af8db4555418ec350871cb4"
+  integrity sha1-wq2ZyxZM0V1a+NtFVUGOw1CHHLQ=
   dependencies:
     "@popperjs/core" "^2.4.4"
     core-js "^3.6.5"