fix quicktime video thumbnailing (#8108)

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.

Author: ara4n

src/ContentMessages.ts

@@ -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();
         };

src/components/views/messages/MVideoBody.tsx

@@ -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,
                     });
                 }