Add support for @username urls

docs/BUILDING.md

@@ -19,11 +19,7 @@ Materialious desktop builds are handled through GitHub using [prod-desktop.yml](
 - From here, the process follows standard [electron-builder](https://www.electron.build/) steps to complete the build.
 
 ### Desktop Release (via Flatpak)
-Flatpak builds for desktop releases are managed via [us.materailio.app](../flatpak/us.materialio.app.json).
-
-- We generate the necessary remote npm packages with `flatpak-node-generator npm -r ../materialious/package-lock.json -R ../materialious/electron/package-lock.json`, which creates [generated-sources.json](../flatpak/generated-sources.json).
-- The Linux x64 runtime is downloaded as part of the Flatpak build sources and placed in `main/materialious/electron/.electron-cache`. The [electron-builder.config.json](../materialious/electron/electron-builder.config.json) is configured to use this cache directory to avoid downloading the runtime again during the build.
-- The build process is similar to [prod-desktop.yml](../.github/workflows/prod-desktop.yml), following the guidelines for [Flatpak Electron](https://docs.flatpak.org/en/latest/electron.html).
+TODO
 
 ### Android Release
 Android builds are handled using the workflow [prod-android.yml](../.github/workflows/prod-android.yml).

materialious/src/lib/Comment.svelte

@@ -22,8 +22,8 @@
 
 	function commentTimestamps(html: string): string {
 		const regex =
-			/<a href="([^"]+)" data-onclick="jump_to_time" data-jump-time="(\d+)">(\d+:\d+(?::\d+)?)<\/a>\s*(.+)/;
-		const replacement = `<a href="/watch/${videoId}?time=$2" data-sveltekit-preload-data="off" class="link">$3</a>`;
+			/<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 processedHtml = html.replace(regex, replacement);
 
@@ -107,6 +107,7 @@
 	.comment {
 		display: flex;
 		margin-bottom: 0.8em;
+		white-space: pre-line;
 	}
 
 	.channel-owner {

materialious/src/lib/api/index.ts

@@ -22,6 +22,7 @@ import type {
 	Feed,
 	Playlist,
 	PlaylistPage,
+	ResolvedUrl,
 	ReturnYTDislikes,
 	SearchSuggestion,
 	Subscription,
@@ -71,6 +72,11 @@ export async function getPopular(fetchOptions?: RequestInit): Promise<Video[]> {
 	return await resp.json();
 }
 
+export async function getResolveUrl(url: string): Promise<ResolvedUrl> {
+	const resp = await fetchErrorHandle(await fetch(`${buildPath('resolveurl')}?url=${url}`));
+	return await resp.json();
+}
+
 export async function getVideo(videoId: string, local: boolean = false, fetchOptions?: RequestInit): Promise<VideoPlay> {
 	const resp = await fetch(setRegion(buildPath(`videos/${videoId}?local=${local}`)), fetchOptions);
 	if (

materialious/src/lib/api/model.ts

@@ -21,6 +21,12 @@ export interface VideoBase {
 	viewCountText: string;
 }
 
+export interface ResolvedUrl {
+	ucid: string;
+	params: string;
+	pageType: string;
+}
+
 export interface Video extends VideoBase {
 	type: 'video';
 	title: string;

materialious/src/routes/+layout.ts

@@ -1,13 +1,25 @@
 import { browser } from '$app/environment';
+import { goto } from '$app/navigation';
+import { getResolveUrl } from '$lib/api';
 import '$lib/i18n'; // Import to initialize. Important :)
 import { locale, waitLocale } from 'svelte-i18n';
-import type { LayoutLoad } from './$types';
 
 export let ssr = false;
 
-export const load: LayoutLoad = async () => {
+export async function load({ url }) {
+	if (url.pathname.startsWith('/@')) {
+		const username = url.pathname.split('/')[1];
+
+		try {
+			const resolvedUrl = await getResolveUrl(`www.youtube.com/${username}`);
+			if (resolvedUrl.pageType === 'WEB_PAGE_TYPE_CHANNEL') {
+				goto(`/channel/${resolvedUrl.ucid}`);
+			}
+		} catch { }
+	}
+
 	if (browser) {
 		locale.set(window.navigator.language);
 	}
 	await waitLocale();
-};
+}