From 3db6579300983a69240b32c32da4d3de1ab6a0f0 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 4 Feb 2018 19:56:06 -0800
Subject: [PATCH] big refactor of media attachments

---
 routes/_components/status/Media.html          | 193 +++++++++---------
 .../_components/status/MediaAttachments.html  |  49 +++++
 .../status/StatusMediaAttachments.html        |   8 +-
 routes/_static/media.js                       |   2 +
 4 files changed, 147 insertions(+), 105 deletions(-)
 create mode 100644 routes/_components/status/MediaAttachments.html
 create mode 100644 routes/_static/media.js

diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 32e6d0b6..4d50ff53 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -1,96 +1,73 @@
-<div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}"
-     style="grid-template-columns: repeat(auto-fit, minmax({{maxMediaWidth}}px, 1fr));" >
-  {{#each mediaAttachments as media}}
-    {{#if media.type === 'video'}}
-      <button type="button"
-              class="play-video-button"
-              aria-label="Play video: {{media.description || ''}}"
-              on:click="onClickPlayVideoButton(media, getOriginalWidth(media), getOriginalHeight(media))">
-        <div class="svg-wrapper">
-          <svg>
-            <use xlink:href="#fa-play-circle" />
-          </svg>
-        </div>
-        <img alt="{{media.description || ''}}"
-             src="{{media.preview_url}}"
-             width="{{getSmallWidth(media)}}"
-             height="{{getSmallHeight(media)}}"
-             class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
-        />
-      </button>
-    {{else}}
-      <button type="button"
-            class="show-image-button"
-            aria-label="Show image: {{media.description || ''}}"
-            on:click="onClickShowImageButton(media, getOriginalWidth(media), getOriginalHeight(media))"
-            on:mouseover="set({mouseover: event})"
-      >
-      {{#if media.type === 'gifv' && $autoplayGifs}}
-        <video
-          class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
-          aria-label="Animated GIF: {{media.description || ''}}"
-          poster="{{media.preview_url}}"
-          src="{{media.url}}"
-          width="{{getSmallWidth(media)}}"
-          height="{{getSmallHeight(media)}}"
-          autoplay
-          muted
-          loop
-          playsinline
-        />
-      {{elseif media.type === 'gifv' && !$autoplayGifs}}
-        <NonAutoplayGifv
-          class="{{hasNoNativeWidthHeight(media) ? 'no-native-width-height' : ''}}"
-          label="Animated GIF: {{media.description || ''}}"
-          poster="{{media.preview_url}}"
-          src="{{media.url}}"
-          staticSrc="{{media.preview_url}}"
-          width="{{getSmallWidth(media)}}"
-          height="{{getSmallHeight(media)}}"
-          playing="{{mouseover}}"
-        />
-      {{else}}
-        <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 || ''}}"
-             src="{{media.preview_url}}"
-             width="{{getSmallWidth(media)}}"
-             height="{{getSmallHeight(media)}}"/>
-      {{/if}}
-    </button>
-    {{/if}}
-  {{/each}}
-</div>
+{{#if media.type === 'video'}}
+  <button type="button"
+          class="play-video-button"
+          aria-label="Play video: {{media.description || ''}}"
+          on:click="onClickPlayVideoButton()">
+    <div class="svg-wrapper">
+      <svg>
+        <use xlink:href="#fa-play-circle" />
+      </svg>
+    </div>
+    <img alt="{{media.description || ''}}"
+         src="{{media.preview_url}}"
+         width="{{inlineWidth}}"
+         height="{{inlineHeight}}"
+         class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+    />
+  </button>
+{{else}}
+  <button type="button"
+          class="show-image-button"
+          aria-label="Show image: {{media.description || ''}}"
+          on:click="onClickShowImageButton()"
+          on:mouseover="set({mouseover: event})"
+  >
+  {{#if media.type === 'gifv' && $autoplayGifs}}
+    <video
+      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      aria-label="Animated GIF: {{media.description || ''}}"
+      poster="{{media.preview_url}}"
+      src="{{media.url}}"
+      width="{{inlineWidth}}"
+      height="{{inlineHeight}}"
+      autoplay
+      muted
+      loop
+      playsinline
+    />
+  {{elseif media.type === 'gifv' && !$autoplayGifs}}
+    <NonAutoplayGifv
+      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      label="Animated GIF: {{media.description || ''}}"
+      poster="{{media.preview_url}}"
+      src="{{media.url}}"
+      staticSrc="{{media.preview_url}}"
+      width="{{inlineWidth}}"
+      height="{{inlineHeight}}"
+      playing="{{mouseover}}"
+    />
+  {{else}}
+    <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}} {{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+         on:imgLoad="set({imageLoaded: true})"
+         on:imgLoadError="set({imageError: true})"
+         alt="{{media.description || ''}}"
+         src="{{media.preview_url}}"
+         width="{{inlineWidth}}"
+         height="{{inlineHeight}}"
+    />
+  {{/if}}
+</button>
+{{/if}}
 <style>
-  .status-media {
-    grid-area: status-media;
-    display: grid;
-    align-items: center;
-    justify-content: center;
-    justify-items: center;
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    margin: 10px 0;
+  :global(.status-media img.image-loading, .status-media img.image-error) {
+    background: var(--loading-bg);
   }
-  .status-media.status-media-is-sensitive {
-    margin: 0;
+  :global(.status-media video, .status-media img) {
+    object-fit: cover;
   }
   .no-native-width-height {
     background-color: var(--mask-bg);
   }
-  .status-media img.image-loading, .status-media img.image-error {
-    background: var(--loading-bg);
-  }
-  .status-media {
-    overflow: hidden;
-  }
-  .status-media video, .status-media img {
-    object-fit: cover;
-  }
-  .status-media, .status-media video, .status-media img {
-    max-width: calc(100vw - 40px);
-  }
   .play-video-button {
     margin: 0;
     padding: 0;
@@ -126,16 +103,18 @@
     background: none;
     cursor: zoom-in;
   }
+
+  :global(.status-media video, .status-media img) {
+    max-width: calc(100vw - 40px);
+  }
   @media (max-width: 767px) {
-    .status-media, .status-media video, .status-media img {
+    :global(.status-media video, .status-media img) {
       max-width: calc(100vw - 20px);
     }
   }
 </style>
 <script>
-  const DEFAULT_MEDIA_WIDTH = 300
-  const DEFAULT_MEDIA_HEIGHT = 200
-
+  import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
   import { imgLoad, imgLoadError } from '../../_utils/events'
   import { showVideoDialog } from '../../_utils/showVideoDialog'
   import { showImageDialog } from '../../_utils/showImageDialog'
@@ -143,21 +122,33 @@
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
 
   export default {
-    helpers: {
-      getSmallWidth: media => media.meta && media.meta.small && typeof media.meta.small.width === 'number' ?  media.meta.small.width : DEFAULT_MEDIA_WIDTH,
-      getSmallHeight: media => media.meta && media.meta.small && typeof media.meta.small.height === 'number' ?  media.meta.small.height : DEFAULT_MEDIA_HEIGHT,
-      getOriginalWidth: media => media.meta && media.meta.original && typeof media.meta.original.width === 'number' ?  media.meta.original.width : DEFAULT_MEDIA_WIDTH,
-      getOriginalHeight: media => media.meta && media.meta.original && typeof media.meta.original.height === 'number' ?  media.meta.original.height : DEFAULT_MEDIA_HEIGHT,
-      hasNoNativeWidthHeight: media => !(media && media.meta && media.meta.small && typeof media.meta.small.width === 'number' && typeof media.meta.small.height === 'number'),
-    },
     computed: {
-      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))
+      // width/height to show inline
+      inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
+      inlineHeight: smallHeight => smallHeight || DEFAULT_MEDIA_HEIGHT,
+      // width/height to show in a modal
+      modalWidth: (originalWidth, inlineWidth) => originalWidth || inlineWidth,
+      modalHeight: (originalHeight, inlineHeight) => originalHeight || inlineHeight,
+      meta: media => media.meta,
+      small: meta => meta && meta.small,
+      original: meta => meta && meta.original,
+      smallWidth: small => small && small.width,
+      smallHeight: small => small && small.height,
+      originalWidth: original => original && original.width,
+      originalHeight: original => original && original.height,
+      noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number'
     },
     methods: {
-      onClickPlayVideoButton(media, width, height) {
+      onClickPlayVideoButton() {
+        let media = this.get('media')
+        let width = this.get('modalWidth')
+        let height = this.get('modalHeight')
         showVideoDialog(media.preview_url, media.url, width, height, media.description)
       },
-      onClickShowImageButton(media, width, height) {
+      onClickShowImageButton() {
+        let media = this.get('media')
+        let width = this.get('modalWidth')
+        let height = this.get('modalHeight')
         showImageDialog(media.preview_url, media.url, media.type, width, height, media.description)
       }
     },
diff --git a/routes/_components/status/MediaAttachments.html b/routes/_components/status/MediaAttachments.html
new file mode 100644
index 00000000..91979ac9
--- /dev/null
+++ b/routes/_components/status/MediaAttachments.html
@@ -0,0 +1,49 @@
+<div class="status-media {{sensitive ? 'status-media-is-sensitive' : ''}}"
+     style="grid-template-columns: repeat(auto-fit, minmax({{maxMediaWidth}}px, 1fr));" >
+  {{#each mediaAttachments as media}}
+    <Media :media />
+  {{/each}}
+</div>
+<style>
+  .status-media {
+    grid-area: status-media;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    margin: 10px 0;
+  }
+  .status-media.status-media-is-sensitive {
+    margin: 0;
+  }
+  .status-media {
+    overflow: hidden;
+  }
+  .status-media {
+    max-width: calc(100vw - 40px);
+  }
+  @media (max-width: 767px) {
+    .status-media {
+      max-width: calc(100vw - 20px);
+    }
+  }
+</style>
+<script>
+  import Media from './Media.html'
+  import { DEFAULT_MEDIA_WIDTH } from '../../_static/media'
+
+  export default {
+    computed: {
+      maxMediaWidth: (mediaAttachments) => {
+        return Math.max.apply(Math, mediaAttachments.map(media => {
+          return media.meta && media.meta.small && typeof media.meta.small.width === 'number' ?  media.meta.small.width : DEFAULT_MEDIA_WIDTH
+        }))
+      }
+    },
+    components: {
+      Media
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusMediaAttachments.html b/routes/_components/status/StatusMediaAttachments.html
index dd0e2073..eff8d34c 100644
--- a/routes/_components/status/StatusMediaAttachments.html
+++ b/routes/_components/status/StatusMediaAttachments.html
@@ -12,7 +12,7 @@
       </svg>
     </div>
   </button>
-  <Media mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
+  <MediaAttachments mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
   {{else}}
     <button type="button"
             class="status-sensitive-media-button"
@@ -31,7 +31,7 @@
   {{/if}}
 </div>
 {{else}}
-<Media mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
+  <MediaAttachments mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
 {{/if}}
 <style>
   .status-sensitive-media-container {
@@ -124,12 +124,12 @@
   }
 </style>
 <script>
-  import Media from './Media.html'
+  import MediaAttachments from './MediaAttachments.html'
   import { store } from '../../_store/store'
 
   export default {
     components: {
-      Media
+      MediaAttachments
     },
     store: () => store,
     computed: {
diff --git a/routes/_static/media.js b/routes/_static/media.js
new file mode 100644
index 00000000..6497c559
--- /dev/null
+++ b/routes/_static/media.js
@@ -0,0 +1,2 @@
+export const DEFAULT_MEDIA_WIDTH = 300
+export const DEFAULT_MEDIA_HEIGHT = 200
\ No newline at end of file