diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js --- a/web/media/encrypted-multimedia.react.js +++ b/web/media/encrypted-multimedia.react.js @@ -12,6 +12,7 @@ import LoadableVideo from './loadable-video.react.js'; import css from './media.css'; import LoadingIndicator from '../loading-indicator.react.js'; +import type { CSSStyle } from '../types/styles'; type Props = { +blobURI: string, @@ -21,7 +22,7 @@ +thumbnailEncryptionKey?: ?string, +placeholderSrc?: ?string, +multimediaClassName?: string, - +elementStyle?: ?Shape, + +elementStyle?: ?Shape, }; function EncryptedMultimedia(props: Props): React.Node { diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js --- a/web/media/loadable-video.react.js +++ b/web/media/loadable-video.react.js @@ -7,6 +7,7 @@ import { decryptMedia } from './encryption-utils.js'; import { preloadImage } from './media-utils.js'; +import type { CSSStyle } from '../types/styles'; type ThumbnailSource = | { @@ -20,7 +21,7 @@ +uri: ?string, +thumbnailSource: ThumbnailSource, +thumbHashDataURL?: ?string, - +elementStyle?: ?Shape, + +elementStyle?: ?Shape, +multimediaClassName?: string, }; diff --git a/web/media/media.css b/web/media/media.css --- a/web/media/media.css +++ b/web/media/media.css @@ -21,6 +21,10 @@ max-height: 200px; max-width: 100%; } +/* Prevent borders around images without src attribute */ +span.multimedia > .multimediaImage > img:not([src]) { + visibility: hidden; +} span.multimedia > .multimediaImage svg.removeUpload { display: none; position: absolute; diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js --- a/web/media/multimedia.react.js +++ b/web/media/multimedia.react.js @@ -158,8 +158,7 @@ ? `center / cover url(${placeholderImage})` : undefined, width: `${calculatedWidth}px`, - // height is limited by the max-height style in media.css - height: `${height}px`, + aspectRatio: `${width} / ${height}`, }; }, [dimensions, placeholderImage]); diff --git a/web/types/styles.js b/web/types/styles.js new file mode 100644 --- /dev/null +++ b/web/types/styles.js @@ -0,0 +1,6 @@ +// @flow + +export type CSSStyle = { + ...CSSStyleDeclaration, + +aspectRatio?: string, +};