Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use direct expressions in LyricsLines class bindings for reactivity

Browse Source
This commit is contained in:
vicrodh committed 2026-01-11 01:21:30 -06:00
1 parent 50fd847ce2
commit ac7615f321
1 file changed
+4 -7
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/lyrics/LyricsLines.svelte
+4 -7
View File
@@ -117,15 +117,12 @@
<div class="lyrics-spacer"></div> <div class="lyrics-spacer"></div>
{/if} {/if}
{#each lines as line, index} {#each lines as line, index (index)}
{@const isActive = isSynced && index === activeIndex}
{@const isPast = isSynced && index < activeIndex}
{@const opacity = isSynced ? getLineOpacity(index, activeIndex) : 1}
<div <div
class="lyrics-line" class="lyrics-line"
class:active={isActive} class:active={isSynced && index === activeIndex}
class:past={isPast} class:past={isSynced && index < activeIndex}
style="--line-opacity: {opacity}; {isActive ? `--line-progress: ${Math.max(0, Math.min(1, activeProgress))}` : ''}" style="--line-opacity: {isSynced ? getLineOpacity(index, activeIndex) : 1}; {isSynced && index === activeIndex ? `--line-progress: ${Math.max(0, Math.min(1, activeProgress))}` : ''}"
data-line-index={index} data-line-index={index}
> >
<span class="line-text">{line.text}</span> <span class="line-text">{line.text}</span>