mirror of
https://github.com/cinnyapp/cinny.git
synced 2024-12-28 02:16:17 +00:00
fix: Fix video and audio loading with authenicated media (#1946)
Some checks are pending
Deploy to Netlify (dev) / Deploy to Netlify (push) Waiting to run
Some checks are pending
Deploy to Netlify (dev) / Deploy to Netlify (push) Waiting to run
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:
parent
5482f8e72e
commit
f2c31d29a2
|
@ -50,7 +50,7 @@ export function AudioContent({
|
||||||
|
|
||||||
const [srcState, loadSrc] = useAsyncCallback(
|
const [srcState, loadSrc] = useAsyncCallback(
|
||||||
useCallback(
|
useCallback(
|
||||||
() => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo),
|
() => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo, true),
|
||||||
[mx, url, useAuthentication, mimeType, encInfo]
|
[mx, url, useAuthentication, mimeType, encInfo]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -71,7 +71,7 @@ export const VideoContent = as<'div', VideoContentProps>(
|
||||||
|
|
||||||
const [srcState, loadSrc] = useAsyncCallback(
|
const [srcState, loadSrc] = useAsyncCallback(
|
||||||
useCallback(
|
useCallback(
|
||||||
() => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo),
|
() => getFileSrcUrl(mxcUrlToHttp(mx, url, useAuthentication) ?? '', mimeType, encInfo, true),
|
||||||
[mx, url, useAuthentication, mimeType, encInfo]
|
[mx, url, useAuthentication, mimeType, encInfo]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -4,7 +4,8 @@ import { decryptFile } from '../../../utils/matrix';
|
||||||
export const getFileSrcUrl = async (
|
export const getFileSrcUrl = async (
|
||||||
httpUrl: string,
|
httpUrl: string,
|
||||||
mimeType: string,
|
mimeType: string,
|
||||||
encInfo?: EncryptedAttachmentInfo
|
encInfo?: EncryptedAttachmentInfo,
|
||||||
|
forceFetch?: boolean
|
||||||
): Promise<string> => {
|
): Promise<string> => {
|
||||||
if (encInfo) {
|
if (encInfo) {
|
||||||
if (typeof httpUrl !== 'string') throw new Error('Malformed event');
|
if (typeof httpUrl !== 'string') throw new Error('Malformed event');
|
||||||
|
@ -13,6 +14,12 @@ export const getFileSrcUrl = async (
|
||||||
const decryptedBlob = await decryptFile(encData, mimeType, encInfo);
|
const decryptedBlob = await decryptFile(encData, mimeType, encInfo);
|
||||||
return URL.createObjectURL(decryptedBlob);
|
return URL.createObjectURL(decryptedBlob);
|
||||||
}
|
}
|
||||||
|
if (forceFetch) {
|
||||||
|
const res = await fetch(httpUrl, { method: 'GET' });
|
||||||
|
const blob = await res.blob();
|
||||||
|
return URL.createObjectURL(blob);
|
||||||
|
}
|
||||||
|
|
||||||
return httpUrl;
|
return httpUrl;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue