/* * Copyright 2024 New Vector Ltd. * Copyright 2022 The Matrix.org Foundation C.I.C. * * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial * Please see LICENSE files in the repository root for full details. */ import { arrayHasDiff } from "./arrays"; export function mayBeAnimated(mimeType?: string): boolean { return ["image/gif", "image/webp", "image/png", "image/apng", "image/avif"].includes(mimeType!); } function arrayBufferRead(arr: ArrayBuffer, start: number, len: number): Uint8Array { return new Uint8Array(arr.slice(start, start + len)); } function arrayBufferReadInt(arr: ArrayBuffer, start: number): number { const dv = new DataView(arr, start, 4); return dv.getUint32(0); } function arrayBufferReadStr(arr: ArrayBuffer, start: number, len: number): string { return String.fromCharCode.apply(null, Array.from(arrayBufferRead(arr, start, len))); } /** * Check if a Blob contains an animated image. * @param blob The Blob to check. * @returns True if the image is animated, false if not, or undefined if it could not be determined. */ export async function blobIsAnimated(blob: Blob): Promise { try { // Try parse the image using ImageDecoder as this is the most coherent way of asserting whether a piece of media // is or is not animated. Limited availability at time of writing, notably Safari lacks support. // https://developer.mozilla.org/en-US/docs/Web/API/ImageDecoder const data = await blob.arrayBuffer(); const decoder = new ImageDecoder({ data, type: blob.type }); await decoder.tracks.ready; if ([...decoder.tracks].some((track) => track.animated)) { return true; } } catch (e) { console.warn("ImageDecoder not supported or failed to decode image", e); // Not supported by this browser, fall through to manual checks } switch (blob.type) { case "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, 21).arrayBuffer(); if ( arrayBufferReadStr(arr, 0, 4) === "RIFF" && arrayBufferReadStr(arr, 8, 4) === "WEBP" && arrayBufferReadStr(arr, 12, 4) === "VP8X" ) { const [flags] = arrayBufferRead(arr, 20, 1); // Flags: R R I L E X _A_ R (reversed) const animationFlagMask = 1 << 1; return (flags & animationFlagMask) != 0; } return false; } case "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; } case "image/png": case "image/apng": { // Based on https://stackoverflow.com/a/68618296 const arr = await blob.arrayBuffer(); if ( arrayHasDiff([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], Array.from(arrayBufferRead(arr, 0, 8))) ) { return false; } for (let i = 8; i < blob.size; ) { const length = arrayBufferReadInt(arr, i); i += 4; const type = arrayBufferReadStr(arr, i, 4); i += 4; switch (type) { case "acTL": return true; case "IDAT": return false; } i += length + 4; } return false; } } }