feat: support click on the lyrics to jump to the specified location

packages/api/app.js

@@ -96,7 +96,7 @@ fs.readdirSync(path.join(__dirname, 'module'))
     })
   })
 
-const port = process.env.PORT || 3000
+const port = process.env.PORT || 32768
 const host = process.env.HOST || ''
 
 app.server = app.listen(port, host, () => {

src/pages/footer/components/lyrics-embed/index.less

@@ -84,6 +84,7 @@
           line-height: 50px;
           text-overflow: ellipsis;
           white-space: nowrap;
+          cursor: pointer;
         }
         .lyrics-active {
           font-size: 16px;

src/pages/footer/components/lyrics-embed/index.tsx

@@ -16,7 +16,12 @@ import { on, off, maxChildrenScollWidth } from '@/utils/index'
 import { TeleportToAny } from '@/components/teleport-layout/index'
 import { useFooterModule, useLayoutModule, useDownloadModule } from '@/modules'
 import { Image } from '@/components/image'
-import { LayoutSize, FooterMutations, DownloadActions } from '@/interface'
+import {
+  LayoutSize,
+  FooterMutations,
+  DownloadActions,
+  Lyrics
+} from '@/interface'
 import { useSubscribe } from '@/shared/subscribe'
 import debounce from 'lodash/debounce'
 import classnams from 'classnames'
@@ -113,6 +118,10 @@ export const PlayLyrics = defineComponent({
       }
     }
 
+    const handleFlyTime = (item: Lyrics) => {
+      useMutations(FooterMutations.CURRENT_TIME, item.time)
+    }
+
     onMounted(() => {
       on(window, 'resize', resize)
     })
@@ -184,6 +193,7 @@ export const PlayLyrics = defineComponent({
                                   'lyrics-active': index.value === i
                                 })}
                                 data-time={item.time}
+                                onClick={() => handleFlyTime(item)}
                               >
                                 {item.lyric}
                               </div>

src/pages/footer/sage.ts

@@ -263,6 +263,7 @@ export const mutations: MutationTree<FooterState> = {
   [FooterMutations.CURRENT_TIME](state, time: number) {
     if (state.audioElement && isNumber(time)) {
       state.audioElement.currentTime = time
+      state.currentTime = time
     }
   },
   [FooterMutations.UPDATE_CURRENT_TIME](state, time: number) {