Page MenuHomePhabricator
Files F3509300

D5759.diff
No OneTemporary
Actions

D5759.diff
View Options

diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -227,6 +227,7 @@
const multimediaPreviews = pendingUploads.map(pendingUpload => (
<Multimedia
uri={pendingUpload.uri}
+ type={pendingUpload.mediaType}
pendingUpload={pendingUpload}
remove={cancelPendingUpload}
multimediaCSSClass={css.multimedia}
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -41,6 +41,7 @@
multimedia.push(
<Multimedia
uri={singleMedia.uri}
+ type={singleMedia.type}
pendingUpload={pendingUpload}
multimediaCSSClass={css.multimedia}
multimediaImageCSSClass={css.multimediaImage}
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -14,7 +14,8 @@
min-height: 50px;
min-width: 50px;
}
-span.multimedia > .multimediaImage > img {
+span.multimedia > .multimediaImage > img,
+span.multimedia > .multimediaImage > video {
max-height: 200px;
max-width: 100%;
}
@@ -81,7 +82,8 @@
display: flex;
justify-content: center;
}
-div.multimediaModalOverlay > img {
+div.multimediaModalOverlay > img,
+div.multimediaModalOverlay > video {
object-fit: scale-down;
width: auto;
height: auto;
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
@@ -11,6 +11,7 @@
} from 'react-feather';
import { useModalContext } from 'lib/components/modal-provider.react';
+import type { MediaType } from 'lib/types/media-types';
import Button from '../components/button.react';
import { type PendingMultimediaUpload } from '../input/input-state';
@@ -19,6 +20,7 @@
type BaseProps = {
+uri: string,
+ +type: MediaType,
+pendingUpload?: ?PendingMultimediaUpload,
+remove?: (uploadID: string) => void,
+multimediaCSSClass: string,
@@ -46,7 +48,14 @@
render(): React.Node {
let progressIndicator, errorIndicator, removeButton;
- const { pendingUpload, remove } = this.props;
+ const {
+ pendingUpload,
+ remove,
+ type,
+ uri,
+ multimediaImageCSSClass,
+ multimediaCSSClass,
+ } = this.props;
if (pendingUpload) {
const { progressPercent, failed } = pendingUpload;
@@ -81,20 +90,35 @@
const imageContainerClasses = [
css.multimediaImage,
- this.props.multimediaImageCSSClass,
+ multimediaImageCSSClass,
];
imageContainerClasses.push(css.clickable);
- const containerClasses = [css.multimedia, this.props.multimediaCSSClass];
- return (
- <span className={classNames(containerClasses)}>
+ let mediaNode;
+ if (type === 'photo') {
+ mediaNode = (
<Button
className={classNames(imageContainerClasses)}
onClick={this.onClick}
>
- <img src={this.props.uri} />
+ <img src={uri} />
{removeButton}
</Button>
+ );
+ } else {
+ mediaNode = (
+ <div className={classNames(imageContainerClasses)}>
+ <video controls>
+ <source src={uri} />
+ </video>
+ </div>
+ );
+ }
+
+ const containerClasses = [css.multimedia, multimediaCSSClass];
+ return (
+ <span className={classNames(containerClasses)}>
+ {mediaNode}
{progressIndicator}
{errorIndicator}
</span>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 3:15 AM (20 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690272
Default Alt Text
D5759.diff (3 KB)

Event Timeline