From 7f98db23d56705fe908422301bbaf079a793e973 Mon Sep 17 00:00:00 2001 From: VDawg Date: Tue, 14 Nov 2023 11:38:18 +0100 Subject: [PATCH] fix play button for autoplay blocked users --- src/lib/components/Video.svelte | 4 ++- src/routes/PreviewRiceSlice.svelte | 39 +++++++++++++++--------------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/lib/components/Video.svelte b/src/lib/components/Video.svelte index 9b0bf50..0bff037 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 { onMount } from 'svelte' /** @type {string} */ export let src @@ -14,7 +15,7 @@ /** @type {string}*/ export let videoClass = '' let videoElement - let isPaused = !autoplay + let isPaused = true function togglePlay() { videoElement.paused ? videoElement.play() : videoElement.pause() @@ -47,6 +48,7 @@ on:click={togglePlay} on:dblclick={makeFullscreen} {autoplay} + on:play={() => (isPaused = false)} />
{ + // Nessecary as browsers might block autoplay. The timeout is nessecary as the video is always paused at the very start, even with autoplay on + const timeout = setTimeout(() => { + isPaused = videoElement.paused + }, 10) + + return () => clearTimeout(timeout) + })
@@ -33,7 +38,7 @@ use:inview={{ threshold: 0.5 }} on:inview_enter={() => { isVisible = true - !isPaused && videoElement.play() + !isPaused && videoElement.play().catch(() => {}) }} on:inview_leave={() => { isVisible = false @@ -48,8 +53,10 @@ disableremoteplayback="true" class="rounded-xl" loop - muted={isMuted} + muted preload="auto" + autoplay + on:play={() => {}} poster={previewRiceThumbnail} on:click={togglePlay} on:dblclick={makeFullscreen} @@ -60,20 +67,9 @@ isPaused ? 'opacity-100' : 'pointer-events-none' )} > - - {#if isPaused}
@@ -103,12 +99,15 @@ border: solid 2px theme(colors.sky.400); scale: 0.9; background: theme(colors.cyan.300 / 70%); + aspect-ratio: 16/9; & video { transition-property: opacity; transition-duration: inherit; transition-timing-function: inherit; opacity: 0.3; + height: 100%; + width: 100%; } .isVisible & {