From 7c81aec136a9c71d2d8260a5545c4eec7b7786c2 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Mon, 13 May 2024 15:35:51 +1200
Subject: [PATCH] Added comment timestamp support

---
 materialious/src/lib/Comment.svelte          | 12 ++++++++-
 materialious/src/lib/Player.svelte           | 27 ++++++++++++++------
 materialious/src/routes/(app)/watch/+page.ts | 11 ++++++--
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/materialious/src/lib/Comment.svelte b/materialious/src/lib/Comment.svelte
index 8ca4a2bb..d17d5512 100644
--- a/materialious/src/lib/Comment.svelte
+++ b/materialious/src/lib/Comment.svelte
@@ -18,6 +18,16 @@
 			});
 		} catch {}
 	}
+
+	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>`;
+
+		const processedHtml = html.replace(regex, replacement);
+
+		return processedHtml;
+	}
 </script>
 
 <div class="comment">
@@ -42,7 +52,7 @@
 			{/if}
 		</div>
 		<p style="margin-bottom: 0;">
-			{@html comment.contentHtml}
+			{@html commentTimestamps(comment.contentHtml)}
 		</p>
 		<div style="display: flex;">
 			<p><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index 22a883be..4ce8499d 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import 'vidstack/bundle';
 
+	import { page } from '$app/stores';
+	import type { Page } from '@sveltejs/kit';
 	import { SponsorBlock, type Category } from 'sponsorblock-api';
 	import { onDestroy, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
@@ -36,6 +38,20 @@
 	let playerIsLive = false;
 	let playerPosSet = false;
 
+	function loadTimeFromUrl(page: Page): boolean {
+		if (player) {
+			const timeGivenUrl = page.url.searchParams.get('time');
+			if (timeGivenUrl && !isNaN(parseFloat(timeGivenUrl))) {
+				player.currentTime = Number(timeGivenUrl);
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	page.subscribe((pageUpdate) => loadTimeFromUrl(pageUpdate));
+
 	export function seekTo(time: number) {
 		if (typeof player !== 'undefined') {
 			player.currentTime = time;
@@ -122,11 +138,11 @@
 			}
 
 			if (get(playerDashStore)) {
+				src = [{ src: data.video.dashUrl + '?local=true', type: 'application/dash+xml' }];
+
 				player.addEventListener('dash-can-play', async () => {
 					await loadPlayerPos();
 				});
-
-				src = [{ src: data.video.dashUrl + '?local=true', type: 'application/dash+xml' }];
 			} else {
 				let formattedSrc;
 				src = data.video.formatStreams.map((format) => {
@@ -192,12 +208,7 @@
 		if (playerPosSet) return;
 		playerPosSet = true;
 
-		const paramTime = new URLSearchParams(window.location.search).get('time');
-
-		if (paramTime && !isNaN(parseFloat(paramTime))) {
-			player.currentTime = Number(paramTime);
-			return;
-		}
+		if (loadTimeFromUrl($page)) return;
 
 		let toSetTime = 0;
 
diff --git a/materialious/src/routes/(app)/watch/+page.ts b/materialious/src/routes/(app)/watch/+page.ts
index ea46d799..6147205b 100644
--- a/materialious/src/routes/(app)/watch/+page.ts
+++ b/materialious/src/routes/(app)/watch/+page.ts
@@ -4,12 +4,19 @@ import { error } from '@sveltejs/kit';
 export async function load({ url }) {
 	const videoId = url.searchParams.get('v');
 	const playlistId = url.searchParams.get('list');
+	const timestamp = url.searchParams.get('t');
+
 	if (videoId) {
-		let goToUrl = `/watch/${videoId}`;
+		let goToUrl = new URL(`${location.origin}/watch/${videoId}`);
 
 		if (playlistId) {
-			goToUrl += `?playlist=${playlistId}`;
+			goToUrl.searchParams.set('playlist', playlistId);
 		}
+
+		if (timestamp) {
+			goToUrl.searchParams.set('time', timestamp);
+		}
+
 		goto(goToUrl);
 	} else {
 		error(404);