122 lines
3.2 KiB
TypeScript
122 lines
3.2 KiB
TypeScript
// tslint:disable:react-a11y-anchors
|
|
|
|
import React from 'react';
|
|
import * as GoogleChrome from '../util/GoogleChrome';
|
|
|
|
import { AttachmentType } from './conversation/types';
|
|
|
|
import { Localizer } from '../types/Util';
|
|
|
|
interface Props {
|
|
attachment: AttachmentType;
|
|
i18n: Localizer;
|
|
url: string;
|
|
caption?: string;
|
|
onChangeCaption?: (caption: string) => void;
|
|
close?: () => void;
|
|
}
|
|
|
|
export class CaptionEditor extends React.Component<Props> {
|
|
private handleKeyUpBound: () => void;
|
|
private setFocusBound: () => void;
|
|
private captureRefBound: () => void;
|
|
private inputRef: React.Ref<HTMLInputElement> | null;
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.handleKeyUpBound = this.handleKeyUp.bind(this);
|
|
this.setFocusBound = this.setFocus.bind(this);
|
|
this.captureRefBound = this.captureRef.bind(this);
|
|
this.inputRef = null;
|
|
}
|
|
|
|
public handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
|
|
const { close } = this.props;
|
|
|
|
if (close && (event.key === 'Escape' || event.key === 'Enter')) {
|
|
close();
|
|
}
|
|
}
|
|
|
|
public setFocus() {
|
|
if (this.inputRef) {
|
|
// @ts-ignore
|
|
this.inputRef.focus();
|
|
}
|
|
}
|
|
|
|
public captureRef(ref: React.Ref<HTMLInputElement>) {
|
|
this.inputRef = ref;
|
|
|
|
// Forcing focus after a delay due to some focus contention with ConversationView
|
|
setTimeout(() => {
|
|
this.setFocus();
|
|
}, 200);
|
|
}
|
|
|
|
public renderObject() {
|
|
const { url, i18n, attachment } = this.props;
|
|
const { contentType } = attachment || { contentType: null };
|
|
|
|
const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
|
|
if (isImageTypeSupported) {
|
|
return (
|
|
<img
|
|
className="module-caption-editor__image"
|
|
alt={i18n('imageAttachmentAlt')}
|
|
src={url}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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" />;
|
|
}
|
|
|
|
public render() {
|
|
const { caption, i18n, close, onChangeCaption } = this.props;
|
|
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
onClick={this.setFocusBound}
|
|
className="module-caption-editor"
|
|
>
|
|
<div
|
|
role="button"
|
|
onClick={close}
|
|
className="module-caption-editor__close-button"
|
|
/>
|
|
<div className="module-caption-editor__media-container">
|
|
{this.renderObject()}
|
|
</div>
|
|
<div className="module-caption-editor__bottom-bar">
|
|
<div className="module-caption-editor__add-caption-button" />
|
|
<input
|
|
type="text"
|
|
ref={this.captureRefBound}
|
|
onKeyUp={close ? this.handleKeyUpBound : undefined}
|
|
value={caption || ''}
|
|
maxLength={200}
|
|
placeholder={i18n('addACaption')}
|
|
className="module-caption-editor__caption-input"
|
|
onChange={event => {
|
|
if (onChangeCaption) {
|
|
onChangeCaption(event.target.value);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|