unify usage of autoplaying video
This commit is contained in:
parent
e467f74631
commit
7342ff1bf2
14
routes/_components/AutoplayVideo.html
Normal file
14
routes/_components/AutoplayVideo.html
Normal 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
|
||||
/>
|
|
@ -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>
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue