From 7dfe8d23c1fa3791520bc9481d392e4c4962d575 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 13 Apr 2024 22:33:04 +1200
Subject: [PATCH] Fix cropping of video

---
 materialious/src/lib/Player.svelte                |  1 -
 materialious/src/routes/watch/[slug]/+page.svelte | 13 +++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index c55aab43..25e690cc 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -223,7 +223,6 @@
 	streamType={playerIsLive ? 'live' : 'on-demand'}
 	viewType={audioMode ? 'audio' : 'video'}
 	keep-alive
-	style="max-height: 80vh;"
 	{src}
 >
 	<media-provider>
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index fd1c0e00..ac939e61 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -355,10 +355,15 @@
 
 <div class="grid">
 	<div class={`s12 m12 l${theatreMode ? '12' : '10'}`}>
-		{#key data.video.videoId}
-			<Player {data} {audioMode} isSyncing={$syncPartyPeer !== null} bind:seekTo bind:player />
-		{/key}
-
+		<div style="display: flex;justify-content: center;">
+			{#key data.video.videoId}
+				<div
+					style="max-height: 80vh;max-width: calc(80vh * 16 / 9);overflow: hidden;position: relative;flex: 1;"
+				>
+					<Player {data} {audioMode} isSyncing={$syncPartyPeer !== null} bind:seekTo bind:player />
+				</div>
+			{/key}
+		</div>
 		<h5>{data.video.title}</h5>
 
 		<div class="grid no-padding">