feat: auto play videos and gifs when on screen (#623)

zio/stable
Joaquín Sánchez 2022-12-28 23:47:28 +01:00 committed by GitHub
parent aebb02c27e
commit 468ae88814
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 3 deletions

View File

@ -57,13 +57,33 @@ const type = $computed(() => {
} }
return 'unknown' return 'unknown'
}) })
const video = ref<HTMLVideoElement | undefined>()
const prefersReducedMotion = usePreferredReducedMotion()
useIntersectionObserver(video, (entries) => {
if (prefersReducedMotion.value === 'reduce')
return
entries.forEach((entry) => {
if (entry.intersectionRatio !== 1 && !video.value!.paused)
video.value!.pause()
else
video.value!.play()
})
}, { threshold: 1 })
</script> </script>
<template> <template>
<div relative ma flex> <div relative ma flex>
<template v-if="type === 'video'"> <template v-if="type === 'video'">
<video <video
ref="video"
preload="none"
:poster="attachment.previewUrl" :poster="attachment.previewUrl"
muted
loop
playsinline
controls controls
border="~ base" border="~ base"
object-cover object-cover
@ -79,12 +99,12 @@ const type = $computed(() => {
</template> </template>
<template v-else-if="type === 'gifv'"> <template v-else-if="type === 'gifv'">
<video <video
:poster="attachment.previewUrl" ref="video"
preload="none" preload="none"
:poster="attachment.previewUrl"
muted
loop loop
playsinline playsinline
autoplay
muted
border="~ base" border="~ base"
object-cover object-cover
:width="attachment.meta?.original?.width" :width="attachment.meta?.original?.width"