Added VITE_DEFAULT_SETTINGS

docs/DOCKER.md

@@ -95,6 +95,8 @@ The following Invidious values must be set in your config.
 ## Step 3: Docker
 Please ensure you have followed the previous steps before doing this!
 
+### Docker Compose
+
 ```yaml
 version: "3"
 services:
@@ -121,6 +123,71 @@ services:
 
       # URL to DeArrow thumbnail instance
       VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE: "https://dearrow-thumb.ajay.app"
+
+      # Look at "Overwriting Materialious defaults" for all the accepted values.
+      VITE_DEFAULT_SETTINGS: '{"themeColor": "#2596be"}'
+```
+
+### Overwriting Materialious defaults
+Materialious allows you to overwrite the default values using `VITE_DEFAULT_SETTINGS`
+
+```json
+{
+  // Set to true to enable dark mode, or false to disable it.
+  "darkMode": true,
+  
+  // Specifies the theme color in hexadecimal format (e.g., #ff0000 for red).
+  "themeColor": "#ff0000",
+  
+  // Set to true to enable autoplay, or false to disable it.
+  "autoPlay": false,
+  
+  // Set to true to always loop videos, or false to loop only when specified.
+  "alwaysLoop": false,
+  
+  // Set to true to proxy videos, or false to play them directly.
+  "proxyVideos": true,
+  
+  // Set to true to enable listening by default, or false to disable it.
+  "listenByDefault": true,
+  
+  // Set to true to save playback position, or false to reset it.
+  "savePlaybackPosition": true,
+  
+  // Set to true to enable DASH playback, or false to use other formats.
+  "dashEnabled": true,
+  
+  // Set to true to enable theatre mode by default, or false to disable it.
+  "theatreModeByDefault": false,
+  
+  // Set to true to autoplay next video by default, or false to disable it.
+  "autoplayNextByDefault": true,
+  
+  // Set to true to return YouTube dislikes, or false to hide them.
+  "returnYtDislikes": false,
+  
+  // Set to true to enable search suggestions, or false to disable them.
+  "searchSuggestions": true,
+  
+  // Set to true to preview video on hover, or false to disable it.
+  "previewVideoOnHover": true,
+  
+  // Set to true to enable sponsor block, or false to disable it.
+  "sponsorBlock": false,
+  
+  // Specifies the categories for sponsor block as comma-separated values.
+  // https://wiki.sponsor.ajay.app/w/Types
+  "sponsorBlockCategories": "sponsor,interaction",
+
+  // Set to true to enable deArrow, or false to disable it.
+  "deArrowEnabled": true,
+
+  // Set to true to enable mini player, or false to disable it.
+  "playerMiniPlayer": true,
+  
+  // Set to true to enable syncious, or false to disable it.
+  "syncious": true,
+}
 ```
 
 ## Step 4 (Optional, but recommended): Self-host RYD-Proxy

materialious/Dockerfile

@@ -18,6 +18,7 @@ RUN echo "VITE_DEFAULT_INVIDIOUS_INSTANCE=VITE_DEFAULT_INVIDIOUS_INSTANCE_PLACEH
     echo "VITE_DEFAULT_PEERJS_PATH=VITE_DEFAULT_PEERJS_PATH_PLACEHOLDER" >> .env && \
     echo "VITE_DEFAULT_PEERJS_PORT=VITE_DEFAULT_PEERJS_PORT_PLACEHOLDER" >> .env && \
     echo "VITE_DEFAULT_SYNCIOUS_INSTANCE=VITE_DEFAULT_SYNCIOUS_INSTANCE_PLACEHOLDER" >> .env && \
+    echo "VITE_DEFAULT_SETTINGS=VITE_DEFAULT_SETTINGS_PLACEHOLDER" >> .env && \
     echo "VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE=VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE_PLACEHOLDER" >> .env
 
 # Install dependencies and build the project

materialious/replace_env_vars.sh

@@ -11,3 +11,4 @@ find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VI
 find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_PATH_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_PATH"'|g' {} +
 find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_PORT_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_PORT"'|g' {} +
 find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_SYNCIOUS_INSTANCE_PLACEHOLDER|'"$VITE_DEFAULT_SYNCIOUS_INSTANCE"'|g' {} +
+find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_SETTINGS_PLACEHOLDER|'"$VITE_DEFAULT_SETTINGS"'|g' {} +

materialious/src/lib/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { bookmarkletSaveToUrl } from '$lib/bookmarklet';
+	import { bookmarkletSaveToUrl } from '$lib/externalSettings';
 	import { Capacitor } from '@capacitor/core';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';

materialious/src/lib/externalSettings.ts

@@ -143,6 +143,39 @@ const persistedStores = [
 	}
 ];
 
+function setStores(toSet: Record<string, any>) {
+	persistedStores.forEach((store) => {
+		let userOverwritten: boolean = false;
+		try {
+			userOverwritten = localStorage.getItem(store.name) !== null;
+		} catch { }
+
+		let paramValue = toSet[store.name];
+		if (typeof paramValue !== 'undefined' && !userOverwritten) {
+			let value: any;
+
+			if (store.type === 'array') {
+				value = paramValue.split(',');
+			} else if (store.type === 'boolean') {
+				value = paramValue === 'true';
+			} else {
+				value = paramValue;
+			}
+
+			store.store.set(value);
+		}
+	});
+}
+
+export function loadSettingsFromEnv() {
+	try {
+		if (typeof import.meta.env.VITE_DEFAULT_SETTINGS !== 'undefined') {
+			const defaultSettings = JSON.parse(import.meta.env.VITE_DEFAULT_SETTINGS);
+			setStores(defaultSettings);
+		}
+	} catch { }
+}
+
 export function bookmarkletSaveToUrl(): string {
 	const url = new URL(location.origin);
 
@@ -159,20 +192,11 @@ export function bookmarkletSaveToUrl(): string {
 export function bookmarkletLoadFromUrl() {
 	const currentPage = get(page);
 
-	persistedStores.forEach((store) => {
-		let paramValue = currentPage.url.searchParams.get(store.name);
-		if (paramValue) {
-			let value: any;
+	const toSet: Record<string, string> = {};
 
-			if (store.type === 'array') {
-				value = paramValue.split(',');
-			} else if (store.type === 'boolean') {
-				value = paramValue === 'true';
-			} else {
-				value = paramValue;
-			}
-
-			store.store.set(value);
-		}
+	currentPage.url.searchParams.forEach((value, key) => {
+		toSet[key] = value;
 	});
+
+	setStores(toSet);
 }

materialious/src/routes/+layout.svelte

@@ -10,7 +10,7 @@
 	import Settings from '$lib/Settings.svelte';
 	import SyncParty from '$lib/SyncParty.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { bookmarkletLoadFromUrl } from '$lib/bookmarklet';
+	import { bookmarkletLoadFromUrl, loadSettingsFromEnv } from '$lib/externalSettings';
 	import { App } from '@capacitor/app';
 	import { Browser } from '@capacitor/browser';
 	import { Capacitor } from '@capacitor/core';
@@ -125,8 +125,6 @@
 	onMount(async () => {
 		ui();
 
-		bookmarkletLoadFromUrl();
-
 		const isDark = get(darkModeStore);
 
 		if (isDark === null) {
@@ -150,6 +148,11 @@
 			await ui('theme', themeHex);
 		}
 
+		loadSettingsFromEnv();
+		// Should always be loaded after env settings
+		// So user preferences overwrite instance preferences.
+		bookmarkletLoadFromUrl();
+
 		if (isLoggedIn) {
 			loadNotifications().catch(() => authStore.set(null));
 		}