Added enable CC by default option

materialious/electron/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.9.17",
+	"version": "1.9.18",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.9.17",
+			"version": "1.9.18",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",

materialious/src/lib/components/Player.svelte

@@ -29,6 +29,7 @@
 		playerAndroidLockOrientation,
 		playerAutoplayNextByDefaultStore,
 		playerAutoPlayStore,
+		playerCCByDefault,
 		playerDefaultLanguage,
 		playerDefaultPlaybackSpeed,
 		playerDefaultQualityStore,
@@ -313,6 +314,24 @@
 		return false;
 	}
 
+	function toggleSubtitles() {
+		const isVisible = player.isTextTrackVisible();
+		if (isVisible) {
+			player.setTextTrackVisibility(false);
+		} else {
+			const defaultLanguage = get(playerDefaultLanguage);
+			const langCode = ISO6391.getCode(defaultLanguage);
+
+			const tracks = player.getTextTracks();
+			const subtitleTrack = tracks.find((track) => track.language === langCode);
+
+			if (subtitleTrack) {
+				player.selectTextTrack(subtitleTrack);
+				player.setTextTrackVisibility(true);
+			}
+		}
+	}
+
 	page.subscribe((pageUpdate) => loadTimeFromUrl(pageUpdate));
 
 	async function loadVideo() {
@@ -394,6 +413,9 @@
 
 		restoreQualityPreference();
 		restoreDefaultLanguage();
+		if ($playerCCByDefault) {
+			toggleSubtitles();
+		}
 
 		if ($playerDefaultPlaybackSpeed && playerElement) {
 			playerElement.playbackRate = $playerDefaultPlaybackSpeed;
@@ -539,21 +561,7 @@
 		}
 
 		Mousetrap.bind('c', () => {
-			const isVisible = player.isTextTrackVisible();
-			if (isVisible) {
-				player.setTextTrackVisibility(false);
-			} else {
-				const defaultLanguage = get(playerDefaultLanguage);
-				const langCode = ISO6391.getCode(defaultLanguage);
-
-				const tracks = player.getTextTracks();
-				const subtitleTrack = tracks.find((track) => track.language === langCode);
-
-				if (subtitleTrack) {
-					player.selectTextTrack(subtitleTrack);
-					player.setTextTrackVisibility(true);
-				}
-			}
+			toggleSubtitles();
 			return false;
 		});
 

materialious/src/lib/components/Settings/Player.svelte

@@ -9,6 +9,7 @@
 		playerAndroidLockOrientation,
 		playerAutoPlayStore,
 		playerAutoplayNextByDefaultStore,
+		playerCCByDefault,
 		playerDefaultLanguage,
 		playerDefaultPlaybackSpeed,
 		playerDefaultQualityStore,
@@ -133,6 +134,22 @@
 	</div>
 {/if}
 
+<div class="field no-margin">
+	<nav class="no-padding">
+		<div class="max">
+			<div>{$_('layout.player.ccByDefault')}</div>
+		</div>
+		<label class="switch" tabindex="0" role="switch">
+			<input
+				type="checkbox"
+				bind:checked={$playerCCByDefault}
+				onclick={() => playerCCByDefault.set(!$playerCCByDefault)}
+			/>
+			<span></span>
+		</label>
+	</nav>
+</div>
+
 <div class="field no-margin">
 	<nav class="no-padding">
 		<div class="max">

materialious/src/lib/externalSettings.ts

@@ -34,7 +34,8 @@ import {
 	themeColorStore,
 	interfaceAutoExpandChapters,
 	playerDefaultPlaybackSpeed,
-	playerStatisticsByDefault
+	playerStatisticsByDefault,
+	playerCCByDefault
 } from '$lib/store';
 import { get, type Writable } from 'svelte/store';
 
@@ -217,6 +218,11 @@ const persistedStores: {
 		name: 'playerStatistics',
 		store: playerStatisticsByDefault,
 		type: 'boolean'
+	},
+	{
+		name: 'CCByDefault',
+		store: playerCCByDefault,
+		type: 'boolean'
 	}
 ];
 
@@ -227,7 +233,7 @@ function setStores(toSet: Record<string, any>) {
 			userOverwritten = localStorage.getItem(store.name) !== null;
 		} catch {}
 
-		let paramValue = toSet[store.name];
+		const paramValue = toSet[store.name];
 		if (typeof paramValue !== 'undefined' && !userOverwritten) {
 			let value: any;
 

materialious/src/lib/i18n/locales/en.json

@@ -144,6 +144,7 @@
 			"alwaysLoopVideo": "Always loop video",
 			"savePlaybackPosition": "Save playback position",
 			"listenByDefault": "Listen by default",
+			"ccByDefault": "Subtitles on by default",
 			"theatreModeByDefault": "Theatre mode by default",
 			"autoPlayNextByDefault": "Autoplay next by default",
 			"miniPlayer": "Mini player",

materialious/src/lib/patches/youtubejs.ts

@@ -98,7 +98,7 @@ export async function patchYoutubeJs(videoId: string): Promise<VideoPlay> {
 				? video.streaming_data.hls_manifest_url // HLS is preferred for DVR streams.
 				: `${video.streaming_data.dash_manifest_url}/mpd_version/7`;
 		} else {
-			dashUri = `data:application/dash+xml;base64,${btoa(await video.toDash(undefined))}`;
+			dashUri = `data:application/dash+xml;base64,${btoa(await video.toDash({ captions_format: 'vtt' }))}`;
 		}
 	}
 
@@ -133,16 +133,6 @@ export async function patchYoutubeJs(videoId: string): Promise<VideoPlay> {
 		});
 	});
 
-	const captions: Captions[] = [];
-	video.captions?.caption_tracks?.forEach((caption) => {
-		captions.push({
-			label: caption.name?.toString() || '',
-			language_code: caption.language_code,
-			// Add correct format to url.
-			url: caption.base_url + '&fmt=vtt'
-		});
-	});
-
 	const adaptiveFormats: AdaptiveFormats[] = [];
 	video.streaming_data?.adaptive_formats.forEach((format) => {
 		adaptiveFormats.push({

materialious/src/lib/store.ts

@@ -53,7 +53,8 @@ export const playerAutoplayNextByDefaultStore = persisted('autoplayNextByDefault
 export const playerYouTubeJsFallback = persisted('youTubeJsFallback', true);
 export const playerYouTubeJsAlways = persisted('youTubeJsAlways', false);
 export const playerAndroidLockOrientation = persisted('androidLockOrientation', true);
-export const playerDefaultLanguage = persisted('defaultLanguage', '');
+export const playerDefaultLanguage = persisted('defaultLanguage', 'english');
+export const playerCCByDefault = persisted('CCByDefault', false);
 export const playerDefaultPlaybackSpeed: Writable<number> = persisted('defaultPlaybackSpeed', 1);
 export const playerStatisticsByDefault = persisted('playerStatistics', false);