From 9c97b564c79955b1d3d40115abec19f9de5a194a Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Sun, 17 Nov 2024 19:27:41 -0600
Subject: [PATCH] Replace manual events with vidstack media gestures

---
 thrimbletrimmer/src/common/video.scss |  9 +++++++++
 thrimbletrimmer/src/common/video.tsx  | 13 +++----------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/thrimbletrimmer/src/common/video.scss b/thrimbletrimmer/src/common/video.scss
index 33f6883..fa549c6 100644
--- a/thrimbletrimmer/src/common/video.scss
+++ b/thrimbletrimmer/src/common/video.scss
@@ -9,6 +9,15 @@ media-player {
 	align-items: normal;
 }
 
+media-gesture {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
 // Used to make the controls appear below the video player
 media-player:not([data-fullscreen]) media-controls {
 	position: relative;
diff --git a/thrimbletrimmer/src/common/video.tsx b/thrimbletrimmer/src/common/video.tsx
index 452bcbf..57f5997 100644
--- a/thrimbletrimmer/src/common/video.tsx
+++ b/thrimbletrimmer/src/common/video.tsx
@@ -246,16 +246,9 @@ export const VideoPlayer: Component<VideoPlayerProps> = (props) => {
 			preload="auto"
 			storage="thrimbletrimmer"
 		>
-			<media-provider
-				onClick={(event) => {
-					const player = props.mediaPlayer();
-					if (player.paused) {
-						player.play(event);
-					} else {
-						player.pause(event);
-					}
-				}}
-			/>
+			<media-provider />
+			<media-gesture event="pointerup" action="toggle:paused" />
+			<media-gesture event="dblpointerup" action="toggle:fullscreen" />
 			<media-captions class="vds-captions" />
 			<media-controls class="vds-controls" hideDelay={0}>
 				<media-controls-group class="vds-controls-group">