From e786451ac4709764b1f6e7506ec27b24abd4aa6a Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 19 Sep 2025 17:49:27 +1200
Subject: [PATCH] More fixes

---
 materialious/package-lock.json                |  19 +-
 materialious/package.json                     |   7 +-
 materialious/scripts/patchShaka.mjs           |  37 +++
 materialious/src/lib/components/Player.svelte | 136 +++------
 .../src/lib/css/shaka-player-theme.css        | 279 ------------------
 materialious/vite.config.ts                   |   1 -
 6 files changed, 93 insertions(+), 386 deletions(-)
 create mode 100644 materialious/scripts/patchShaka.mjs

diff --git a/materialious/package-lock.json b/materialious/package-lock.json
index 676f2a61..c5b61813 100644
--- a/materialious/package-lock.json
+++ b/materialious/package-lock.json
@@ -31,7 +31,7 @@
 				"media-captions": "^1.0.4",
 				"mousetrap": "^1.6.5",
 				"peerjs": "^1.5.5",
-				"shaka-player": "^4.11.7",
+				"shaka-player": "^4.16.2",
 				"sponsorblock-api": "^0.2.4",
 				"svelte-infinite-loading": "^1.4.0",
 				"svelte-persisted-store": "^0.12.0",
@@ -5750,12 +5750,6 @@
 				"node": ">= 0.4.0"
 			}
 		},
-		"node_modules/eme-encryption-scheme-polyfill": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.2.1.tgz",
-			"integrity": "sha512-GzgrLuZPYGijd8oaKuBqYv3Tc2oruDZM3V2982KOuy/PA1N3zwMe+/oIXJYfZ3BH3PwW5nONdBBE+VY6jlwbrw==",
-			"license": "Apache-2.0"
-		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -11124,15 +11118,12 @@
 			}
 		},
 		"node_modules/shaka-player": {
-			"version": "4.11.7",
-			"resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-4.11.7.tgz",
-			"integrity": "sha512-jNsdQd4pa24w2QwXHGNBs8MQ33YajYiZclWaSuGt+dLJ7/D9+NG1LJQGnTrGd0G1aDdbEzmEpppG3ic4OsGpyw==",
+			"version": "4.16.2",
+			"resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-4.16.2.tgz",
+			"integrity": "sha512-AFswL7ZXT37UceDAsovQXQ3BRGLmPcmdgXgLVJdmHN2mnrYCvTrl7CGg2jeIPxUOHipAeeq33LrDM9uGBlQRVA==",
 			"license": "Apache-2.0",
-			"dependencies": {
-				"eme-encryption-scheme-polyfill": "^2.1.5"
-			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/sharp": {
diff --git a/materialious/package.json b/materialious/package.json
index 58da5151..addcd016 100644
--- a/materialious/package.json
+++ b/materialious/package.json
@@ -10,7 +10,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"postinstall": "patch-package"
+		"patch:shaka": "node ./scripts/patchShaka.mjs",
+		"postinstall": "npm run patch:shaka"
 	},
 	"devDependencies": {
 		"@capacitor/assets": "^3.0.5",
@@ -63,10 +64,10 @@
 		"media-captions": "^1.0.4",
 		"mousetrap": "^1.6.5",
 		"peerjs": "^1.5.5",
-		"shaka-player": "^4.11.7",
+		"shaka-player": "^4.16.2",
 		"sponsorblock-api": "^0.2.4",
 		"svelte-infinite-loading": "^1.4.0",
 		"svelte-persisted-store": "^0.12.0",
 		"youtubei.js": "^15.1.1"
 	}
-}
\ No newline at end of file
+}
diff --git a/materialious/scripts/patchShaka.mjs b/materialious/scripts/patchShaka.mjs
new file mode 100644
index 00000000..bb16ea46
--- /dev/null
+++ b/materialious/scripts/patchShaka.mjs
@@ -0,0 +1,37 @@
+import { readFile, appendFile } from "node:fs/promises";
+import path from "node:path";
+import * as url from "node:url";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+async function main() {
+    const fileNames = ["shaka-player.ui.d.ts", "shaka-player.ui.debug.d.ts"];
+
+    for (const filename of fileNames) {
+        await fixTypes(filename);
+    }
+}
+
+async function fixTypes(filename) {
+    const filePath = path.join(
+        __dirname,
+        "..",
+        "node_modules",
+        "shaka-player",
+        "dist",
+        filename,
+    );
+
+    const shakaTs = await readFile(filePath, "utf-8");
+
+    if (!shakaTs.includes("export default shaka")) {
+        await appendFile(filePath, "export default shaka;");
+        console.log(`[PatchShaka] Fixed types in ${filename}`);
+    } else {
+        console.log(`[PatchShaka] No changes needed in ${filename}`);
+    }
+}
+
+main().catch(() => {
+    console.error("[PatchShaka]", "Failed to patch shaka-player");
+});
diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 7b23dae0..48ac9721 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import '$lib/css/shaka-player-theme.css';
 	import { getBestThumbnail } from '$lib/images';
 	import { padTime, videoLength } from '$lib/numbers';
 	import { type PhasedDescription } from '$lib/timestamps';
