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

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 6fc3851771e87eb1a1ff08af1c23e61cf09874bf..341dcb037e659635970ddd0e082d6e70497ec3ac 100644 (file)
--- a/src/app/molecules/media/Media.jsx
+++ b/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;
 }
 

diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js
index 4bbd3d88a2729bdc5f6bdb3f1141b1fe542848a9..882c7bc06f9386a307cb74349861533d491a9c79 100644 (file)
--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -46,7 +46,12 @@ function loadVideo(videoFile) {
     reader.onerror = (e) => {
       reject(e);
     };
-    reader.readAsDataURL(videoFile);
+    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) {