Properly check if GIF or WEBP are animated where we have access to the blob

t3chguy · t3chguy · commit 4f807cccc3fa · 2022-03-25T13:54:27.000Z
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
@@ -37,6 +37,7 @@ import { IBodyProps } from "./IBodyProps";
 import { ImageSize, suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import { blobIsAnimated, mayBeAnimated } from '../../../utils/Image';
 
 enum Placeholder {
     NoImage,
@@ -59,11 +60,6 @@ interface IState {
     placeholder: Placeholder;
 }
 
-function mayBeAnimated(mimeType: string): boolean {
-    // Both GIF and WEBP can be animated, and here we assume they are, as checking is much more difficult.
-    return ["image/gif", "image/webp"].includes(mimeType);
-}
-
 @replaceableComponent("views.messages.MImageBody")
 export default class MImageBody extends React.Component<IBodyProps, IState> {
     static contextType = RoomContext;
@@ -185,22 +181,17 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         this.setState({ imgLoaded: true, loadedImageDimensions });
     };
 
-    protected getContentUrl(): string {
-        const content: IMediaEventContent = this.props.mxEvent.getContent();
+    private getContentUrl(): string {
         // During export, the content url will point to the MSC, which will later point to a local url
-        if (this.props.forExport) return content.url || content.file?.url;
-        if (this.media.isEncrypted) {
-            return this.state.contentUrl;
-        } else {
-            return this.media.srcHttp;
-        }
+        if (this.props.forExport) return this.media.srcMxc;
+        return this.media.srcHttp;
     }
 
     private get media(): Media {
         return mediaFromContent(this.props.mxEvent.getContent());
     }
 
-    protected getThumbUrl(): string {
+    private getThumbUrl(): string {
         // FIXME: we let images grow as wide as you like, rather than capped to 800x600.
         // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
         // thumbnail resolution will be unnecessarily reduced.
@@ -260,7 +251,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     }
 
     private async downloadImage() {
-        if (this.state.contentUrl || this.state.thumbUrl) return; // already downloaded
+        if (this.state.contentUrl) return; // already downloaded
 
         let thumbUrl: string;
         let contentUrl: string;
@@ -282,26 +273,30 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
 
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
-        const isAnimated = mayBeAnimated(content.info?.mimetype);
+        let isAnimated = mayBeAnimated(content.info?.mimetype);
 
         // If there is no included non-animated thumbnail then we will generate our own, we can't depend on the server
         // because 1. encryption and 2. we can't ask the server specifically for a non-animated thumbnail.
         if (isAnimated && !SettingsStore.getValue("autoplayGifs")) {
             if (!thumbUrl || !content?.info.thumbnail_info || mayBeAnimated(content.info.thumbnail_info.mimetype)) {
                 const img = document.createElement("img");
                 const loadPromise = new Promise((resolve, reject) => {
-                    img.onload = function() {
-                        resolve(img);
-                    };
-                    img.onerror = function(e) {
-                        reject(e);
-                    };
+                    img.onload = resolve;
+                    img.onerror = reject;
                 });
                 img.crossOrigin = "Anonymous"; // CORS allow canvas access
                 img.src = contentUrl;
 
                 await loadPromise;
 
+                // Rudimentary validation for whether it is animated, only in encrypted rooms as we have the blob
+                if (this.props.mediaEventHelper.media.isEncrypted) {
+                    const blob = await this.props.mediaEventHelper.sourceBlob.value;
+                    if (!await blobIsAnimated(content.info.mimetype, blob)) {
+                        isAnimated = false;
+                    }
+                }
+
                 if (isAnimated) {
                     const thumb = await createThumbnail(img, img.width, img.height, content.info.mimetype, false);
                     thumbUrl = URL.createObjectURL(thumb.thumbnail);
@@ -370,6 +365,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         content: IMediaEventContent,
         forcedHeight?: number,
     ): JSX.Element {
+        if (!thumbUrl) thumbUrl = contentUrl; // fallback
+
         let infoWidth: number;
         let infoHeight: number;
 
@@ -571,7 +568,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         if (this.props.forExport || (this.state.isAnimated && SettingsStore.getValue("autoplayGifs"))) {
             thumbUrl = contentUrl;
         } else {
-            thumbUrl = this.state.thumbUrl;
+            thumbUrl = this.state.thumbUrl ?? this.state.contentUrl;
         }
 
         const thumbnail = this.messageContent(contentUrl, thumbUrl, content);
diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx
@@ -41,14 +41,12 @@ export default class MImageReplyBody extends MImageBody {
     }
 
     render() {
-        if (this.state.error !== null) {
+        if (this.state.error) {
             return super.render();
         }
 
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
-
-        const contentUrl = this.getContentUrl();
-        const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, FORCED_IMAGE_HEIGHT);
+        const thumbnail = this.messageContent(this.state.contentUrl, this.state.thumbUrl, content, FORCED_IMAGE_HEIGHT);
         const fileBody = this.getFileBody();
         const sender = <SenderProfile
             mxEvent={this.props.mxEvent}
diff --git a/src/utils/Image.ts b/src/utils/Image.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2022 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function mayBeAnimated(mimeType: string): boolean {
+    // Both GIF and WEBP can be animated, and here we assume they are, as checking is much more difficult.
+    return ["image/gif", "image/webp"].includes(mimeType);
+}
+
+function arrayBufferRead(arr: ArrayBuffer, start: number, len: number): Uint8Array {
+    return new Uint8Array(arr.slice(start, start + len));
+}
+
+function arrayBufferReadStr(arr: ArrayBuffer, start: number, len: number): string {
+    return String.fromCharCode.apply(null, arrayBufferRead(arr, start, len));
+}
+
+export async function blobIsAnimated(mimeType: string, blob: Blob): Promise<boolean> {
+    if (!mayBeAnimated(mimeType)) return false;
+
+    if (mimeType === "image/webp") {
+        // Only extended file format WEBP images support animation, so grab the expected data range and verify header.
+        // Based on https://developers.google.com/speed/webp/docs/riff_container#extended_file_format
+        const arr = await blob.slice(0, 16).arrayBuffer();
+        if (
+            arrayBufferReadStr(arr, 0, 4) === "RIFF" &&
+            arrayBufferReadStr(arr, 8, 4) === "WEBP" &&
+            arrayBufferReadStr(arr, 12, 4) === "VP8X"
+        ) {
+            const [flags] = arrayBufferRead(arr, 16, 1);
+            // Flags: R R I L E X _A_ R (reversed)
+            const animationFlagMask = 1 << 1;
+            return (flags & animationFlagMask) != 0;
+        }
+    } else if (mimeType === "image/gif") {
+        // Based on https://gist.github.com/zakirt/faa4a58cec5a7505b10e3686a226f285
+        // More info at http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
+        const dv = new DataView(await blob.arrayBuffer(), 10);
+
+        const globalColorTable = dv.getUint8(0);
+        let globalColorTableSize = 0;
+        // check first bit, if 0, then we don't have a Global Color Table
+        if (globalColorTable & 0x80) {
+            // grab the last 3 bits, to calculate the global color table size -> RGB * 2^(N+1)
+            // N is the value in the last 3 bits.
+            globalColorTableSize = 3 * Math.pow(2, (globalColorTable & 0x7) + 1);
+        }
+
+        // move on to the Graphics Control Extension
+        const offset = 3 + globalColorTableSize;
+
+        const extensionIntroducer = dv.getUint8(offset);
+        const graphicsControlLabel = dv.getUint8(offset + 1);
+        let delayTime = 0;
+
+        // Graphics Control Extension section is where GIF animation data is stored
+        // First 2 bytes must be 0x21 and 0xF9
+        if ((extensionIntroducer & 0x21) && (graphicsControlLabel & 0xF9)) {
+            // skip to the 2 bytes with the delay time
+            delayTime = dv.getUint16(offset + 4);
+        }
+
+        return !!delayTime;
+    }
+
+    return false;
+}
