62 lines
1.3 KiB
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> |