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

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
     }

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 () {

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,