From 06bad1753ca56f87f1d49f6d488aee475ad60d32 Mon Sep 17 00:00:00 2001
From: Precific <Precific@users.noreply.github.com>
Date: Sat, 1 Nov 2025 17:21:26 +0100
Subject: [PATCH 1/5] Support non-root base paths

Allows materialious to be hosted on a subdirectory, e.g. https://domain/materialious/

Add base configuration comments to svelte.config.js and vite.config.ts
---
 .../src/lib/components/ChannelThumbnail.svelte    |  3 ++-
 materialious/src/lib/components/Comment.svelte    |  5 +++--
 .../src/lib/components/HashtagThumbnail.svelte    |  3 ++-
 materialious/src/lib/components/Player.svelte     |  7 ++++---
 .../src/lib/components/PlaylistThumbnail.svelte   |  8 ++++----
 materialious/src/lib/components/Search.svelte     |  7 ++++---
 .../src/lib/components/Settings/Interface.svelte  |  3 ++-
 materialious/src/lib/components/ShareVideo.svelte |  3 ++-
 materialious/src/lib/components/SyncParty.svelte  |  9 +++++----
 materialious/src/lib/components/Thumbnail.svelte  |  3 ++-
 materialious/src/lib/components/Transcript.svelte |  2 +-
 .../src/lib/components/Watch/Author.svelte        |  3 ++-
 .../src/lib/components/Watch/Description.svelte   |  3 ++-
 materialious/src/lib/misc.ts                      | 13 +++++++++++--
 materialious/src/routes/(app)/+layout.svelte      | 15 ++++++++-------
 materialious/src/routes/(app)/auth/+page.svelte   |  3 ++-
 materialious/src/routes/(app)/playlist/+page.ts   |  3 ++-
 .../src/routes/(app)/playlist/[slug]/+page.svelte |  9 +++++----
 .../(app)/subscriptions/manage/+page.svelte       |  3 ++-
 materialious/src/routes/(app)/watch/+page.ts      |  3 ++-
 .../src/routes/(app)/watch/[slug]/+page.svelte    |  3 ++-
 materialious/src/routes/+layout.ts                | 11 ++++++-----
 materialious/svelte.config.js                     |  3 +++
 materialious/vite.config.ts                       |  2 ++
 24 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/materialious/src/lib/components/ChannelThumbnail.svelte b/materialious/src/lib/components/ChannelThumbnail.svelte
index 1749f00b..6a042735 100644
--- a/materialious/src/lib/components/ChannelThumbnail.svelte
+++ b/materialious/src/lib/components/ChannelThumbnail.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
 	import { cleanNumber } from '$lib/numbers';
 	import { onMount } from 'svelte';
@@ -28,7 +29,7 @@
 	});
 </script>
 
-<a href={`/channel/${channel.authorId}`} class="wave" style="min-width: 100%;min-height: 100%;">
+<a href={`${base}/channel/${channel.authorId}`} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
 		{#if !$interfaceLowBandwidthMode}
 			<div class="center-align">
diff --git a/materialious/src/lib/components/Comment.svelte b/materialious/src/lib/components/Comment.svelte
index 70364bed..949f09f3 100644
--- a/materialious/src/lib/components/Comment.svelte
+++ b/materialious/src/lib/components/Comment.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { getComments } from '$lib/api';
 	import { type Comment, type Comments } from '$lib/api/model';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
@@ -34,7 +35,7 @@
 	function commentTimestamps(html: string): string {
 		const regex =
 			/<a href="([^"]+)" data-onclick="jump_to_time" data-jump-time="(\d+)">([^<]+)<\/a>\s*(.+)/g;
-		const replacement = `<a href="/watch/${videoId}?time=$2" data-sveltekit-preload-data="off" class="link">$3 $4</a>`;
+		const replacement = `<a href="${base}/watch/${videoId}?time=$2" data-sveltekit-preload-data="off" class="link">$3 $4</a>`;
 
 		const processedHtml = html.replace(regex, replacement);
 
@@ -63,7 +64,7 @@
 				<progress class="circle"></progress>
 			{/if}
 			<div class="comment-info">
-				<a href={`/channel/${comment.authorId}`} class="author">
+				<a href={`${base}/channel/${comment.authorId}`} class="author">
 					<span class="bold" class:channel-owner={comment.authorIsChannelOwner}>
 						{comment.author}
 					</span>
diff --git a/materialious/src/lib/components/HashtagThumbnail.svelte b/materialious/src/lib/components/HashtagThumbnail.svelte
index 58737d8a..49dd5f95 100644
--- a/materialious/src/lib/components/HashtagThumbnail.svelte
+++ b/materialious/src/lib/components/HashtagThumbnail.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { cleanNumber } from '$lib/numbers';
 	import { _ } from '$lib/i18n';
 	import type { HashTag } from '../api/model';
@@ -11,7 +12,7 @@
 	let { hashtag }: Props = $props();
 </script>
 
-<a href={hashtag.url} class="wave" style="min-width: 100%;min-height: 100%;">
+<a href={base+hashtag.url} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
 		<h5 class="center-align">{truncate(hashtag.title, 14)}</h5>
 		<h6 style="margin-top: 0;" class="center-align grey-text medium-text">
diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index dd651b51..ecdde37f 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { getBestThumbnail } from '$lib/images';
 	import { padTime, videoLength } from '$lib/numbers';
