jared
7b01cfebf5
- nginx (LXC 106, live): added https://*.giphy.com to connect-src CSP — browser was blocking fetch() to media2.giphy.com CDN with CSP violation - EditHistoryModal: render formatted_body as sanitized HTML (via html-react-parser + sanitizeCustomHtml) with linkification for plain text, matching how messages render in the timeline - useAsyncCallback + ThumbnailContent + ImageContent + VideoContent + ClientConfigLoader: use .catch(() => undefined) instead of void to silence unhandled promise rejections from fire-and-forget useEffect calls — errors already captured in AsyncState.Error for UI display Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import { ReactNode, useCallback, useEffect } from 'react';
|
|
import { IThumbnailContent } from '../../../../types/matrix/common';
|
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
|
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
|
import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
|
|
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
|
import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
|
|
|
|
export type ThumbnailContentProps = {
|
|
info: IThumbnailContent;
|
|
renderImage: (src: string) => ReactNode;
|
|
};
|
|
export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
|
|
const mx = useMatrixClient();
|
|
const useAuthentication = useMediaAuthentication();
|
|
|
|
const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
|
|
useCallback(async () => {
|
|
const thumbInfo = info.thumbnail_info;
|
|
const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
|
|
const encInfo = info.thumbnail_file;
|
|
if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
|
|
throw new Error('Failed to load thumbnail');
|
|
}
|
|
|
|
const mediaUrl = mxcUrlToHttp(mx, thumbMxcUrl, useAuthentication);
|
|
if (!mediaUrl) throw new Error('Invalid media URL');
|
|
if (encInfo) {
|
|
const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
|
|
decryptFile(encBuf, thumbInfo.mimetype ?? FALLBACK_MIMETYPE, encInfo),
|
|
);
|
|
return URL.createObjectURL(fileContent);
|
|
}
|
|
|
|
return mediaUrl;
|
|
}, [mx, info, useAuthentication]),
|
|
);
|
|
|
|
useEffect(() => {
|
|
loadThumbSrc().catch(() => undefined);
|
|
}, [loadThumbSrc]);
|
|
|
|
return thumbSrcState.status === AsyncStatus.Success ? renderImage(thumbSrcState.data) : null;
|
|
}
|