From 37cfb375b8c79141d135143252f154732a85c8f1 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Thu, 16 Apr 2026 07:50:55 -0700
Subject: [PATCH] attempt fix subs fullscreen

---
 src/routes/+page.svelte | 79 ++++++++++++++++++++++++++++++++---------
 1 file changed, 63 insertions(+), 16 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 724c8d7..bd22153 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,6 +16,7 @@
 	const seekReducer = useReducer(reducers.seek);
 
 	let videoElement: HTMLVideoElement | undefined = $state();
+	let containerElement: HTMLDivElement | undefined = $state();
 	let newUrl = $state("");
 	let newSubtitleUrl = $state("");
 
@@ -141,6 +142,14 @@
 		setSubtitleUrlReducer({ url: newSubtitleUrl });
 		newSubtitleUrl = "";
 	}
+
+	function toggleFullscreen() {
+		if (!document.fullscreenElement) {
+			containerElement?.requestFullscreen().catch(console.error);
+		} else {
+			document.exitFullscreen();
+		}
+	}
 </script>
 
 <div class="p-4">
@@ -175,22 +184,60 @@
 	</form>
 
 	<div>
-		<!-- svelte-ignore a11y_media_has_caption -->
-		<video
-			bind:this={videoElement}
-			muted
-			controls
-			crossorigin="anonymous"
-			onplay={handlePlay}
-			onpause={handlePause}
-			onseeked={handleSeeked}
-			ontimeupdate={handleTimeUpdate}
-			class="w-full max-w-2xl bg-black"
+		<div
+			bind:this={containerElement}
+			class="fullscreen-container relative w-full max-w-2xl bg-black"
 		>
-			{#if videoState?.subtitleUrl && !videoState.subtitleUrl.endsWith(".ass")}
-				<track src={videoState.subtitleUrl} kind="subtitles" srclang="en" label="English" default />
-			{/if}
-			Your browser does not support the video tag.
-		</video>
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video
+				bind:this={videoElement}
+				muted
+				controls
+				controlslist="nofullscreen"
+				crossorigin="anonymous"
+				onplay={handlePlay}
+				onpause={handlePause}
+				onseeked={handleSeeked}
+				ontimeupdate={handleTimeUpdate}
+				ondblclick={toggleFullscreen}
+				class="h-full w-full"
+			>
+				{#if videoState?.subtitleUrl && !videoState.subtitleUrl.endsWith(".ass")}
+					<track
+						src={videoState.subtitleUrl}
+						kind="subtitles"
+						srclang="en"
+						label="English"
+						default
+					/>
+				{/if}
+				Your browser does not support the video tag.
+			</video>
+			<button
+				onclick={toggleFullscreen}
+				class="absolute top-2 right-2 z-50 rounded bg-black/70 px-2 py-1 text-xs text-white opacity-50 transition-opacity hover:opacity-100"
+			>
+				Fullscreen
+			</button>
+		</div>
 	</div>
 </div>
+
+<style>
+	:global(.JASSUB) {
+		width: 100% !important;
+		height: 100% !important;
+	}
+	:global(.fullscreen-container:fullscreen) {
+		max-width: none !important;
+		width: 100vw !important;
+		height: 100vh !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	:global(.fullscreen-container:fullscreen video) {
+		width: 100% !important;
+		height: 100% !important;
+	}
+</style>