@@ -355,7 +356,7 @@
 			if (data.video.captions) {
 				for (const caption of data.video.captions) {
 					await player.addTextTrackAsync(
-						caption.url.startsWith('http') ? caption.url : `${get(instanceStore)}${caption.url}`,
+						caption.url.startsWith('http') ? caption.url : `${new URL(get(instanceStore)).origin}${caption.url}`,
 						caption.language_code,
 						'captions',
 						undefined,
@@ -693,7 +694,7 @@
 			if (!data.playlistId) {
 				if ($playerAutoplayNextByDefaultStore) {
 					goto(
-						`/${$isAndroidTvStore ? 'tv' : 'watch'}/${data.video.recommendedVideos[0].videoId}`,
+						`${base}/${$isAndroidTvStore ? 'tv' : 'watch'}/${data.video.recommendedVideos[0].videoId}`,
 						{ replaceState: $isAndroidTvStore }
 					);
 				}
@@ -739,7 +740,7 @@
 				}
 
 				goto(
-					`/${$isAndroidTvStore ? 'tv' : 'watch'}/${goToVideo.videoId}?playlist=${data.playlistId}`,
+					`${base}/${$isAndroidTvStore ? 'tv' : 'watch'}/${goToVideo.videoId}?playlist=${data.playlistId}`,
 					{ replaceState: $isAndroidTvStore }
 				);
 			}
diff --git a/materialious/src/lib/components/PlaylistThumbnail.svelte b/materialious/src/lib/components/PlaylistThumbnail.svelte
index ff110452..b9dc90e1 100644
--- a/materialious/src/lib/components/PlaylistThumbnail.svelte
+++ b/materialious/src/lib/components/PlaylistThumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getBestThumbnail } from '$lib/images';
+	import { base } from '$app/paths';
 	import { letterCase } from '$lib/letterCasing';
 	import { onMount } from 'svelte';
 	import { _ } from '$lib/i18n';
@@ -48,7 +48,7 @@
 </script>
 
 <a
-	href={playlistLink}
+	href={base+playlistLink}
 	class:link-disabled={disabled}
 	style="width: 100%; overflow: hidden;min-height:100px;"
 	class="wave"
@@ -77,11 +77,11 @@
 <div class="small-padding">
 	<nav class="no-margin">
 		<div class="max">
-			<a class:link-disabled={disabled} href={playlistLink}
+			<a class:link-disabled={disabled} href={base+playlistLink}
 				><div class="bold">{letterCase(truncate(playlist.title))}</div></a
 			>
 			<div>
-				<a class:link-disabled={playlist.authorId === null} href={`/channel/${playlist.authorId}`}
+				<a class:link-disabled={playlist.authorId === null} href={`${base}/channel/${playlist.authorId}`}
 					>{playlist.author}</a
 				>
 			</div>
diff --git a/materialious/src/lib/components/Search.svelte b/materialious/src/lib/components/Search.svelte
index 3c22de02..8c577c51 100644
--- a/materialious/src/lib/components/Search.svelte
+++ b/materialious/src/lib/components/Search.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import Mousetrap from 'mousetrap';
 	import { createEventDispatcher, onMount, tick } from 'svelte';
@@ -42,7 +43,7 @@
 		if (search.trim() === '') return;
 
 		selectedSuggestionIndex = -1;
-		goto(`/search/${encodeURIComponent(search)}`);
+		goto(`${base}/search/${encodeURIComponent(search)}`);
 
 		suggestionsForSearch = [];
 		showSearchBox = false;
@@ -154,7 +155,7 @@
 									handleSubmit();
 								}}
 								class:selected={index === selectedSuggestionIndex}
-								href={`/search/${encodeURIComponent(suggestion)}`}
+								href={`${base}/search/${encodeURIComponent(suggestion)}`}
 							>
 								<div>{suggestion}</div>
 							</a>
@@ -168,7 +169,7 @@
 								onclick={() => {
 									search = history;
 								}}
-								href={`/search/${encodeURIComponent(history)}`}
+								href={`${base}/search/${encodeURIComponent(history)}`}
 							>
 								<div>{history}</div>
 							</a>
diff --git a/materialious/src/lib/components/Settings/Interface.svelte b/materialious/src/lib/components/Settings/Interface.svelte
index 2555dc62..5d9b0f23 100644
--- a/materialious/src/lib/components/Settings/Interface.svelte
+++ b/materialious/src/lib/components/Settings/Interface.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { bookmarkletSaveToUrl } from '$lib/externalSettings';
 	import { letterCase, titleCases } from '$lib/letterCasing';
 	import { setAmoledTheme } from '$lib/theme';
@@ -89,7 +90,7 @@
 
 		instanceStore.set(instance);
 		authStore.set(null);
-		goto('/', { replaceState: true });
+		goto(base+'/', { replaceState: true });
 		ui('#dialog-settings');
 	}
 
