Added playlist syncing

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);
 			});
 		}
 	}

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 {

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);
 						});
 					}