@@ -13,6 +12,7 @@
 	import ISO6391 from 'iso-639-1';
 	import Mousetrap from 'mousetrap';
 	import 'shaka-player/dist/controls.css';
+	import '$lib/css/shaka-player-theme.css';
 	import shaka from 'shaka-player/dist/shaka-player.ui';
 	import { SponsorBlock, type Category, type Segment } from 'sponsorblock-api';
 	import { onDestroy, onMount, tick } from 'svelte';
@@ -91,62 +91,16 @@
 				played: (await getDynamicTheme())['--primary']
 			}
 		});
-
-		setChapterMarkers();
-
-		const overflowMenuButton = document.querySelector('.shaka-overflow-menu-button');
-		if (overflowMenuButton) {
-			overflowMenuButton.innerHTML = 'settings';
-		}
-
-		const backToOverflowButton = document.querySelector('.shaka-back-to-overflow-button');
-		if (backToOverflowButton) {
-			backToOverflowButton.innerHTML = 'arrow_back_ios_new';
-		}
 	}
 
 	themeColorStore.subscribe(updateSeekBarTheme);
 	darkModeStore.subscribe(updateSeekBarTheme);
 
-	function setChapterMarkers() {
-		const shakaControls = shakaUi.getControls();
-		if (data.content.timestamps && shakaControls) {
-			const seekBar = shakaControls
-				.getControlsContainer()
-				.querySelector('.shaka-seek-bar-container');
-
-			data.content.timestamps.forEach((chapter, index) => {
-				const nextChapter = data.content.timestamps[index + 1];
-
-				const marker = document.createElement('div');
-				marker.classList.add('chapter-marker');
-
-				const startPercent = (chapter.time / data.video.lengthSeconds) * 100;
-				let widthPercent: number;
-
-				if (nextChapter) {
-					widthPercent = ((nextChapter.time - chapter.time) / data.video.lengthSeconds) * 100;
-				} else {
-					widthPercent = 100 - startPercent;
-				}
-
-				marker.style.left = `${startPercent}%`;
-				marker.style.width = `${widthPercent}%`;
-
-				const tooltip = document.createElement('div');
-				tooltip.classList.add('tooltip');
-				tooltip.textContent = chapter.title;
-
-				marker.appendChild(tooltip);
-
-				if (seekBar) seekBar.appendChild(marker);
-			});
-		}
-	}
-
 	function restoreDefaultLanguage() {
-		if (!$playerDefaultLanguage || $playerDefaultLanguage === "original") {
-			const languageAndRole = player.getAudioLanguagesAndRoles().find(({ role }) => role === "main");
+		if (!$playerDefaultLanguage || $playerDefaultLanguage === 'original') {
+			const languageAndRole = player
+				.getAudioLanguagesAndRoles()
+				.find(({ role }) => role === 'main');
 			if (languageAndRole !== undefined) {
 				player.selectAudioLanguage(languageAndRole.language);
 				return;
@@ -343,45 +297,11 @@
 		// Will inject requirements for SABR if SABR is required.
 		playerElementResizeObserver = injectSABR(player, playerElement as HTMLMediaElement, data.video);
 
+		try {
+			document.getElementsByClassName('shaka-ad-info')[0].remove();
+		} catch {}
+
 		if (!data.video.liveNow) {
-			if (data.video.captions) {
-				data.video.captions.forEach(async (caption) => {
-					player.addTextTrackAsync(
-						caption.url.startsWith('http') ? caption.url : `${get(instanceStore)}${caption.url}`,
-						caption.language_code,
-						'captions',
-						undefined,
-						undefined,
-						caption.label
-					);
-				});
-			}
-
-			if (data.content.timestamps) {
-				let chapterWebVTT = 'WEBVTT\n\n';
-
-				let timestampIndex = 0;
-				data.content.timestamps.forEach((timestamp) => {
-					let endTime: string;
-					if (timestampIndex === data.content.timestamps.length - 1) {
-						endTime = videoLength(data.video.lengthSeconds);
-					} else {
-						endTime = data.content.timestamps[timestampIndex + 1].timePretty;
-					}
-
-					chapterWebVTT += `${padTime(timestamp.timePretty)} --> ${padTime(endTime)}\n${timestamp.title.replaceAll('-', '').trim()}\n\n`;
-
-					timestampIndex += 1;
-				});
-
-				if (timestampIndex > 0) {
-					player.addChaptersTrack(
-						`data:text/vtt;base64,${btoa(chapterWebVTT)}`,
-						get(playerDefaultLanguage)
-					);
-				}
-			}
-
 			if (watchProgressTimeout) {
 				clearInterval(watchProgressTimeout);
 			}
@@ -418,6 +338,44 @@
 			} else {
 				await player.load(dashUrl, await getLastPlayPos());
 			}
+
+			if (data.video.captions) {
+				data.video.captions.forEach(async (caption) => {
+					player.addTextTrackAsync(
+						caption.url.startsWith('http') ? caption.url : `${get(instanceStore)}${caption.url}`,
+						caption.language_code,
+						'captions',
+						undefined,
+						undefined,
+						caption.label
+					);
+				});
+			}
+
+			if (data.content.timestamps) {
+				let chapterWebVTT = 'WEBVTT\n\n';
+
+				let timestampIndex = 0;
+				data.content.timestamps.forEach((timestamp) => {
+					let endTime: string;
+					if (timestampIndex === data.content.timestamps.length - 1) {
+						endTime = videoLength(data.video.lengthSeconds);
+					} else {
+						endTime = data.content.timestamps[timestampIndex + 1].timePretty;
+					}
+
+					chapterWebVTT += `${padTime(timestamp.timePretty)}.000 --> ${padTime(endTime)}.000\n${timestamp.title.replaceAll('-', '').trim()}\n\n`;
+
+					timestampIndex += 1;
+				});
+
+				if (timestampIndex > 0) {
+					player.addChaptersTrack(
+						`data:text/vtt;base64,${btoa(chapterWebVTT)}`,
+						get(playerDefaultLanguage)
+					);
+				}
+			}
 		} else {
 			if (data.video.fallbackPatch === 'youtubejs') {
 				if (!data.video.dashUrl) {
diff --git a/materialious/src/lib/css/shaka-player-theme.css b/materialious/src/lib/css/shaka-player-theme.css
index 6ad99932..6263473d 100644
--- a/materialious/src/lib/css/shaka-player-theme.css
+++ b/materialious/src/lib/css/shaka-player-theme.css
@@ -8,285 +8,6 @@
 	color: var(--on-surface);
 }
 
-.player-theme .shaka-bottom-controls {
-	width: 100%;
-	padding: 0;
-	padding-bottom: 0;
-	z-index: 1;
-	display: flex;
-	flex-direction: column;
-}
-
-.player-theme .shaka-ad-controls {
-	order: 1;
-}
-
-.player-theme .shaka-controls-button-panel {
-	order: 2;
-	height: 2.5rem; /* 40px */
-	padding: 0 0.625rem; /* 10px */
-}
-
-.player-theme .shaka-range-container {
-	margin: 0.25rem 0.625rem; /* 4px 10px */
-	top: 0;
-}
-
-.player-theme .shaka-small-play-button {
-	order: -3;
-}
-
-.player-theme .shaka-mute-button {
-	order: -2;
-}
-
-.player-theme .shaka-controls-button-panel > * {
-	margin: 0;
-	padding: 0.1875rem 0.5rem; /* 3px 8px */
-	color: #fff;
-	height: 2.5rem; /* 40px */
-	font-size: 2rem; /* 32px */
-}
-
-.player-theme .shaka-controls-button-panel > *:hover {
-	color: var(--primary);
-}
-
-.player-theme .shaka-controls-button-panel > *:focus {
-	outline: none;
-	box-shadow: inset 0 0 0 2px var(--primary);
-	color: var(--primary);
-}
-
-.player-theme .shaka-controls-button-panel .shaka-volume-bar-container {
-	height: 0.1875rem; /* 3px */
-	padding: 0;
-}
-
-.player-theme .shaka-controls-button-panel .shaka-volume-bar-container:hover,
-.player-theme .shaka-controls-button-panel .shaka-volume-bar-container:focus {
-	display: block;
-	opacity: 1;
-	padding: 0 0.375rem; /* 6px */
-}
-
-.player-theme .shaka-mute-button:hover + div {
-	opacity: 1;
-	width: 3.125rem; /* 50px */
-	padding: 0 0.375rem; /* 6px */
-}
-
-.player-theme .shaka-current-time {
-	padding: 0 0.625rem; /* 10px */
-	font-size: 1rem; /* 16px */
-	color: #fff !important;
-}
-
-.player-theme .shaka-seek-bar-container {
-	height: 0.1875rem; /* 3px */
-	position: relative;
-	top: -0.0625rem; /* -1px */
-	margin-bottom: 0;
-	border-radius: 0;
-}
-
-.player-theme .shaka-seek-bar-container .shaka-range-element {
-	opacity: 0;
-}
-
-.player-theme .shaka-seek-bar-container:hover {
-	height: 0.3125rem; /* 5px */
-	top: 0;
-	cursor: pointer;
-}
-
-.player-theme .shaka-seek-bar-container:hover .shaka-range-element {
-	opacity: 1;
-	cursor: pointer;
-}
-
-.player-theme .shaka-seek-bar-container input[type='range']::-webkit-slider-thumb,
-.player-theme .shaka-seek-bar-container input[type='range']::-moz-range-thumb,
-.player-theme .shaka-seek-bar-container input[type='range']::-ms-thumb {
-	background: var(--primary);
-	cursor: pointer;
-}
-
-.player-theme .shaka-overflow-menu,
-.player-theme .shaka-settings-menu {
-	border-radius: 0.25rem;
-	background: var(--surface-container-low);
-	right: 0.625rem; /* 10px */
-	bottom: 3.125rem; /* 50px */
-	min-width: 12.5rem; /* 200px */
-	animation: none !important;
-	transition: none !important;
-	opacity: 1 !important;
-	visibility: visible !important;
-	z-index: 99999999 !important;
-	pointer-events: auto !important;
-	pointer-events: auto !important;
-}
-
-.player-theme .shaka-settings-menu {
-	padding-bottom: 0.5rem; /* 8px */
-}
-
-.player-theme .shaka-settings-menu button {
-	font-size: 1rem; /* 16px */
-	border: none;
-	margin: 0;
-}
-
-.player-theme .shaka-settings-menu button span {
-	margin-left: 2.0625rem; /* 33px */
-	font-size: 1rem; /* 16px */
-}
-
-.player-theme .shaka-settings-menu button[aria-selected='true'] {
-	display: flex;
-}
-
-.player-theme .shaka-settings-menu button[aria-selected='true'] span {
-	order: 2;
-	margin-left: 0;
-}
-
-.player-theme .shaka-settings-menu button[aria-selected='true'] i {
-	order: 1;
-	font-size: 1rem; /* 16px */
-	padding-left: 0.3125rem; /* 5px */
-}
-
-.shaka-overflow-menu * {
-	z-index: 99999999 !important;
-	pointer-events: auto !important;
-}
-
-.player-theme .shaka-overflow-menu button,
-.player-theme .shaka-settings-menu button {
-	padding: 0;
-	margin-bottom: 0.5em;
-	visibility: visible !important;
-	z-index: 99999999 !important;
-	pointer-events: auto !important;
-}
-
-.player-theme .shaka-overflow-menu button i {
-	display: none;
-}
-
-.player-theme .shaka-overflow-menu button .shaka-overflow-button-label {
-	display: flex;
-	align-items: start;
-	cursor: default;
-	outline: none;
-	height: 2.5rem; /* 40px */
-	flex: 0 0 100%;
-	visibility: visible !important;
-	z-index: 99999999 !important;
-	pointer-events: auto !important;
-	pointer-events: auto !important;
-}
-
-.shaka-settings-menu {
-	padding: 0.5em;
-}
-
-.shaka-settings-menu button {
-	gap: 0;
-	justify-content: start;
-}
-
-.player-theme .shaka-overflow-menu button .shaka-overflow-button-label span {
-	flex-shrink: 0;
-	padding-left: 0.9375rem; /* 15px */
-	font-size: 1rem; /* 16px */
-	display: flex;
-	align-items: center;
-}
-
-.shaka-overflow-button-label span:not(.shaka-current-selection-span) {
-	font-weight: 200 !important;
-}
-
-.player-theme .shaka-overflow-menu span + span {
-	color: var(--primary-text);
-	font-weight: 400 !important;
-	font-size: 1rem !important;
-	padding-right: 0.5rem; /* 8px */
-}
-
-.player-theme .shaka-overflow-menu .shaka-pip-button span + span {
-	padding-right: 0.9375rem !important; /* 15px */
-}
-
-.player-theme .shaka-overflow-menu .shaka-pip-button span + span:after {
-	content: '';
-}
-
-.player-theme .shaka-back-to-overflow-button {
-	padding: 0.5rem 0;
-	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-	font-size: 1rem; /* 16px */
-	color: var(--primary-text);
-	height: 2.5rem; /* 40px */
-}
-
-.player-theme .shaka-back-to-overflow-button .material-icons-round {
-	font-size: 1rem; /* 16px */
-	padding-right: 0.625rem; /* 10px */
-}
-
-.player-theme .shaka-back-to-overflow-button span {
-	margin-left: 0.1875rem !important; /* 3px */
-}
-
-.player-theme .shaka-overflow-menu button:hover,
-.player-theme .shaka-settings-menu button:hover {
-	background-color: var(--surface-bright);
-	cursor: pointer;
-}
-
-.player-theme .shaka-overflow-menu button:hover label,
-.player-theme .shaka-settings-menu button:hover label {
-	cursor: pointer;
-}
-
-.player-theme .shaka-overflow-menu button:focus,
-.player-theme .shaka-settings-menu button:focus {
-	background-color: var(--surface-bright);
-	border: none;
-	outline: none;
-}
-
-.player-theme .shaka-overflow-menu button,
-.player-theme .shaka-settings-menu button {
-	color: var(--primary-text);
-}
-
-.player-theme .shaka-captions-off {
-	color: var(--surface-bright);
-}
-
-.player-theme .shaka-overflow-menu-button {
-	font-size: 1rem; /* 16px */
-	margin-right: 0.3125rem; /* 5px */
-}
-
-.player-theme .chapter-marker {
-	bottom: 100%;
-	height: 4px;
-	margin-bottom: 8px;
-	position: absolute;
-	background: linear-gradient(
-		to right,
-		var(--primary-container) 0%,
-		var(--primary-container) calc(100% - 10px),
-		transparent 100%
-	);
-}
-
 @media screen and (max-width: 650px) {
 	.player-theme .shaka-end-time {
 		display: none;
diff --git a/materialious/vite.config.ts b/materialious/vite.config.ts
index b0246a0d..b17aa2c5 100644
--- a/materialious/vite.config.ts
+++ b/materialious/vite.config.ts
@@ -2,7 +2,6 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 import { defineConfig } from 'vite';
 
-
 export default defineConfig({
 	plugins: [
 		SvelteKitPWA({