From 5940caa730c39f67d607c2fcecf7e4941e894adb Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 11 Apr 2024 12:38:12 +1200
Subject: [PATCH 1/4] Minor improvements to playlist handling

---
 materialious/src/lib/Player.svelte            | 19 +--------
 .../src/routes/watch/[slug]/+page.svelte      | 41 ++++++++++++++-----
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index 1729e54c..d1faa62f 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import 'vidstack/bundle';
 
-	import { goto } from '$app/navigation';
 	import { SponsorBlock, type Category } from 'sponsorblock-api';
 	import { onDestroy, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
@@ -17,14 +16,13 @@
 		sponsorBlockCategories,
 		sponsorBlockUrl
 	} from '../store';
-	import type { PlaylistPageVideo, VideoPlay } from './Api/model';
+	import type { VideoPlay } from './Api/model';
 	import { proxyVideoUrl, videoLength, type PhasedDescription } from './misc';
 	import { getDynamicTheme } from './theme';
 
 	export let data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
 	export let currentTime: number = 0;
 	export let audioMode = false;
-	export let playlistVideos: PlaylistPageVideo[] | null = null;
 	export let player: MediaPlayerElement;
 	export let isSyncing: boolean = false;
 
@@ -47,21 +45,6 @@
 			}
 		} catch {}
 
