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] 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} />