PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Wire up file preview for video files (#8140)

Browse source
This commit is contained in:
Michael Telatynski 2022-03-24 11:59:20 +00:00 committed by GitHub
parent 60ecaac4f8
commit 0feecccef1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/components/views/dialogs/UploadConfirmDialog.tsx
View file

@ -33,8 +33,8 @@ interface IProps {
@replaceableComponent("views.dialogs.UploadConfirmDialog") @replaceableComponent("views.dialogs.UploadConfirmDialog")
export default class UploadConfirmDialog extends React.Component<IProps> { export default class UploadConfirmDialog extends React.Component<IProps> {
private objectUrl: string; private readonly objectUrl: string;
private mimeType: string; private readonly mimeType: string;
static defaultProps = { static defaultProps = {
totalFiles: 1, totalFiles: 1,
@ -69,7 +69,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
}; };
render() { render() {
let title; let title: string;
if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) { if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) {
title = _t( title = _t(
"Upload files (%(current)s of %(total)s)", "Upload files (%(current)s of %(total)s)",
@ -82,23 +82,23 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
title = _t('Upload files'); title = _t('Upload files');
} }
let preview; let preview: JSX.Element;
if (this.mimeType.startsWith('image/')) { let placeholder: JSX.Element;
preview = <div className="mx_UploadConfirmDialog_previewOuter"> if (this.mimeType.startsWith("image/")) {
<div className="mx_UploadConfirmDialog_previewInner"> preview = (
<div><img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} /></div> <img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} />
<div>{ this.props.file.name } ({ filesize(this.props.file.size) })</div> );
</div> } else if (this.mimeType.startsWith("video/")) {
</div>; preview = (
<video className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} playsInline controls={false} />
);
} else { } else {
preview = <div> placeholder = (
<div> <img
<img className="mx_UploadConfirmDialog_fileIcon" className="mx_UploadConfirmDialog_fileIcon"
src={require("../../../../res/img/feather-customised/files.svg").default} src={require("../../../../res/img/feather-customised/files.svg").default}
/> />
{ this.props.file.name } ({ filesize(this.props.file.size) }) );
</div>
</div>;
} }
let uploadAllButton; let uploadAllButton;
@ -109,14 +109,23 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
} }
return ( return (
<BaseDialog className='mx_UploadConfirmDialog' <BaseDialog
className="mx_UploadConfirmDialog"
fixedWidth={false} fixedWidth={false}
onFinished={this.onCancelClick} onFinished={this.onCancelClick}
title={title} title={title}
contentId='mx_Dialog_content' contentId="mx_Dialog_content"
> >
<div id='mx_Dialog_content'> <div id="mx_Dialog_content">
{ preview } <div className="mx_UploadConfirmDialog_previewOuter">
<div className="mx_UploadConfirmDialog_previewInner">
{ preview && <div>{ preview }</div> }
<div>
{ placeholder }
{ this.props.file.name } ({ filesize(this.props.file.size) })
</div>
</div>
</div>
</div> </div>
<DialogButtons primaryButton={_t('Upload')} <DialogButtons primaryButton={_t('Upload')}

2
src/components/views/voip/VideoFeed.tsx
View file

@ -226,7 +226,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
), ),
}); });
content= ( content = (
<video className={videoClasses} ref={this.setElementRef} /> <video className={videoClasses} ref={this.setElementRef} />
); );
} }

1
src/utils/blobs.ts
View file

@ -56,6 +56,7 @@ const ALLOWED_BLOB_MIMETYPES = [
'video/mp4', 'video/mp4',
'video/webm', 'video/webm',
'video/ogg', 'video/ogg',
'video/quicktime',
'audio/mp4', 'audio/mp4',
'audio/webm', 'audio/webm',