fix offline display of images in timeline

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>

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,

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='