Merge branch 'dev' into start-thread-button

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.7.0",
+      "version": "4.7.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",

src/app/components/message/content/ImageContent.tsx

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

src/app/components/message/content/VideoContent.tsx

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

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.7.0
+        v4.7.1
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter

src/app/pages/client/WelcomePage.tsx

@@ -24,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.7.0
+                  v4.7.1
                 </a>
               </span>
             }

src/app/utils/blurHash.ts

@@ -1,4 +1,4 @@
-import { encode } from 'blurhash';
+import { encode, isBlurhashValid } from 'blurhash';
 
 export const encodeBlurHash = (
   img: HTMLImageElement | HTMLVideoElement,
@@ -17,3 +17,13 @@ export const encodeBlurHash = (
   const data = context.getImageData(0, 0, canvas.width, canvas.height);
   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;
+};

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '4.7.0',
+  version: '4.7.1',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',