Only support <=128px cursors

components/pages/Metadata.tsx

@@ -1,7 +1,10 @@
 import { extname } from "path";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import Head from "next/head";
-import { getFirstAniImage } from "components/system/Files/FileEntry/functions";
+import {
+  getFirstAniImage,
+  getLargestIcon,
+} from "components/system/Files/FileEntry/functions";
 import { useFileSystem } from "contexts/fileSystem";
 import { useProcesses } from "contexts/process";
 import { useSession } from "contexts/session";
@@ -50,10 +53,15 @@ const Metadata: FC = () => {
   const getCursor = useCallback(
     async (path: string) => {
       const imageBuffer = await readFile(path);
-      const image =
-        extname(path) === ".ani"
-          ? await getFirstAniImage(imageBuffer)
-          : imageBuffer;
+      let image: Buffer | undefined = imageBuffer;
+
+      if (extname(path) === ".ani") {
+        image = await getFirstAniImage(imageBuffer);
+      } else {
+        const largestIcon = await getLargestIcon(imageBuffer, 128);
+
+        if (largestIcon) return largestIcon;
+      }
 
       return image ? imageToBufferUrl(path, image) : "";
     },

components/system/Files/FileEntry/functions.ts

@@ -385,6 +385,30 @@ export const getFirstAniImage = async (
   return undefined;
 };
 
+export const getLargestIcon = async (
+  imageBuffer: Buffer,
+  maxSize: number
+): Promise<string> => {
+  try {
+    const { default: icoData } = await import("decode-ico");
+    const [icon] = icoData(imageBuffer)
+      .filter(({ width }) => width <= maxSize)
+      .sort((a, b) => b.width - a.width);
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d", {
+      desynchronized: true,
+    });
+
+    canvas.width = icon.width;
+    canvas.height = icon.height;
+    context?.putImageData(icon as unknown as ImageData, 0, 0);
+
+    return canvas.toDataURL();
+  } catch {
+    return "";
+  }
+};
+
 export const getInfoWithExtension = (
   fs: FSModule,
   path: string,

package.json

@@ -46,6 +46,7 @@
     "ani-cursor": "^0.0.5",
     "browserfs": "https://github.com/jvilk/BrowserFS.git#a96aa2d",
     "butterchurn-presets": "^3.0.0-beta.4",
+    "decode-ico": "^0.4.1",
     "dompurify": "^3.0.6",
     "fflate": "^0.8.1",
     "file-type": "^18.7.0",

public/CREDITS.md

@@ -29,6 +29,7 @@ This project is greatly augmented by code from the open source community. Thank
 - [isomorphic-git](https://github.com/isomorphic-git/isomorphic-git)
 - [ini](https://github.com/npm/ini)
 - [ani-cursor](https://github.com/captbaritone/webamp/tree/master/packages/ani-cursor)
+- [decode-ico](https://github.com/LinusU/decode-ico)
 - [gif.js](https://github.com/jnordberg/gif.js)
 - [multiformats](https://github.com/multiformats/multiformats)
 - [file-type](https://github.com/sindresorhus/file-type)

yarn.lock

@@ -328,6 +328,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@canvas/image-data@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@canvas/image-data/-/image-data-1.0.0.tgz#3bd2cd856e13fc9e2c25feff360a4056857b0367"
+  integrity sha512-BxOqI5LgsIQP1odU5KMwV9yoijleOPzHL18/YvNqF9KFSGF2K/DLlYAbDQsWqd/1nbaFuSkYD/191dpMtNh4vw==
+
 "@cowasm/memfs@^3.5.1":
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/@cowasm/memfs/-/memfs-3.5.1.tgz#8846077117ff300fe3edc41e8657184c01437c62"
@@ -2508,6 +2513,23 @@ decimal.js@^10.4.2:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
+decode-bmp@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/decode-bmp/-/decode-bmp-0.2.1.tgz#cec3e0197ec3b6c60f02220f50e8757030ff2427"
+  integrity sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA==
+  dependencies:
+    "@canvas/image-data" "^1.0.0"
+    to-data-view "^1.1.0"
+
+decode-ico@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/decode-ico/-/decode-ico-0.4.1.tgz#e0f7373081532c7b8495bd51fb225d354e14de25"
+  integrity sha512-69NZfbKIzux1vBOd31al3XnMnH+2mqDhEgLdpygErm4d60N+UwA5Sq5WFjmEDQzumgB9fElojGwWG0vybVfFmA==
+  dependencies:
+    "@canvas/image-data" "^1.0.0"
+    decode-bmp "^0.2.0"
+    to-data-view "^1.1.0"
+
 decompress-response@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
@@ -7194,6 +7216,11 @@ tmpl@1.0.5:
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
   integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
 
+to-data-view@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/to-data-view/-/to-data-view-1.1.0.tgz#08d6492b0b8deb9b29bdf1f61c23eadfa8994d00"
+  integrity sha512-1eAdufMg6mwgmlojAx3QeMnzB/BTVp7Tbndi3U7ftcT2zCZadjxkkmLmd97zmaxWi+sgGcgWrokmpEoy0Dn0vQ==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"