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] 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));
 			}
 		});
 	}