diff --git a/src/routes/_components/NonAutoplayGifv.html b/src/routes/_components/NonAutoplayGifv.html index 69571019..f93e530c 100644 --- a/src/routes/_components/NonAutoplayGifv.html +++ b/src/routes/_components/NonAutoplayGifv.html @@ -1,5 +1,5 @@
@@ -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, diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html index 42fb39a6..f09b8e7b 100644 --- a/src/routes/_components/status/Media.html +++ b/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}> {#if type === 'video'} + style={inlineMediaStyle}> {#if type === 'gifv' && $autoplayGifs && !blurhash} 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 () { diff --git a/src/routes/_components/status/MediaAttachments.html b/src/routes/_components/status/MediaAttachments.html index 5d461fbb..277e2e37 100644 --- a/src/routes/_components/status/MediaAttachments.html +++ b/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 diff --git a/src/routes/_components/status/StatusMediaAttachments.html b/src/routes/_components/status/StatusMediaAttachments.html index 3404a111..8494902f 100644 --- a/src/routes/_components/status/StatusMediaAttachments.html +++ b/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 { diff --git a/src/routes/_static/media.js b/src/routes/_static/media.js index 802fb235..d84f5b40 100644 --- a/src/routes/_static/media.js +++ b/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='