Replace manual events with vidstack media gestures

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;

thrimbletrimmer/src/common/video.tsx

@@ -246,16 +246,9 @@ export const VideoPlayer: Component<VideoPlayerProps> = (props) => {
 			preload="auto"
 			storage="thrimbletrimmer"
 		>
-			<media-provider
+			<media-provider />
-				onClick={(event) => {
+			<media-gesture event="pointerup" action="toggle:paused" />
-					const player = props.mediaPlayer();
+			<media-gesture event="dblpointerup" action="toggle:fullscreen" />
-					if (player.paused) {
-						player.play(event);
-					} else {
-						player.pause(event);
-					}
-				}}
-			/>
 			<media-captions class="vds-captions" />
 			<media-controls class="vds-controls" hideDelay={0}>
 				<media-controls-group class="vds-controls-group">