pluginsSlice, sync videos playback state

src/lib/components/Video.svelte

@@ -10,11 +10,13 @@
 	export let poster
 	export let loop = true
 	export let muted = true
-	export let autoplay = false
+	/** @type {true | undefined}*/
+	export let autoplay = undefined
 	export let hidden = false
 	/** @type {string}*/
 	export let videoClass = ''
-	let videoElement
+	/** @type {HTMLVideoElement}*/
+	export let videoElement
 	let isPaused = true
 
 	function togglePlay() {
@@ -47,6 +49,9 @@
 		{poster}
 		on:click={togglePlay}
 		on:dblclick={makeFullscreen}
+		on:play
+		on:pause
+		on:pause={() => (isPaused = true)}
 		{autoplay}
 		on:play={() => (isPaused = false)}
 	/>

src/routes/PluginsSlice.svelte

@@ -7,6 +7,8 @@
 	import Video from '$lib/components/Video.svelte'
 	import { fade } from 'svelte/transition'
 
+	/** @type {HTMLVideoElement[]}*/
+	const videos = []
 	let activeIndex = 0
 
 	const items = [
@@ -30,6 +32,13 @@
 	function setActiveItem(index) {
 		activeIndex = index
 	}
+
+	function playVideos() {
+		videos.forEach((video) => video.play())
+	}
+	function pauseVideos() {
+		videos.forEach((video) => video.pause())
+	}
 </script>
 
 <section class="relative z-0 flex min-h-max w-full flex-col items-center py-20">
@@ -92,8 +101,11 @@
 					{src}
 					{poster}
 					autoplay
+					bind:videoElement={videos[index]}
 					class="z-10 aspect-video h-[inherit] origin-left    rounded-lg object-cover  object-left    shadow-xl shadow-cyan-700/50 outline outline-2 outline-cyan-500 duration-500"
 					hidden={index !== activeIndex}
+					on:pause={pauseVideos}
+					on:play={playVideos}
 					videoClass="h-[inherit] aspect-video"
 				/>
 			{/each}