From 21a300bd4c119c8e6e4adb8df64d34a024d28bb4 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 24 Dec 2019 10:47:27 -0800
Subject: [PATCH] fix: remove intrinsicsize in favor of width/height (#1690)

---
 .../components/MediaFocalPointEditor.html     | 15 ++++++-------
 .../dialog/components/MediaInDialog.html      | 21 +++++++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/routes/_components/dialog/components/MediaFocalPointEditor.html b/src/routes/_components/dialog/components/MediaFocalPointEditor.html
index 43ec6d2f..e5e7f017 100644
--- a/src/routes/_components/dialog/components/MediaFocalPointEditor.html
+++ b/src/routes/_components/dialog/components/MediaFocalPointEditor.html
@@ -4,7 +4,8 @@
 >
   <div class="media-focal-point-image-container" ref:container>
     <img
-      {intrinsicsize}
+      width={intrinsicWidth}
+      height={intrinsicHeight}
       class="media-focal-point-image"
       src={previewSrc}
       alt={shortName}
@@ -229,14 +230,10 @@
         // so fall back to the description if it was provided
         get(mediaItem, ['file', 'name']) || get(mediaItem, ['description']) || 'media'
       ),
-      intrinsicsize: ({ mediaItem }) => {
-        const width = get(mediaItem, ['data', 'meta', 'original', 'width'])
-        const height = get(mediaItem, ['data', 'meta', 'original', 'height'])
-        if (width && height) {
-          return `${width} x ${height}`
-        }
-        return '' // pleroma does not give us original width/height
-      },
+      // intrinsic width/height to avoid layout shifting https://chromestatus.com/feature/5695266130755584
+      // note pleroma does not give us intrinsic width/height
+      intrinsicWidth: ({ mediaItem }) => get(mediaItem, ['data', 'meta', 'original', 'width']),
+      intrinsicHeight: ({ mediaItem }) => get(mediaItem, ['data', 'meta', 'original', 'height']),
       scale: ({ nativeWidth, nativeHeight, containerWidth, containerHeight }) => (
         intrinsicScale(containerWidth, containerHeight, nativeWidth, nativeHeight)
       ),
diff --git a/src/routes/_components/dialog/components/MediaInDialog.html b/src/routes/_components/dialog/components/MediaInDialog.html
index 52036eee..e547de83 100644
--- a/src/routes/_components/dialog/components/MediaInDialog.html
+++ b/src/routes/_components/dialog/components/MediaInDialog.html
@@ -5,7 +5,8 @@
     src={url}
     {poster}
     controls
-    {intrinsicsize}
+    width={intrinsicWidth}
+    height={intrinsicHeight}
     ref:player
   />
 {:elseif type === 'audio'}
@@ -29,7 +30,8 @@
     loop
     webkit-playsinline
     playsinline
-    {intrinsicsize}
+    width={intrinsicWidth}
+    height={intrinsicHeight}
   />
 {:else}
   <img
@@ -37,7 +39,8 @@
     alt={description}
     title={description}
     src={url}
-    {intrinsicsize}
+    width={intrinsicWidth}
+    height={intrinsicHeight}
   />
 {/if}
 <style>
@@ -78,14 +81,10 @@
       description: ({ media }) => media.description || '',
       poster: ({ media }) => media.preview_url,
       static_url: ({ media }) => media.static_url,
-      intrinsicsize: ({ media }) => {
-        const width = get(media, ['meta', 'original', 'width'])
-        const height = get(media, ['meta', 'original', 'height'])
-        if (width && height) {
-          return `${width} x ${height}`
-        }
-        return '' // pleroma does not give us original width/height
-      }
+      // intrinsic width/height to avoid layout shifting https://chromestatus.com/feature/5695266130755584
+      // note pleroma does not give us intrinsic width/height
+      intrinsicWidth: ({ media }) => get(media, ['meta', 'original', 'width']),
+      intrinsicHeight: ({ media }) => get(media, ['meta', 'original', 'height'])
     },
     ondestroy () {
       const player = this.refs.player