From aa4ed5c1454cd79b3984e12215bbffe1292252a8 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 11 Apr 2024 13:02:28 +1200
Subject: [PATCH] Added playlist syncing

---
 materialious/src/lib/Thumbnail.svelte         | 14 ++++++++---
 materialious/src/lib/player.ts                |  3 ++-
 .../src/routes/watch/[slug]/+page.svelte      | 24 ++++++++++++++++++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 9822c835..c8ee4874 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -120,10 +120,18 @@
 
 	function syncChangeVideo() {
 		if ($syncPartyConnections) {
+			const events = {
+				events: [{ type: 'change-video', videoId: video.videoId }]
+			} as PlayerEvents;
+
+			if (playlistId) {
+				events.events.unshift({
+					type: 'playlist',
+					playlistId: playlistId
+				});
+			}
 			$syncPartyConnections.forEach((conn) => {
-				conn.send({
-					events: [{ type: 'change-video', videoId: video.videoId }]
-				} as PlayerEvents);
+				conn.send(events);
 			});
 		}
 	}
diff --git a/materialious/src/lib/player.ts b/materialious/src/lib/player.ts
index bbe014ff..6da09ba7 100644
--- a/materialious/src/lib/player.ts
+++ b/materialious/src/lib/player.ts
@@ -1,7 +1,8 @@
 export interface PlayerEvent {
-  type: "pause" | "seek" | "change-video" | "play";
+  type: "pause" | "seek" | "change-video" | "play" | "playlist";
   time?: number;
   videoId?: string;
+  playlistId?: string;
 }
 
 export interface PlayerEvents {
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index cdb90a1d..9922eb10 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -53,6 +53,17 @@
 			} as PlayerEvents);
 		}
 
+		if (data.playlistId) {
+			conn.send({
+				events: [
+					{
+						type: 'playlist',
+						playlistId: data.playlistId
+					}
+				]
+			} as PlayerEvents);
+		}
+
 		conn.on('data', (rawData) => {
 			const events = rawData as PlayerEvents;
 
@@ -69,6 +80,14 @@
 					if (timeDiff > 3 || timeDiff < -3) {
 						player.currentTime = event.time;
 					}
+				} else if (
+					event.type === 'playlist' &&
+					event.playlistId &&
+					event.playlistId !== data.playlistId
+				) {
+					data.playlistId = event.playlistId;
+					await loadPlaylist(event.playlistId);
+					goToCurrentPlaylistItem();
 				}
 			});
 		});
@@ -207,7 +226,10 @@
 					if ($syncPartyConnections) {
 						$syncPartyConnections.forEach((conn) => {
 							conn.send({
-								events: [{ type: 'change-video', videoId: playlistVideos[newIndex].videoId }]
+								events: [
+									{ type: 'change-video', videoId: playlistVideos[newIndex].videoId },
+									{ type: 'playlist', playlistId: data.playlistId }
+								]
 							} as PlayerEvents);
 						});
 					}