From 8654550dcf0d620534720f90f73a1361db9906b2 Mon Sep 17 00:00:00 2001
From: VDawg <vdawg@tuta.io>
Date: Tue, 14 Nov 2023 12:21:56 +0100
Subject: [PATCH] add fullscreen button to videos

---
 src/lib/components/Video.svelte    |  7 +++++++
 src/routes/PreviewRiceSlice.svelte | 10 ++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Video.svelte b/src/lib/components/Video.svelte
index 4559bad..7f4dac0 100644
--- a/src/lib/components/Video.svelte
+++ b/src/lib/components/Video.svelte
@@ -2,6 +2,7 @@
 	import clsx from 'clsx'
 	import PlayIcon from '~icons/mingcute/play-circle-line'
 	import { inview } from 'svelte-inview'
+	import IconFullscreen from '~icons/mingcute/fullscreen-fill'
 	import { onMount } from 'svelte'
 
 	/** @type {string} */
@@ -55,6 +56,12 @@
 		{autoplay}
 		on:play={() => (isPaused = false)}
 	/>
+
+	<button on:click={makeFullscreen} class="absolute bottom-2 left-2 z-10">
+		<IconFullscreen
+			class="h-6 w-6 rounded bg-black/10 opacity-80 transition-all duration-75 hover:scale-105 hover:opacity-100"
+		/>
+	</button>
 	<div
 		class={clsx(
 			'z-20 opacity-0 transition-opacity  ',
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index 626a63e..cea9ad4 100755
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -4,6 +4,7 @@
 	import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.webp'
 	import PlayIcon from '~icons/mingcute/play-circle-line'
 	import clsx from 'clsx'
+	import IconFullscreen from '~icons/mingcute/fullscreen-fill'
 	import { onMount } from 'svelte'
 
 	/** @type HTMLVideoElement */
@@ -14,7 +15,6 @@
 
 	function togglePlay() {
 		videoElement.paused ? videoElement.play() : videoElement.pause()
-		isPaused = videoElement.paused
 	}
 
 	function makeFullscreen() {
@@ -56,11 +56,17 @@
 			muted
 			preload="auto"
 			autoplay
-			on:play={() => {}}
+			on:play={() => (isPaused = false)}
+			on:pause={() => (isPaused = true)}
 			poster={previewRiceThumbnail}
 			on:click={togglePlay}
 			on:dblclick={makeFullscreen}
 		/>
+		<button on:click={makeFullscreen} class="absolute bottom-0 left-0 z-10">
+			<IconFullscreen
+				class="h-8 w-8 rounded bg-black/10 p-2 opacity-60 transition-all duration-75 hover:scale-105 hover:opacity-100"
+			/>
+		</button>
 		<div
 			class={clsx(
 				'z-20 opacity-0 transition-opacity  ',