From 669be2e32b552190620a4f071b2b2d169880dd2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Fern=C3=A1ndez?= <hello@sirikon.me>
Date: Mon, 17 Dec 2018 22:13:27 +0100
Subject: [PATCH] Fix Pleroma compability issue (#829)

* Now image and video modals width and height will fallback to "auto" instead of 300x200. Allows proper image visualization in modals when there's no attachment metadata.

* Move background-image in gifv modal to the computed property videoStyle

fixes #750
---
 .../dialog/components/ImageDialog.html            | 15 ++++++++++-----
 .../dialog/components/VideoDialog.html            |  8 ++++++--
 src/routes/_components/status/Media.html          |  4 ++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/routes/_components/dialog/components/ImageDialog.html b/src/routes/_components/dialog/components/ImageDialog.html
index dfc1682..4e29e29 100644
--- a/src/routes/_components/dialog/components/ImageDialog.html
+++ b/src/routes/_components/dialog/components/ImageDialog.html
@@ -9,9 +9,7 @@
     <video
       class="image-modal-dialog-autoplay-video"
       aria-label="Animated GIF: {description || ''}"
-      style="background-image: url({poster}); "
-      {width}
-      {height}
+      style="{videoStyle}"
       {src}
       autoplay
       muted
@@ -22,8 +20,7 @@
   {:else}
     <img
       {src}
-      {width}
-      {height}
+      {style}
       alt={description || ''}
       title={description || ''}
     />
@@ -54,6 +51,14 @@
     components: {
       ModalDialog
     },
+    computed: {
+      style: ({ width, height }) => `
+        width: ${width ? width + 'px' : 'auto'};
+        height: ${height ? height + 'px' : 'auto'};`,
+      videoStyle: ({ style, poster }) => `
+        ${style}
+        background-image: url(${poster});`
+    },
     methods: {
       show
     }
diff --git a/src/routes/_components/dialog/components/VideoDialog.html b/src/routes/_components/dialog/components/VideoDialog.html
index 17b7d1b..8c67b9e 100644
--- a/src/routes/_components/dialog/components/VideoDialog.html
+++ b/src/routes/_components/dialog/components/VideoDialog.html
@@ -8,8 +8,7 @@
 >
   <video {poster}
          {src}
-         {width}
-         {height}
+         {style}
          aria-label="Video: {description || ''}"
          controls
          ref:video
@@ -33,6 +32,11 @@
     components: {
       ModalDialog
     },
+    computed: {
+      style: ({ width, height }) => `
+        width: ${width ? width + 'px' : 'auto'};
+        height: ${height ? height + 'px' : 'auto'};`
+    },
     methods: {
       show,
       onClose () {
diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html
index 3f82b2c..206033b 100644
--- a/src/routes/_components/status/Media.html
+++ b/src/routes/_components/status/Media.html
@@ -116,8 +116,8 @@
         return smallHeight || DEFAULT_MEDIA_HEIGHT
       },
       // width/height to show in a modal
-      modalWidth: ({ originalWidth, inlineWidth }) => originalWidth || inlineWidth,
-      modalHeight: ({ originalHeight, inlineHeight }) => originalHeight || inlineHeight,
+      modalWidth: ({ originalWidth, smallWidth }) => originalWidth || smallWidth || 0,
+      modalHeight: ({ originalHeight, smallHeight }) => originalHeight || smallHeight || 0,
       meta: ({ media }) => media.meta,
       small: ({ meta }) => meta && meta.small,
       original: ({ meta }) => meta && meta.original,