You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
// tslint:disable:react-a11y-anchors
|
|
|
|
import React from 'react';
|
|
import * as GoogleChrome from '../util/GoogleChrome';
|
|
|
|
import { AttachmentType } from '../types/Attachment';
|
|
|
|
type Props = {
|
|
attachment: AttachmentType;
|
|
url: string;
|
|
caption?: string;
|
|
onSave: (caption: string) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const CaptionEditorObject = (props: Props) => {
|
|
const { url, onClose, attachment } = props;
|
|
const { contentType } = attachment || { contentType: null };
|
|
|
|
const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
|
|
if (isImageTypeSupported) {
|
|
return (
|
|
<img
|
|
className="module-caption-editor__image"
|
|
alt={window.i18n('imageAttachmentAlt')}
|
|
src={url}
|
|
onClick={onClose}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const isVideoTypeSupported = GoogleChrome.isVideoTypeSupported(contentType);
|
|
if (isVideoTypeSupported) {
|
|
return (
|
|
<video className="module-caption-editor__video" controls={true}>
|
|
<source src={url} />
|
|
</video>
|
|
);
|
|
}
|
|
|
|
return <div className="module-caption-editor__placeholder" />;
|
|
};
|
|
|
|
/**
|
|
* This actually no longer allows to edit the caption as we do not support this feature anymore.
|
|
* This is just a lightbox to preview the attachments before sending them in a message
|
|
*/
|
|
export const CaptionEditor = (props: Props) => {
|
|
const { onClose } = props;
|
|
|
|
return (
|
|
<div role="dialog" className="module-caption-editor">
|
|
<div role="button" onClick={onClose} className="module-caption-editor__close-button" />
|
|
<div className="module-caption-editor__media-container">
|
|
<CaptionEditorObject {...props} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|