fix: Fix video and audio loading with authenicated media (#1946)

Appeareantly Firefox (and maybe Chrome) won't let service workers take over requests from <video> and <audio> tags, so we just fetch the URL ourselves.
cinnyapp · Sep 11, 2024 · f2c31d2 · f2c31d2
1 parent 5482f8e
commit f2c31d2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx
@@ -50,7 +50,7 @@ export function AudioContent({
 
   const [srcState, loadSrc] = useAsyncCallback(
     useCallback(
-      () => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo),
+      () => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo, true),
       [mx, url, useAuthentication, mimeType, encInfo]
     )
   );

diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
@@ -71,7 +71,7 @@ export const VideoContent = as<'div', VideoContentProps>(
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(
-        () => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo),
+        () => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo, true),
         [mx, url, useAuthentication, mimeType, encInfo]
       )
     );

diff --git a/src/app/components/message/content/util.ts b/src/app/components/message/content/util.ts
@@ -4,7 +4,8 @@ import { decryptFile } from '../../../utils/matrix';
 export const getFileSrcUrl = async (
   httpUrl: string,
   mimeType: string,
-  encInfo?: EncryptedAttachmentInfo
+  encInfo?: EncryptedAttachmentInfo,
+  forceFetch?: boolean
 ): Promise<string> => {
   if (encInfo) {
     if (typeof httpUrl !== 'string') throw new Error('Malformed event');
@@ -13,6 +14,12 @@ export const getFileSrcUrl = async (
     const decryptedBlob = await decryptFile(encData, mimeType, encInfo);
     return URL.createObjectURL(decryptedBlob);
   }
+  if (forceFetch) {
+    const res = await fetch(httpUrl, { method: 'GET' });
+    const blob = await res.blob();
+    return URL.createObjectURL(blob);
+  }
+
   return httpUrl;
 };