fix Firefox autoplay gifv
This commit is contained in:
parent
6978d27a8c
commit
b10ecff3c0
|
@ -54,10 +54,6 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
// TODO: this hack is for Edge 16, which makes the modal too wide
|
|
||||||
if (typeof setImmediate === 'function' && navigator.userAgent.match(/Edge/)) {
|
|
||||||
this.getDialogElement().style.width = `${this.get('width')}px`
|
|
||||||
}
|
|
||||||
this.getDialogElement().style.background = this.get('background') || '#000'
|
this.getDialogElement().style.background = this.get('background') || '#000'
|
||||||
this.observe('shown', shown => {
|
this.observe('shown', shown => {
|
||||||
if (shown) {
|
if (shown) {
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
>
|
>
|
||||||
{{#if playing}}
|
{{#if playing}}
|
||||||
<video
|
<video
|
||||||
|
style="background: url({{staticSrc}});"
|
||||||
class="{{class}}"
|
class="{{class}}"
|
||||||
aria-label="{{label}}"
|
aria-label="{{label}}"
|
||||||
poster="{{poster}}"
|
poster="{{poster}}"
|
||||||
|
|
|
@ -22,7 +22,9 @@
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="show-image-button"
|
class="show-image-button"
|
||||||
aria-label="Show image: {{media.description || ''}}"
|
aria-label="Show image: {{media.description || ''}}"
|
||||||
on:click="onClickShowImageButton(media, getOriginalWidth(media), getOriginalHeight(media))">
|
on:click="onClickShowImageButton(media, getOriginalWidth(media), getOriginalHeight(media))"
|
||||||
|
on:mouseover="set({mouseover: event})"
|
||||||
|
>
|
||||||
{{#if media.type === 'gifv' && $autoplayGifs}}
|
{{#if media.type === 'gifv' && $autoplayGifs}}
|
||||||
<video
|
<video
|
||||||
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
|
class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
|
||||||
|
@ -45,6 +47,7 @@
|
||||||
staticSrc="{{media.preview_url}}"
|
staticSrc="{{media.preview_url}}"
|
||||||
width="{{getSmallWidth(media)}}"
|
width="{{getSmallWidth(media)}}"
|
||||||
height="{{getSmallHeight(media)}}"
|
height="{{getSmallHeight(media)}}"
|
||||||
|
playing="{{mouseover}}"
|
||||||
/>
|
/>
|
||||||
{{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' : ''}}"
|
||||||
|
@ -136,6 +139,7 @@
|
||||||
import { imgLoad, imgLoadError } from '../../_utils/events'
|
import { imgLoad, imgLoadError } from '../../_utils/events'
|
||||||
import { showVideoDialog } from '../../_utils/showVideoDialog'
|
import { showVideoDialog } from '../../_utils/showVideoDialog'
|
||||||
import { showImageDialog } from '../../_utils/showImageDialog'
|
import { showImageDialog } from '../../_utils/showImageDialog'
|
||||||
|
import { mouseover } from '../../_utils/events'
|
||||||
import NonAutoplayGifv from '../NonAutoplayGifv.html'
|
import NonAutoplayGifv from '../NonAutoplayGifv.html'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -159,7 +163,8 @@
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
imgLoad,
|
imgLoad,
|
||||||
imgLoadError
|
imgLoadError,
|
||||||
|
mouseover
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
NonAutoplayGifv
|
NonAutoplayGifv
|
||||||
|
|
Loading…
Reference in New Issue