77 lines
1.6 KiB
HTML
77 lines
1.6 KiB
HTML
<div class="non-autoplay-gifv {$largeInlineMedia ? '' : 'non-autoplay-gifv-fixed-size'}"
|
|
style="width: {width}px; height: {height}px;"
|
|
on:mouseover="onMouseOver(event)"
|
|
ref:node
|
|
>
|
|
{#if playing}
|
|
<AutoplayVideo
|
|
ariaLabel={label}
|
|
{poster}
|
|
{src}
|
|
{width}
|
|
{height}
|
|
{focus}
|
|
/>
|
|
{:else}
|
|
<LazyImage
|
|
alt={label || ''}
|
|
title={label || ''}
|
|
src={staticSrc}
|
|
fallback={oneTransparentPixel}
|
|
{width}
|
|
{height}
|
|
background="var(--loading-bg)"
|
|
{focus}
|
|
/>
|
|
{/if}
|
|
<PlayVideoIcon className={playing ? 'hidden' : ''}/>
|
|
</div>
|
|
<style>
|
|
.non-autoplay-gifv {
|
|
cursor: zoom-in;
|
|
display: flex;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.non-autoplay-gifv-fixed-size {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
: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,
|
|
focus: void 0
|
|
}),
|
|
components: {
|
|
PlayVideoIcon,
|
|
LazyImage,
|
|
AutoplayVideo
|
|
}
|
|
}
|
|
</script>
|