From 4909dbea108634cfcc5a54443abcc7dad8b8caeb Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 6 Apr 2024 18:09:13 +1300
Subject: [PATCH] Redirect sync watchers if video started

---
 materialious/src/routes/+layout.svelte        | 20 ++++++++++++++++++-
 .../src/routes/watch/[slug]/+page.svelte      |  4 ++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index 98c29d58..be2444e4 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { navigating } from '$app/stores';
+	import { navigating, page } from '$app/stores';
 	import { getFeed } from '$lib/Api/index';
 	import Logo from '$lib/Logo.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
@@ -136,6 +136,19 @@
 		if ($syncPartyPeer) {
 			$syncPartyPeer.on('connection', (conn) => {
 				conn.on('open', () => {
+					if ($page.url.pathname.startsWith('/watch')) {
+						const paths = $page.url.pathname.split('/');
+						if (paths.length > 2) {
+							conn.send({
+								events: [
+									{
+										type: 'change-video',
+										videoId: paths[2]
+									}
+								]
+							} as PlayerEvents);
+						}
+					}
 					changeVideoEvent(conn);
 					syncPartyConnections.set([...($syncPartyConnections || []), conn]);
 				});
@@ -241,6 +254,11 @@
 
 				changeVideoEvent(conn);
 			});
+
+			$syncPartyPeer.on('disconnected', () => {
+				syncPartyPeer.set(null);
+				syncPartyConnections.set(null);
+			});
 		}
 	});
 
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 3280ade7..5ff43673 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -41,6 +41,10 @@
 	let player: MediaPlayerElement;
 
 	function playerSyncEvents(conn: DataConnection) {
+		conn.send({
+			events: [{ type: 'seek', time: player.currentTime }]
+		} as PlayerEvents);
+
 		conn.on('data', (data) => {
 			const events = data as PlayerEvents;