From: 夜坂雅 <23130178+ShadowRZ@users.noreply.github.com>
Date: Wed, 11 Sep 2024 05:13:15 +0000 (+0800)
Subject: fix: Fix video and audio loading with authenicated media (#1946)
X-Git-Tag: v4.2.0~3
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=f2c31d29a287f6d2cf9e92be1a1b7ba312a3034c;p=rainny.git

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.
---

diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx
index b426654..d6a82a3 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 46f82fa..1683075 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 2cc4341..8614b8e 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;
 };