fix: sentense mode highlight control

eatgrass · Jan 3, 2024 · 267b46c · 267b46c
1 parent 20bbc35
commit 267b46c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/LyricsMarkdownRender.ts b/src/LyricsMarkdownRender.ts
@@ -24,6 +24,7 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
     private autoScroll: boolean
     private sentenceMode: boolean
     private lyricsRenderer: LyricsRenderer
+    private pauseHl: boolean = false
 
     constructor(
         plugin: LyricsPlugin,
@@ -47,12 +48,12 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
         let time = target?.dataset?.time
         if (time !== undefined) {
             const sec = parseInt(time) / 1000
+            this.updateTimestamp(sec, true)
             this.player?.seek(sec)
-            this.updateTimestamp(sec)
         }
     }
 
-    private updateTimestamp = (sec: number) => {
+    private updateTimestamp = (sec: number, seek: boolean = false) => {
         const lyrics = this.container.querySelectorAll(
             '.lyrics-line[data-time]',
         ) as NodeListOf<HTMLElement>
@@ -64,16 +65,26 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
                 if (
                     this.sentenceMode &&
                     !this.player.paused() &&
-                    this.currentHL != -1
+                    this.currentHL != -1 &&
+                    !seek
                 ) {
                     this.player.pause()
-                    return
+                    this.pauseHl = true
                 }
             }
+            this.currentHL = hl
+        }
+
+        if (!this.pauseHl) {
+            if (this.currentHL >= 0) {
+                let hlels = this.container.findAll('.lyrics-highlighted')
+                hlels.forEach((el) => {
+                    el.removeClass('lyrics-highlighted')
+                })
+            }
 
             if (hl >= 0) {
                 const hlel = lyrics.item(hl)
-                console.log(hl, hlel)
                 if (hlel) {
                     hlel.addClass('lyrics-highlighted')
                     if (this.autoScroll) {
@@ -84,12 +95,6 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
                     }
                 }
             }
-
-            if (this.currentHL >= 0) {
-                lyrics.item(this.currentHL)?.removeClass('lyrics-highlighted')
-            }
-
-            this.currentHL = hl
         }
     }
 
@@ -309,6 +314,9 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
                         props: {
                             src,
                             timeupdate: this.updateTimestamp,
+                            onPlay: () => {
+                                this.pauseHl = false
+                            },
                         },
                     })
                     fragment.append(playerEl)

diff --git a/src/Player.svelte b/src/Player.svelte
@@ -3,6 +3,7 @@ export let src: string
 export let timeupdate: (time: number) => void
 let player: HTMLAudioElement
 export let time: number
+export let onPlay: () => void
 export function seek(t: number) {
     time = t
     play()
@@ -33,6 +34,12 @@ const _timeupdate = () => {
         timeupdate(time)
     }
 }
+
+const _play = () => {
+    if (onPlay) {
+        onPlay()
+    }
+}
 </script>
 
 <div class="audio-wrapper">
@@ -43,6 +50,7 @@ const _timeupdate = () => {
         controls
         bind:currentTime={time}
         on:timeupdate={_timeupdate}
+        on:play={_play}
     ></audio>
 </div>