From c98fb4f5ce40138b62314cc80ef4605649cbc3e9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 22 Mar 2022 02:26:09 +0000 Subject: [PATCH 1/3] fix quicktime video thumbnailing --- src/ContentMessages.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index 09b080496db..9a6d4da1006 100644 --- a/src/ContentMessages.ts +++ b/src/ContentMessages.ts @@ -292,7 +292,14 @@ function loadVideoElement(videoFile): Promise { 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(); }; From 9a76bb0db5c90ccda2b34a9aa8cb13d98d53b2aa Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 22 Mar 2022 11:24:36 +0000 Subject: [PATCH 2/3] clobber the mimetype to make it work in e2ee rooms --- src/ContentMessages.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index 9a6d4da1006..5ad1c61e941 100644 --- a/src/ContentMessages.ts +++ b/src/ContentMessages.ts @@ -595,6 +595,12 @@ export default class ContentMessages { // if we have a mime type for the file, add it to the message metadata if (file.type) { content.info.mimetype = file.type; + + // clobber quicktime muxed files to be considered MP4 so browsers + // are willing to play them + if (content.info.mimetype == "video/quicktime") { + content.info.mimetype = "video/mp4"; + } } const prom = new Promise((resolve) => { From 9d151a3c897961cb06fdd9bdff27f07f7f178cf4 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 22 Mar 2022 11:41:45 +0000 Subject: [PATCH 3/3] clobber mimetype on receive, not send --- src/ContentMessages.ts | 6 ------ src/components/views/messages/MVideoBody.tsx | 13 +++++++++++-- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index 5ad1c61e941..9a6d4da1006 100644 --- a/src/ContentMessages.ts +++ b/src/ContentMessages.ts @@ -595,12 +595,6 @@ export default class ContentMessages { // if we have a mime type for the file, add it to the message metadata if (file.type) { content.info.mimetype = file.type; - - // clobber quicktime muxed files to be considered MP4 so browsers - // are willing to play them - if (content.info.mimetype == "video/quicktime") { - content.info.mimetype = "video/mp4"; - } } const prom = new Promise((resolve) => { diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index 1b6bafd7d93..96516138a09 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -190,12 +190,21 @@ export default class MVideoBody extends React.PureComponent } else { logger.log("NOT preloading video"); const content = this.props.mxEvent.getContent(); + + 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, }); }