From 60b4c337423ebc30da5ff9fd8b47ca5f3bc79f04 Mon Sep 17 00:00:00 2001
From: ward <ward@localhost.localdomain>
Date: Mon, 23 Jun 2025 14:40:33 +1200
Subject: [PATCH] More improvements to tv watch route

---
 materialious/src/lib/components/Player.svelte |  2 +-
 .../src/routes/(no-layout)/tv/[slug]/+page.ts |  2 +-
 .../(no-layout)/tv/[slug]/+page@.svelte       | 37 +++++++++++++------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 3fb18b93..f9b3e932 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -707,7 +707,7 @@
 			}
 		}
 
-		Mousetrap.unbind(['enter', 'left', 'right', 'space', 'c', 'f', 'shift+left', 'shift+right']);
+		Mousetrap.unbind(['left', 'right', 'space', 'c', 'f', 'shift+left', 'shift+right']);
 
 		if (watchProgressTimeout) {
 			clearTimeout(watchProgressTimeout);
diff --git a/materialious/src/routes/(no-layout)/tv/[slug]/+page.ts b/materialious/src/routes/(no-layout)/tv/[slug]/+page.ts
index ddb95130..ce91aad0 100644
--- a/materialious/src/routes/(no-layout)/tv/[slug]/+page.ts
+++ b/materialious/src/routes/(no-layout)/tv/[slug]/+page.ts
@@ -1,5 +1,5 @@
 import { getWatchDetails } from '$lib/watch.js';
 
 export async function load({ params, url }) {
-	return getWatchDetails(params.slug, url);
+	return await getWatchDetails(params.slug, url);
 }
diff --git a/materialious/src/routes/(no-layout)/tv/[slug]/+page@.svelte b/materialious/src/routes/(no-layout)/tv/[slug]/+page@.svelte
index ecf9fc47..c9f9c16b 100644
--- a/materialious/src/routes/(no-layout)/tv/[slug]/+page@.svelte
+++ b/materialious/src/routes/(no-layout)/tv/[slug]/+page@.svelte
@@ -67,23 +67,27 @@
 		});
 
 		Mousetrap.bind('enter', () => {
-			if (showInfo) return true;
-
-			if (playerElement?.paused) {
-				playerElement?.play();
-			} else {
-				playerElement?.pause();
+			if (!showInfo) {
+				if (playerElement?.paused) {
+					playerElement?.play();
+				} else {
+					playerElement?.pause();
+				}
+				return false;
 			}
-			return false;
+
+			return true;
 		});
 	});
 
 	onDestroy(() => {
-		Mousetrap.unbind(['up', 'down', 'left', 'right']);
+		Mousetrap.unbind(['up', 'down', 'left', 'right', 'enter']);
 	});
 </script>
 
-<Player bind:playerElement isEmbed={true} {data} />
+{#key data.video.videoId}
+	<Player bind:playerElement isEmbed={true} {data} />
+{/key}
 
 {#if showInfo}
 	<article id="shown-info">
@@ -104,6 +108,10 @@
 						<article
 							class="no-padding primary-border"
 							style="height: 100%;"
+							onclick={() => {
+								showInfo = false;
+							}}
+							role="presentation"
 							id={playlistVideo.videoId}
 							class:border={playlistVideo.videoId === data.video.videoId}
 						>
@@ -123,7 +131,14 @@
 		<div class="grid">
 			{#each data.video.recommendedVideos as recommendedVideo}
 				<ContentColumn>
-					<article style="height: 100%;" class="no-padding">
+					<article
+						onclick={() => {
+							showInfo = false;
+						}}
+						role="presentation"
+						style="height: 100%;"
+						class="no-padding"
+					>
 						{#key recommendedVideo.videoId}
 							<Thumbnail video={recommendedVideo} sideways={false} />
 						{/key}
@@ -140,7 +155,7 @@
 		bottom: 0;
 		left: 0;
 		width: 100%;
-		height: 40%;
+		height: 50%;
 		z-index: 101;
 		overflow-y: scroll;
 	}