From 2fc9a704de9a0daa5c862e664ddb040053500924 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 18 Feb 2026 20:02:13 +1300
Subject: [PATCH] Update Transcript.svelte

---
 .../src/lib/components/watch/Transcript.svelte        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/materialious/src/lib/components/watch/Transcript.svelte b/materialious/src/lib/components/watch/Transcript.svelte
index 40bc023a..4bee98f0 100644
--- a/materialious/src/lib/components/watch/Transcript.svelte
+++ b/materialious/src/lib/components/watch/Transcript.svelte
@@ -27,9 +27,13 @@
 	let search: string = $state('');
 
 	$effect(() => {
+		// currentTime must be referenced to update effect
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		currentTime;
+
 		if (autoScroll) {
 			const currentTranscriptLine = document.querySelector(
-				'.transcript-line.secondary-container'
+				'.transcript-line.current-line'
 			) as HTMLElement;
 			const transcriptScrollable = document.getElementById('transcript');
 
@@ -118,12 +122,13 @@
 		{#if transcript.cues.length > 0}
 			{#if transcriptCues.length > 0}
 				{#each transcriptCues as cue (cue)}
+					{@const isCurrent = currentTime >= cue.startTime && currentTime <= cue.endTime}
 					<div
 						class="transcript-line"
 						role="presentation"
 						onclick={() => (currentTime = cue.startTime)}
-						class:surface-container-highest={currentTime >= cue.startTime &&
-							currentTime <= cue.endTime}
+						class:current-line={isCurrent}
+						class:surface-container-highest={isCurrent}
 					>
 						<p class="chip no-margin">{videoLength(cue.startTime)}</p>
 						<p class="transcript-text">