Merge remote-tracking branch 'precific/support_nonroot_base' into update/1.11.7

Support non-root base paths

materialious/src/lib/components/ChannelThumbnail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } 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={resolve(`/channel/${channel.authorId}`)} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
 		{#if !$interfaceLowBandwidthMode}
 			<div class="center-align">

materialious/src/lib/components/HashtagThumbnail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } 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={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">

materialious/src/lib/components/Player.svelte

@@ -347,7 +347,7 @@
 					if (!import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE) {
 						captionUrl = caption.url.startsWith('http')
 							? caption.url
-							: `${get(instanceStore)}${caption.url}`;
+							: `${new URL(get(instanceStore)).origin}${caption.url}`;
 					} else {
 						captionUrl = `${import.meta.env.VITE_DEFAULT_COMPANION_INSTANCE}${caption.url}`;
 					}

materialious/src/lib/components/PlaylistThumbnail.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getBestThumbnail } from '$lib/images';
+	import { resolve } from '$app/paths';
 	import { letterCase } from '$lib/letterCasing';
 	import { onMount } from 'svelte';
 	import { _ } from '$lib/i18n';
@@ -47,7 +48,7 @@
 </script>
 
 <a
-	href={playlistLink}
+	href={resolve(playlistLink)}
 	class:link-disabled={disabled}
 	style="width: 100%; overflow: hidden;min-height:100px;"
 	class="wave"
@@ -76,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={resolve(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={resolve(`/channel/${playlist.authorId}`)}
 					>{playlist.author}</a
 				>
 			</div>

materialious/src/lib/components/Search.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import Mousetrap from 'mousetrap';
 	import { createEventDispatcher, onMount, tick } from 'svelte';
@@ -11,7 +12,6 @@
 		searchHistoryStore
 	} from '../store';
 	import { isVideoID } from '$lib/misc';
-	import { resolve } from '$app/paths';
 
 	const dispatch = createEventDispatcher();
 
@@ -52,7 +52,7 @@
 		}
 
 		selectedSuggestionIndex = -1;
-		goto(`/search/${encodeURIComponent(searchTrimed)}`);
+		goto(resolve(`/search/${encodeURIComponent(searchTrimed)}`));
 
 		suggestionsForSearch = [];
 		showSearchBox = false;
@@ -164,7 +164,7 @@
 									handleSubmit();
 								}}
 								class:selected={index === selectedSuggestionIndex}
-								href={`/search/${encodeURIComponent(suggestion)}`}
+								href={resolve(`/search/${encodeURIComponent(suggestion)}`)}
 							>
 								<div>{suggestion}</div>
 							</a>
@@ -178,7 +178,7 @@
 								onclick={() => {
 									search = history;
 								}}
-								href={`/search/${encodeURIComponent(history)}`}
+								href={resolve(`/search/${encodeURIComponent(history)}`)}
 							>
 								<div>{history}</div>
 							</a>

materialious/src/lib/components/ShareVideo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } 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}`+resolve(`/watch/${video.videoId}`);
 		}
 		if (includeTimestamp && currentTime !== undefined) {
 			url += `?time=${Math.floor(currentTime)}`;

materialious/src/lib/components/SyncParty.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } 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 = resolve(`/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(resolve('/watch')) && $syncPartyPeerStore) {
 			$syncPartyConnectionsStore?.forEach((conn) => {
 				conn.send({
 					events: [
@@ -124,14 +125,16 @@
 				<input
 					name="sync-share"
 					readonly
-					value={`${location.origin}?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}?sync=${$syncPartyPeerStore?.id}` });
+					await Clipboard.write({
+						string: `${location.origin}`+resolve(`/?sync=${$syncPartyPeerStore?.id}`)
+					});
 				}}
 				class="square round"
 			>

materialious/src/lib/components/Thumbnail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { getBestThumbnail } from '$lib/images';
 	import { letterCase } from '$lib/letterCasing';
 	import { videoLength } from '$lib/numbers';
@@ -212,7 +213,7 @@
 			</a>
 
 			<div>
-				<a tabindex="-1" class:author={!sideways} href={`/channel/${video.authorId}`}
+				<a tabindex="-1" class:author={!sideways} href={resolve(`/channel/${video.authorId}`)}
 					>{video.author}
 				</a>
 

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)

materialious/src/lib/components/settings/Interface.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } 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(resolve('/'), { replaceState: true });
 		ui('#dialog-settings');
 	}
 