diff --git a/materialious/src/lib/components/ShareVideo.svelte b/materialious/src/lib/components/ShareVideo.svelte
index f28465f3..6921b98c 100644
--- a/materialious/src/lib/components/ShareVideo.svelte
+++ b/materialious/src/lib/components/ShareVideo.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { instanceStore } from '$lib/store';
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
@@ -33,7 +34,7 @@
 		if (Capacitor.isNativePlatform()) {
 			url = `${get(instanceStore)}/watch/${video.videoId}`;
 		} else {
-			url = `${location.origin}/watch/${video.videoId}`;
+			url = `${location.origin}${base}/watch/${video.videoId}`;
 		}
 		if (includeTimestamp && currentTime !== undefined) {
 			url += `?time=${Math.floor(currentTime)}`;
diff --git a/materialious/src/lib/components/SyncParty.svelte b/materialious/src/lib/components/SyncParty.svelte
index 4c2f4d33..aa81f882 100644
--- a/materialious/src/lib/components/SyncParty.svelte
+++ b/materialious/src/lib/components/SyncParty.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { peerJs, removeWindowQueryFlag, setWindowQueryFlag } from '$lib/misc';
 	import type { PlayerEvents } from '$lib/player';
@@ -20,7 +21,7 @@
 
 			events.events.forEach((event) => {
 				if (event.type === 'change-video' && event.videoId) {
-					currentUrl.pathname = `/watch/${event.videoId}`;
+					currentUrl.pathname = `${base}/watch/${event.videoId}`;
 					goto(currentUrl);
 				} else if (event.type === 'goto' && event.path && event.path !== $page.url.pathname) {
 					if (blockedPages.includes(event.path.replace('/', ''))) {
@@ -72,7 +73,7 @@
 	}
 
 	page.subscribe((newPage) => {
-		if (!newPage.url.pathname.startsWith('/watch') && $syncPartyPeerStore) {
+		if (!newPage.url.pathname.startsWith(base+'/watch') && $syncPartyPeerStore) {
 			$syncPartyConnectionsStore?.forEach((conn) => {
 				conn.send({
 					events: [
@@ -124,14 +125,14 @@
 				<input
 					name="sync-share"
 					readonly
-					value={`${location.origin}?sync=${$syncPartyPeerStore.id}`}
+					value={`${location.origin}${base}/?sync=${$syncPartyPeerStore.id}`}
 					type="text"
 				/>
 				<label class="active" for="sync-share">Share URL</label>
 			</div>
 			<button
 				onclick={async () => {
-					await Clipboard.write({ string: `${location.origin}?sync=${$syncPartyPeerStore?.id}` });
+					await Clipboard.write({ string: `${location.origin}${base}/?sync=${$syncPartyPeerStore?.id}` });
 				}}
 				class="square round"
 			>
diff --git a/materialious/src/lib/components/Thumbnail.svelte b/materialious/src/lib/components/Thumbnail.svelte
index 1e7a1f19..42b653b2 100644
--- a/materialious/src/lib/components/Thumbnail.svelte
+++ b/materialious/src/lib/components/Thumbnail.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { getBestThumbnail } from '$lib/images';
 	import { letterCase } from '$lib/letterCasing';
 	import { cleanNumber, videoLength } from '$lib/numbers';
@@ -214,7 +215,7 @@
 			</a>
 
 			<div>
-				<a tabindex="-1" class:author={!sideways} href={`/channel/${video.authorId}`}
+				<a tabindex="-1" class:author={!sideways} href={`${base}/channel/${video.authorId}`}
 					>{video.author}
 				</a>
 
diff --git a/materialious/src/lib/components/Transcript.svelte b/materialious/src/lib/components/Transcript.svelte
index 2de61aaa..7e02d23c 100644
--- a/materialious/src/lib/components/Transcript.svelte
+++ b/materialious/src/lib/components/Transcript.svelte
@@ -48,7 +48,7 @@
 
 		isLoading = true;
 		transcript = null;
-		const resp = await fetch(`${!video.fallbackPatch ? get(instanceStore) : ''}${url}`);
+		const resp = await fetch(`${!video.fallbackPatch ? new URL(get(instanceStore)).origin : ''}${url}`);
 		transcript = await parseText(await resp.text(), { strict: false });
 
 		// Group cues by Math.ceil(startTime)
diff --git a/materialious/src/lib/components/Watch/Author.svelte b/materialious/src/lib/components/Watch/Author.svelte
index 5b822426..74d7ec77 100644
--- a/materialious/src/lib/components/Watch/Author.svelte
+++ b/materialious/src/lib/components/Watch/Author.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { deleteUnsubscribe, postSubscribe } from '$lib/api';
 	import type { VideoPlay } from '$lib/api/model';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
@@ -21,7 +22,7 @@
 </script>
 
 <nav>
-	<a href={`/channel/${video.authorId}`}>
+	<a href={`${base}/channel/${video.authorId}`}>
 		<nav style="gap: 0.5em;">
 			{#if !$interfaceLowBandwidthMode}
 				<img
diff --git a/materialious/src/lib/components/Watch/Description.svelte b/materialious/src/lib/components/Watch/Description.svelte
index 318132bf..e918779f 100644
--- a/materialious/src/lib/components/Watch/Description.svelte
+++ b/materialious/src/lib/components/Watch/Description.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { numberWithCommas } from '$lib/numbers';
 	import { _ } from '$lib/i18n';
 	import type { VideoPlay } from '$lib/api/model';
@@ -34,7 +35,7 @@
 			<article class="border">
 				<nav class="scroll">
 					{#each video.keywords as keyword}
-						<a href={`/search/${encodeURIComponent(keyword)}`} class="chip">{keyword}</a>
+						<a href={`${base}/search/${encodeURIComponent(keyword)}`} class="chip">{keyword}</a>
 					{/each}
 				</nav>
 			</article>
diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts
index 2ed670a6..2a6766dc 100644
--- a/materialious/src/lib/misc.ts
+++ b/materialious/src/lib/misc.ts
@@ -1,4 +1,5 @@
 import { pushState } from '$app/navigation';
+import { base } from '$app/paths';
 import { page } from '$app/stores';
 import he from 'he';
 import type Peer from 'peerjs';
@@ -25,7 +26,15 @@ export function decodeHtmlCharCodes(str: string): string {
 
 export function proxyVideoUrl(source: string): string {
 	const rawSrc = new URL(source);
-	rawSrc.host = get(instanceStore).replace('http://', '').replace('https://', '');
+	const instURLStr = get(instanceStore);
+	const instURL = new URL(instURLStr);
+	rawSrc.host = instURL.host;
+	rawSrc.protocol = instURL.protocol;
+	let pathPrefix = instURL.pathname;
+	if (pathPrefix.endsWith("/")) {
+		pathPrefix = pathPrefix.substring(0, pathPrefix.length - 1);
+	}
+	rawSrc.pathname = pathPrefix + rawSrc.pathname;
 
 	return rawSrc.toString();
 }
@@ -131,7 +140,7 @@ export function expandSummery(id: string) {
 
 export function createVideoUrl(videoId: string, playlistId: string): URL {
 	const watchUrl = new URL(
-		`${location.origin}/${get(isAndroidTvStore) ? 'tv' : 'watch'}/${videoId}`
+		`${location.origin}${base}/${get(isAndroidTvStore) ? 'tv' : 'watch'}/${videoId}`
 	);
 
 	if (playlistId !== '') {
diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index 6d0dbf44..e65d7531 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 
 	import { navigating, page } from '$app/stores';
@@ -91,7 +92,7 @@
 				return;
 			}
 
-			goto(`/watch/${videoId}`);
+			goto(`${base}/watch/${videoId}`);
 		} else {
 			// Auth response handling for Mobile
 			const username = url.searchParams.get('username');
@@ -117,7 +118,7 @@
 				path.search = searchParams.toString();
 				await Browser.open({ url: path.toString() });
 			} else {
-				searchParams.set('callback_url', `${location.origin}/auth`);
+				searchParams.set('callback_url', `${location.origin}${base}/auth`);
 				path.search = searchParams.toString();
 				document.location.href = path.toString();
 			}
@@ -162,7 +163,7 @@
 					console.log(sid);
 					authStore.set({ username: rawUsername, token: sid });
 					await ui('#tv-login');
-					goto('/', { replaceState: true });
+					goto(base+'/', { replaceState: true });
 					return;
 				}
 			}
@@ -176,7 +177,7 @@
 		feedCacheStore.set({});
 		searchCacheStore.set({});
 		playlistCacheStore.set({});
-		goto('/');
+		goto(base+'/');
 	}
 
 	async function loadNotifications() {
@@ -266,7 +267,7 @@
 	<nav class="left m l surface-container" class:tv-nav={$isAndroidTvStore}>
 		<header
 			role="presentation"
-			onclick={() => goto($interfaceDefaultPage)}
+			onclick={() => goto(base+$interfaceDefaultPage)}
 			style="cursor: pointer;"
 			tabindex="-1"
 			class="small-padding"
@@ -275,7 +276,7 @@
 		</header>
 		{#each getPages() as navPage}
 			{#if !navPage.requiresAuth || isLoggedIn}
-				<a href={navPage.href} class:active={$page.url.href.endsWith(navPage.href)}
+				<a href={base+navPage.href} class:active={$page.url.href.endsWith(navPage.href)}
 					><i>{navPage.icon}</i>
 					<div>{navPage.name}</div>
 				</a>
@@ -354,7 +355,7 @@
 			{#if !navPage.requiresAuth || isLoggedIn}
 				<a
 					class="round"
-					href={navPage.href}
+					href={base+navPage.href}
 					class:active={$page.url.href.endsWith(navPage.href)}
 					data-sveltekit-preload-data="off"
 					><i>{navPage.icon}</i>
diff --git a/materialious/src/routes/(app)/auth/+page.svelte b/materialious/src/routes/(app)/auth/+page.svelte
index 1182dc73..048f946e 100644
--- a/materialious/src/routes/(app)/auth/+page.svelte
+++ b/materialious/src/routes/(app)/auth/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import PageLoading from '$lib/components/PageLoading.svelte';
 	import { authStore } from '$lib/store';
@@ -17,7 +18,7 @@
 			});
 		}
 
-		goto('/');
+		goto(base+'/');
 	});
 </script>
 
diff --git a/materialious/src/routes/(app)/playlist/+page.ts b/materialious/src/routes/(app)/playlist/+page.ts
index 40b7e108..5b0e9a20 100644
--- a/materialious/src/routes/(app)/playlist/+page.ts
+++ b/materialious/src/routes/(app)/playlist/+page.ts
@@ -1,10 +1,11 @@
 import { goto } from '$app/navigation';
+import { base } from '$app/paths';
 import { error } from '@sveltejs/kit';
 
 export async function load({ url }) {
 	const playlistId = url.searchParams.get('list');
 	if (playlistId) {
-		goto(`/playlist/${playlistId}`);
+		goto(`${base}/playlist/${playlistId}`);
 	} else {
 		error(404);
 	}
diff --git a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
index 4918015b..f87ce5fe 100644
--- a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { unsafeRandomItem } from '$lib/misc';
 	import { cleanNumber } from '$lib/numbers';
 	import { isAndroidTvStore, playlistSettingsStore } from '$lib/store';
@@ -15,8 +16,8 @@
 		<nav>
 			<a
 				href={!$isAndroidTvStore
-					? `/watch/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`
-					: `/tv/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`}
+					? `${base}/watch/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`
+					: `${base}/tv/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`}
 				class="button circle extra no-margin"
 			>
 				<i>play_arrow</i>
@@ -27,8 +28,8 @@
 
 			<a
 				href={!$isAndroidTvStore
-					? `/watch/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`
-					: `/tv/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`}
+					? `${base}/watch/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`
+					: `${base}/tv/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`}
 				onclick={() =>
 					playlistSettingsStore.set({
 						[data.playlist.info.playlistId]: { shuffle: true, loop: false }
diff --git a/materialious/src/routes/(app)/subscriptions/manage/+page.svelte b/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
index 28107bbf..891a5c62 100644
--- a/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
+++ b/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { deleteUnsubscribe } from '$lib/api';
 	import Fuse from 'fuse.js';
 	import { _ } from '$lib/i18n';
@@ -45,7 +46,7 @@
 {#each subscriptions as sub}
 	<article>
 		<nav>
-			<a href={`/channel/${sub.authorId}`}
+			<a href={`${base}/channel/${sub.authorId}`}
 				><h6>
 					{sub.author}
 				</h6></a
diff --git a/materialious/src/routes/(app)/watch/+page.ts b/materialious/src/routes/(app)/watch/+page.ts
index 6147205b..b96aa09b 100644
--- a/materialious/src/routes/(app)/watch/+page.ts
+++ b/materialious/src/routes/(app)/watch/+page.ts
@@ -1,4 +1,5 @@
 import { goto } from '$app/navigation';
+import { base } from '$app/paths';
 import { error } from '@sveltejs/kit';
 
 export async function load({ url }) {
@@ -7,7 +8,7 @@ export async function load({ url }) {
 	const timestamp = url.searchParams.get('t');
 
 	if (videoId) {
-		let goToUrl = new URL(`${location.origin}/watch/${videoId}`);
+		let goToUrl = new URL(`${location.origin}${base}/watch/${videoId}`);
 
 		if (playlistId) {
 			goToUrl.searchParams.set('playlist', playlistId);
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index df5d116d..70c23570 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import {
 		addPlaylistVideo,
 		getComments,
@@ -501,7 +502,7 @@
 							{$_('videos')}
 						</p>
 						<p>
-							<a href={`/channel/${$playlistCacheStore[data.playlistId].info.authorId}`}
+							<a href={`${base}/channel/${$playlistCacheStore[data.playlistId].info.authorId}`}
 								>{$playlistCacheStore[data.playlistId].info.author}</a
 							>
 						</p>
diff --git a/materialious/src/routes/+layout.ts b/materialious/src/routes/+layout.ts
index 9cc9c450..206971ea 100644
--- a/materialious/src/routes/+layout.ts
+++ b/materialious/src/routes/+layout.ts
@@ -1,5 +1,6 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
+import { base } from '$app/paths';
 import androidTv from '$lib/android/plugins/androidTv';
 import { getResolveUrl } from '$lib/api';
 import '$lib/i18n'; // Import to initialize. Important :)
@@ -17,13 +18,13 @@ export async function load({ url }) {
 
 	isAndroidTvStore.set((await androidTv.isAndroidTv()).value);
 
-	if (url.pathname.startsWith('/@')) {
-		const username = url.pathname.split('/')[1];
+	if (url.pathname.startsWith(base+'/@')) {
+		const username = url.pathname.substring(base.length).split('/')[1];
 
 		try {
 			const resolvedUrl = await getResolveUrl(`www.youtube.com/${username}`);
 			if (resolvedUrl.pageType === 'WEB_PAGE_TYPE_CHANNEL') {
-				goto(`/channel/${resolvedUrl.ucid}`);
+				goto(`${base}/channel/${resolvedUrl.ucid}`);
 			}
 		} catch {}
 	}
@@ -34,12 +35,12 @@ export async function load({ url }) {
 		defaultPage &&
 		defaultPage !== '/' &&
 		defaultPage.startsWith('/') &&
-		url.pathname === '/' &&
+		url.pathname === base+'/' &&
 		window.history.length < 3
 	) {
 		getPages().forEach((page) => {
 			if (page.href === defaultPage && (!page.requiresAuth || get(authStore))) {
-				goto(defaultPage);
+				goto(base+defaultPage);
 			}
 		});
 	}
diff --git a/materialious/svelte.config.js b/materialious/svelte.config.js
index 9e9f6fbc..ebf08c15 100644
--- a/materialious/svelte.config.js
+++ b/materialious/svelte.config.js
@@ -7,6 +7,9 @@ const config = {
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 	kit: {
+		// Optional: Set base path for Materialious here and in vite.config.ts
+		//paths: {base: '/materialious'},
+
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
diff --git a/materialious/vite.config.ts b/materialious/vite.config.ts
index a5d0ea80..41fc0f05 100644
--- a/materialious/vite.config.ts
+++ b/materialious/vite.config.ts
@@ -4,6 +4,8 @@ import { defineConfig } from 'vite';
 import pkg from './package.json';
 
 export default defineConfig({
+	// Optional: Set base path for Materialious here and in svelte.config.js
+	//base: '/materialious',
 	plugins: [
 		SvelteKitPWA({
 			injectRegister: 'inline',

From 98dd617690876e7c2ff26e3615e9d8524a612605 Mon Sep 17 00:00:00 2001
From: Precific <Precific@users.noreply.github.com>
Date: Sun, 2 Nov 2025 18:21:10 +0100
Subject: [PATCH 2/5] Replace deprecated base by resolve

See https://svelte.dev/docs/kit/$app-paths
---
 .../src/lib/components/ChannelThumbnail.svelte   |  4 ++--
 materialious/src/lib/components/Comment.svelte   |  6 +++---
 .../src/lib/components/HashtagThumbnail.svelte   |  4 ++--
 materialious/src/lib/components/Player.svelte    |  6 +++---
 .../src/lib/components/PlaylistThumbnail.svelte  |  9 +++++----
 materialious/src/lib/components/Search.svelte    |  8 ++++----
 .../src/lib/components/Settings/Interface.svelte |  4 ++--
 .../src/lib/components/ShareVideo.svelte         |  4 ++--
 materialious/src/lib/components/SyncParty.svelte | 12 +++++++-----
 materialious/src/lib/components/Thumbnail.svelte |  4 ++--
 .../src/lib/components/Watch/Author.svelte       |  4 ++--
 .../src/lib/components/Watch/Description.svelte  |  4 ++--
 materialious/src/lib/misc.ts                     |  7 +++----
 materialious/src/routes/(app)/+layout.svelte     | 16 ++++++++--------
 materialious/src/routes/(app)/auth/+page.svelte  |  4 ++--
 materialious/src/routes/(app)/playlist/+page.ts  |  4 ++--
 .../routes/(app)/playlist/[slug]/+page.svelte    | 10 +++++-----
 .../(app)/subscriptions/manage/+page.svelte      |  4 ++--
 materialious/src/routes/(app)/watch/+page.ts     |  4 ++--
 .../src/routes/(app)/watch/[slug]/+page.svelte   |  4 ++--
 materialious/src/routes/+layout.ts               | 13 +++++++------
 21 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/materialious/src/lib/components/ChannelThumbnail.svelte b/materialious/src/lib/components/ChannelThumbnail.svelte
index 6a042735..fdce3fe1 100644
--- a/materialious/src/lib/components/ChannelThumbnail.svelte
+++ b/materialious/src/lib/components/ChannelThumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
 	import { cleanNumber } from '$lib/numbers';
 	import { onMount } from 'svelte';
@@ -29,7 +29,7 @@
 	});
 </script>
 
-<a href={`${base}/channel/${channel.authorId}`} class="wave" style="min-width: 100%;min-height: 100%;">
+<a href={resolve(`/channel/${channel.authorId}`)} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
 		{#if !$interfaceLowBandwidthMode}
 			<div class="center-align">
diff --git a/materialious/src/lib/components/Comment.svelte b/materialious/src/lib/components/Comment.svelte
index 949f09f3..8704e8e2 100644
--- a/materialious/src/lib/components/Comment.svelte
+++ b/materialious/src/lib/components/Comment.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { getComments } from '$lib/api';
 	import { type Comment, type Comments } from '$lib/api/model';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
@@ -35,7 +35,7 @@
 	function commentTimestamps(html: string): string {
 		const regex =
 			/<a href="([^"]+)" data-onclick="jump_to_time" data-jump-time="(\d+)">([^<]+)<\/a>\s*(.+)/g;
-		const replacement = `<a href="${base}/watch/${videoId}?time=$2" data-sveltekit-preload-data="off" class="link">$3 $4</a>`;
+		const replacement = `<a href=${resolve(`/watch/${videoId}?time=$2`)} data-sveltekit-preload-data="off" class="link">$3 $4</a>`;
 
 		const processedHtml = html.replace(regex, replacement);
 
@@ -64,7 +64,7 @@
 				<progress class="circle"></progress>
 			{/if}
 			<div class="comment-info">
-				<a href={`${base}/channel/${comment.authorId}`} class="author">
+				<a href={resolve(`/channel/${comment.authorId}`)} class="author">
 					<span class="bold" class:channel-owner={comment.authorIsChannelOwner}>
 						{comment.author}
 					</span>
diff --git a/materialious/src/lib/components/HashtagThumbnail.svelte b/materialious/src/lib/components/HashtagThumbnail.svelte
index 49dd5f95..07d968f4 100644
--- a/materialious/src/lib/components/HashtagThumbnail.svelte
+++ b/materialious/src/lib/components/HashtagThumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { cleanNumber } from '$lib/numbers';
 	import { _ } from '$lib/i18n';
 	import type { HashTag } from '../api/model';
@@ -12,7 +12,7 @@
 	let { hashtag }: Props = $props();
 </script>
 
-<a href={base+hashtag.url} class="wave" style="min-width: 100%;min-height: 100%;">
+<a href={resolve(hashtag.url)} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
 		<h5 class="center-align">{truncate(hashtag.title, 14)}</h5>
 		<h6 style="margin-top: 0;" class="center-align grey-text medium-text">
diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index ecdde37f..c1544cd7 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/stores';
 	import { getBestThumbnail } from '$lib/images';
 	import { padTime, videoLength } from '$lib/numbers';
@@ -694,7 +694,7 @@
 			if (!data.playlistId) {
 				if ($playerAutoplayNextByDefaultStore) {
 					goto(
-						`${base}/${$isAndroidTvStore ? 'tv' : 'watch'}/${data.video.recommendedVideos[0].videoId}`,
+						resolve(`/${$isAndroidTvStore ? 'tv' : 'watch'}/${data.video.recommendedVideos[0].videoId}`),
 						{ replaceState: $isAndroidTvStore }
 					);
 				}
@@ -740,7 +740,7 @@
 				}
 
 				goto(
-					`${base}/${$isAndroidTvStore ? 'tv' : 'watch'}/${goToVideo.videoId}?playlist=${data.playlistId}`,
+					resolve(`/${$isAndroidTvStore ? 'tv' : 'watch'}/${goToVideo.videoId}?playlist=${data.playlistId}`),
 					{ replaceState: $isAndroidTvStore }
 				);
 			}
diff --git a/materialious/src/lib/components/PlaylistThumbnail.svelte b/materialious/src/lib/components/PlaylistThumbnail.svelte
index b9dc90e1..404c4473 100644
--- a/materialious/src/lib/components/PlaylistThumbnail.svelte
+++ b/materialious/src/lib/components/PlaylistThumbnail.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { getBestThumbnail } from '$lib/images';
+	import { resolve } from '$app/paths';
 	import { letterCase } from '$lib/letterCasing';
 	import { onMount } from 'svelte';
 	import { _ } from '$lib/i18n';
@@ -48,7 +49,7 @@
 </script>
 
 <a
-	href={base+playlistLink}
+	href={resolve(playlistLink)}
 	class:link-disabled={disabled}
 	style="width: 100%; overflow: hidden;min-height:100px;"
 	class="wave"
@@ -77,11 +78,11 @@
 <div class="small-padding">
 	<nav class="no-margin">
 		<div class="max">
-			<a class:link-disabled={disabled} href={base+playlistLink}
+			<a class:link-disabled={disabled} href={resolve(playlistLink)}
 				><div class="bold">{letterCase(truncate(playlist.title))}</div></a
 			>
 			<div>
-				<a class:link-disabled={playlist.authorId === null} href={`${base}/channel/${playlist.authorId}`}
+				<a class:link-disabled={playlist.authorId === null} href={resolve(`/channel/${playlist.authorId}`)}
 					>{playlist.author}</a
 				>
 			</div>
diff --git a/materialious/src/lib/components/Search.svelte b/materialious/src/lib/components/Search.svelte
index 8c577c51..48fd9154 100644
--- a/materialious/src/lib/components/Search.svelte
+++ b/materialious/src/lib/components/Search.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import Mousetrap from 'mousetrap';
 	import { createEventDispatcher, onMount, tick } from 'svelte';
@@ -43,7 +43,7 @@
 		if (search.trim() === '') return;
 
 		selectedSuggestionIndex = -1;
-		goto(`${base}/search/${encodeURIComponent(search)}`);
+		goto(resolve(`/search/${encodeURIComponent(search)}`));
 
 		suggestionsForSearch = [];
 		showSearchBox = false;
@@ -155,7 +155,7 @@
 									handleSubmit();
 								}}
 								class:selected={index === selectedSuggestionIndex}
-								href={`${base}/search/${encodeURIComponent(suggestion)}`}
+								href={resolve(`/search/${encodeURIComponent(suggestion)}`)}
 							>
 								<div>{suggestion}</div>
 							</a>
@@ -169,7 +169,7 @@
 								onclick={() => {
 									search = history;
 								}}
-								href={`${base}/search/${encodeURIComponent(history)}`}
+								href={resolve(`/search/${encodeURIComponent(history)}`)}
 							>
 								<div>{history}</div>
 							</a>
diff --git a/materialious/src/lib/components/Settings/Interface.svelte b/materialious/src/lib/components/Settings/Interface.svelte
index 5d9b0f23..72515642 100644
--- a/materialious/src/lib/components/Settings/Interface.svelte
+++ b/materialious/src/lib/components/Settings/Interface.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { bookmarkletSaveToUrl } from '$lib/externalSettings';
 	import { letterCase, titleCases } from '$lib/letterCasing';
 	import { setAmoledTheme } from '$lib/theme';
@@ -90,7 +90,7 @@
 
 		instanceStore.set(instance);
 		authStore.set(null);
-		goto(base+'/', { replaceState: true });
+		goto(resolve('/'), { replaceState: true });
 		ui('#dialog-settings');
 	}
 
diff --git a/materialious/src/lib/components/ShareVideo.svelte b/materialious/src/lib/components/ShareVideo.svelte
index 6921b98c..18d55616 100644
--- a/materialious/src/lib/components/ShareVideo.svelte
+++ b/materialious/src/lib/components/ShareVideo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { instanceStore } from '$lib/store';
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
@@ -34,7 +34,7 @@
 		if (Capacitor.isNativePlatform()) {
 			url = `${get(instanceStore)}/watch/${video.videoId}`;
 		} else {
-			url = `${location.origin}${base}/watch/${video.videoId}`;
+			url = `${location.origin}`+resolve(`/watch/${video.videoId}`);
 		}
 		if (includeTimestamp && currentTime !== undefined) {
 			url += `?time=${Math.floor(currentTime)}`;
diff --git a/materialious/src/lib/components/SyncParty.svelte b/materialious/src/lib/components/SyncParty.svelte
index aa81f882..407ccc11 100644
--- a/materialious/src/lib/components/SyncParty.svelte
+++ b/materialious/src/lib/components/SyncParty.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/stores';
 	import { peerJs, removeWindowQueryFlag, setWindowQueryFlag } from '$lib/misc';
 	import type { PlayerEvents } from '$lib/player';
@@ -21,7 +21,7 @@
 
 			events.events.forEach((event) => {
 				if (event.type === 'change-video' && event.videoId) {
-					currentUrl.pathname = `${base}/watch/${event.videoId}`;
+					currentUrl.pathname = resolve(`/watch/${event.videoId}`);
 					goto(currentUrl);
 				} else if (event.type === 'goto' && event.path && event.path !== $page.url.pathname) {
 					if (blockedPages.includes(event.path.replace('/', ''))) {
@@ -73,7 +73,7 @@
 	}
 
 	page.subscribe((newPage) => {
-		if (!newPage.url.pathname.startsWith(base+'/watch') && $syncPartyPeerStore) {
+		if (!newPage.url.pathname.startsWith(resolve('/watch')) && $syncPartyPeerStore) {
 			$syncPartyConnectionsStore?.forEach((conn) => {
 				conn.send({
 					events: [
@@ -125,14 +125,16 @@
 				<input
 					name="sync-share"
 					readonly
-					value={`${location.origin}${base}/?sync=${$syncPartyPeerStore.id}`}
+					value={`${location.origin}`+resolve(`/?sync=${$syncPartyPeerStore.id}`)}
 					type="text"
 				/>
 				<label class="active" for="sync-share">Share URL</label>
 			</div>
 			<button
 				onclick={async () => {
-					await Clipboard.write({ string: `${location.origin}${base}/?sync=${$syncPartyPeerStore?.id}` });
+					await Clipboard.write({
+						string: `${location.origin}`+resolve(`/?sync=${$syncPartyPeerStore?.id}`)
+					});
 				}}
 				class="square round"
 			>
diff --git a/materialious/src/lib/components/Thumbnail.svelte b/materialious/src/lib/components/Thumbnail.svelte
index 42b653b2..b0e93320 100644
--- a/materialious/src/lib/components/Thumbnail.svelte
+++ b/materialious/src/lib/components/Thumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { getBestThumbnail } from '$lib/images';
 	import { letterCase } from '$lib/letterCasing';
 	import { cleanNumber, videoLength } from '$lib/numbers';
@@ -215,7 +215,7 @@
 			</a>
 
 			<div>
-				<a tabindex="-1" class:author={!sideways} href={`${base}/channel/${video.authorId}`}
+				<a tabindex="-1" class:author={!sideways} href={resolve(`/channel/${video.authorId}`)}
 					>{video.author}
 				</a>
 
diff --git a/materialious/src/lib/components/Watch/Author.svelte b/materialious/src/lib/components/Watch/Author.svelte
index 74d7ec77..9f083682 100644
--- a/materialious/src/lib/components/Watch/Author.svelte
+++ b/materialious/src/lib/components/Watch/Author.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { deleteUnsubscribe, postSubscribe } from '$lib/api';
 	import type { VideoPlay } from '$lib/api/model';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
@@ -22,7 +22,7 @@
 </script>
 
 <nav>
-	<a href={`${base}/channel/${video.authorId}`}>
+	<a href={resolve(`/channel/${video.authorId}`)}>
 		<nav style="gap: 0.5em;">
 			{#if !$interfaceLowBandwidthMode}
 				<img
diff --git a/materialious/src/lib/components/Watch/Description.svelte b/materialious/src/lib/components/Watch/Description.svelte
index e918779f..2bfa45d3 100644
--- a/materialious/src/lib/components/Watch/Description.svelte
+++ b/materialious/src/lib/components/Watch/Description.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { numberWithCommas } from '$lib/numbers';
 	import { _ } from '$lib/i18n';
 	import type { VideoPlay } from '$lib/api/model';
@@ -35,7 +35,7 @@
 			<article class="border">
 				<nav class="scroll">
 					{#each video.keywords as keyword}
-						<a href={`${base}/search/${encodeURIComponent(keyword)}`} class="chip">{keyword}</a>
+						<a href={resolve(`/search/${encodeURIComponent(keyword)}`)} class="chip">{keyword}</a>
 					{/each}
 				</nav>
 			</article>
diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts
index 2a6766dc..b182a4af 100644
--- a/materialious/src/lib/misc.ts
+++ b/materialious/src/lib/misc.ts
@@ -1,5 +1,5 @@
 import { pushState } from '$app/navigation';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import { page } from '$app/stores';
 import he from 'he';
 import type Peer from 'peerjs';
@@ -139,9 +139,8 @@ export function expandSummery(id: string) {
 }
 
 export function createVideoUrl(videoId: string, playlistId: string): URL {
-	const watchUrl = new URL(
-		`${location.origin}${base}/${get(isAndroidTvStore) ? 'tv' : 'watch'}/${videoId}`
-	);
+	const watchPath = resolve(`/${get(isAndroidTvStore) ? 'tv' : 'watch'}/${videoId}`);
+	const watchUrl = new URL(`${location.origin}${watchPath}`);
 
 	if (playlistId !== '') {
 		watchUrl.searchParams.set('playlist', playlistId);
diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index e65d7531..210676d3 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
 
 	import { navigating, page } from '$app/stores';
@@ -92,7 +92,7 @@
 				return;
 			}
 
-			goto(`${base}/watch/${videoId}`);
+			goto(resolve(`/watch/${videoId}`));
 		} else {
 			// Auth response handling for Mobile
 			const username = url.searchParams.get('username');
@@ -118,7 +118,7 @@
 				path.search = searchParams.toString();
 				await Browser.open({ url: path.toString() });
 			} else {
-				searchParams.set('callback_url', `${location.origin}${base}/auth`);
+				searchParams.set('callback_url', `${location.origin}`+resolve('/auth'));
 				path.search = searchParams.toString();
 				document.location.href = path.toString();
 			}
@@ -163,7 +163,7 @@
 					console.log(sid);
 					authStore.set({ username: rawUsername, token: sid });
 					await ui('#tv-login');
-					goto(base+'/', { replaceState: true });
+					goto(resolve('/'), { replaceState: true });
 					return;
 				}
 			}
@@ -177,7 +177,7 @@
 		feedCacheStore.set({});
 		searchCacheStore.set({});
 		playlistCacheStore.set({});
-		goto(base+'/');
+		goto(resolve('/'));
 	}
 
 	async function loadNotifications() {
@@ -267,7 +267,7 @@
 	<nav class="left m l surface-container" class:tv-nav={$isAndroidTvStore}>
 		<header
 			role="presentation"
-			onclick={() => goto(base+$interfaceDefaultPage)}
+			onclick={() => goto(resolve($interfaceDefaultPage))}
 			style="cursor: pointer;"
 			tabindex="-1"
 			class="small-padding"
@@ -276,7 +276,7 @@
 		</header>
 		{#each getPages() as navPage}
 			{#if !navPage.requiresAuth || isLoggedIn}
-				<a href={base+navPage.href} class:active={$page.url.href.endsWith(navPage.href)}
+				<a href={resolve(navPage.href)} class:active={$page.url.href.endsWith(navPage.href)}
 					><i>{navPage.icon}</i>
 					<div>{navPage.name}</div>
 				</a>
@@ -355,7 +355,7 @@
 			{#if !navPage.requiresAuth || isLoggedIn}
 				<a
 					class="round"
-					href={base+navPage.href}
+					href={resolve(navPage.href)}
 					class:active={$page.url.href.endsWith(navPage.href)}
 					data-sveltekit-preload-data="off"
 					><i>{navPage.icon}</i>
diff --git a/materialious/src/routes/(app)/auth/+page.svelte b/materialious/src/routes/(app)/auth/+page.svelte
index 048f946e..82350298 100644
--- a/materialious/src/routes/(app)/auth/+page.svelte
+++ b/materialious/src/routes/(app)/auth/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/stores';
 	import PageLoading from '$lib/components/PageLoading.svelte';
 	import { authStore } from '$lib/store';
@@ -18,7 +18,7 @@
 			});
 		}
 
-		goto(base+'/');
+		goto(resolve('/'));
 	});
 </script>
 
diff --git a/materialious/src/routes/(app)/playlist/+page.ts b/materialious/src/routes/(app)/playlist/+page.ts
index 5b0e9a20..8363bb63 100644
--- a/materialious/src/routes/(app)/playlist/+page.ts
+++ b/materialious/src/routes/(app)/playlist/+page.ts
@@ -1,11 +1,11 @@
 import { goto } from '$app/navigation';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import { error } from '@sveltejs/kit';
 
 export async function load({ url }) {
 	const playlistId = url.searchParams.get('list');
 	if (playlistId) {
-		goto(`${base}/playlist/${playlistId}`);
+		goto(resolve(`/playlist/${playlistId}`));
 	} else {
 		error(404);
 	}
diff --git a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
index f87ce5fe..02635a91 100644
--- a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { unsafeRandomItem } from '$lib/misc';
 	import { cleanNumber } from '$lib/numbers';
 	import { isAndroidTvStore, playlistSettingsStore } from '$lib/store';
@@ -16,8 +16,8 @@
 		<nav>
 			<a
 				href={!$isAndroidTvStore
-					? `${base}/watch/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`
-					: `${base}/tv/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`}
+					? resolve(`/watch/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`)
+					: resolve(`/tv/${data.playlist.videos[0].videoId}?playlist=${data.playlist.info.playlistId}`)}
 				class="button circle extra no-margin"
 			>
 				<i>play_arrow</i>
@@ -28,8 +28,8 @@
 
 			<a
 				href={!$isAndroidTvStore
-					? `${base}/watch/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`
-					: `${base}/tv/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`}
+					? resolve(`/watch/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`)
+					: resolve(`/tv/${unsafeRandomItem(data.playlist.videos).videoId}?playlist=${data.playlist.info.playlistId}`)}
 				onclick={() =>
 					playlistSettingsStore.set({
 						[data.playlist.info.playlistId]: { shuffle: true, loop: false }
diff --git a/materialious/src/routes/(app)/subscriptions/manage/+page.svelte b/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
index 891a5c62..f8f17762 100644
--- a/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
+++ b/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { deleteUnsubscribe } from '$lib/api';
 	import Fuse from 'fuse.js';
 	import { _ } from '$lib/i18n';
@@ -46,7 +46,7 @@
 {#each subscriptions as sub}
 	<article>
 		<nav>
-			<a href={`${base}/channel/${sub.authorId}`}
+			<a href={resolve(`/channel/${sub.authorId}`)}
 				><h6>
 					{sub.author}
 				</h6></a
diff --git a/materialious/src/routes/(app)/watch/+page.ts b/materialious/src/routes/(app)/watch/+page.ts
index b96aa09b..6a3631b3 100644
--- a/materialious/src/routes/(app)/watch/+page.ts
+++ b/materialious/src/routes/(app)/watch/+page.ts
@@ -1,5 +1,5 @@
 import { goto } from '$app/navigation';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import { error } from '@sveltejs/kit';
 
 export async function load({ url }) {
@@ -8,7 +8,7 @@ export async function load({ url }) {
 	const timestamp = url.searchParams.get('t');
 
 	if (videoId) {
-		let goToUrl = new URL(`${location.origin}${base}/watch/${videoId}`);
+		let goToUrl = new URL(`${location.origin}`+resolve(`/watch/${videoId}`));
 
 		if (playlistId) {
 			goToUrl.searchParams.set('playlist', playlistId);
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index 70c23570..f62cd03f 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import {
 		addPlaylistVideo,
 		getComments,
@@ -502,7 +502,7 @@
 							{$_('videos')}
 						</p>
 						<p>
-							<a href={`${base}/channel/${$playlistCacheStore[data.playlistId].info.authorId}`}
+							<a href={resolve(`/channel/${$playlistCacheStore[data.playlistId].info.authorId}`)}
 								>{$playlistCacheStore[data.playlistId].info.author}</a
 							>
 						</p>
diff --git a/materialious/src/routes/+layout.ts b/materialious/src/routes/+layout.ts
index 206971ea..454bf172 100644
--- a/materialious/src/routes/+layout.ts
+++ b/materialious/src/routes/+layout.ts
@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import androidTv from '$lib/android/plugins/androidTv';
 import { getResolveUrl } from '$lib/api';
 import '$lib/i18n'; // Import to initialize. Important :)
@@ -18,13 +18,14 @@ export async function load({ url }) {
 
 	isAndroidTvStore.set((await androidTv.isAndroidTv()).value);
 
-	if (url.pathname.startsWith(base+'/@')) {
-		const username = url.pathname.substring(base.length).split('/')[1];
+	const resolvedRoot = resolve('/');
+	if (url.pathname.startsWith(resolvedRoot+'@')) {
+		const username = url.pathname.substring(resolvedRoot.length).split('/')[0];
 
 		try {
 			const resolvedUrl = await getResolveUrl(`www.youtube.com/${username}`);
 			if (resolvedUrl.pageType === 'WEB_PAGE_TYPE_CHANNEL') {
-				goto(`${base}/channel/${resolvedUrl.ucid}`);
+				goto(resolve(`/channel/${resolvedUrl.ucid}`));
 			}
 		} catch {}
 	}
@@ -35,12 +36,12 @@ export async function load({ url }) {
 		defaultPage &&
 		defaultPage !== '/' &&
 		defaultPage.startsWith('/') &&
-		url.pathname === base+'/' &&
+		url.pathname === resolvedRoot &&
 		window.history.length < 3
 	) {
 		getPages().forEach((page) => {
 			if (page.href === defaultPage && (!page.requiresAuth || get(authStore))) {
-				goto(base+defaultPage);
+				goto(resolve(defaultPage));
 			}
 		});
 	}

From ae712309d2e8455ab5708143ea2f9bdd49ac072c Mon Sep 17 00:00:00 2001
From: Precific <Precific@users.noreply.github.com>
Date: Sun, 2 Nov 2025 19:30:11 +0100
Subject: [PATCH 3/5] Minor code quality

---
 materialious/src/lib/misc.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts
index b182a4af..d2829709 100644
--- a/materialious/src/lib/misc.ts
+++ b/materialious/src/lib/misc.ts
@@ -25,18 +25,17 @@ export function decodeHtmlCharCodes(str: string): string {
 }
 
 export function proxyVideoUrl(source: string): string {
-	const rawSrc = new URL(source);
-	const instURLStr = get(instanceStore);
-	const instURL = new URL(instURLStr);
-	rawSrc.host = instURL.host;
-	rawSrc.protocol = instURL.protocol;
+	let videoUrl = new URL(source);
+	const instURL = new URL(get(instanceStore));
+	videoUrl.host = instURL.host;
+	videoUrl.protocol = instURL.protocol;
 	let pathPrefix = instURL.pathname;
 	if (pathPrefix.endsWith("/")) {
 		pathPrefix = pathPrefix.substring(0, pathPrefix.length - 1);
 	}
-	rawSrc.pathname = pathPrefix + rawSrc.pathname;
+	videoUrl.pathname = pathPrefix + videoUrl.pathname;
 
-	return rawSrc.toString();
+	return videoUrl.toString();
 }
 
 export function unsafeRandomItem(array: any[]): any {

From 292652474cc252c4f283645f1e6f510ac49fa15e Mon Sep 17 00:00:00 2001
From: Precific <Precific@users.noreply.github.com>
Date: Sun, 2 Nov 2025 19:33:43 +0100
Subject: [PATCH 4/5] Minor code quality

---
 materialious/src/lib/misc.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts
index d2829709..7cd484a9 100644
--- a/materialious/src/lib/misc.ts
+++ b/materialious/src/lib/misc.ts
@@ -26,10 +26,10 @@ export function decodeHtmlCharCodes(str: string): string {
 
 export function proxyVideoUrl(source: string): string {
 	let videoUrl = new URL(source);
-	const instURL = new URL(get(instanceStore));
-	videoUrl.host = instURL.host;
-	videoUrl.protocol = instURL.protocol;
-	let pathPrefix = instURL.pathname;
+	const instUrl = new URL(get(instanceStore));
+	videoUrl.host = instUrl.host;
+	videoUrl.protocol = instUrl.protocol;
+	let pathPrefix = instUrl.pathname;
 	if (pathPrefix.endsWith("/")) {
 		pathPrefix = pathPrefix.substring(0, pathPrefix.length - 1);
 	}

From d0aaf00b12c4b6ad944c953a6ae9f644ca0a16e0 Mon Sep 17 00:00:00 2001
From: Precific <Precific@users.noreply.github.com>
Date: Sat, 8 Nov 2025 17:00:06 +0100
Subject: [PATCH 5/5] Fix import. Update base path comments

No need to set the base path in vite.config.ts, Svelte already does that on its own.
---
 materialious/src/lib/components/Search.svelte | 1 -
 materialious/svelte.config.js                 | 2 +-
 materialious/vite.config.ts                   | 2 --
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/materialious/src/lib/components/Search.svelte b/materialious/src/lib/components/Search.svelte
index 3b586df9..29fc6d1e 100644
--- a/materialious/src/lib/components/Search.svelte
+++ b/materialious/src/lib/components/Search.svelte
@@ -12,7 +12,6 @@
 		searchHistoryStore
 	} from '../store';
 	import { isVideoID } from '$lib/misc';
-	import { resolve } from '$app/paths';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/materialious/svelte.config.js b/materialious/svelte.config.js
index ebf08c15..060ee157 100644
--- a/materialious/svelte.config.js
+++ b/materialious/svelte.config.js
@@ -7,7 +7,7 @@ const config = {
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 	kit: {
-		// Optional: Set base path for Materialious here and in vite.config.ts
+		// Optional: Set base path for hosted Materialious here
 		//paths: {base: '/materialious'},
 
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
diff --git a/materialious/vite.config.ts b/materialious/vite.config.ts
index 41fc0f05..a5d0ea80 100644
--- a/materialious/vite.config.ts
+++ b/materialious/vite.config.ts
@@ -4,8 +4,6 @@ import { defineConfig } from 'vite';
 import pkg from './package.json';
 
 export default defineConfig({
-	// Optional: Set base path for Materialious here and in svelte.config.js
-	//base: '/materialious',
 	plugins: [
 		SvelteKitPWA({
 			injectRegister: 'inline',