Use dynamic/public for custom backend

docs/DOCKER-FULL.md

@@ -23,14 +23,14 @@ services:
       DATABASE_CONNECTION_URI: "sqlite://materialious.db"
 
       # Use Materialious account system.
-      VITE_INTERNAL_AUTH: "true"
+      PUBLIC_INTERNAL_AUTH: "true"
 
       # If Auth is required to use this instance.
       # Should be left as true, otherwise anyone can use Materialious proxy.
-      VITE_REQUIRE_AUTH: "true"
+      PUBLIC_REQUIRE_AUTH: "true"
 
       # Allow anyone to register
-      VITE_REGISTRATION_ALLOWED: "false"
+      PUBLIC_REGISTRATION_ALLOWED: "false"
       
       # Allow any domain in proxy
       # This shouldn't be used unless you KNOW what your doing
@@ -38,37 +38,37 @@ services:
       # VITE_REQUIRE_AUTH to be true
       # VITE_INTERNAL_AUTH to be true
       # to take effect.
-      VITE_DANGEROUS_ALLOW_ANY_PROXY: "false"
+      PUBLIC_DANGEROUS_ALLOW_ANY_PROXY: "false"
 
       # Optionally set a default Invidious instance
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_INVIDIOUS_INSTANCE: "https://invidious.materialio.us"
+      PUBLIC_DEFAULT_INVIDIOUS_INSTANCE: "https://invidious.materialio.us"
 
       # URL Companion instance
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_COMPANION_INSTANCE: "https://companion.materialio.us"
+      PUBLIC_DEFAULT_COMPANION_INSTANCE: "https://companion.materialio.us"
 
       # URL TO RYD (Return YouTube Dislike / https://github.com/Anarios/return-youtube-dislike)
       # Leave blank to disable completely.
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE: "https://returnyoutubedislikeapi.com"
+      PUBLIC_DEFAULT_RETURNYTDISLIKES_INSTANCE: "https://returnyoutubedislikeapi.com"
 
       # URL to Sponsorblock
       # Leave blank to completely disable sponsorblock.
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_SPONSERBLOCK_INSTANCE: "https://sponsor.ajay.app"
+      PUBLIC_DEFAULT_SPONSERBLOCK_INSTANCE: "https://sponsor.ajay.app"
 
       # URL to DeArrow
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_DEARROW_INSTANCE: "https://sponsor.ajay.app"
+      PUBLIC_DEFAULT_DEARROW_INSTANCE: "https://sponsor.ajay.app"
 
       # URL to DeArrow thumbnail instance
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE: "https://dearrow-thumb.ajay.app"
+      PUBLIC_DEFAULT_DEARROW_THUMBNAIL_INSTANCE: "https://dearrow-thumb.ajay.app"
 
       # Look at "Overwriting Materialious defaults" for all the accepted values.
       # This will also whitelist this instance in the proxy.
-      VITE_DEFAULT_SETTINGS: '{"themeColor": "#2596be","region": "US"}'
+      PUBLIC_DEFAULT_SETTINGS: '{"themeColor": "#2596be","region": "US"}'
 
     volumes:
       - materialious-data:/materialious.db

materialious/FullDockerfile

@@ -6,7 +6,7 @@ COPY . .
 RUN npm ci
 
 # Tell SvelteKit to use node adapter.
-ENV VITE_BUILD_WITH_BACKEND="true"
+ENV PUBLIC_BUILD_WITH_BACKEND="true"
 
 RUN npm run build
 RUN npm prune --omit=dev
@@ -22,4 +22,7 @@ COPY package.json .
 EXPOSE 3000
 ENV NODE_ENV=production
 
+# Tell the front end backend is in use.
+ENV PUBLIC_BUILD_WITH_BACKEND="true"
+
 CMD ["node", "build"]

materialious/src/lib/components/Player.svelte

@@ -45,6 +45,7 @@
 	} from '../store';
 	import { setStatusBarColor } from '../theme';
 	import { getVideoYTjs } from '$lib/api/youtubejs/video';
