fix: restore lyrics sync in FocusMode and add shimmer effect

- Add explicit effect in FocusMode to ensure lyrics updates run
- Increase immersive mode font size by 2pts (24px/30px)
- Smoother easing with cubic-bezier curves (400ms)
- Add shimmer gradient effect for karaoke-style highlighting
- Add subtle accent glow on active lyrics line
This commit is contained in:
vicrodh committed 2026-01-11 01:04:23 -06:00
1 parent 99c157d100
commit 87b89f0709
2 files changed
+33 -12

No files matched your search

+12 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { X, SkipBack, Play, Pause, SkipForward, ChevronDown } from 'lucide-svelte';
import { SkipBack, Play, Pause, SkipForward, ChevronDown } from 'lucide-svelte';
import LyricsLines from './lyrics/LyricsLines.svelte';
import { startActiveLineUpdates, stopActiveLineUpdates } from '$lib/stores/lyricsStore';
interface LyricsLine {
text: string;
@@ -49,6 +50,16 @@
lyricsError = null
}: Props = $props();
// Ensure lyrics updates run when FocusMode is open with synced lyrics
$effect(() => {
if (isOpen && isPlaying && lyricsSynced) {
startActiveLineUpdates();
}
return () => {
// Cleanup is handled by the main page effect
};
});
let showControls = $state(true);
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
let progressRef: HTMLDivElement | null = $state(null);