From f2c31d29a287f6d2cf9e92be1a1b7ba312a3034c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E5=9D=82=E9=9B=85?=
 <23130178+ShadowRZ@users.noreply.github.com>
Date: Wed, 11 Sep 2024 13:13:15 +0800
Subject: [PATCH] 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.
---
 src/app/components/message/content/AudioContent.tsx | 2 +-
 src/app/components/message/content/VideoContent.tsx | 2 +-
 src/app/components/message/content/util.ts          | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx
index b426654f..d6a82a3b 100644
--- 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
index 46f82fae..1683075b 100644
--- 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
index 2cc43418..8614b8ec 100644
--- 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;
 };