Pinafore-Web-Client-Frontend/routes/_components/NonAutoplayGifv.html

62 lines
1.3 KiB
HTML

<div class="non-autoplay-gifv" style="width: {width}px; height: {height}px;"
on:mouseover="onMouseOver(event)"
ref:node
>
{#if playing}
<AutoplayVideo
className={class}
ariaLabel={label}
{poster}
{src}
{width}
{height}
/>
{:else}
<LazyImage
alt={label || ''}
title={label || ''}
src={staticSrc}
fallback={oneTransparentPixel}
{width}
{height}
background="var(--loading-bg)"
className={class}
/>
{/if}
<PlayVideoIcon className={playing ? 'hidden' : ''}/>
</div>
<style>
.non-autoplay-gifv {
cursor: zoom-in;
position: relative;
}
:global(.non-autoplay-gifv .play-video-icon) {
transition: opacity 0.2s linear;
}
</style>
<script>
import { mouseover } from '../_utils/events'
import PlayVideoIcon from './PlayVideoIcon.html'
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
import LazyImage from './LazyImage.html'
import AutoplayVideo from './AutoplayVideo.html'
export default {
methods: {
onMouseOver (mouseOver) {
this.set({ playing: mouseOver })
}
},
events: {
mouseover
},
data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
}),
components: {
PlayVideoIcon,
LazyImage,
AutoplayVideo
}
}
</script>