Add support to play .mov files (#672)

* update allowed mimetypes

* fix .mov files failing to play in Chromium

* add check for  before passing to FileReader

* add missing semi-colon

src/app/molecules/media/Media.jsx

@@ -12,15 +12,19 @@ import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
 import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
 import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
 
-// https://github.com/matrix-org/matrix-react-sdk/blob/a9e28db33058d1893d964ec96cd247ecc3d92fc3/src/utils/blobs.ts#L73
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts#L73
 const ALLOWED_BLOB_MIMETYPES = [
   'image/jpeg',
   'image/gif',
   'image/png',
+  'image/apng',
+  'image/webp',
+  'image/avif',
 
   'video/mp4',
   'video/webm',
   'video/ogg',
+  'video/quicktime',
 
   'audio/mp4',
   'audio/webm',
@@ -38,6 +42,10 @@ function getBlobSafeMimeType(mimetype) {
   if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
     return 'application/octet-stream';
   }
+  // Required for Chromium browsers
+  if (mimetype === 'video/quicktime') {
+    return 'video/mp4';
+  }
   return mimetype;
 }
 

src/client/state/RoomsInput.js

@@ -46,7 +46,12 @@ function loadVideo(videoFile) {
     reader.onerror = (e) => {
       reject(e);
     };
+    if (videoFile.type === 'video/quicktime') {
+      const quicktimeVideoFile = new File([videoFile], videoFile.name, { type: 'video/mp4' });
+      reader.readAsDataURL(quicktimeVideoFile);
+    } else {
       reader.readAsDataURL(videoFile);
+    }
   });
 }
 function getVideoThumbnail(video, width, height, mimeType) {