If there is only one media item on a tweet, ditch the aspect limitation

build/lib/tweetparse.js

@@ -16,6 +16,7 @@ const schema = {
   entities: { media: [ {
     type: true,
     media_url_https: true,
+    dimensions: true,
     video_info: { variants: [ {
       url: true,
       content_type: true,
@@ -50,31 +51,35 @@ var entityProcessors = {
   },
 
   media (media, tweet) {
-    media.forEach((mediaObj) => {
-      tweet.html = tweet.html.replace(mediaObj.url, '');
+    media.forEach((m) => {
+      tweet.html = tweet.html.replace(m.url, '');
+      let width, height;
+
+      if (has(m, 'video_info.aspect_ratio')) {
+        [ width, height ] = m.video_info.aspect_ratio;
+      } else if (has(m, 'sizes.medium')) {
+        ({ width, height } = m.sizes.medium);
+      }
+
+      if (width && height) {
+        const ratioH = Math.round((height / width) * 100);
+        const ratioW = Math.round((width / height) * 100);
+        let orientation = 'wide';
+        if (ratioH > 100) {
+          orientation = 'tall';
+        } else if (ratioH === 100) {
+          orientation = 'square';
+        }
+
+        m.dimensions = {
+          width,
+          height,
+          ratioH,
+          ratioW,
+          orientation,
+        };
+      }
       return;
-
-      // if (mediaObj.type === 'photo') {
-      //   // Use HTTPS if available
-      //   var src = mediaObj.media_url_https ? mediaObj.media_url_https : mediaObj.media_url;
-
-      //   if (options &&
-      //     options.photoSize &&
-      //     mediaObj.sizes &&
-      //     mediaObj.sizes[options.photoSize]) {
-      //     // If specified size is available, patch image src to use it
-      //     src = src + ':' + options.photoSize;
-      //   }
-
-      //   tweet.html = tweet.html.replace(mediaObj.url, `<img src="${src}" alt=""/>`);
-      // } else if (mediaObj.type === 'video') {
-      //   var source = '';
-      //   mediaObj.video_info.variants.forEach((info) => {
-      //     source += `<source src="${info.url}" type="${info.content_type}">`;
-      //   });
-      //   var video = `<video controls poster="${mediaObj.media_url}">${source}</video>`;
-      //   tweet.html = tweet.html.replace(mediaObj.url, video);
-      // }
     });
   },
 };

scss/_tweet.scss

@@ -189,29 +189,44 @@
       grid-template: 1fr 1fr / 1fr 1fr;
       height: 100%;
 
-      &.count1 .tweet-entity {
-        grid-row-end: span 2;
-        grid-column-end: span 2;
-      }
-
-      &.count2 .tweet-entity {
-        grid-row-end: span 2;
-      }
-
-      &.count3 .tweet-entity:first-child {
-        grid-row-end: span 2;
-      }
-
       .tweet-entity {
         display: flex;
         align-items: stretch;
         justify-content: stretch;
+        img {
+          visibility: hidden;
+          max-width: 100%;
+        }
       }
 
       .tweet-entity > * {
         flex: 1;
       }
     }
+
+    &.entity-count-1 {
+      .tweet-entities-inner {
+        padding-bottom: 0;
+        > div {position: relative;}
+      }
+
+      .tweet-entities-grid {
+        display: block;
+      }
+    }
+
+    &.entity-count-1 .tweet-entity {
+      grid-row-end: span 2;
+      grid-column-end: span 2;
+    }
+
+    &.entity-count-2 .tweet-entity {
+      grid-row-end: span 2;
+    }
+
+    &.entity-count-3 .tweet-entity:first-child {
+      grid-row-end: span 2;
+    }
   }
 
   .tweet-photo {

templates/tweet.hbs

@@ -32,19 +32,27 @@
     {{/with}}{{/if}}
     <div class="tweet-text">{{{html}}}</div>
     {{#any extended_entities.media entities.media}}
-    <div class="tweet-entities lightbox"><div class="tweet-entities-inner"><div><div class="tweet-entities-grid count{{this.length}}">
+    <div class="tweet-entities lightbox entity-count-{{this.length}} entity-type-{{this.0.type}}"><div class="tweet-entities-inner"><div><div class="tweet-entities-grid">
       {{#each this}}
       <div class="tweet-entity">
-        {{#is type 'photo'}}<a class="tweet-photo lb" style="background-image: url({{media_url_https}}?name=medium);" href="{{media_url_https}}"></a>{{/is}}
-        {{#is type 'video'}}
-          <video controls poster="{{media_url}}" class="tweet-video">
-            {{#each video_info.variants}}
-            <source src="{{url}}" type="{{content_type}}">
-            {{/each}}
-          </video>
+        {{#is type 'photo'}}
+        <a class="tweet-photo lb" style="background-image: url({{media_url_https}}?name=medium);" href="{{media_url_https}}">
+          <img src="{{media_url_https}}?name=medium">
+        </a>
         {{/is}}
-        {{#is type animated_gif}}
-
+        {{#is type 'video'}}
+        <video controls poster="{{media_url_https}}" class="tweet-video">
+          {{#each video_info.variants}}
+          <source src="{{url}}" type="{{content_type}}">
+          {{/each}}
+        </video>
+        {{/is}}
+        {{#is type 'animated_gif'}}
+        <video controls muted loop poster="{{media_url_https}}" class="tweet-video">
+          {{#each video_info.variants}}
+          <source src="{{url}}" type="{{content_type}}">
+          {{/each}}
+        </video>
         {{/is}}
       </div>
       {{/each}}