random bs

src/routes/+page.svelte

@@ -3,11 +3,12 @@
 	import { tables, reducers } from "$lib/st-bindings";
 	import "@videojs/html/video/player";
 	import "@videojs/html/video/skin";
+	import { untrack } from "svelte";
 
 	const conn = useSpacetimeDB();
 
-	const [videoStates] = useTable(tables.videoState);
-	const videoState = $derived($videoStates.find((state) => state.id === 1n));
+	const [syncStates] = useTable(tables.videoState.where((r) => r.id.eq(1n)));
+	const syncState = $derived($syncStates.at(0));
 
 	const setUrlReducer = useReducer(reducers.setUrl);
 	const setSubtitleUrlReducer = useReducer(reducers.setSubtitleUrl);
@@ -16,6 +17,9 @@
 	const seekReducer = useReducer(reducers.seek);
 
 	let videoElement: HTMLVideoElement | undefined = $state();
+	let videoPaused = $state(false);
+	let videoCurrentTime = $state(0.0);
+
 	let newUrl = $state("");
 	let newSubtitleUrl = $state("");
 
@@ -32,23 +36,20 @@
 	}
 
 	$effect(() => {
-		if (!videoElement || !videoState) return;
+		untrack(() => videoElement);
+		if (!videoElement || !syncState) return;
 		const el = videoElement;
-		const state = videoState;
-
-		if (el.src !== state.url) {
-			el.src = state.url;
-		}
 
 		// Account for server to client clock drift slightly, but MVP assumes relatively synced clocks.
-		const timeElapsedMicros = BigInt(Date.now()) * 1000n - state.lastUpdatedAt.microsSinceUnixEpoch;
-		const expectedTime = state.isPlaying
-			? state.timePosition + Number(timeElapsedMicros) / 1_000_000
-			: state.timePosition;
+		const timeElapsedMicros =
+			BigInt(Date.now()) * 1000n - syncState.lastUpdatedAt.microsSinceUnixEpoch;
+		const expectedTime = syncState.isPlaying
+			? syncState.timePosition + Number(timeElapsedMicros) / 1_000_000
+			: syncState.timePosition;
 
 		const diff = Math.abs(el.currentTime - expectedTime);
 
-		if (!state.isPlaying) {
+		if (!syncState.isPlaying) {
 			if (el.currentTime < expectedTime && diff <= 2) {
 				// Behind pause point. Keep playing to catch up. (timeupdate will pause it)
 				// If locally paused, stay paused (we likely dispatched the pause event + buffer)
@@ -93,11 +94,11 @@
 	}
 
 	function handleTimeUpdate() {
-		if (!videoElement || !videoState) return;
+		if (!videoElement || !syncState) return;
 		const el = videoElement;
 
-		if (!videoState.isPlaying) {
-			const expectedTime = videoState.timePosition;
+		if (!syncState.isPlaying) {
+			const expectedTime = syncState.timePosition;
 			if (!el.paused && el.currentTime >= expectedTime) {
 				syncAction(() => {
 					el.pause();
@@ -122,6 +123,8 @@
 		setSubtitleUrlReducer({ url: newSubtitleUrl });
 		newSubtitleUrl = "";
 	}
+
+	$inspect(syncState?.url);
 </script>
 
 <div class="p-4">
@@ -165,14 +168,15 @@
 					bind:this={videoElement}
 					muted
 					crossorigin="anonymous"
+					src={syncState?.url}
 					onplay={handlePlay}
 					onpause={handlePause}
 					onseeked={handleSeeked}
 					ontimeupdate={handleTimeUpdate}
 				>
-					{#if videoState?.subtitleUrl}
+					{#if syncState?.subtitleUrl}
 						<track
-							src={videoState.subtitleUrl}
+							src={syncState.subtitleUrl}
 							kind="subtitles"
 							srclang="en"
 							label="English"