+	import { env } from '$env/dynamic/public';
 	import {
 		goToNextVideo,
 		goToPreviousVideo,
@@ -515,8 +516,11 @@
 			// Due to CORs issues with redirects, hosted instances of Materialious
 			// dirctly provide the companion instance
 			// while clients can just use the reirect provided by Invidious' API
-			if (import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE) {
-				dashUrl = `${import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE}/api/manifest/dash/id/${data.video.videoId}`;
+			if (
+				import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE ||
+				env.PUBLIC_DEFAULT_COMPANION_INSTANCE
+			) {
+				dashUrl = `${import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE || env.PUBLIC_DEFAULT_COMPANION_INSTANCE}/api/manifest/dash/id/${data.video.videoId}`;
 			} else {
 				if (!data.video.dashUrl) {
 					error(500, 'No dash manifest found');
@@ -578,12 +582,16 @@
 			if (data.video.captions) {
 				for (const caption of data.video.captions) {
 					let captionUrl: string;
-					if (!import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE && $invidiousInstanceStore) {
+					if (
+						!import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE &&
+						!env.PUBLIC_DEFAULT_COMPANION_INSTANCE &&
+						$invidiousInstanceStore
+					) {
 						captionUrl = caption.url.startsWith('http')
 							? caption.url
 							: `${new URL($invidiousInstanceStore).origin}${caption.url}`;
 					} else {
-						captionUrl = `${import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE}${caption.url}`;
+						captionUrl = `${import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE || env.PUBLIC_DEFAULT_COMPANION_INSTANCE}${caption.url}`;
 					}
 
 					await player.addTextTrackAsync(

materialious/src/lib/externalSettings.ts

@@ -2,6 +2,8 @@ import { page } from '$app/state';
 import { get, type Writable } from 'svelte/store';
 import { z } from 'zod';
 
+import { env } from '$env/dynamic/public';
+
 import {
 	darkModeStore,
 	deArrowEnabledStore,
@@ -269,9 +271,13 @@ function setStores(toSet: Record<string, unknown>, overwriteExisting = false) {
 }
 
 export function loadSettingsFromEnv() {
-	if (typeof import.meta.env.VITE_DEFAULT_SETTINGS !== 'string') return;
+	if (
+		typeof import.meta.env.VITE_DEFAULT_SETTINGS !== 'string' &&
+		typeof env.PUBLIC_DEFAULT_SETTINGS !== 'string'
+	)
+		return;
 
-	let raw = import.meta.env.VITE_DEFAULT_SETTINGS;
+	let raw = import.meta.env.VITE_DEFAULT_SETTINGS || env.PUBLIC_DEFAULT_SETTINGS;
 
 	// Docker wraps env vars in quotes
 	if (raw.startsWith('"')) raw = raw.slice(1);

materialious/src/lib/misc.ts

@@ -3,6 +3,7 @@ import { resolve } from '$app/paths';
 import he from 'he';
 import type Peer from 'peerjs';
 import { get } from 'svelte/store';
+import { env } from '$env/dynamic/public';
 import {
 	invidiousAuthStore,
 	backendInUseStore,
@@ -85,9 +86,10 @@ export interface PeerInstance {
 
 export function determinePeerJsInstance(): PeerInstance {
 	return {
-		host: import.meta.env.VITE_DEFAULT_PEERJS_HOST || '0.peerjs.com',
-		path: import.meta.env.VITE_DEFAULT_PEERJS_PATH || '/',
-		port: import.meta.env.VITE_DEFAULT_PEERJS_PORT || 443
+		host:
+			import.meta.env.VITE_DEFAULT_PEERJS_HOST || env.PUBLIC_DEFAULT_PEERJS_HOST || '0.peerjs.com',
+		path: import.meta.env.VITE_DEFAULT_PEERJS_PATH || env.PUBLIC_DEFAULT_PEERJS_PATH || '/',
+		port: import.meta.env.VITE_DEFAULT_PEERJS_PORT || env.PUBLIC_DEFAULT_PEERJS_PORT || 443
 	};
 }
 

materialious/src/lib/shared/index.ts

@@ -1,3 +1,5 @@
+import { env } from '$env/dynamic/public';
+
 export type IsOwnBackend = {
 	builtWithBackend: boolean;
 	internalAuth: boolean;
@@ -7,13 +9,13 @@ export type IsOwnBackend = {
 };
 
 export function isOwnBackend(): IsOwnBackend | null {
-	if (import.meta.env.VITE_BUILD_WITH_BACKEND !== 'true') return null;
+	if (env.PUBLIC_BUILD_WITH_BACKEND !== 'true') return null;
 
 	return {
 		builtWithBackend: true,
-		internalAuth: import.meta.env.VITE_INTERNAL_AUTH !== 'false',
-		requireAuth: import.meta.env.VITE_REQUIRE_AUTH !== 'false',
-		registrationAllowed: import.meta.env.VITE_REGISTRATION_ALLOWED === 'true',
-		allowAnyProxy: import.meta.env.VITE_DANGEROUS_ALLOW_ANY_PROXY === 'true'
+		internalAuth: env.PUBLIC_INTERNAL_AUTH !== 'false',
+		requireAuth: env.PUBLIC_REQUIRE_AUTH !== 'false',
+		registrationAllowed: env.PUBLIC_REGISTRATION_ALLOWED === 'true',
+		allowAnyProxy: env.PUBLIC_DANGEROUS_ALLOW_ANY_PROXY === 'true'
 	};
 }

materialious/src/lib/store.ts

@@ -3,6 +3,7 @@ import type Peer from 'peerjs';
 import type { DataConnection } from 'peerjs';
 import { writable, type Writable } from 'svelte/store';
 import { Preferences } from '@capacitor/preferences';
+import { env } from '$env/dynamic/public';
 import {
 	persist,
 	createLocalStorage,
@@ -88,9 +89,11 @@ function ifNotWebDefault(givenValue: any, defaultValue: any): any {
 
 export const invidiousInstanceStore: Writable<string | undefined> = persist(
 	writable(
-		!import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE
+		!import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE || !env.PUBLIC_DEFAULT_INVIDIOUS_INSTANCE
 			? undefined
-			: ensureNoTrailingSlash(import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE)
+			: ensureNoTrailingSlash(
+					import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE || env.PUBLIC_DEFAULT_INVIDIOUS_INSTANCE
+				)
 	),
 	createStorage(),
 	'invidiousInstance'
@@ -190,7 +193,8 @@ export const returnYtDislikesStore = persist(writable(false), createStorage(), '
 export const returnYTDislikesInstanceStore: Writable<string | null | undefined> = persist(
 	writable(
 		ifNotWebDefault(
-			import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE,
+			import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE ||
+				env.PUBLIC_DEFAULT_RETURNYTDISLIKES_INSTANCE,
 			'https://ryd-proxy.materialio.us'
 		)
 	),
@@ -203,7 +207,8 @@ export const synciousInstanceStore: Writable<string | null | undefined> = persis
 	writable(
 		ifNotWebDefault(
 			import.meta.env.VITE_DEFAULT_SYNCIOUS_INSTANCE ||
-				import.meta.env.VITE_DEFAULT_API_EXTENDED_INSTANCE,
+				import.meta.env.VITE_DEFAULT_API_EXTENDED_INSTANCE ||
+				env.PUBLIC_DEFAULT_RETURNYTDISLIKES_INSTANCE,
 			'https://extended-api.materialio.us'
 		)
 	),
@@ -276,7 +281,11 @@ export const interfaceAndroidUseNativeShare = persist(
 
 export const sponsorBlockStore = persist(writable(true), createStorage(), 'sponsorBlock');
 export const sponsorBlockUrlStore: Writable<string | null | undefined> = persist(
-	writable(import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE || 'https://sponsor.ajay.app'),
+	writable(
+		import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE ||
+			env.PUBLIC_DEFAULT_SPONSERBLOCK_INSTANCE ||
+			'https://sponsor.ajay.app'
+	),
 	createStorage(),
 	'sponsorBlockUrl'
 );
@@ -297,7 +306,11 @@ export const sponsorBlockTimelineStore: Writable<boolean> = persist(
 );
 
 export const deArrowInstanceStore = persist(
-	writable(import.meta.env.VITE_DEFAULT_DEARROW_INSTANCE || 'https://sponsor.ajay.app'),
+	writable(
+		import.meta.env.VITE_DEFAULT_DEARROW_INSTANCE ||
+			env.PUBLIC_DEFAULT_DEARROW_INSTANCE ||
+			'https://sponsor.ajay.app'
+	),
 	createStorage(),
 	'deArrowInstance'
 );
@@ -305,7 +318,9 @@ export const deArrowEnabledStore = persist(writable(false), createStorage(), 'de
 export const deArrowTitlesOnly = persist(writable(true), createStorage(), 'deArrowTitlesOnly');
 export const deArrowThumbnailInstanceStore = persist(
 	writable(
-		import.meta.env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE || 'https://dearrow-thumb.ajay.app'
+		import.meta.env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE ||
+			env.PUBLIC_DEFAULT_DEARROW_THUMBNAIL_INSTANCE ||
+			'https://dearrow-thumb.ajay.app'
 	),
 	createStorage(),
 	'deArrowThumbnailInstance'

materialious/src/routes/api/proxy/[urlToProxy]/+server.ts

@@ -1,6 +1,7 @@
 import { isOwnBackend } from '$lib/shared';
 import psl from 'psl';
-import { env } from '$env/dynamic/private';
+import { env } from '$env/dynamic/public';
+
 import { error } from '@sveltejs/kit';
 
 const allowedDomains: string[] = [
@@ -14,13 +15,13 @@ const allowedDomains: string[] = [
 ];
 
 const dynamicAllowDomains = [
-	env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE,
-	env.VITE_DEFAULT_DEARROW_INSTANCE,
-	env.VITE_DEFAULT_INVIDIOUS_INSTANCE,
-	env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE,
-	env.VITE_DEFAULT_API_EXTENDED_INSTANCE,
-	env.VITE_DEFAULT_SYNCIOUS_INSTANCE,
-	env.VITE_DEFAULT_COMPANION_INSTANCE
+	env.PUBLIC_DEFAULT_DEARROW_THUMBNAIL_INSTANCE,
+	env.PUBLIC_DEFAULT_DEARROW_INSTANCE,
+	env.PUBLIC_DEFAULT_INVIDIOUS_INSTANCE,
+	env.PUBLIC_DEFAULT_RETURNYTDISLIKES_INSTANCE,
+	env.PUBLIC_DEFAULT_API_EXTENDED_INSTANCE,
+	env.PUBLIC_DEFAULT_SYNCIOUS_INSTANCE,
+	env.PUBLIC_DEFAULT_COMPANION_INSTANCE
 ];
 
 dynamicAllowDomains.forEach((domain) => {

materialious/svelte.config.js

@@ -3,7 +3,7 @@ import adapterNode from '@sveltejs/adapter-node';
 
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-const useSsr = process.env.VITE_BUILD_WITH_BACKEND === 'true';
+const useSsr = process.env.PUBLIC_BUILD_WITH_BACKEND === 'true';
 
 const adapter = useSsr
 	? adapterNode({ out: 'build', precompress: true })