unify usage of autoplaying video

This commit is contained in:
Nolan Lawson 2018-03-31 10:45:11 -07:00
parent e467f74631
commit 7342ff1bf2
4 changed files with 39 additions and 32 deletions

View file

@ -0,0 +1,14 @@
<video
class="{{className || ''}}"
aria-label="{{ariaLabel || ''}}"
style="background: url({{poster}});"
:poster
:width
:height
:src
autoplay
muted
loop
webkit-playsinline
playsinline
/>

View file

@ -3,18 +3,13 @@
ref:node
>
{{#if playing}}
<video
style="background: url({{staticSrc}});"
class="{{class}}"
aria-label="{{label}}"
poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
autoplay
muted
loop
playsinline
<AutoplayVideo
className="{{class}}"
ariaLabel="{{label}}"
:poster
:src
:width
:height
/>
{{else}}
<LazyImage
@ -43,6 +38,7 @@
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: {
@ -58,7 +54,8 @@
}),
components: {
PlayVideoIcon,
LazyImage
LazyImage,
AutoplayVideo
}
}
</script>

View file

@ -1,15 +1,11 @@
<ModalDialog :label :shown background="var(--muted-modal-bg)" muted="true">
{{#if type === 'gifv'}}
<video
aria-label="Animated GIF: {{description || ''}}"
poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
autoplay
muted
loop
playsinline
<AutoplayVideo
ariaLabel="Animated GIF: {{description || ''}}"
:poster
:src
:width
:height
/>
{{else}}
<img
@ -30,10 +26,12 @@
</style>
<script>
import ModalDialog from './ModalDialog.html'
import AutoplayVideo from '../AutoplayVideo.html'
export default {
components: {
ModalDialog
ModalDialog,
AutoplayVideo
},
methods: {
async show() {

View file

@ -25,17 +25,13 @@
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
>
{{#if media.type === 'gifv' && $autoplayGifs}}
<video
class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
aria-label="Animated GIF: {{media.description || ''}}"
<AutoplayVideo
className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
ariaLabel="Animated GIF: {{media.description || ''}}"
poster="{{media.preview_url}}"
src="{{media.url}}"
width="{{inlineWidth}}"
height="{{inlineHeight}}"
autoplay
muted
loop
playsinline
/>
{{elseif media.type === 'gifv' && !$autoplayGifs}}
<NonAutoplayGifv
@ -107,6 +103,7 @@
import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
import { store } from '../../_store/store'
import LazyImage from '../LazyImage.html'
import AutoplayVideo from '../AutoplayVideo.html'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
export default {
@ -165,7 +162,8 @@
components: {
NonAutoplayGifv,
PlayVideoIcon,
LazyImage
LazyImage,
AutoplayVideo
}
}
</script>