From 0b6bb6354b346b6068ba511f9dc1400b8c55e1db Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 1 Feb 2018 18:29:29 -0800
Subject: [PATCH] tweak and simplify media appearance

---
 routes/_components/status/Media.html | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index b2457bdc..605f8c22 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -1,7 +1,6 @@
 <div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}"
-     style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));" >
+     style="grid-template-columns: repeat(auto-fit, minmax({{maxMediaWidth}}px, 1fr));" >
   {{#each mediaAttachments as media}}
-  <div class="status-media-container {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}">
     {{#if media.type === 'video'}}
     <button type="button"
             class="play-video-button"
@@ -15,10 +14,13 @@
       <img alt="{{media.description || ''}}"
            src="{{media.preview_url}}"
            width="{{getSmallWidth(media)}}"
-           height="{{getSmallHeight(media)}}" />
+           height="{{getSmallHeight(media)}}"
+           class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
+      />
     </button>
     {{elseif media.type === 'gifv'}}
     <video
+           class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
            aria-label="Animated GIF: {{media.description || ''}}"
            poster="{{media.preview_url}}"
            src="{{media.url}}"
@@ -30,7 +32,7 @@
            playsinline
     />
     {{else}}
-      <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}}"
+      <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
            on:imgLoad="set({imageLoaded: true})"
            on:imgLoadError="set({imageError: true})"
            alt="{{media.description || ''}}"
@@ -38,7 +40,6 @@
            width="{{getSmallWidth(media)}}"
            height="{{getSmallHeight(media)}}"/>
     {{/if}}
-  </div>
   {{/each}}
 </div>
 <style>
@@ -52,20 +53,10 @@
     grid-row-gap: 10px;
     margin: 10px 0;
   }
-
   .status-media.status-media-is-sensitive {
     margin: 0;
   }
-
-  .status-media-container {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .no-native-width-height img, .no-native-width-height video {
+  .no-native-width-height {
     background-color: var(--mask-bg);
   }
   .status-media img.image-loading, .status-media img.image-error {
@@ -74,7 +65,6 @@
   .status-media {
     overflow: hidden;
   }
-
   .status-media video, .status-media img {
     object-fit: cover;
   }
@@ -128,7 +118,7 @@
       hasNoNativeWidthHeight: media => !(media && media.meta && media.meta.small && typeof media.meta.small.width === 'number' && typeof media.meta.small.height === 'number'),
     },
     computed: {
-      minMediaWidth: (mediaAttachments) => Math.min.apply(Math, mediaAttachments.map(media => media.meta && media.meta.small && typeof media.meta.small.width === 'number' ?  media.meta.small.width : DEFAULT_MEDIA_WIDTH))
+      maxMediaWidth: (mediaAttachments) => Math.max.apply(Math, mediaAttachments.map(media => media.meta && media.meta.small && typeof media.meta.small.width === 'number' ?  media.meta.small.width : DEFAULT_MEDIA_WIDTH))
     },
     methods: {
       async onClickPlayVideoButton(media, width, height, description) {