fix: improve style of "large inline" media (#1428)

src/routes/_components/NonAutoplayGifv.html

@@ -1,5 +1,5 @@
 <div class="non-autoplay-gifv  {$largeInlineMedia ? '' : 'non-autoplay-gifv-fixed-size'}"
-     style="width: {width}px; height: {height}px;"
+     {style}
      on:mouseover="onMouseOver(event)"
      ref:node
 >
@@ -70,6 +70,11 @@
       oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
       focus: undefined
     }),
+    computed: {
+      style: ({ useWidthHeight, width, height }) => (
+        useWidthHeight ? `width: ${width}px; height: ${height}px;` : ''
+      )
+    },
     components: {
       PlayVideoIcon,
       LazyImage,

src/routes/_components/status/Media.html

@@ -3,7 +3,7 @@
             type="button"
             class="inline-media play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
             aria-label="Play video: {description}"
-            style="width: {inlineWidth}px; height: {inlineHeight}px;">
+            style={inlineMediaStyle}>
       <PlayVideoIcon />
       {#if type === 'video'}
         <LazyImage
@@ -26,7 +26,7 @@
           aria-label="Show image: {description}"
           title={description}
           on:mouseover="set({mouseover: event})"
-          style="width: {inlineWidth}px; height: {inlineHeight}px;">
+          style={inlineMediaStyle}>
   {#if type === 'gifv' && $autoplayGifs && !blurhash}
     <AutoplayVideo
       ariaLabel="Animated GIF: {description}"
@@ -44,6 +44,7 @@
       {blurhash}
       src={url}
       staticSrc={previewUrl}
+      useWidthHeight={!blurhash}
       width={inlineWidth}
       height={inlineHeight}
       playing={mouseover}
@@ -141,7 +142,14 @@ export default {
       },
       blurhash: ({ blurhashToUse, showAsSensitive }) => showAsSensitive && blurhashToUse,
       url: ({ media }) => media.url,
-      type: ({ media }) => media.type
+      type: ({ media }) => media.type,
+      inlineMediaStyle: ({ type, inlineWidth, inlineHeight, blurhash, $largeInlineMedia }) => {
+        if ((type === 'audio') || (blurhash && $largeInlineMedia)) {
+          return ''
+        } else {
+          return `width: ${inlineWidth}px; height: ${inlineHeight}px;`
+        }
+      }
     },
     methods: {
       onClick () {

src/routes/_components/status/MediaAttachments.html

@@ -38,6 +38,17 @@
       background-color: blue;
   }
 
+  .status-media.not-grouped-images > :global(.inline-media) {
+    width: 100%;
+    min-height: 250px;
+  }
+
+  .status-media.not-grouped-images :global(.inline-media img),
+  .status-media.not-grouped-images :global(.inline-media .lazy-image) {
+    width: 100%;
+    height: 100%;
+  }
+
   .status-media.status-media-is-sensitive {
     height: inherit;
     margin: 0;
@@ -54,7 +65,7 @@
         sensitive && 'status-media-is-sensitive',
         oddCols && 'odd-cols',
         twoCols && 'two-cols',
-        !$largeInlineMedia && 'grouped-images'
+        $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
       ),
       showAsSensitive: ({ sensitive, sensitiveShown }) => {
         return sensitive ? !sensitiveShown : false

src/routes/_components/status/StatusMediaAttachments.html

@@ -95,7 +95,7 @@
     margin: 10px auto;
   }
   .status-sensitive-media-container.status-sensitive-media-hidden.not-grouped-images {
-      height: 200px;
+      height: 250px;
   }
 
   .status-sensitive-media-container .status-sensitive-media-warning {

src/routes/_static/media.js

@@ -1,5 +1,5 @@
 export const DEFAULT_MEDIA_WIDTH = 300
-export const DEFAULT_MEDIA_HEIGHT = 200
+export const DEFAULT_MEDIA_HEIGHT = 250
 
 export const ONE_TRANSPARENT_PIXEL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='