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

fix quicktime video thumbnailing (#8108)

Browse source 
when reading quicktime files for thumbnailing and/or display, clobber the mimetype from `video/quicktime` to be `video/mp4` so browsers don't choke on it.
This commit is contained in:
Matthew Hodgson 2022-03-22 12:23:25 +00:00 committed by GitHub
parent a80e55d38d
commit c8d3b51640
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/ContentMessages.ts
View file

@ -292,7 +292,14 @@ function loadVideoElement(videoFile): Promise<HTMLVideoElement> {
reject(e);
};
video.src = ev.target.result as string;
let dataUrl = ev.target.result as string;
// Chrome chokes on quicktime but likes mp4, and `file.type` is
// read only, so do this horrible hack to unbreak quicktime
if (dataUrl.startsWith("data:video/quicktime;")) {
dataUrl = dataUrl.replace("data:video/quicktime;", "data:video/mp4;");
}
video.src = dataUrl;
video.load();
video.play();
};

13
src/components/views/messages/MVideoBody.tsx
View file

@ -190,12 +190,21 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
} else {
logger.log("NOT preloading video");
const content = this.props.mxEvent.getContent<IMediaEventContent>();
let mimetype = content?.info?.mimetype;
// clobber quicktime muxed files to be considered MP4 so browsers
// are willing to play them
if (mimetype == "video/quicktime") {
mimetype = "video/mp4";
}
this.setState({
// For Chrome and Electron, we need to set some non-empty `src` to
// enable the play button. Firefox does not seem to care either
// way, so it's fine to do for all browsers.
decryptedUrl: `data:${content?.info?.mimetype},`,
decryptedThumbnailUrl: thumbnailUrl || `data:${content?.info?.mimetype},`,
decryptedUrl: `data:${mimetype},`,
decryptedThumbnailUrl: thumbnailUrl || `data:${mimetype},`,
decryptedBlob: null,
});
}