From bfe310fcca671340d228185705be7fc4f236d153 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 17 Jan 2018 17:02:43 -0800
Subject: [PATCH] first stab at rendering media

---
 routes/_components/Status.html | 38 +++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index bb5b4bdd..305e24dd 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -12,17 +12,17 @@
       </div>
     {{/if}}
   <div class="status-author">
-    <a class="status-author-name" href="/accounts/{{original.id}}">
-      {{original.display_name || original.username}}
+    <a class="status-author-name" href="/accounts/{{originalAccount.id}}">
+      {{originalAccount.display_name || originalAccount.username}}
     </a>
     <span class="status-author-handle">
-      @{{original.acct}}
+      @{{originalAccount.acct}}
     </span>
-    <a class="status-author-date" rel="noopener" target="_blank" href="{{original.url}}">
+    <a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}">
       {{relativeDate}}
     </a>
   </div>
-  <Avatar account={{original}} className="status-sidebar"/>
+  <Avatar account={{originalAccount}} className="status-sidebar"/>
   <div class="status-content">{{{status.content}}}</div>
   <div class="status-toolbar">
     <button aria-label="Reply" aria-pressed="false" type="button">
@@ -46,6 +46,13 @@
       </svg>
     </button>
   </div>
+  <div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
+    {{#each originalMedia as media}}
+      <div class="status-media-container">
+        <img src="{{media.preview_url}}" alt="{{media.description || ''}}"/>
+      </div>
+    {{/each}}
+  </div>
 </article>
 
 <style>
@@ -58,7 +65,8 @@
         ".............. status-boosted"
         "status-sidebar status-author"
         "status-sidebar status-content"
-        ".............. status-toolbar";
+        ".............. status-toolbar"
+        ".............. status-media";
     grid-template-columns: 58px 1fr;
     border-bottom: 1px solid var(--main-border);
     /* will-change: transform; */ /* TODO: is this necessary? */
@@ -179,6 +187,20 @@
   .status-toolbar button:active svg {
     fill: var(--action-button-fill-color-active);
   }
+
+  .status-media {
+    grid-area: status-media;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+  }
+
+  .status-media-container {
+  }
+  .status-media-container img {
+    object-fit: cover;
+  }
 </style>
 <script>
   import Avatar from './Avatar.html'
@@ -198,7 +220,9 @@
         stop('compute relativeDate')
         return res
       },
-      original: (status) => status.reblog ? status.reblog.account : status.account
+      originalAccount: (status) => status.reblog ? status.reblog.account : status.account,
+      originalMedia: (status) => status.reblog ? status.reblog.media_attachments : status.media_attachments,
+      minMediaWidth: (originalMedia) => Math.min.apply(Math, originalMedia.map(_ => _.meta.small.width))
     }
   }
 </script>
\ No newline at end of file