From 4386be9434a2af1033ed4b692d3733eaeb9f882f Mon Sep 17 00:00:00 2001
From: Kasper <kasperkh.kh@gmail.com>
Date: Sun, 8 Mar 2026 12:44:30 +0100
Subject: [PATCH] Autoscroll lyrics

---
 src/App.svelte               |   4 +-
 src/components/Button.svelte |  29 +++++----
 src/components/Lyrics.svelte | 120 +++++++++++++++++++++++++++++------
 src/components/Queue.svelte  |  37 ++---------
 src/lib/scroll.ts            |  38 +++++++++++
 5 files changed, 161 insertions(+), 67 deletions(-)
 create mode 100644 src/lib/scroll.ts

diff --git a/src/App.svelte b/src/App.svelte
index 725e103..7a38532 100755
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -282,8 +282,8 @@
 				track_name={$playing_track?.name || ''}
 				artist_name={$playing_track?.artist || ''}
 				album_name={$playing_track?.albumName || ''}
-				duration_sec={$time_record.duration || null}
-				current_time_sec={$time_record.elapsed || 0}
+				duration_sec={$time_record.duration}
+				current_time_sec={$time_record.elapsed}
 			/>
 		{/if}
 	</div>
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 364e2ce..cbcb6c4 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,33 +1,34 @@
 <script lang="ts">
-	import type { HTMLBaseAttributes } from 'svelte/elements'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	interface $$Props extends HTMLBaseAttributes {
+	interface Props extends HTMLButtonAttributes {
 		secondary?: boolean
 		danger?: boolean
 		thin?: boolean
-		type?: 'button' | 'submit' | 'reset'
 	}
 
-	export let secondary = false
-	export let danger = false
-	export let thin = false
-	export let type: 'button' | 'submit' | 'reset' = 'button'
-	let normal = !danger && !secondary
-	$: normal = !danger && !secondary
+	let {
+		secondary = false,
+		danger = false,
+		thin = false,
+		type = 'button',
+		children,
+		...rest_props
+	}: Props = $props()
+
+	const normal = $derived(!danger && !secondary)
 </script>
 
 <button
-	on:click
-	on:mousedown
 	class:normal
 	class:secondary
 	class:danger
 	class:thin
 	{type}
-	{...$$restProps}
+	{...rest_props}
+	style:-webkit-app-region="no-drag"
 >
-	<slot />
+	{@render children?.()}
 </button>
 
 <style lang="sass">
diff --git a/src/components/Lyrics.svelte b/src/components/Lyrics.svelte
index 13ccec6..00b6b7f 100644
--- a/src/components/Lyrics.svelte
+++ b/src/components/Lyrics.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition'
+	import { ScrollAnimation } from '$lib/scroll'
+	import { seek } from '$lib/player'
+	import Button from './Button.svelte'
 
 	type LrcLine = {
 		time_sec: number
@@ -19,28 +22,31 @@
 	}
 
 	type Props = {
-		track_name?: string
-		artist_name?: string
-		album_name?: string
-		duration_sec?: number | null
-		current_time_sec?: number
+		track_name: string
+		artist_name: string
+		album_name: string
+		duration_sec: number | null
+		current_time_sec: number
 	}
 
 	const cache_by_key: Record<string, LrclibTrack | null> = {}
 
-	let {
-		track_name = '',
-		artist_name = '',
-		album_name = '',
-		duration_sec = null,
-		current_time_sec = 0,
-	}: Props = $props()
+	let { track_name, artist_name, album_name, duration_sec, current_time_sec }: Props = $props()
 
 	let loading = $state(false)
 	let error_message = $state('')
 	let lyrics_data = $state<LrclibTrack | null>(null)
 	let request_key = $state('')
 
+	let follow_paused = $state(false)
+	let paused_temporarily = $state(false)
+	let initial_scroll_done = $state(false)
+
+	let lines_element: HTMLElement | null = null
+	let line_elements = $state<Array<HTMLParagraphElement | null>>([])
+	const follow_scroll_animation = new ScrollAnimation()
+	const follow_scroll_duration_ms = 220
+
 	const query_key = $derived(make_key(track_name, artist_name, album_name, duration_sec))
 	const synced_lines = $derived(parse_synced_lyrics(lyrics_data?.synced_lyrics ?? ''))
 	const active_line_index = $derived(find_active_line_index(synced_lines, current_time_sec))
@@ -51,6 +57,32 @@
 			.filter(Boolean),
 	)
 
