From 1cc360cf68270b891aa0ae1698337375077a134b Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 3 Apr 2024 05:00:29 +1300
Subject: [PATCH 1/5] Don't save player pos every second

---
 materialious/src/lib/Player.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index 1a77ab34..53174cf1 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -91,7 +91,6 @@
 
 			player.addEventListener('time-update', () => {
 				currentTime = player.currentTime;
-				savePlayerPos();
 			});
 
 			player.addEventListener('pause', () => {

From 35f9b835afa5c8f1e72b84b88ff9b3a3df9da253 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 3 Apr 2024 05:04:42 +1300
Subject: [PATCH 2/5] Fixed player controls not working on video change

---
 materialious/src/routes/watch/[slug]/+page.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index c3760849..cb4bab7c 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -84,9 +84,7 @@
 {#if data}
 	<div class="grid">
 		<div class="s12 m12 l10">
-			{#key data.video.videoId}
-				<Player {data} {audioMode} {playlistVideos} bind:seekTo bind:currentTime />
-			{/key}
+			<Player {data} {audioMode} {playlistVideos} bind:seekTo bind:currentTime />
 
 			<h5>{data.video.title}</h5>
 

From ec7c58dfda8b03a930a1d7f184e38c34c5075a66 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 3 Apr 2024 05:11:23 +1300
Subject: [PATCH 3/5] Video doesnt load on change

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

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index cb4bab7c..c3760849 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -84,7 +84,9 @@
 {#if data}
 	<div class="grid">
 		<div class="s12 m12 l10">
-			<Player {data} {audioMode} {playlistVideos} bind:seekTo bind:currentTime />
+			{#key data.video.videoId}
+				<Player {data} {audioMode} {playlistVideos} bind:seekTo bind:currentTime />
+			{/key}
 
 			<h5>{data.video.title}</h5>
 

From bda8fc14e5d5100467e20dda81bbc4923687a6ee Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 3 Apr 2024 05:12:31 +1300
Subject: [PATCH 4/5] Fixed thumbnails not updating correctly on player view

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

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index c3760849..f918c076 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -267,7 +267,9 @@
 				{#if data.video.recommendedVideos}
 					{#each data.video.recommendedVideos as recommendedVideo}
 						<article class="no-padding">
-							<Thumbnail video={recommendedVideo} />
+							{#key recommendedVideo.videoId}
+								<Thumbnail video={recommendedVideo} />
+							{/key}
 						</article>
 					{/each}
 				{/if}

From 4066c333695a1580bc6e6dac6ed3b5ea3c103c55 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 3 Apr 2024 05:27:46 +1300
Subject: [PATCH 5/5] Scroll to playlist item

---
 .../src/routes/watch/[slug]/+page.svelte      | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index f918c076..0dead30d 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -44,6 +44,14 @@
 				}
 			);
 		}
+
+		const playlistCurrentVideo = document.getElementById(data.video.videoId);
+		const playlistScrollable = document.getElementById('playlist');
+
+		if (playlistCurrentVideo && playlistScrollable) {
+			playlistScrollable.scrollTop =
+				playlistCurrentVideo.offsetTop - playlistScrollable.offsetTop - 200;
+		}
 	});
 
 	async function addVideoToPlaylist(playlistId: string) {
@@ -274,16 +282,21 @@
 					{/each}
 				{/if}
 			{:else if playlist}
-				<article style="height: 75vh;" class="scroll">
-					<h6>{playlist.title}</h6>
-					<p>{cleanNumber(playlist.viewCount)} views • {playlist.videoCount} videos</p>
+				<article style="height: 75vh; position: relative;" id="playlist" class="scroll no-padding">
+					<article class="no-elevate" style="position: sticky; top: 0; z-index: 99999;">
+						<h6>{playlist.title}</h6>
+						<p>{cleanNumber(playlist.viewCount)} views • {playlist.videoCount} videos</p>
+						<p><a href={`/channel/${playlist.authorId}`}>{playlist.author}</a></p>
+						<div class="divider"></div>
+					</article>
 
-					<div class="divider"></div>
 					<div class="space"></div>
 
 					{#each playlistVideos as playlistVideo}
 						<article
 							class="no-padding primary-border"
+							style="margin: .7em;"
+							id={playlistVideo.videoId}
 							class:border={playlistVideo.videoId === data.video.videoId}
 						>
 							<Thumbnail video={playlistVideo} playlistId={data.playlistId} />