materialious/src/lib/components/watch/Author.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { deleteUnsubscribe, postSubscribe } from '$lib/api';
 	import type { VideoPlay } from '$lib/api/model';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
@@ -24,7 +25,7 @@
 </script>
 
 <nav>
-	<a href={`/channel/${video.authorId}`}>
+	<a href={resolve(`/channel/${video.authorId}`)}>
 		<nav style="gap: 0.5em;">
 			{#if !$interfaceLowBandwidthMode}
 				<img

materialious/src/lib/components/watch/Comment.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	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';
@@ -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=${resolve(`/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={resolve(`/channel/${comment.authorId}`)} class="author">
 					<span class="bold" class:channel-owner={comment.authorIsChannelOwner}>
 						{comment.author}
 					</span>

materialious/src/lib/components/watch/Description.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { cleanNumber } 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={resolve(`/search/${encodeURIComponent(keyword)}`)} class="chip">{keyword}</a>
 					{/each}
 				</nav>
 			</article>

materialious/src/lib/misc.ts

@@ -1,4 +1,5 @@
 import { pushState } from '$app/navigation';
+import { resolve } from '$app/paths';
 import { page } from '$app/stores';
 import he from 'he';
 import type Peer from 'peerjs';
@@ -128,9 +129,8 @@ export function expandSummery(id: string) {
 }
 
 export function createVideoUrl(videoId: string, playlistId: string): URL {
-	const watchUrl = new URL(
-		`${location.origin}/${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);

materialious/src/lib/player.ts

@@ -8,9 +8,9 @@ import {
 	syncPartyConnectionsStore
 } from './store';
 import { goto } from '$app/navigation';
+import { resolve } from '$app/paths';
 import { loadEntirePlaylist } from './playlist';
 import { unsafeRandomItem } from './misc';
-import { resolve } from '$app/paths';
 
 export interface PlayerEvent {
 	type: 'pause' | 'seek' | 'change-video' | 'play' | 'playlist' | 'goto';
@@ -44,7 +44,7 @@ export async function goToNextVideo(video: VideoPlay, playlistId: string | null)
 
 	if (!playlistId) {
 		if (get(playerAutoplayNextByDefaultStore)) {
-			goto(`/${isAndroidTv ? 'tv' : 'watch'}/${video.recommendedVideos[0].videoId}`, {
+			goto(resolve(`/${isAndroidTv ? 'tv' : 'watch'}/${video.recommendedVideos[0].videoId}`), {
 				replaceState: isAndroidTv
 			});
 		}
@@ -86,7 +86,7 @@ export async function goToNextVideo(video: VideoPlay, playlistId: string | null)
 			} as PlayerEvents);
 		});
 
-		goto(`/${isAndroidTv ? 'tv' : 'watch'}/${goToVideo.videoId}?playlist=${playlistId}`, {
+		goto(resolve(`/${isAndroidTv ? 'tv' : 'watch'}/${goToVideo.videoId}?playlist=${playlistId}`), {
 			replaceState: isAndroidTv
 		});
 	}

materialious/src/routes/(app)/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
 
 	import { navigating, page } from '$app/stores';
@@ -102,7 +103,7 @@
 				return;
 			}
 
-			goto(`/watch/${videoId}`);
+			goto(resolve(`/watch/${videoId}`));
 		} else {
 			// Auth response handling for Mobile
 			const username = url.searchParams.get('username');
@@ -128,7 +129,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}`+resolve('/auth'));
 				path.search = searchParams.toString();
 				document.location.href = path.toString();
 			}
@@ -173,7 +174,7 @@
 					console.log(sid);
 					authStore.set({ username: rawUsername, token: sid });
 					await ui('#tv-login');
-					goto('/', { replaceState: true });
+					goto(resolve('/'), { replaceState: true });
 					return;
 				}
 			}
@@ -187,7 +188,7 @@
 		feedCacheStore.set({});
 		searchCacheStore.set({});
 		playlistCacheStore.set({});
-		goto('/');
+		goto(resolve('/'));
 	}
 
 	async function loadNotifications() {
@@ -277,7 +278,7 @@
 	<nav class="left m l surface-container" class:tv-nav={$isAndroidTvStore}>
 		<header
 			role="presentation"
-			onclick={() => goto($interfaceDefaultPage)}
+			onclick={() => goto(resolve($interfaceDefaultPage))}
 			style="cursor: pointer;"
 			tabindex="-1"
 			class="small-padding"
@@ -286,7 +287,7 @@
 		</header>
 		{#each getPages() as navPage}
 			{#if !navPage.requiresAuth || isLoggedIn}
-				<a href={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>
@@ -365,7 +366,7 @@
 			{#if !navPage.requiresAuth || isLoggedIn}
 				<a
 					class="round"
-					href={navPage.href}
+					href={resolve(navPage.href)}
 					class:active={$page.url.href.endsWith(navPage.href)}
 					data-sveltekit-preload-data="off"
 					><i>{navPage.icon}</i>
@@ -421,7 +422,7 @@
 					</div>
 					{#if playerIsPip}
 						<nav class="s">
-							<a class="button border" href={`/watch/${$playerState.data.video.videoId}`}
+							<a class="button border" href={resolve(`/watch/${$playerState.data.video.videoId}`)}
 								><i>keyboard_arrow_right</i></a
 							>
 							<button class="border" onclick={() => playerState.set(undefined)}>
@@ -432,7 +433,7 @@
 						<nav class="m l">
 							<Author video={$playerState.data.video} hideSubscribe={true} />
 							<div class="max"></div>
-							<a class="button border" href={`/watch/${$playerState.data.video.videoId}`}
+							<a class="button border" href={resolve(`/watch/${$playerState.data.video.videoId}`)}
 								><i>keyboard_arrow_right</i></a
 							>
 						</nav>

materialious/src/routes/(app)/auth/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } 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(resolve('/'));
 	});
 </script>
 

materialious/src/routes/(app)/playlist/+page.ts

@@ -1,10 +1,11 @@
 import { goto } from '$app/navigation';
+import { resolve } 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(resolve(`/playlist/${playlistId}`));
 	} else {
 		error(404);
 	}

materialious/src/routes/(app)/playlist/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } 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}`}
+					? 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>
@@ -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}`}
+					? 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 }

materialious/src/routes/(app)/subscriptions/manage/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } 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={resolve(`/channel/${sub.authorId}`)}
 				><h6>
 					{sub.author}
 				</h6></a

materialious/src/routes/(app)/watch/+page.ts

@@ -1,4 +1,5 @@
 import { goto } from '$app/navigation';
+import { resolve } 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}`+resolve(`/watch/${videoId}`));
 
 		if (playlistId) {
 			goToUrl.searchParams.set('playlist', playlistId);

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import {
 		addPlaylistVideo,
 		getComments,
@@ -580,7 +581,7 @@
 							{$_('videos')}
 						</p>
 						<p>
-							<a href={`/channel/${$playlistCacheStore[data.playlistId].info.authorId}`}
+							<a href={resolve(`/channel/${$playlistCacheStore[data.playlistId].info.authorId}`)}
 								>{$playlistCacheStore[data.playlistId].info.author}</a
 							>
 						</p>

materialious/src/routes/+layout.ts

@@ -1,5 +1,6 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
+import { resolve } 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,14 @@ export async function load({ url }) {
 
 	isAndroidTvStore.set((await androidTv.isAndroidTv()).value);
 
-	if (url.pathname.startsWith('/@')) {
-		const username = url.pathname.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(`/channel/${resolvedUrl.ucid}`);
+				goto(resolve(`/channel/${resolvedUrl.ucid}`));
 			}
 		} catch {}
 	}
@@ -34,12 +36,12 @@ export async function load({ url }) {
 		defaultPage &&
 		defaultPage !== '/' &&
 		defaultPage.startsWith('/') &&
-		url.pathname === '/' &&
+		url.pathname === resolvedRoot &&
 		window.history.length < 3
 	) {
 		getPages().forEach((page) => {
 			if (page.href === defaultPage && (!page.requiresAuth || get(authStore))) {
-				goto(defaultPage);
+				goto(resolve(defaultPage));
 			}
 		});
 	}

materialious/svelte.config.js

@@ -7,6 +7,9 @@ const config = {
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 	kit: {
+		// 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.
 		// 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.