implement autoplay gifv

This commit is contained in:
Nolan Lawson 2018-02-01 18:48:59 -08:00
parent 926fe9acad
commit f543024ca6
2 changed files with 61 additions and 3 deletions

View File

@ -0,0 +1,44 @@
<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
on:mouseover="onMouseOver(event)"
ref:node
>
{{#if playing}}
<video
class="{{class}}"
aria-label="{{label}}"
poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
autoplay
muted
loop
playsinline
/>
{{else}}
<img class="{{class}}"
alt="{{label}}"
src="{{staticSrc}}"
width="{{width}}"
height="{{height}}"
/>
{{/if}}
</div>
<style>
.non-autoplay-gifv {
cursor: zoom-in;
}
</style>
<script>
import { mouseover } from '../_utils/events'
export default {
methods: {
onMouseOver(mouseOver) {
this.set({playing: mouseOver})
}
},
events: {
mouseover
}
}
</script>

View File

@ -18,8 +18,8 @@
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}" class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
/> />
</button> </button>
{{elseif media.type === 'gifv'}} {{elseif media.type === 'gifv' && $autoplayGifs}}
<video <video
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}" class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
aria-label="Animated GIF: {{media.description || ''}}" aria-label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}" poster="{{media.preview_url}}"
@ -30,7 +30,17 @@
muted muted
loop loop
playsinline playsinline
/> />
{{elseif media.type === 'gifv' && !$autoplayGifs}}
<NonAutoplayGifv
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
label="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}"
src="{{media.url}}"
staticSrc="{{media.preview_url}}"
width="{{getSmallWidth(media)}}"
height="{{getSmallHeight(media)}}"
/>
{{else}} {{else}}
<img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}" <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
on:imgLoad="set({imageLoaded: true})" on:imgLoad="set({imageLoaded: true})"
@ -110,6 +120,7 @@
import { imgLoad, imgLoadError } from '../../_utils/events' import { imgLoad, imgLoadError } from '../../_utils/events'
import { showVideoDialog } from '../../_utils/showVideoDialog' import { showVideoDialog } from '../../_utils/showVideoDialog'
import NonAutoplayGifv from '../NonAutoplayGifv.html'
export default { export default {
helpers: { helpers: {
@ -128,6 +139,9 @@
events: { events: {
imgLoad, imgLoad,
imgLoadError imgLoadError
},
components: {
NonAutoplayGifv
} }
} }
</script> </script>