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:
1 parent
99c157d100
commit
87b89f0709
2 files changed
+33
-12
No files matched your search
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user