Fix saving preferred quality and volume

docs/DOCKER.md

@@ -273,94 +273,4 @@ Add these additional environment variables to Materialious.
 VITE_DEFAULT_PEERJS_HOST: "peerjs.example.com"
 VITE_DEFAULT_PEERJS_PATH: "/"
 VITE_DEFAULT_PEERJS_PORT: 443
-```
-
-
-## Step 7 (Optional): Enabling downloads
-
-### Step 1: Add the following to your reverse proxies
-
-#### Caddy
-
-```caddy
-# Materialious
-materialious.example.com {
-	reverse_proxy localhost:3001
-
-    header {
-      Cross-Origin-Opener-Policy "same-origin"
-      Cross-Origin-Embedder-Policy "require-corp"
-    }
-}
-
-# Invidious
-invidious.example.com {
-  # Other configurations
-
-  header /ggpht/* Cross-Origin-Resource-Policy cross-origin
-}
-```
-
-#### Nginx
-```nginx
-# Materialious
-server {
-    listen 80;
-    server_name materialious.example.com;
-
-    add_header Cross-Origin-Opener-Policy "same-origin" always;
-    add_header Cross-Origin-Embedder-Policy "require-corp" always;
-
-    location / {
-        proxy_pass http://localhost:3001;
-    }
-}
-
-# Invidious
-server {
-    listen 80;
-    server_name invidious.example.com;
-
-    location /ggpht/ {
-        add_header Cross-Origin-Resource-Policy cross-origin;
-    }
-}
-```
-
-#### Traefik
-Add the following to Materialious
-
-```yaml
-# Materialious
-http:
-  middlewares:
-    materialious-downloads:
-      headers:
-        customResponseHeaders:
-          Cross-Origin-Opener-Policy: "same-origin"
-          Cross-Origin-Embedder-Policy: "require-corp"
-
-# Invidious
-http:
-  routers:
-    ggpht-router:
-      rule: "PathPrefix(`/ggpht/`)"
-      service: ggpht-service
-      middlewares:
-        - headers-ggpht
-
-  middlewares:
-    headers-ggpht:
-      headers:
-        customResponseHeaders:
-          Cross-Origin-Resource-Policy: cross-origin
-```
-
-
-### Step 2: Modify docker compose.
-
-Add this environment variable to Materialious.
-```yaml
-VITE_DEFAULT_DOWNLOAD_ENABLED: true
-```
-
+```

materialious/src/lib/components/Player.svelte

@@ -60,6 +60,51 @@
 	let player: shaka.Player;
 	let shakaUi: shaka.ui.Overlay;
 
+	const STORAGE_KEY_QUALITY = 'shaka-preferred-quality';
+	const STORAGE_KEY_VOLUME = 'shaka-preferred-volume';
+
+	function saveQualityPreference() {
+		const tracks = player.getVariantTracks();
+		const selectedTrack = tracks.find((track) => track.active);
+		if (selectedTrack) {
+			localStorage.setItem(STORAGE_KEY_QUALITY, selectedTrack.bandwidth.toString());
+		}
+	}
+
+	function saveVolumePreference() {
+		localStorage.setItem(STORAGE_KEY_VOLUME, playerElement.volume.toString());
+	}
+
+	function restorePreferences() {
+		const savedQuality =
+			localStorage.getItem(STORAGE_KEY_QUALITY) ??
+			(import.meta.env.VITE_DEFAULT_DASH_BITRATE as string);
+
+		if (savedQuality) {
+			const qualityBandwidth = parseInt(savedQuality, 10);
+			const tracks = player.getVariantTracks();
+
+			let preferredTrack = tracks.find((track) => track.bandwidth === qualityBandwidth);
+			if (!preferredTrack) {
+				preferredTrack = tracks.reduce((prev, curr) =>
+					Math.abs(curr.bandwidth - qualityBandwidth) < Math.abs(prev.bandwidth - qualityBandwidth)
+						? curr
+						: prev
+				);
+			}
+
+			if (preferredTrack) {
+				player.selectVariantTrack(preferredTrack, true);
+				player.configure({ abr: { enabled: false } });
+			}
+		}
+
+		const savedVolume = localStorage.getItem(STORAGE_KEY_VOLUME);
+		if (savedVolume) {
+			playerElement.volume = parseFloat(savedVolume);
+		}
+	}
+
 	function loadTimeFromUrl(page: Page): boolean {
 		if (player) {
 			const timeGivenUrl = page.url.searchParams.get('time');
@@ -92,6 +137,9 @@
 			playerElement
 		);
 
+		player.addEventListener('adaptation', () => setTimeout(saveQualityPreference, 10000));
+		playerElement.addEventListener('volumechange', saveVolumePreference);
+
 		shakaUi.configure({
 			controlPanelElements: [
 				'play_pause',
@@ -210,7 +258,6 @@
 
 						response.data = new TextEncoder().encode(cleaned).buffer as ArrayBuffer;
 					} else {
-						console.log('made it here');
 						const googUmp = new GoogleVideo.UMP(
 							new GoogleVideo.ChunkedDataBuffer([new Uint8Array(response.data as ArrayBuffer)])
 						);
@@ -416,6 +463,8 @@
 			snackBarAlert = get(_)('player.youtubeJsFallBack');
 			ui('#snackbar-alert');
 		}
+
+		restorePreferences();
 	});
 
 	async function loadPlayerPos() {