+	$effect(() => {
+		query_key
+		follow_paused = false
+		line_elements = []
+		initial_scroll_done = false
+	})
+
+	$effect(() => {
+		if (follow_paused || paused_temporarily) return
+		if (!lines_element || active_line_index < 0 || synced_lines.length === 0) return
+		const active_el = line_elements[active_line_index]
+		if (!active_el) return
+		const target_top =
+			active_el.offsetTop - lines_element.clientHeight / 2 + active_el.clientHeight / 2
+		if (!initial_scroll_done) {
+			follow_scroll_animation.cancel()
+			lines_element.scrollTop = Math.max(
+				0,
+				Math.min(target_top, lines_element.scrollHeight - lines_element.clientHeight),
+			)
+			initial_scroll_done = true
+			return
+		}
+		follow_scroll_animation.smooth_scroll_to(lines_element, target_top, follow_scroll_duration_ms)
+	})
+
 	$effect(() => {
 		const key = query_key
 		if (!key) {
@@ -80,6 +112,12 @@
 		return `${a}|${t}|${alb}|${d}`
 	}
 
+	function seek_to_lyric_time(time_sec: number) {
+		const selected_text = window.getSelection()?.toString().trim()
+		if (selected_text) return
+		seek(time_sec)
+	}
+
 	function encode_query(params: Record<string, string | number | undefined>) {
 		const parts: string[] = []
 		for (const [key, value] of Object.entries(params)) {
@@ -197,6 +235,20 @@
 		}
 		return answer
 	}
+
+	function pause_follow() {
+		follow_scroll_animation.cancel()
+		follow_paused = true
+	}
+
+	function start_temporary_pause() {
+		follow_scroll_animation.cancel()
+		paused_temporarily = true
+	}
+
+	function end_temporary_pause() {
+		paused_temporarily = false
+	}
 </script>
 
 <aside
@@ -207,14 +259,38 @@
 	<div
 		class="pointer-events-auto relative -mt-px flex w-[var(--right-sidebar-width)] flex-col border-l border-[var(--border-color)] bg-black"
 	>
-		<div class="sticky top-0 z-10 border-b border-white/10 bg-black/75 px-4 py-3 backdrop-blur-md">
+		<div
+			class="sticky top-0 z-10 flex justify-between border-b border-white/10 bg-black/75 px-4 py-3 backdrop-blur-md"
+		>
 			<h3 class="m-0 text-base font-semibold">Lyrics</h3>
-			{#if artist_name && track_name}
-				<div class="mt-1 truncate text-xs text-white/70">{artist_name} - {track_name}</div>
+			{#if follow_paused && synced_lines.length > 0}
+				<Button
+					class="rounded bg-white/10 px-2 py-1 text-xs text-white/80 hover:bg-white/15"
+					secondary
+					thin
+					onclick={() => (follow_paused = false)}
+				>
+					Resume follow
+				</Button>
 			{/if}
 		</div>
 
-		<div class="flex-1 overflow-y-auto px-4 py-3">
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			class="flex-1 overflow-y-auto px-4 py-3 select-text"
+			role="region"
+			bind:this={lines_element}
+			onwheel={pause_follow}
+			onscroll={() => {
+				if (paused_temporarily) pause_follow()
+			}}
+			onmousedown={start_temporary_pause}
+			ontouchstart={start_temporary_pause}
+			ontouchend={end_temporary_pause}
+			ontouchcancel={end_temporary_pause}
+			onmouseup={end_temporary_pause}
+			onmouseleave={end_temporary_pause}
+		>
 			{#if !query_key}
 				<p class="m-0 text-sm text-white/70">Play a track to load lyrics.</p>
 			{:else if loading}
@@ -227,11 +303,19 @@
 				<div class="space-y-1">
 					{#each synced_lines as line, i}
 						<p
-							class={`m-0 py-1 text-[15px] leading-6 transition-colors duration-100 ${
+							bind:this={line_elements[i]}
+							class={`m-0 min-h-lh cursor-text py-1 text-[15px] transition-colors duration-100 ${
 								i === active_line_index ? 'font-medium text-white' : 'text-white/60'
 							}`}
 						>
-							{line.text || '♪'}
+							<span
+								role="none"
+								class="cursor-pointer py-1 leading-6"
+								class:hover:text-gray-300={i !== active_line_index}
+								onclick={() => seek_to_lyric_time(line.time_sec)}
+							>
+								{line.text || ''}
+							</span>
 						</p>
 					{/each}
 				</div>
diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte
index 9e8d15f..5abe2eb 100644
--- a/src/components/Queue.svelte
+++ b/src/components/Queue.svelte
@@ -15,7 +15,7 @@
 	import { ipc_listen, ipc_renderer } from '$lib/window'
 	import { check_shortcut } from '$lib/helpers'
 	import { fly } from 'svelte/transition'
-	import { cubicOut } from 'svelte/easing'
+	import { ScrollAnimation } from '$lib/scroll'
 	import VirtualListBlock, { scroll_container_keydown } from './VirtualListBlock.svelte'
 	import type { SelectedTracksAction } from '$electron/typed_ipc'
 	import {
@@ -109,37 +109,7 @@
 	onDestroy(ipc_listen('context.Remove from Queue', remove_from_queue))
 
 	let queue_element: HTMLElement
-	let indicator_scroll_anim: number | null = null
-	const indicator_scroll_duration_ms = 200
-	function smooth_scroll_to(top: number) {
-		const max_top = Math.max(0, queue_element.scrollHeight - queue_element.clientHeight)
-		const target_top = Math.max(0, Math.min(top, max_top))
-		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-			queue_element.scrollTop = target_top
-			return
-		}
-		if (indicator_scroll_anim) {
-			cancelAnimationFrame(indicator_scroll_anim)
-		}
-		const start_top = queue_element.scrollTop
-		const start_ts = performance.now()
-		const frame = (now: number) => {
-			const p = Math.min(1, (now - start_ts) / indicator_scroll_duration_ms)
-			queue_element.scrollTop = start_top + (target_top - start_top) * cubicOut(p)
-			if (p < 1) {
-				indicator_scroll_anim = requestAnimationFrame(frame)
-			} else {
-				indicator_scroll_anim = null
-			}
-		}
-		indicator_scroll_anim = requestAnimationFrame(frame)
-	}
-	onDestroy(() => {
-		if (indicator_scroll_anim !== null) {
-			cancelAnimationFrame(indicator_scroll_anim)
-			indicator_scroll_anim = null
-		}
-	})
+	const indicator_scroll_anim = new ScrollAnimation()
 
 	function handle_action(action: SelectedTracksAction) {
 		const first_index = selection.find_first_index()
@@ -256,7 +226,8 @@
 								if (show) {
 									const old_top = queue_element.scrollTop + history_rows * entry_height
 									queue_element.scrollTop = old_top
-									smooth_scroll_to(old_top - entry_height * 5)
+									const top = old_top - entry_height * 5
+									indicator_scroll_anim.smooth_scroll_to(queue_element, top, 200)
 								} else {
 									queue_element.scrollTop = 0
 								}
diff --git a/src/lib/scroll.ts b/src/lib/scroll.ts
new file mode 100644
index 0000000..f5f34a6
--- /dev/null
+++ b/src/lib/scroll.ts
@@ -0,0 +1,38 @@
+import { cubicOut } from 'svelte/easing'
+
+export class ScrollAnimation {
+	frame_id: number | null = null
+
+	cancel() {
+		if (this.frame_id !== null) {
+			cancelAnimationFrame(this.frame_id)
+			this.frame_id = null
+		}
+	}
+
+	smooth_scroll_to(element: HTMLElement, top: number, duration_ms = 200) {
+		this.cancel()
+		if (!element.isConnected) {
+			return
+		}
+		const max_top = Math.max(0, element.scrollHeight - element.clientHeight)
+		const target_top = Math.max(0, Math.min(top, max_top))
+		const reduced_motion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		if (reduced_motion) {
+			element.scrollTop = target_top
+			return
+		}
+		const start_top = element.scrollTop
+		const start_ts = performance.now()
+		const frame = (now: number) => {
+			const p = Math.min(1, (now - start_ts) / duration_ms)
+			element.scrollTop = start_top + (target_top - start_top) * cubicOut(p)
+			if (p < 1) {
+				this.frame_id = requestAnimationFrame(frame)
+			} else {
+				this.frame_id = null
+			}
+		}
+		this.frame_id = requestAnimationFrame(frame)
+	}
+}
-- 
2.51.2