tezlm/cinny
1
0
Fork 0
forked from mirror/cinny
Code Pull requests Activity

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

Browse source 
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.
This commit is contained in:
夜坂雅 2024-09-11 13:13:15 +08:00 committed by GitHub
parent 5482f8e72e
commit f2c31d29a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/message/content/AudioContent.tsx
View file

@ -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]
)
);

2
src/app/components/message/content/VideoContent.tsx
View file

@ -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]
)
);

9
src/app/components/message/content/util.ts
View file

@ -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;
};