From 8b21505089289b323eea6a3774ce9a452bd2f7e6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 9 Mar 2018 23:30:17 -0800
Subject: [PATCH] fix offline display of images in timeline

---
 routes/_components/NonAutoplayGifv.html | 18 ++++++++++++++----
 routes/_components/status/Media.html    | 14 ++++++++++----
 routes/_static/media.js                 |  3 +++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/routes/_components/NonAutoplayGifv.html b/routes/_components/NonAutoplayGifv.html
index 73235191..666b7352 100644
--- a/routes/_components/NonAutoplayGifv.html
+++ b/routes/_components/NonAutoplayGifv.html
@@ -17,11 +17,13 @@
       playsinline
       />
   {{else}}
-    <img class="{{class}}"
+    <img class="{{class}} {{imageError ? 'image-error' : ''}}"
          alt="{{label}}"
-         src="{{staticSrc}}"
+         src="{{imageError ? oneTransparentPixel : staticSrc}}"
          width="{{width}}"
          height="{{height}}"
+         on:imgLoad="set({imageLoaded: true})"
+         on:imgLoadError="set({imageError: true})"
          />
   {{/if}}
 </div>
@@ -32,6 +34,9 @@
 </style>
 <script>
   import { mouseover } from '../_utils/events'
+  import { imgLoad, imgLoadError } from '../_utils/events'
+  import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
+
   export default {
     methods: {
       onMouseOver(mouseOver) {
@@ -39,7 +44,12 @@
       }
     },
     events: {
-      mouseover
-    }
+      mouseover,
+      imgLoad,
+      imgLoadError
+    },
+    data: () => ({
+      oneTransparentPixel: ONE_TRANSPARENT_PIXEL
+    })
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 178bb8ff..1c5036f6 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -2,17 +2,21 @@
   <button type="button"
           class="play-video-button"
           aria-label="Play video: {{media.description || ''}}"
-          on:click="onClickPlayVideoButton()">
+          on:click="onClickPlayVideoButton()"
+          style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
+  >
     <div class="svg-wrapper">
       <svg>
         <use xlink:href="#fa-play-circle" />
       </svg>
     </div>
     <img alt="{{media.description || ''}}"
-         src="{{media.preview_url}}"
+         src="{{imageError ? oneTransparentPixel : media.preview_url}}"
          width="{{inlineWidth}}"
          height="{{inlineHeight}}"
-         class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+         class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}} {{imageError ? 'image-error' : ''}}"
+         on:imgLoad="set({imageLoaded: true})"
+         on:imgLoadError="set({imageError: true})"
     />
   </button>
 {{else}}
@@ -21,6 +25,7 @@
           aria-label="Show image: {{media.description || ''}}"
           on:click="onClickShowImageButton()"
           on:mouseover="set({mouseover: event})"
+          style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
   {{#if media.type === 'gifv' && $autoplayGifs}}
     <video
@@ -119,6 +124,7 @@
   import { importDialogs } from '../../_utils/asyncModules'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
+  import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
 
   export default {
     computed: {
@@ -154,7 +160,7 @@
       }
     },
     data: () => ({
-      oneTransparentPixel: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+      oneTransparentPixel: ONE_TRANSPARENT_PIXEL
     }),
     events: {
       imgLoad,
diff --git a/routes/_static/media.js b/routes/_static/media.js
index f5b3d1fd..3d9d762e 100644
--- a/routes/_static/media.js
+++ b/routes/_static/media.js
@@ -1,2 +1,5 @@
 export const DEFAULT_MEDIA_WIDTH = 300
 export const DEFAULT_MEDIA_HEIGHT = 200
+
+export const ONE_TRANSPARENT_PIXEL =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
\ No newline at end of file