From 8874252596515a27453d998ece4273aeea5a38c9 Mon Sep 17 00:00:00 2001 From: VDawg Date: Tue, 14 Nov 2023 11:57:07 +0100 Subject: [PATCH] pluginsSlice, sync videos playback state --- src/lib/components/Video.svelte | 9 +++++++-- src/routes/PluginsSlice.svelte | 12 ++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Video.svelte b/src/lib/components/Video.svelte index 0bff037..4559bad 100644 --- a/src/lib/components/Video.svelte +++ b/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)} /> diff --git a/src/routes/PluginsSlice.svelte b/src/routes/PluginsSlice.svelte index e218ed2..f62716f 100644 --- a/src/routes/PluginsSlice.svelte +++ b/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()) + }
@@ -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}