From 072a46d717ac17fcb3b4cdca31c4fa50c7c5be0f Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Mon, 22 Dec 2025 06:49:59 +1300
Subject: [PATCH] Addedd CC support

---
 materialious/src/lib/components/Player.svelte | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 6223955e..d5187d9d 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -82,6 +82,7 @@
 	let playerIsBuffering = $state(false);
 	let playerVolume = $state(0);
 	let playerSettings: 'quality' | 'speed' | 'language' | 'root' = $state('root');
+	let playerTextTracks: shaka.extern.TextTrack[] | undefined = $state(undefined);
 	let playerCurrentVideoTrack: shaka.extern.VideoTrack | undefined = $state(undefined);
 	let playerCurrentAudioTrack: shaka.extern.AudioTrack | undefined = $state(undefined);
 	let playerLoop = $state($playerAlwaysLoopStore);
@@ -521,12 +522,6 @@
 
 		await player.attach(playerElement);
 
-		shaka.ui.Controls.registerElement('end_time', {
-			create: (parent: HTMLElement, controls: shaka.ui.Controls) => {
-				return new EndTimeElement(parent, controls);
-			}
-		});
-
 		player?.addEventListener('error', (event) => {
 			const error = (event as CustomEvent).detail as shaka.util.Error;
 			console.error('Player error:', error);
@@ -558,16 +553,6 @@
 			}
 		});
 
-		// Required to stop buttons from being still selected when fullscreening
-		document?.addEventListener('fullscreenchange', async () => {
-			const buttons = document.querySelectorAll('.shaka-controls-button-panel button');
-			buttons.forEach((button) => {
-				// Reset the button's focus and active states
-				(button as HTMLElement).blur(); // Remove focus from the button
-				button.removeAttribute('aria-pressed'); // Reset any ARIA attributes that might indicate selection
-			});
-		});
-
 		playerElement?.addEventListener('volumechange', saveVolumePreference);
 
 		await androidHandleRotate();
@@ -800,6 +785,8 @@
 
 		// Update video player height again on video loaded.
 		updateVideoPlayerHeight();
+
+		playerTextTracks = player.getTextTracks();
 	});
 
 	async function getLastPlayPos(): Promise<number> {
@@ -990,6 +977,27 @@
 					<p class="no-padding no-margin">
 						{videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)}
 					</p>
+					{#if playerTextTracks && playerTextTracks.length > 0}
+						<button>
+							<i>closed_caption</i>
+							<menu class="no-wrap mobile">
+								<li role="presentation" onclick={() => player.setTextTrackVisibility(false)}>
+									{$_('player.controls.off')}
+								</li>
+								{#each playerTextTracks as track (track)}
+									<li
+										role="presentation"
+										onclick={() => {
+											player.selectTextTrack(track);
+											player.setTextTrackVisibility(true);
+										}}
+									>
+										{track.label}
+									</li>
+								{/each}
+							</menu>
+						</button>
+					{/if}
 					<button>
 						<i>settings</i>
 						<menu class="no-wrap mobile">