From 544b8d8c84d3a21208e00f4fa59802c7cb4f449c Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 9 May 2024 12:20:05 +1200
Subject: [PATCH] Added VITE_DEFAULT_SETTINGS

---
 docs/DOCKER.md                                | 67 +++++++++++++++++++
 materialious/Dockerfile                       |  1 +
 materialious/replace_env_vars.sh              |  1 +
 materialious/src/lib/Settings.svelte          |  2 +-
 .../{bookmarklet.ts => externalSettings.ts}   | 52 ++++++++++----
 materialious/src/routes/+layout.svelte        |  9 ++-
 6 files changed, 114 insertions(+), 18 deletions(-)
 rename materialious/src/lib/{bookmarklet.ts => externalSettings.ts} (83%)

diff --git a/docs/DOCKER.md b/docs/DOCKER.md
index c0c11f25..9427d24e 100644
--- a/docs/DOCKER.md
+++ b/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
diff --git a/materialious/Dockerfile b/materialious/Dockerfile
index 0b4cc4e7..7c47e49c 100644
--- a/materialious/Dockerfile
+++ b/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
diff --git a/materialious/replace_env_vars.sh b/materialious/replace_env_vars.sh
index 2800ab14..ba74d461 100644
--- a/materialious/replace_env_vars.sh
+++ b/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' {} +
diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte
index 35979121..f82e3c43 100644
--- a/materialious/src/lib/Settings.svelte
+++ b/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';
diff --git a/materialious/src/lib/bookmarklet.ts b/materialious/src/lib/externalSettings.ts
similarity index 83%
rename from materialious/src/lib/bookmarklet.ts
rename to materialious/src/lib/externalSettings.ts
index 21c426bf..9ce4ba3f 100644
--- a/materialious/src/lib/bookmarklet.ts
+++ b/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);
 }
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index b3e2f1f6..205627fc 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/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));
 		}