pinafore/src/routes/_components/NonAutoplayGifv.html

77 lines
1.6 KiB
HTML
Raw Normal View History

<div class="non-autoplay-gifv {$largeInlineMedia ? '' : 'non-autoplay-gifv-fixed-size'}"
style="width: {width}px; height: {height}px;"
2018-02-02 03:48:59 +01:00
on:mouseover="onMouseOver(event)"
ref:node
>
{#if playing}
2018-03-31 19:45:11 +02:00
<AutoplayVideo
ariaLabel={label}
{poster}
{src}
{width}
{height}
{focus}
2018-02-02 03:48:59 +01:00
/>
{:else}
2018-03-14 07:07:30 +01:00
<LazyImage
alt={label || ''}
title={label || ''}
src={staticSrc}
fallback={oneTransparentPixel}
{width}
{height}
2018-03-14 07:07:30 +01:00
background="var(--loading-bg)"
{focus}
2018-03-14 07:07:30 +01:00
/>
{/if}
<PlayVideoIcon className={playing ? 'hidden' : ''}/>
2018-02-02 03:48:59 +01:00
</div>
<style>
.non-autoplay-gifv {
cursor: zoom-in;
display: flex;
2018-03-10 20:28:30 +01:00
position: relative;
margin: 0;
padding: 0;
2018-03-10 20:28:30 +01:00
}
.non-autoplay-gifv-fixed-size {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
2018-03-10 20:28:30 +01:00
:global(.non-autoplay-gifv .play-video-icon) {
transition: opacity 0.2s linear;
2018-02-02 03:48:59 +01:00
}
</style>
<script>
import { mouseover } from '../_utils/events'
2018-03-10 20:28:30 +01:00
import PlayVideoIcon from './PlayVideoIcon.html'
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
2018-03-14 07:07:30 +01:00
import LazyImage from './LazyImage.html'
2018-03-31 19:45:11 +02:00
import AutoplayVideo from './AutoplayVideo.html'
2018-02-02 03:48:59 +01:00
export default {
methods: {
2018-04-20 06:38:01 +02:00
onMouseOver (mouseOver) {
this.set({ playing: mouseOver })
2018-02-02 03:48:59 +01:00
}
},
events: {
2018-03-14 07:07:30 +01:00
mouseover
},
data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
focus: void 0
2018-03-10 20:28:30 +01:00
}),
components: {
2018-03-14 07:07:30 +01:00
PlayVideoIcon,
2018-03-31 19:45:11 +02:00
LazyImage,
AutoplayVideo
2018-03-10 20:28:30 +01:00
}
2018-02-02 03:48:59 +01:00
}
</script>