From b10ecff3c01ae6f015def0bcfb0c2adb4d0266bc Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 4 Feb 2018 16:34:54 -0800
Subject: [PATCH] fix Firefox autoplay gifv

---
 routes/_components/ModalDialog.html     | 4 ----
 routes/_components/NonAutoplayGifv.html | 1 +
 routes/_components/status/Media.html    | 9 +++++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/routes/_components/ModalDialog.html b/routes/_components/ModalDialog.html
index 84b9280..9e107cf 100644
--- a/routes/_components/ModalDialog.html
+++ b/routes/_components/ModalDialog.html
@@ -54,10 +54,6 @@
 
   export default {
     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.observe('shown', shown => {
         if (shown) {
diff --git a/routes/_components/NonAutoplayGifv.html b/routes/_components/NonAutoplayGifv.html
index 549ca5d..7323519 100644
--- a/routes/_components/NonAutoplayGifv.html
+++ b/routes/_components/NonAutoplayGifv.html
@@ -4,6 +4,7 @@
 >
   {{#if playing}}
     <video
+      style="background: url({{staticSrc}});"
       class="{{class}}"
       aria-label="{{label}}"
       poster="{{poster}}"
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 3e88eae..32e6d0b 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -22,7 +22,9 @@
       <button type="button"
             class="show-image-button"
             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}}
         <video
           class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
@@ -45,6 +47,7 @@
           staticSrc="{{media.preview_url}}"
           width="{{getSmallWidth(media)}}"
           height="{{getSmallHeight(media)}}"
+          playing="{{mouseover}}"
         />
       {{else}}
         <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 { showVideoDialog } from '../../_utils/showVideoDialog'
   import { showImageDialog } from '../../_utils/showImageDialog'
+  import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
 
   export default {
@@ -159,7 +163,8 @@
     },
     events: {
       imgLoad,
-      imgLoadError
+      imgLoadError,
+      mouseover
     },
     components: {
       NonAutoplayGifv