1
0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-13 02:37:20 +01:00
Pinafore-Web-Client-Frontend/routes/_components/NonAutoplayGifv.html

62 lines
1.4 KiB
HTML
Raw Normal View History

2018-02-02 03:48:59 +01:00
<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
on:mouseover="onMouseOver(event)"
ref:node
>
{{#if playing}}
2018-03-31 19:45:11 +02:00
<AutoplayVideo
className="{{class}}"
ariaLabel="{{label}}"
:poster
:src
:width
:height
2018-02-02 03:48:59 +01:00
/>
{{else}}
2018-03-14 07:07:30 +01:00
<LazyImage
alt="{{label || ''}}"
title="{{label || ''}}"
2018-03-14 07:07:30 +01:00
src="{{staticSrc}}"
fallback="{{oneTransparentPixel}}"
:width
:height
background="var(--loading-bg)"
className="{{class}}"
/>
2018-02-02 03:48:59 +01:00
{{/if}}
2018-03-10 20:28:30 +01:00
<PlayVideoIcon className="{{playing ? 'hidden' : ''}}"/>
2018-02-02 03:48:59 +01:00
</div>
<style>
.non-autoplay-gifv {
cursor: zoom-in;
2018-03-10 20:28:30 +01:00
position: relative;
}
: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: {
onMouseOver(mouseOver) {
this.set({playing: mouseOver})
}
},
events: {
2018-03-14 07:07:30 +01:00
mouseover
},
data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
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>