-		if (playlistVideos) {
-			player.addEventListener('end', () => {
-				if (!playlistVideos) return;
-
-				const playlistVideoIds = playlistVideos.map((value) => {
-					return value.videoId;
-				});
-
-				const currentVideoIndex = playlistVideoIds.indexOf(data.video.videoId);
-				const newIndex = currentVideoIndex + 1;
-				if (currentVideoIndex !== -1 && newIndex <= playlistVideoIds.length) {
-					goto(`/watch/${playlistVideos[newIndex].videoId}?playlist=${data.playlistId}`);
-				}
-			});
-		}
 		if (!data.video.hlsUrl) {
 			if (data.video.captions) {
 				data.video.captions.forEach(async (caption) => {
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 44f10440..ee3a516a 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -51,12 +51,12 @@
 			events: [{ type: 'seek', time: player.currentTime }]
 		} as PlayerEvents);
 
-		conn.on('data', (data) => {
-			const events = data as PlayerEvents;
+		conn.on('data', (rawData) => {
+			const events = rawData as PlayerEvents;
 
 			if (!player) return;
 
-			events.events.forEach((event) => {
+			events.events.forEach(async (event) => {
 				if (event.type === 'pause') {
 					player.pause();
 				} else if (event.type === 'play') {
@@ -173,14 +173,36 @@
 			}
 
 			if (data.playlistId) {
-				setTimeout(goToCurrentPlaylistItem, 1000);
+				goToCurrentPlaylistItem();
 			}
 		});
 
 		if (!data.playlistId) return;
 
+		await loadPlaylist(data.playlistId);
+
+		goToCurrentPlaylistItem();
+
+		if (playlistVideos) {
+			player.addEventListener('end', () => {
+				if (!playlistVideos) return;
+
+				const playlistVideoIds = playlistVideos.map((value) => {
+					return value.videoId;
+				});
+
+				const currentVideoIndex = playlistVideoIds.indexOf(data.video.videoId);
+				const newIndex = currentVideoIndex + 1;
+				if (currentVideoIndex !== -1 && newIndex <= playlistVideoIds.length) {
+					goto(`/watch/${playlistVideos[newIndex].videoId}?playlist=${data.playlistId}`);
+				}
+			});
+		}
+	});
+
+	async function loadPlaylist(playlistId: string) {
 		for (let page = 1; page < Infinity; page++) {
-			const newPlaylist = await getPlaylist(data.playlistId, page);
+			const newPlaylist = await getPlaylist(playlistId, page);
 			if (page === 1) {
 				playlist = newPlaylist;
 			}
@@ -194,9 +216,7 @@
 				}
 			);
 		}
-
-		goToCurrentPlaylistItem();
-	});
+	}
 
 	function goToCurrentPlaylistItem() {
 		const playlistCurrentVideo = document.getElementById(data.video.videoId);
@@ -250,7 +270,6 @@
 				<Player
 					{data}
 					{audioMode}
-					{playlistVideos}
 					isSyncing={$syncPartyPeer !== null}
 					bind:seekTo
 					bind:currentTime
@@ -448,7 +467,7 @@
 		</div>
 		{#if !theatreMode}
 			<div class="s12 m12 l2">
-				{#if !data.playlistId}
+				{#if !playlist}
 					{#if data.video.recommendedVideos}
 						{#each data.video.recommendedVideos as recommendedVideo}
 							<article class="no-padding">
@@ -458,7 +477,7 @@
 							</article>
 						{/each}
 					{/if}
-				{:else if playlist}
+				{:else}
 					<article
 						style="height: 75vh; position: relative;"
 						id="playlist"

From f44becbf6f5a5f3f410e01d48f7649b6b1e024cc Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 11 Apr 2024 12:42:41 +1200
Subject: [PATCH 2/4] Handle video change on playlist change

---
 materialious/src/routes/watch/[slug]/+page.svelte | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index ee3a516a..9c987b62 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -194,6 +194,13 @@
 				const currentVideoIndex = playlistVideoIds.indexOf(data.video.videoId);
 				const newIndex = currentVideoIndex + 1;
 				if (currentVideoIndex !== -1 && newIndex <= playlistVideoIds.length) {
+					if ($syncPartyConnections) {
+						$syncPartyConnections.forEach((conn) => {
+							conn.send({
+								events: [{ type: 'change-video', videoId: playlistVideos[newIndex].videoId }]
+							} as PlayerEvents);
+						});
+					}
 					goto(`/watch/${playlistVideos[newIndex].videoId}?playlist=${data.playlistId}`);
 				}
 			});

From 46a5153a6de990580ca0621bd9297a18b8e0ba3a Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 11 Apr 2024 12:50:17 +1200
Subject: [PATCH 3/4] Minor player event fixes

---
 .../src/routes/watch/[slug]/+page.svelte      | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 9c987b62..cdb90a1d 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -47,16 +47,18 @@
 	let player: MediaPlayerElement;
 
 	function playerSyncEvents(conn: DataConnection) {
-		conn.send({
-			events: [{ type: 'seek', time: player.currentTime }]
-		} as PlayerEvents);
+		if (player) {
+			conn.send({
+				events: [{ type: 'seek', time: player.currentTime }]
+			} as PlayerEvents);
+		}
 
 		conn.on('data', (rawData) => {
 			const events = rawData as PlayerEvents;
 
-			if (!player) return;
-
 			events.events.forEach(async (event) => {
+				if (!player) return;
+
 				if (event.type === 'pause') {
 					player.pause();
 				} else if (event.type === 'play') {
@@ -71,6 +73,8 @@
 			});
 		});
 
+		if (!player) return;
+
 		player.addEventListener('auto-play-fail', () => {
 			conn.send({
 				events: [
@@ -82,6 +86,7 @@
 		});
 
 		player.addEventListener('auto-play', () => {
+			if (!player) return;
 			conn.send({
 				events: [
 					{
@@ -106,6 +111,7 @@
 		});
 
 		player.addEventListener('playing', () => {
+			if (!player) return;
 			conn.send({
 				events: [
 					{
@@ -120,6 +126,7 @@
 		});
 
 		player.addEventListener('play', () => {
+			if (!player) return;
 			conn.send({
 				events: [
 					{
@@ -144,6 +151,7 @@
 		});
 
 		player.addEventListener('seeked', () => {
+			if (!player) return;
 			conn.send({
 				events: [
 					{
@@ -167,15 +175,17 @@
 			});
 		}
 
-		player.addEventListener('end', () => {
-			if ($playerAutoplayNextByDefault && !playlist) {
-				goto(`/watch/${data.video.recommendedVideos[0].videoId}`);
-			}
+		if (player) {
+			player.addEventListener('end', () => {
+				if ($playerAutoplayNextByDefault && !playlist) {
+					goto(`/watch/${data.video.recommendedVideos[0].videoId}`);
+				}
 
-			if (data.playlistId) {
-				goToCurrentPlaylistItem();
-			}
-		});
+				if (data.playlistId) {
+					goToCurrentPlaylistItem();
+				}
+			});
+		}
 
 		if (!data.playlistId) return;
 
@@ -183,7 +193,7 @@
 
 		goToCurrentPlaylistItem();
 
-		if (playlistVideos) {
+		if (playlistVideos && player) {
 			player.addEventListener('end', () => {
 				if (!playlistVideos) return;
 

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 4/4] 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);
 						});
 					}