From db49b2713582d1ebd0f250da7b30b904beb66303 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 31 Mar 2024 13:20:00 +1300
Subject: [PATCH] Append playlist id to watch page if coming from playlist

---
 README.md                                            |  1 +
 materialious/src/lib/Thumbnail.svelte                | 11 +++++------
 materialious/src/lib/VideoList.svelte                |  3 ++-
 materialious/src/routes/playlist/[slug]/+page.svelte |  2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index b4fee534..01cdfb1d 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@
 
 ## Todo
 - Playlist support.
+- Localization.
 
 ## Previews
 ![Preview of player](./previews/player-preview.png)
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 6fc6afa1..951ab8bb 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -6,6 +6,9 @@
 	import { cleanNumber, truncate, videoLength } from './misc';
 
 	export let video: VideoBase | Video | Notification | PlaylistPageVideo;
+	export let playlistId: string = '';
+
+	let watchUrl = `/watch/${video.videoId}` + (playlistId ? `?playlist=${playlistId}` : '');
 
 	let loading = true;
 	let loaded = false;
@@ -35,11 +38,7 @@
 	});
 </script>
 
-<a
-	class="wave"
-	style="width: 100%; overflow: hidden;min-height:100px;"
-	href={`/watch/${video.videoId}`}
->
+<a class="wave" style="width: 100%; overflow: hidden;min-height:100px;" href={watchUrl}>
 	{#if loading}
 		<progress class="circle"></progress>
 	{:else if loaded}
@@ -73,7 +72,7 @@
 <div class="small-padding">
 	<nav class="no-margin">
 		<div class="max">
-			<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
+			<a href={watchUrl}><div class="bold">{truncate(video.title)}</div></a>
 			<div>
 				<a href={`/channel/${video.authorId}`}>{video.author}</a
 				>{#if !('publishedText' in video) && 'viewCountText' in video}
diff --git a/materialious/src/lib/VideoList.svelte b/materialious/src/lib/VideoList.svelte
index 4371559d..6d281196 100644
--- a/materialious/src/lib/VideoList.svelte
+++ b/materialious/src/lib/VideoList.svelte
@@ -5,6 +5,7 @@
 
 	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
 	export let oneItemPerRow: boolean = false;
+	export let playlistId: string = '';
 </script>
 
 {#if videos.length > 0}
@@ -14,7 +15,7 @@
 			{#each videos as video}
 				<div class={`s12 m${oneItemPerRow ? '12' : '6'} l${oneItemPerRow ? '12' : '2'}`}>
 					<article class="no-padding" style="height: 100%;">
-						<Thumbnail {video} />
+						<Thumbnail {video} {playlistId} />
 					</article>
 				</div>
 			{/each}
diff --git a/materialious/src/routes/playlist/[slug]/+page.svelte b/materialious/src/routes/playlist/[slug]/+page.svelte
index f3e7253b..2fb24108 100644
--- a/materialious/src/routes/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/playlist/[slug]/+page.svelte
@@ -36,4 +36,4 @@
 	<p style="white-space: pre-line;word-wrap: break-word;">{data.playlist.description}</p>
 </article>
 
-<VideoList {videos} />
+<VideoList {videos} playlistId={data.playlist.playlistId} />