improve: the effect when two lyrics overlap

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aquavox",
-  "version": "2.3.3",
+  "version": "2.5.1",
   "private": false,
   "module": "index.ts",
   "type": "module",

packages/core/components/lyrics/lyricLine.svelte

@@ -4,11 +4,16 @@
     import type { LyricPos } from './type';
     import type { Spring } from '@core/graphics/spring/spring';
 
+    const viewportWidth = document.documentElement.clientWidth;
+    const blurRatio = viewportWidth > 640 ? 1 : 1.4;
+
     export let line: ScriptItem;
     export let index: number;
     export let debugMode: Boolean;
     export let lyricClick: Function;
     export let progress: number;
+    export let currentLyricIndex: number;
+    export let scrolling: boolean;
 
     let ref: HTMLDivElement;
     let clickMask: HTMLSpanElement;
@@ -75,9 +80,21 @@
         opacity = isCurrent ? 1 : 0.36;
     };
 
-    export const setBlur = (blur: number) => {
+    $: {
-        ref.style.filter = `blur(${blur}px)`;
+        if (ref && ref.style) {
-    };
+            let blurRadius = 0;
+            const offset = Math.abs(index - currentLyricIndex);
+            if (progress > line.end) {
+                blurRadius = Math.min(offset * blurRatio, 16);
+            } else if (line.start <= progress && progress <= line.end) {
+                blurRadius = 0;
+            } else {
+                blurRadius = Math.min(offset * blurRatio, 16);
+            }
+            if (scrolling) blurRadius=0;
+            ref.style.filter = `blur(${blurRadius}px)`;
+        }
+    }
 
     export const update = (pos: LyricPos, delay: number = 0) => {
         if (lastPosX === undefined || lastPosY === undefined) {
@@ -140,7 +157,7 @@
     <span
         bind:this={clickMask}
         class="absolute w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] h-full
-        -translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)]"
+        -translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)] z-[100] "
     >
     </span>
     {#if debugMode}
@@ -148,25 +165,25 @@
             {index}: duration: {(line.end - line.start).toFixed(3)}, {line.start.toFixed(3)}~{line.end.toFixed(3)}
         </span>
     {/if}
-    {#if line.words}
+    {#if line.words !== undefined && line.words.length > 0}
         <span
             class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 `}
         >
             {#each line.words as word}
                 {#if word.word}
                     {#each word.word.split("") as chr, i}
-                    <span
+                        <span
-                        class={(line.start <= progress && progress <= line.end && progress > (word.endTime - word.startTime) * ((i)/word.word.length) + word.startTime ? "opacity-100" : "opacity-35") + " inline-block duration-300"}
+                            class={(line.start <= progress && progress <= line.end && progress > (word.endTime - word.startTime) * ((i)/word.word.length) + word.startTime ? "opacity-100 text-glow" : "opacity-35") + " inline-block duration-300"}
-                    >
+                        >
-                        {chr}
+                            {chr}
-                    </span>
+                        </span>
                     {/each}
                 {/if}
             {/each}
         </span>
     {:else}
         <span
-            class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 duration-200 ${line.start <= progress && progress <= line.end ? "opacity-100" : "opacity-35"}`}
+            class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 duration-200 ${line.start <= progress && progress <= line.end ? "opacity-100 text-glow" : "opacity-35"}`}
         >
             {line.text}
         </span>
@@ -179,3 +196,14 @@
         </span>
     {/if}
 </div>
+
+
+<style>
+    .text-glow {
+        text-shadow:
+                0 0 3px #ffffff2c,
+                0 0 6px #ffffff2c,
+                0 15px 30px rgba(0, 0, 0, 0.11),
+                0 5px 15px rgba(0, 0, 0, 0.08);
+    }
+</style>

packages/core/components/lyrics/newLyrics.svelte

@@ -75,17 +75,15 @@
         const relativeOrigin = lyricTopList[currentLyricIndex] - currentLyricTop;
         for (let i = 0; i < lyricElements.length; i++) {
             const currentLyricComponent = lyricComponents[i];
+            const lyric = originalLyrics.scripts[i];
             let delay = 0;
-            if (i < currentLyricIndex) {
+            if (progress > lyric.end) {
                 delay = 0;
-            } else if (i == currentLyricIndex) {
+            } else if (lyric.start <= progress && progress <= lyric.end) {
                 delay = 0.042;
             } else {
                 delay = Math.min(Math.min(currentLyricDuration, 0.6), 0.067 * (i - currentLyricIndex + 1.2));
             }
-            const offset = Math.abs(i - currentLyricIndex);
-            let blurRadius = Math.min(offset * blurRatio, 16);
-            currentLyricComponent.setBlur(blurRadius);
             currentLyricComponent.update({ x: 0, y: lyricTopList[i] - relativeOrigin }, delay);
         }
     }
@@ -107,7 +105,7 @@
         for (let i = 0; i < lyricElements.length; i++) {
             const currentLyricComponent = lyricComponents[i];
             const currentY = currentLyricComponent.getInfo().y;
-            currentLyricComponent.setBlur(0);
+            scrolling = true;
             currentLyricComponent.stop();
             currentLyricComponent.setY(currentY - deltaY);
         }
@@ -263,7 +261,7 @@
         bind:this={lyricsContainer}
     >
         {#each lyricLines as lyric, i}
-            <LyricLine line={lyric} index={i} bind:this={lyricComponents[i]} {debugMode} {lyricClick} {progress} />
+            <LyricLine line={lyric} index={i} bind:this={lyricComponents[i]} {debugMode} {lyricClick} {progress} {currentLyricIndex} {scrolling}/>
         {/each}
     </div>
 {/if}

packages/core/lyrics/lrc/parser.ts

@@ -16,14 +16,13 @@ import {
     tok,
     type Token
 } from 'typescript-parsec';
-import type { LrcJsonData, ParsedLrc, ScriptItem, ScriptWordsItem } from '../type';
+import type { LrcJsonData, ParsedLrc, ScriptItem } from '../type';
 import type { IDTag } from './type';
 
 
 interface ParserScriptItem {
     start: number;
     text: string;
-    words?: ScriptWordsItem[];
     translation?: string;
     singer?: string;
 }
@@ -166,25 +165,10 @@ function lrcLine(
                     .filter((s) => s.trim().length > 0)
                     .join(wordDiv);
 
-                const words = mainPart
-                    .filter((s) => joinTokens(s[1]).trim().length > 0)
-                    .map((s) => {
-                        const wordBegin = s[0];
-                        const word = s[1];
-                        let ret: Partial<ScriptWordsItem> = { start: wordBegin };
-                        if (word[0]) {
-                            ret.beginIndex = word[0].pos.columnBegin - 1;
-                        }
-                        if (word[word.length - 1]) {
-                            ret.endIndex = word[word.length - 1].pos.columnEnd;
-                        }
-                        return ret as ScriptWordsItem; // TODO: Complete this
-                    });
-
                 const singer = singerPart?.text;
                 const translation = translatePart === undefined ? undefined : joinTokens(translatePart);
 
-                return ['script_item', { start, text, words, singer, translation } as ParserScriptItem];
+                return ['script_item', { start, text, singer, translation } as ParserScriptItem];
             }),
         apply(lrcTag, (r) => ['lrc_tag', r as IDTag]),
         apply(seq(spaces(), str('#'), unicodeStr), (cmt) => ['comment', cmt[2].join('')] as const),
@@ -206,8 +190,6 @@ export function parseLRC(
     const tokenizer = buildLexer([
         [true, /^\[/gu, '['],
         [true, /^\]/gu, ']'],
-        [true, /^</gu, '<'],
-        [true, /^>/gu, '>'],
         [true, /^\|/gu, '|'],
         [true, /^./gu, 'char']
     ]);