RGBCube/cinny
1
Fork 0
mirror of https://github.com/RGBCube/cinny synced 2025-07-30 16:37:46 +00:00
Code Issues Activity

Fix crash on malformed blurhash (#2331)

Browse source
This commit is contained in:
Ajay Bura 2025-05-21 17:28:13 +05:30 • committed by GitHub
parent 5964eee833
commit df391968d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/components/message/content/ImageContent.tsx
View file

@ -30,6 +30,7 @@ import { stopPropagation } from '../../../utils/keyboard';
import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix'; import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { ModalWide } from '../../../styles/Modal.css'; import { ModalWide } from '../../../styles/Modal.css';
import { validBlurHash } from '../../../utils/blurHash';
type RenderViewerProps = { type RenderViewerProps = {
src: string; src: string;
@ -77,7 +78,7 @@ export const ImageContent = as<'div', ImageContentProps>(
) => { ) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]; const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
const [load, setLoad] = useState(false); const [load, setLoad] = useState(false);
const [error, setError] = useState(false); const [error, setError] = useState(false);

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

@ -31,6 +31,7 @@ import {
mxcUrlToHttp, mxcUrlToHttp,
} from '../../../utils/matrix'; } from '../../../utils/matrix';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { validBlurHash } from '../../../utils/blurHash';
type RenderVideoProps = { type RenderVideoProps = {
title: string; title: string;
@ -68,7 +69,7 @@ export const VideoContent = as<'div', VideoContentProps>(
) => { ) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const blurHash = info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]; const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
const [load, setLoad] = useState(false); const [load, setLoad] = useState(false);
const [error, setError] = useState(false); const [error, setError] = useState(false);

12
src/app/utils/blurHash.ts
View file

@ -1,4 +1,4 @@
import { encode } from 'blurhash'; import { encode, isBlurhashValid } from 'blurhash';
export const encodeBlurHash = ( export const encodeBlurHash = (
img: HTMLImageElement | HTMLVideoElement, img: HTMLImageElement | HTMLVideoElement,
@ -17,3 +17,13 @@ export const encodeBlurHash = (
const data = context.getImageData(0, 0, canvas.width, canvas.height); const data = context.getImageData(0, 0, canvas.width, canvas.height);
return encode(data.data, data.width, data.height, 4, 4); return encode(data.data, data.width, data.height, 4, 4);
}; };
export const validBlurHash = (hash?: string): string | undefined => {
if (typeof hash === 'string') {
const validity = isBlurhashValid(hash);
return validity.result ? hash : undefined;
}
return undefined;
};