ani-cursor 0.0.0-next-c2c0675

package/README.md

@@ -0,0 +1,38 @@
+# ani-cursor
+
+A library for rendering Windows Animated Cursor files (`.ani`) in the browser by parsing out the individual frames and constructing a CSS animation.
+
+Built to support `.ani` files in Winamp skins for https://webamp.org.
+
+I wrote a blog post about this library which you can find [here](https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/).
+
+## Install
+
+```bash
+npm install ani-cursor
+```
+
+## Usage Example
+
+```JavaScript
+import {convertAniBinaryToCSS} from 'ani-cursor';
+
+async function applyCursor(selector, aniUrl) {
+    const response = await fetch(aniUrl);
+    const data = new Uint8Array(await response.arrayBuffer());
+
+    const style = document.createElement('style');
+    style.innerText = convertAniBinaryToCSS(selector, data);
+
+    document.head.appendChild(style);
+}
+
+const h1 = document.createElement('h1');
+h1.id = 'pizza';
+h1.innerText = 'Pizza Time!';
+document.body.appendChild(h1);
+
+applyCursor("#pizza", "https://archive.org/cors/tucows_169906_Pizza_cursor/pizza.ani");
+```
+
+Try the [Live Demo on CodeSandbox](https://codesandbox.io/s/jolly-thunder-9jkio?file=/src/index.js).

package/dist/__tests__/parser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/parser.test.js

@@ -0,0 +1,36 @@
+import fs from "fs";
+import path from "path";
+import { convertAniBinaryToCSS } from "../index.js";
+const LONG_BASE_64 = /([A-Za-z0-9+/=]{50})[A-Za-z0-9+/=]+/g;
+// Parse a `.ani` in our fixture directory and trim down the image data for use
+// in snapshot tests.
+function readPathCss(filePath) {
+    const buffer = fs.readFileSync(path.join(__dirname, "./fixtures/", filePath));
+    return convertAniBinaryToCSS("#example", buffer).replace(LONG_BASE_64, "$1...");
+}
+// https://skins.webamp.org/skin/6e30f9e9b8f5719469809785ae5e4a1f/Super_Mario_Amp_2.wsz/
+describe("Super_Mario_Amp_2.wsz", () => {
+    test("eqslid.cur", async () => {
+        expect(readPathCss("Super_Mario_Amp_2/eqslid.cur")).toMatchSnapshot();
+    });
+    test("close.cur", async () => {
+        expect(readPathCss("Super_Mario_Amp_2/close.cur")).toMatchSnapshot();
+    });
+});
+// https://skins.webamp.org/skin/4308a2fc648033bf5fe7c4d56a5c8823/Green-Dimension-V2.wsz/
+describe("Green Dimension v2.wsz", () => {
+    test("eqslid.cur", async () => {
+        expect(readPathCss("Green Dimension v2/eqslid.cur")).toMatchSnapshot();
+    });
+});
+describe("AfterShock_Digital_2003.wsz", () => {
+    test("close.cur", async () => {
+        expect(readPathCss("AfterShock_Digital_2003/close.cur")).toMatchSnapshot();
+    });
+});
+describe("Edge cases", () => {
+    test("piano.ani", async () => {
+        expect(readPathCss("piano.ani")).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=parser.test.js.map

package/dist/__tests__/parser.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.test.js","sourceRoot":"","sources":["../../src/__tests__/parser.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,YAAY,GAAG,sCAAsC,CAAC;AAE5D,+EAA+E;AAC/E,qBAAqB;AACrB,SAAS,WAAW,CAAC,QAAgB;IACnC,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9E,OAAO,qBAAqB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,OAAO,CACtD,YAAY,EACZ,OAAO,CACR,CAAC;AACJ,CAAC;AAED,wFAAwF;AACxF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;QAC5B,MAAM,CAAC,WAAW,CAAC,8BAA8B,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;QAC3B,MAAM,CAAC,WAAW,CAAC,6BAA6B,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,yFAAyF;AACzF,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;QAC5B,MAAM,CAAC,WAAW,CAAC,+BAA+B,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACzE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC3C,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;QAC3B,MAAM,CAAC,WAAW,CAAC,mCAAmC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;QAC3B,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export declare function convertAniBinaryToCSS(selector: string, aniBinary: Uint8Array): string;
+export declare function base64FromDataArray(dataArray: Uint8Array): string;

package/dist/index.js

@@ -0,0 +1,70 @@
+import { parseAni } from "./parser.js";
+const JIFFIES_PER_MS = 1000 / 60;
+// Generate CSS for an animated cursor.
+//
+// This function returns CSS containing a set of keyframes with embedded Data
+// URIs as well as a CSS rule to the given selector.
+export function convertAniBinaryToCSS(selector, aniBinary) {
+    const ani = readAni(aniBinary);
+    const animationName = `ani-cursor-${uniqueId()}`;
+    const keyframes = ani.frames.map(({ url, percents }) => {
+        const percent = percents.map((num) => `${num}%`).join(", ");
+        return `${percent} { cursor: url(${url}), auto; }`;
+    });
+    // CSS properties with a animation type of "discrete", like `cursor`, actually
+    // switch half-way _between_ each keyframe percentage. Luckily this half-way
+    // measurement is applied _after_ the easing function is applied. So, we can
+    // force the frames to appear at exactly the % that we specify by using
+    // `timing-function` of `step-end`.
+    //
+    // https://drafts.csswg.org/web-animations-1/#discrete
+    const timingFunction = "step-end";
+    // Winamp (re)starts the animation cycle when your mouse enters an element. By
+    // default this approach would cause the animation to run continuously, even
+    // when the cursor is not visible. To match Winamp's behavior we add a
+    // `:hover` pseudo selector so that the animation only runs when the cursor is
+    // visible.
+    const pseudoSelector = ":hover";
+    // prettier-ignore
+    return `
+    @keyframes ${animationName} {
+        ${keyframes.join("\n")}
+    }
+    ${selector}${pseudoSelector} {
+        animation: ${animationName} ${ani.duration}ms ${timingFunction} infinite;
+    }
+   `;
+}
+function readAni(contents) {
+    var _a;
+    const ani = parseAni(contents);
+    const rate = (_a = ani.rate) !== null && _a !== void 0 ? _a : ani.images.map(() => ani.metadata.iDispRate);
+    const duration = sum(rate);
+    const frames = ani.images.map((image) => ({
+        url: curUrlFromByteArray(image),
+        percents: [],
+    }));
+    let elapsed = 0;
+    rate.forEach((r, i) => {
+        const frameIdx = ani.seq ? ani.seq[i] : i;
+        frames[frameIdx].percents.push((elapsed / duration) * 100);
+        elapsed += r;
+    });
+    return { duration: duration * JIFFIES_PER_MS, frames };
+}
+/* Utility Functions */
+let i = 0;
+const uniqueId = () => i++;
+export function base64FromDataArray(dataArray) {
+    return window.btoa(Array.from(dataArray)
+        .map((byte) => String.fromCharCode(byte))
+        .join(""));
+}
+function curUrlFromByteArray(arr) {
+    const base64 = base64FromDataArray(arr);
+    return `data:image/x-win-bitmap;base64,${base64}`;
+}
+function sum(values) {
+    return values.reduce((total, value) => total + value, 0);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/parser.d.ts

@@ -0,0 +1,21 @@
+type AniMetadata = {
+    cbSize: number;
+    nFrames: number;
+    nSteps: number;
+    iWidth: number;
+    iHeight: number;
+    iBitCount: number;
+    nPlanes: number;
+    iDispRate: number;
+    bfAttributes: number;
+};
+type ParsedAni = {
+    rate: number[] | null;
+    seq: number[] | null;
+    images: Uint8Array[];
+    metadata: AniMetadata;
+    artist: string | null;
+    title: string | null;
+};
+export declare function parseAni(arr: Uint8Array): ParsedAni;
+export {};

package/dist/parser.js

@@ -0,0 +1,79 @@
+import { RIFFFile } from "riff-file";
+import { unpackArray, unpackString } from "byte-data";
+const DWORD = { bits: 32, be: false, signed: false, fp: false };
+export function parseAni(arr) {
+    const riff = new RIFFFile();
+    riff.setSignature(arr);
+    const signature = riff.signature;
+    if (signature.format !== "ACON") {
+        throw new Error(`Expected format. Expected "ACON", got "${signature.format}"`);
+    }
+    // Helper function to get a chunk by chunkId and transform it if it's non-null.
+    function mapChunk(chunkId, mapper) {
+        const chunk = riff.findChunk(chunkId);
+        return chunk == null ? null : mapper(chunk);
+    }
+    function readImages(chunk, frameCount) {
+        return chunk.subChunks.slice(0, frameCount).map((c) => {
+            if (c.chunkId !== "icon") {
+                throw new Error(`Unexpected chunk type in fram: ${c.chunkId}`);
+            }
+            return arr.slice(c.chunkData.start, c.chunkData.end);
+        });
+    }
+    const metadata = mapChunk("anih", (c) => {
+        const words = unpackArray(arr, DWORD, c.chunkData.start, c.chunkData.end);
+        return {
+            cbSize: words[0],
+            nFrames: words[1],
+            nSteps: words[2],
+            iWidth: words[3],
+            iHeight: words[4],
+            iBitCount: words[5],
+            nPlanes: words[6],
+            iDispRate: words[7],
+            bfAttributes: words[8],
+        };
+    });
+    if (metadata == null) {
+        throw new Error("Did not find anih");
+    }
+    const rate = mapChunk("rate", (c) => {
+        return unpackArray(arr, DWORD, c.chunkData.start, c.chunkData.end);
+    });
+    // chunkIds are always four chars, hence the trailing space.
+    const seq = mapChunk("seq ", (c) => {
+        return unpackArray(arr, DWORD, c.chunkData.start, c.chunkData.end);
+    });
+    const lists = riff.findChunk("LIST", true);
+    const imageChunk = lists === null || lists === void 0 ? void 0 : lists.find((c) => c.format === "fram");
+    if (imageChunk == null) {
+        throw new Error("Did not find fram LIST");
+    }
+    let images = readImages(imageChunk, metadata.nFrames);
+    let title = null;
+    let artist = null;
+    const infoChunk = lists === null || lists === void 0 ? void 0 : lists.find((c) => c.format === "INFO");
+    if (infoChunk != null) {
+        infoChunk.subChunks.forEach((c) => {
+            switch (c.chunkId) {
+                case "INAM":
+                    title = unpackString(arr, c.chunkData.start, c.chunkData.end);
+                    break;
+                case "IART":
+                    artist = unpackString(arr, c.chunkData.start, c.chunkData.end);
+                    break;
+                case "LIST":
+                    // Some cursors with an artist of "Created with Take ONE 3.5 (unregisterred version)" seem to have their frames here for some reason?
+                    if (c.format === "fram") {
+                        images = readImages(c, metadata.nFrames);
+                    }
+                    break;
+                default:
+                // Unexpected subchunk
+            }
+        });
+    }
+    return { images, rate, seq, metadata, artist, title };
+}
+//# sourceMappingURL=parser.js.map

package/dist/parser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.js","sourceRoot":"","sources":["../src/parser.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "ani-cursor",
+  "version": "0.0.0-next-c2c0675",
+  "description": "Render .ani cursors as CSS animations in the browser",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "src/**/*.ts"
+  ],
+  "author": "Jordan Eldredge <jordan@jordaneldredge.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/captbaritone/webamp.git",
+    "directory": "packages/ani-cursor"
+  },
+  "bugs": {
+    "url": "https://github.com/captbaritone/webamp/issues"
+  },
+  "homepage": "https://github.com/captbaritone/webamp/tree/master/packages/ani-cursor",
+  "scripts": {
+    "build": "tsc",
+    "type-check": "tsc --noEmit",
+    "test": "jest",
+    "prepublish": "tsc"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.20.0",
+    "@swc/jest": "^0.2.24",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.10",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "byte-data": "18.1.1",
+    "riff-file": "^1.0.3"
+  },
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "dist"
+    ],
+    "testEnvironment": "jsdom",
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "transform": {
+      "^.+\\.(t|j)sx?$": [
+        "@swc/jest"
+      ]
+    }
+  }
+}

package/src/__tests__/parser.test.ts

@@ -0,0 +1,45 @@
+import fs from "fs";
+import path from "path";
+import { convertAniBinaryToCSS } from "../index.js";
+
+const LONG_BASE_64 = /([A-Za-z0-9+/=]{50})[A-Za-z0-9+/=]+/g;
+
+// Parse a `.ani` in our fixture directory and trim down the image data for use
+// in snapshot tests.
+function readPathCss(filePath: string): string {
+  const buffer = fs.readFileSync(path.join(__dirname, "./fixtures/", filePath));
+
+  return convertAniBinaryToCSS("#example", buffer).replace(
+    LONG_BASE_64,
+    "$1..."
+  );
+}
+
+// https://skins.webamp.org/skin/6e30f9e9b8f5719469809785ae5e4a1f/Super_Mario_Amp_2.wsz/
+describe("Super_Mario_Amp_2.wsz", () => {
+  test("eqslid.cur", async () => {
+    expect(readPathCss("Super_Mario_Amp_2/eqslid.cur")).toMatchSnapshot();
+  });
+  test("close.cur", async () => {
+    expect(readPathCss("Super_Mario_Amp_2/close.cur")).toMatchSnapshot();
+  });
+});
+
+// https://skins.webamp.org/skin/4308a2fc648033bf5fe7c4d56a5c8823/Green-Dimension-V2.wsz/
+describe("Green Dimension v2.wsz", () => {
+  test("eqslid.cur", async () => {
+    expect(readPathCss("Green Dimension v2/eqslid.cur")).toMatchSnapshot();
+  });
+});
+
+describe("AfterShock_Digital_2003.wsz", () => {
+  test("close.cur", async () => {
+    expect(readPathCss("AfterShock_Digital_2003/close.cur")).toMatchSnapshot();
+  });
+});
+
+describe("Edge cases", () => {
+  test("piano.ani", async () => {
+    expect(readPathCss("piano.ani")).toMatchSnapshot();
+  });
+});

package/src/index.ts

@@ -0,0 +1,97 @@
+import { parseAni } from "./parser.js";
+
+type AniCursorImage = {
+  frames: {
+    url: string;
+    percents: number[];
+  }[];
+  duration: number;
+};
+
+const JIFFIES_PER_MS = 1000 / 60;
+
+// Generate CSS for an animated cursor.
+//
+// This function returns CSS containing a set of keyframes with embedded Data
+// URIs as well as a CSS rule to the given selector.
+export function convertAniBinaryToCSS(
+  selector: string,
+  aniBinary: Uint8Array
+): string {
+  const ani = readAni(aniBinary);
+
+  const animationName = `ani-cursor-${uniqueId()}`;
+
+  const keyframes = ani.frames.map(({ url, percents }) => {
+    const percent = percents.map((num) => `${num}%`).join(", ");
+    return `${percent} { cursor: url(${url}), auto; }`;
+  });
+
+  // CSS properties with a animation type of "discrete", like `cursor`, actually
+  // switch half-way _between_ each keyframe percentage. Luckily this half-way
+  // measurement is applied _after_ the easing function is applied. So, we can
+  // force the frames to appear at exactly the % that we specify by using
+  // `timing-function` of `step-end`.
+  //
+  // https://drafts.csswg.org/web-animations-1/#discrete
+  const timingFunction = "step-end";
+
+  // Winamp (re)starts the animation cycle when your mouse enters an element. By
+  // default this approach would cause the animation to run continuously, even
+  // when the cursor is not visible. To match Winamp's behavior we add a
+  // `:hover` pseudo selector so that the animation only runs when the cursor is
+  // visible.
+  const pseudoSelector = ":hover";
+
+  // prettier-ignore
+  return `
+    @keyframes ${animationName} {
+        ${keyframes.join("\n")}
+    }
+    ${selector}${pseudoSelector} {
+        animation: ${animationName} ${ani.duration}ms ${timingFunction} infinite;
+    }
+   `;
+}
+
+function readAni(contents: Uint8Array): AniCursorImage {
+  const ani = parseAni(contents);
+  const rate = ani.rate ?? ani.images.map(() => ani.metadata.iDispRate);
+  const duration = sum(rate);
+
+  const frames = ani.images.map((image) => ({
+    url: curUrlFromByteArray(image),
+    percents: [] as number[],
+  }));
+
+  let elapsed = 0;
+  rate.forEach((r, i) => {
+    const frameIdx = ani.seq ? ani.seq[i] : i;
+    frames[frameIdx].percents.push((elapsed / duration) * 100);
+    elapsed += r;
+  });
+
+  return { duration: duration * JIFFIES_PER_MS, frames };
+}
+
+/* Utility Functions */
+
+let i = 0;
+const uniqueId = () => i++;
+
+export function base64FromDataArray(dataArray: Uint8Array): string {
+  return window.btoa(
+    Array.from(dataArray)
+      .map((byte) => String.fromCharCode(byte))
+      .join("")
+  );
+}
+
+function curUrlFromByteArray(arr: Uint8Array) {
+  const base64 = base64FromDataArray(arr);
+  return `data:image/x-win-bitmap;base64,${base64}`;
+}
+
+function sum(values: number[]): number {
+  return values.reduce((total, value) => total + value, 0);
+}

package/src/parser.ts

@@ -0,0 +1,127 @@
+import { RIFFFile } from "riff-file";
+import { unpackArray, unpackString } from "byte-data";
+
+type Chunk = {
+  format: string;
+  chunkId: string;
+  chunkData: {
+    start: number;
+    end: number;
+  };
+  subChunks: Chunk[];
+};
+
+// https://www.informit.com/articles/article.aspx?p=1189080&seqNum=3
+type AniMetadata = {
+  cbSize: number; // Data structure size (in bytes)
+  nFrames: number; // Number of images (also known as frames) stored in the file
+  nSteps: number; // Number of frames to be displayed before the animation repeats
+  iWidth: number; // Width of frame (in pixels)
+  iHeight: number; // Height of frame (in pixels)
+  iBitCount: number; // Number of bits per pixel
+  nPlanes: number; // Number of color planes
+  iDispRate: number; // Default frame display rate (measured in 1/60th-of-a-second units)
+  bfAttributes: number; // ANI attribute bit flags
+};
+
+type ParsedAni = {
+  rate: number[] | null;
+  seq: number[] | null;
+  images: Uint8Array[];
+  metadata: AniMetadata;
+  artist: string | null;
+  title: string | null;
+};
+
+const DWORD = { bits: 32, be: false, signed: false, fp: false };
+
+export function parseAni(arr: Uint8Array): ParsedAni {
+  const riff = new RIFFFile();
+
+  riff.setSignature(arr);
+
+  const signature = riff.signature as Chunk;
+  if (signature.format !== "ACON") {
+    throw new Error(
+      `Expected format. Expected "ACON", got "${signature.format}"`
+    );
+  }
+
+  // Helper function to get a chunk by chunkId and transform it if it's non-null.
+  function mapChunk<T>(chunkId: string, mapper: (chunk: Chunk) => T): T | null {
+    const chunk = riff.findChunk(chunkId) as Chunk | null;
+    return chunk == null ? null : mapper(chunk);
+  }
+
+  function readImages(chunk: Chunk, frameCount: number): Uint8Array[] {
+    return chunk.subChunks.slice(0, frameCount).map((c) => {
+      if (c.chunkId !== "icon") {
+        throw new Error(`Unexpected chunk type in fram: ${c.chunkId}`);
+      }
+      return arr.slice(c.chunkData.start, c.chunkData.end);
+    });
+  }
+
+  const metadata = mapChunk("anih", (c) => {
+    const words = unpackArray(arr, DWORD, c.chunkData.start, c.chunkData.end);
+    return {
+      cbSize: words[0],
+      nFrames: words[1],
+      nSteps: words[2],
+      iWidth: words[3],
+      iHeight: words[4],
+      iBitCount: words[5],
+      nPlanes: words[6],
+      iDispRate: words[7],
+      bfAttributes: words[8],
+    };
+  });
+
+  if (metadata == null) {
+    throw new Error("Did not find anih");
+  }
+
+  const rate = mapChunk("rate", (c) => {
+    return unpackArray(arr, DWORD, c.chunkData.start, c.chunkData.end);
+  });
+  // chunkIds are always four chars, hence the trailing space.
+  const seq = mapChunk("seq ", (c) => {
+    return unpackArray(arr, DWORD, c.chunkData.start, c.chunkData.end);
+  });
+
+  const lists = riff.findChunk("LIST", true) as Chunk[] | null;
+  const imageChunk = lists?.find((c) => c.format === "fram");
+  if (imageChunk == null) {
+    throw new Error("Did not find fram LIST");
+  }
+
+  let images = readImages(imageChunk, metadata.nFrames);
+
+  let title = null;
+  let artist = null;
+
+  const infoChunk = lists?.find((c) => c.format === "INFO");
+  if (infoChunk != null) {
+    infoChunk.subChunks.forEach((c) => {
+      switch (c.chunkId) {
+        case "INAM":
+          title = unpackString(arr, c.chunkData.start, c.chunkData.end);
+          break;
+        case "IART":
+          artist = unpackString(arr, c.chunkData.start, c.chunkData.end);
+          break;
+        case "LIST":
+          // Some cursors with an artist of "Created with Take ONE 3.5 (unregisterred version)" seem to have their frames here for some reason?
+          if (c.format === "fram") {
+            images = readImages(c, metadata.nFrames);
+          }
+          break;
+
+        default:
+        // Unexpected subchunk
+      }
+    });
+  }
+
+  return { images, rate, seq, metadata, artist, title };
+}