mirror of https://github.com/VERT-sh/VERT.git
feat: .icns support
This commit is contained in:
not-nullptr
parent
4d616a9bfa
commit
8616651d2a
7
bun.lock
7
bun.lock
|
|
@ -7,6 +7,7 @@
|
|||
"@bjorn3/browser_wasi_shim": "^0.4.1",
|
||||
"@ffmpeg/ffmpeg": "^0.12.15",
|
||||
"@ffmpeg/util": "^0.12.2",
|
||||
"@fiahfy/icns": "^0.0.7",
|
||||
"@fontsource/azeret-mono": "^5.1.1",
|
||||
"@fontsource/lexend": "^5.1.2",
|
||||
"@fontsource/radio-canada-big": "^5.1.1",
|
||||
|
|
@ -120,6 +121,10 @@
|
|||
|
||||
"@ffmpeg/util": ["@ffmpeg/util@0.12.2", "", {}, "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw=="],
|
||||
|
||||
"@fiahfy/icns": ["@fiahfy/icns@0.0.7", "", { "dependencies": { "@fiahfy/packbits": "^0.0.6", "pngjs": "^6.0.0" } }, "sha512-0apAtbUXTU3Opy/Z4h69o53voBa+am8FmdZauyagUMskAVYN1a5yIRk48Sf+tEdBLlefbvqLWPJ4pxr/Y/QtTg=="],
|
||||
|
||||
"@fiahfy/packbits": ["@fiahfy/packbits@0.0.6", "", {}, "sha512-XuhF/edg+iIvXjkCWgfj6fWtRi/KrEPg2ILXj1l86EN4EssuOiPcLKgkMDr9cL8jTGtVd/MKUWW6Y0/ZVf1PGA=="],
|
||||
|
||||
"@fontsource/azeret-mono": ["@fontsource/azeret-mono@5.2.5", "", {}, "sha512-GRzKYuD1CVOS6Jag/ohDCycLV9a3TK6y1T73A8q0JoDZTVO85DNapqLK+SV2gYtTFldahNAlDSIaizv9MLhR1A=="],
|
||||
|
||||
"@fontsource/lexend": ["@fontsource/lexend@5.2.5", "", {}, "sha512-Mv2XQ+B4ek2lNCGRW5ddLTW8T3xTT17AnCk1IETpoef57XHz+e42fUfLAYMrmiJLOGpR44qnyJ5S6D323A5EIw=="],
|
||||
|
|
@ -608,6 +613,8 @@
|
|||
|
||||
"pirates": ["pirates@4.0.6", "", {}, "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg=="],
|
||||
|
||||
"pngjs": ["pngjs@6.0.0", "", {}, "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg=="],
|
||||
|
||||
"postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
|
||||
|
||||
"postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
"@bjorn3/browser_wasi_shim": "^0.4.1",
|
||||
"@ffmpeg/ffmpeg": "^0.12.15",
|
||||
"@ffmpeg/util": "^0.12.2",
|
||||
"@fiahfy/icns": "^0.0.7",
|
||||
"@fontsource/azeret-mono": "^5.1.1",
|
||||
"@fontsource/lexend": "^5.1.2",
|
||||
"@fontsource/radio-canada-big": "^5.1.1",
|
||||
|
|
|
|||
94
src/app.html
94
src/app.html
|
|
@ -1,47 +1,47 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="apple-touch-icon" href="%sveltekit.assets%/favicon.png">
|
||||
|
||||
<link rel="apple-touch-startup-image" href="%sveltekit.assets%/lettermark.jpg">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
%sveltekit.head%
|
||||
<script>
|
||||
(function () {
|
||||
// Apply theme before DOM is loaded
|
||||
let theme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches;
|
||||
console.log(
|
||||
`Theme: ${theme || "N/A"}, prefers dark: ${prefersDark}`,
|
||||
);
|
||||
|
||||
if (theme !== "light" && theme !== "dark") {
|
||||
console.log("Invalid theme, setting to default");
|
||||
theme = prefersDark ? "dark" : "light";
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
console.log(`Applying theme: ${theme}`);
|
||||
document.documentElement.classList.add(theme);
|
||||
|
||||
// Lock dark reader if it's set to dark mode
|
||||
if (theme === "dark") {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="apple-touch-icon" href="%sveltekit.assets%/favicon.png">
|
||||
|
||||
<link rel="apple-touch-startup-image" href="%sveltekit.assets%/lettermark.jpg">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
%sveltekit.head%
|
||||
<script>
|
||||
(function () {
|
||||
// Apply theme before DOM is loaded
|
||||
let theme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches;
|
||||
console.log(
|
||||
`Theme: ${theme || "N/A"}, prefers dark: ${prefersDark}`,
|
||||
);
|
||||
|
||||
if (theme !== "light" && theme !== "dark") {
|
||||
console.log("Invalid theme, setting to default");
|
||||
theme = prefersDark ? "dark" : "light";
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
console.log(`Applying theme: ${theme}`);
|
||||
document.documentElement.classList.add(theme);
|
||||
|
||||
// Lock dark reader if it's set to dark mode
|
||||
if (theme === "dark") {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,197 +1,197 @@
|
|||
<script lang="ts">
|
||||
import { browser } from "$app/environment";
|
||||
import { page } from "$app/state";
|
||||
import { duration, fade } from "$lib/animation";
|
||||
import {
|
||||
effects,
|
||||
files,
|
||||
goingLeft,
|
||||
setTheme,
|
||||
} from "$lib/store/index.svelte";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
InfoIcon,
|
||||
MoonIcon,
|
||||
RefreshCw,
|
||||
SettingsIcon,
|
||||
SunIcon,
|
||||
UploadIcon,
|
||||
} from "lucide-svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import Panel from "../../visual/Panel.svelte";
|
||||
import Logo from "../../visual/svg/Logo.svelte";
|
||||
import { beforeNavigate } from "$app/navigation";
|
||||
|
||||
const items = $derived<
|
||||
{
|
||||
name: string;
|
||||
url: string;
|
||||
activeMatch: (pathname: string) => boolean;
|
||||
icon: any;
|
||||
badge?: number;
|
||||
}[]
|
||||
>([
|
||||
{
|
||||
name: "Upload",
|
||||
url: "/",
|
||||
activeMatch: (pathname) => pathname === "/",
|
||||
icon: UploadIcon,
|
||||
},
|
||||
{
|
||||
name: "Convert",
|
||||
url: "/convert/",
|
||||
activeMatch: (pathname) =>
|
||||
pathname === "/convert/" || pathname === "/convert",
|
||||
icon: RefreshCw,
|
||||
badge: files.files.length,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
url: "/settings/",
|
||||
activeMatch: (pathname) => pathname.startsWith("/settings"),
|
||||
icon: SettingsIcon,
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
url: "/about/",
|
||||
activeMatch: (pathname) => pathname.startsWith("/about"),
|
||||
icon: InfoIcon,
|
||||
},
|
||||
]);
|
||||
|
||||
let links = $state<HTMLAnchorElement[]>([]);
|
||||
let container = $state<HTMLDivElement>();
|
||||
let containerRect = $derived(container?.getBoundingClientRect());
|
||||
$effect(() => {
|
||||
$inspect(containerRect);
|
||||
});
|
||||
|
||||
const linkRects = $derived(links.map((l) => l.getBoundingClientRect()));
|
||||
|
||||
const selectedIndex = $derived(
|
||||
items.findIndex((i) => i.activeMatch(page.url.pathname)),
|
||||
);
|
||||
|
||||
const isSecretPage = $derived(selectedIndex === -1);
|
||||
|
||||
beforeNavigate((e) => {
|
||||
const oldIndex = items.findIndex((i) =>
|
||||
i.activeMatch(e.from?.url.pathname || ""),
|
||||
);
|
||||
const newIndex = items.findIndex((i) =>
|
||||
i.activeMatch(e.to?.url.pathname || ""),
|
||||
);
|
||||
if (newIndex < oldIndex) {
|
||||
goingLeft.set(true);
|
||||
} else {
|
||||
goingLeft.set(false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#snippet link(item: (typeof items)[0], index: number)}
|
||||
{@const Icon = item.icon}
|
||||
<a
|
||||
bind:this={links[index]}
|
||||
href={item.url}
|
||||
aria-label={item.name}
|
||||
class={clsx(
|
||||
"min-w-16 md:min-w-32 h-full relative z-10 rounded-xl flex flex-1 items-center justify-center gap-3 overflow-hidden",
|
||||
{
|
||||
"bg-panel-highlight":
|
||||
item.activeMatch(page.url.pathname) && !browser,
|
||||
},
|
||||
)}
|
||||
draggable={false}
|
||||
>
|
||||
<div class="grid grid-rows-1 grid-cols-1">
|
||||
{#key item.name}
|
||||
<div
|
||||
class="w-full row-start-1 col-start-1 h-full flex items-center justify-center gap-3"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
out:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
<div class="relative">
|
||||
<Icon />
|
||||
{#if item.badge}
|
||||
<div
|
||||
class="absolute overflow-hidden grid grid-rows-1 grid-cols-1 -top-1 font-display -right-1 w-fit px-1.5 h-4 rounded-full bg-badge text-on-badge font-medium"
|
||||
style="font-size: 0.7rem;"
|
||||
transition:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
{#key item.badge}
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full col-start-1 row-start-1"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
out:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="font-medium hidden md:flex">
|
||||
{item.name}
|
||||
</p>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
<div bind:this={container}>
|
||||
<Panel class="max-w-[778px] w-screen h-20 flex items-center gap-3 relative">
|
||||
{@const linkRect = linkRects.at(selectedIndex) || linkRects[0]}
|
||||
{#if linkRect}
|
||||
<div
|
||||
class="absolute bg-panel-highlight rounded-xl"
|
||||
style="width: {linkRect.width}px; height: {linkRect.height}px; top: {linkRect.top -
|
||||
(containerRect?.top || 0)}px; left: {linkRect.left -
|
||||
(containerRect?.left || 0)}px; opacity: {isSecretPage
|
||||
? 0
|
||||
: 1}; {$effects
|
||||
? `transition: left var(--transition) ${duration}ms, top var(--transition) ${duration}ms, opacity var(--transition) ${duration}ms;`
|
||||
: ''}"
|
||||
></div>
|
||||
{/if}
|
||||
<a
|
||||
class="w-28 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
|
||||
href="/"
|
||||
>
|
||||
<div class="h-5 w-full">
|
||||
<Logo />
|
||||
</div>
|
||||
</a>
|
||||
{#each items as item, i (item.url)}
|
||||
{@render link(item, i)}
|
||||
{/each}
|
||||
<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
|
||||
<button
|
||||
onclick={() => {
|
||||
const isDark =
|
||||
document.documentElement.classList.contains("dark");
|
||||
setTheme(isDark ? "light" : "dark");
|
||||
}}
|
||||
class="w-14 h-full items-center justify-center hidden md:flex"
|
||||
>
|
||||
<SunIcon class="dynadark:hidden block" />
|
||||
<MoonIcon class="dynadark:block hidden" />
|
||||
</button>
|
||||
</Panel>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import { browser } from "$app/environment";
|
||||
import { page } from "$app/state";
|
||||
import { duration, fade } from "$lib/animation";
|
||||
import {
|
||||
effects,
|
||||
files,
|
||||
goingLeft,
|
||||
setTheme,
|
||||
} from "$lib/store/index.svelte";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
InfoIcon,
|
||||
MoonIcon,
|
||||
RefreshCw,
|
||||
SettingsIcon,
|
||||
SunIcon,
|
||||
UploadIcon,
|
||||
} from "lucide-svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import Panel from "../../visual/Panel.svelte";
|
||||
import Logo from "../../visual/svg/Logo.svelte";
|
||||
import { beforeNavigate } from "$app/navigation";
|
||||
|
||||
const items = $derived<
|
||||
{
|
||||
name: string;
|
||||
url: string;
|
||||
activeMatch: (pathname: string) => boolean;
|
||||
icon: any;
|
||||
badge?: number;
|
||||
}[]
|
||||
>([
|
||||
{
|
||||
name: "Upload",
|
||||
url: "/",
|
||||
activeMatch: (pathname) => pathname === "/",
|
||||
icon: UploadIcon,
|
||||
},
|
||||
{
|
||||
name: "Convert",
|
||||
url: "/convert/",
|
||||
activeMatch: (pathname) =>
|
||||
pathname === "/convert/" || pathname === "/convert",
|
||||
icon: RefreshCw,
|
||||
badge: files.files.length,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
url: "/settings/",
|
||||
activeMatch: (pathname) => pathname.startsWith("/settings"),
|
||||
icon: SettingsIcon,
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
url: "/about/",
|
||||
activeMatch: (pathname) => pathname.startsWith("/about"),
|
||||
icon: InfoIcon,
|
||||
},
|
||||
]);
|
||||
|
||||
let links = $state<HTMLAnchorElement[]>([]);
|
||||
let container = $state<HTMLDivElement>();
|
||||
let containerRect = $derived(container?.getBoundingClientRect());
|
||||
$effect(() => {
|
||||
$inspect(containerRect);
|
||||
});
|
||||
|
||||
const linkRects = $derived(links.map((l) => l.getBoundingClientRect()));
|
||||
|
||||
const selectedIndex = $derived(
|
||||
items.findIndex((i) => i.activeMatch(page.url.pathname)),
|
||||
);
|
||||
|
||||
const isSecretPage = $derived(selectedIndex === -1);
|
||||
|
||||
beforeNavigate((e) => {
|
||||
const oldIndex = items.findIndex((i) =>
|
||||
i.activeMatch(e.from?.url.pathname || ""),
|
||||
);
|
||||
const newIndex = items.findIndex((i) =>
|
||||
i.activeMatch(e.to?.url.pathname || ""),
|
||||
);
|
||||
if (newIndex < oldIndex) {
|
||||
goingLeft.set(true);
|
||||
} else {
|
||||
goingLeft.set(false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#snippet link(item: (typeof items)[0], index: number)}
|
||||
{@const Icon = item.icon}
|
||||
<a
|
||||
bind:this={links[index]}
|
||||
href={item.url}
|
||||
aria-label={item.name}
|
||||
class={clsx(
|
||||
"min-w-16 md:min-w-32 h-full relative z-10 rounded-xl flex flex-1 items-center justify-center gap-3 overflow-hidden",
|
||||
{
|
||||
"bg-panel-highlight":
|
||||
item.activeMatch(page.url.pathname) && !browser,
|
||||
},
|
||||
)}
|
||||
draggable={false}
|
||||
>
|
||||
<div class="grid grid-rows-1 grid-cols-1">
|
||||
{#key item.name}
|
||||
<div
|
||||
class="w-full row-start-1 col-start-1 h-full flex items-center justify-center gap-3"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
out:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
<div class="relative">
|
||||
<Icon />
|
||||
{#if item.badge}
|
||||
<div
|
||||
class="absolute overflow-hidden grid grid-rows-1 grid-cols-1 -top-1 font-display -right-1 w-fit px-1.5 h-4 rounded-full bg-badge text-on-badge font-medium"
|
||||
style="font-size: 0.7rem;"
|
||||
transition:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
{#key item.badge}
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full col-start-1 row-start-1"
|
||||
in:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
out:fade={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="font-medium hidden md:flex">
|
||||
{item.name}
|
||||
</p>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
<div bind:this={container}>
|
||||
<Panel class="max-w-[778px] w-screen h-20 flex items-center gap-3 relative">
|
||||
{@const linkRect = linkRects.at(selectedIndex) || linkRects[0]}
|
||||
{#if linkRect}
|
||||
<div
|
||||
class="absolute bg-panel-highlight rounded-xl"
|
||||
style="width: {linkRect.width}px; height: {linkRect.height}px; top: {linkRect.top -
|
||||
(containerRect?.top || 0)}px; left: {linkRect.left -
|
||||
(containerRect?.left || 0)}px; opacity: {isSecretPage
|
||||
? 0
|
||||
: 1}; {$effects
|
||||
? `transition: left var(--transition) ${duration}ms, top var(--transition) ${duration}ms, opacity var(--transition) ${duration}ms;`
|
||||
: ''}"
|
||||
></div>
|
||||
{/if}
|
||||
<a
|
||||
class="w-28 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
|
||||
href="/"
|
||||
>
|
||||
<div class="h-5 w-full">
|
||||
<Logo />
|
||||
</div>
|
||||
</a>
|
||||
{#each items as item, i (item.url)}
|
||||
{@render link(item, i)}
|
||||
{/each}
|
||||
<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
|
||||
<button
|
||||
onclick={() => {
|
||||
const isDark =
|
||||
document.documentElement.classList.contains("dark");
|
||||
setTheme(isDark ? "light" : "dark");
|
||||
}}
|
||||
class="w-14 h-full items-center justify-center hidden md:flex"
|
||||
>
|
||||
<SunIcon class="dynadark:hidden block" />
|
||||
<MoonIcon class="dynadark:block hidden" />
|
||||
</button>
|
||||
</Panel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import type { Converter } from "./converter.svelte";
|
||||
import { FFmpegConverter } from "./ffmpeg.svelte";
|
||||
import { PandocConverter } from "./pandoc.svelte";
|
||||
import { VertdConverter } from "./vertd.svelte";
|
||||
|
|
|
|||
|
|
@ -1,150 +1,150 @@
|
|||
// THIS CODE IS FROM https://github.com/captbaritone/webamp/blob/15b0312cb794973a0e615d894df942452e920c36/packages/ani-cursor/src/parser.ts
|
||||
// LICENSED UNDER MIT. (c) Jordan Eldredge and Webamp contributors
|
||||
|
||||
// this code is ripped from their project because i didn't want to
|
||||
// re-invent the wheel, BUT the library they provide (ani-cursor)
|
||||
// doesn't expose the internals.
|
||||
|
||||
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 };
|
||||
}
|
||||
// THIS CODE IS FROM https://github.com/captbaritone/webamp/blob/15b0312cb794973a0e615d894df942452e920c36/packages/ani-cursor/src/parser.ts
|
||||
// LICENSED UNDER MIT. (c) Jordan Eldredge and Webamp contributors
|
||||
|
||||
// this code is ripped from their project because i didn't want to
|
||||
// re-invent the wheel, BUT the library they provide (ani-cursor)
|
||||
// doesn't expose the internals.
|
||||
|
||||
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 };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import { VertFile } from "./file.svelte";
|
||||
|
||||
interface ConvertMessage {
|
||||
type: "convert";
|
||||
input: VertFile;
|
||||
to: string;
|
||||
compression: number | null;
|
||||
}
|
||||
|
||||
interface FinishedMessage {
|
||||
type: "finished";
|
||||
output: ArrayBufferLike;
|
||||
zip?: boolean;
|
||||
}
|
||||
|
||||
interface LoadedMessage {
|
||||
type: "loaded";
|
||||
}
|
||||
|
||||
interface ErrorMessage {
|
||||
type: "error";
|
||||
error: string;
|
||||
}
|
||||
|
||||
export type WorkerMessage = (
|
||||
| ConvertMessage
|
||||
| FinishedMessage
|
||||
| LoadedMessage
|
||||
| ErrorMessage
|
||||
) & {
|
||||
id: number;
|
||||
};
|
||||
import { VertFile } from "./file.svelte";
|
||||
|
||||
interface ConvertMessage {
|
||||
type: "convert";
|
||||
input: VertFile;
|
||||
to: string;
|
||||
compression: number | null;
|
||||
}
|
||||
|
||||
interface FinishedMessage {
|
||||
type: "finished";
|
||||
output: ArrayBufferLike;
|
||||
zip?: boolean;
|
||||
}
|
||||
|
||||
interface LoadedMessage {
|
||||
type: "loaded";
|
||||
}
|
||||
|
||||
interface ErrorMessage {
|
||||
type: "error";
|
||||
error: string;
|
||||
}
|
||||
|
||||
export type WorkerMessage = (
|
||||
| ConvertMessage
|
||||
| FinishedMessage
|
||||
| LoadedMessage
|
||||
| ErrorMessage
|
||||
) & {
|
||||
id: number;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,278 +1,284 @@
|
|||
import Vips from "wasm-vips";
|
||||
import {
|
||||
initializeImageMagick,
|
||||
MagickFormat,
|
||||
MagickImage,
|
||||
MagickImageCollection,
|
||||
MagickReadSettings,
|
||||
type IMagickImage,
|
||||
} from "@imagemagick/magick-wasm";
|
||||
import { makeZip } from "client-zip";
|
||||
import wasm from "@imagemagick/magick-wasm/magick.wasm?url";
|
||||
import { parseAni } from "$lib/parse/ani";
|
||||
|
||||
const vipsPromise = Vips({
|
||||
dynamicLibraries: [],
|
||||
});
|
||||
|
||||
const magickPromise = initializeImageMagick(new URL(wasm, import.meta.url));
|
||||
|
||||
const magickRequiredFormats = [
|
||||
".dng",
|
||||
".heic",
|
||||
".ico",
|
||||
".cur",
|
||||
".ani",
|
||||
".cr2",
|
||||
".nef",
|
||||
];
|
||||
const unsupportedFrom: string[] = [];
|
||||
const unsupportedTo = [...magickRequiredFormats];
|
||||
|
||||
vipsPromise
|
||||
.then(() => {
|
||||
postMessage({ type: "loaded" });
|
||||
})
|
||||
.catch((error) => {
|
||||
postMessage({ type: "error", error });
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const handleMessage = async (message: any): Promise<any> => {
|
||||
const vips = await vipsPromise;
|
||||
switch (message.type) {
|
||||
case "convert": {
|
||||
if (!message.to.startsWith(".")) message.to = `.${message.to}`;
|
||||
console.log(message);
|
||||
if (unsupportedFrom.includes(message.input.from)) {
|
||||
return {
|
||||
type: "error",
|
||||
error: `Unsupported input format ${message.input.from}`,
|
||||
};
|
||||
}
|
||||
|
||||
if (unsupportedTo.includes(message.to)) {
|
||||
return {
|
||||
type: "error",
|
||||
error: `Unsupported output format ${message.to}`,
|
||||
};
|
||||
}
|
||||
|
||||
const buffer = await message.input.file.arrayBuffer();
|
||||
if (
|
||||
magickRequiredFormats.includes(message.input.from) ||
|
||||
magickRequiredFormats.includes(message.to)
|
||||
) {
|
||||
// only wait when we need to
|
||||
await magickPromise;
|
||||
|
||||
// special ico handling to split them all into separate images
|
||||
if (message.input.from === ".ico") {
|
||||
const imgs = MagickImageCollection.create();
|
||||
|
||||
while (true) {
|
||||
try {
|
||||
const img = MagickImage.create(
|
||||
new Uint8Array(buffer),
|
||||
new MagickReadSettings({
|
||||
format: MagickFormat.Ico,
|
||||
frameIndex: imgs.length,
|
||||
}),
|
||||
);
|
||||
imgs.push(img);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
} catch (_) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (imgs.length === 0) {
|
||||
return {
|
||||
type: "error",
|
||||
error: `Failed to read ICO -- no images found inside?`,
|
||||
};
|
||||
}
|
||||
|
||||
const convertedImgs: Uint8Array[] = [];
|
||||
await Promise.all(
|
||||
imgs.map(async (img, i) => {
|
||||
const output = await magickConvert(img, message.to);
|
||||
convertedImgs[i] = output;
|
||||
}),
|
||||
);
|
||||
|
||||
const zip = makeZip(
|
||||
convertedImgs.map(
|
||||
(img, i) =>
|
||||
new File(
|
||||
[img],
|
||||
`image${i}.${message.to.slice(1)}`,
|
||||
),
|
||||
),
|
||||
"images.zip",
|
||||
);
|
||||
|
||||
// read the ReadableStream to the end
|
||||
const zipBytes = await readToEnd(zip.getReader());
|
||||
|
||||
imgs.dispose();
|
||||
|
||||
return {
|
||||
type: "finished",
|
||||
output: zipBytes,
|
||||
zip: true,
|
||||
};
|
||||
} else if (message.input.from === ".ani") {
|
||||
console.log("Parsing ANI file");
|
||||
try {
|
||||
const parsedAni = parseAni(new Uint8Array(buffer));
|
||||
const files: File[] = [];
|
||||
await Promise.all(
|
||||
parsedAni.images.map(async (img, i) => {
|
||||
const blob = await magickConvert(
|
||||
MagickImage.create(
|
||||
img,
|
||||
new MagickReadSettings({
|
||||
format: MagickFormat.Ico,
|
||||
}),
|
||||
),
|
||||
message.to,
|
||||
);
|
||||
files.push(
|
||||
new File([blob], `image${i}${message.to}`),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const zip = makeZip(files, "images.zip");
|
||||
const zipBytes = await readToEnd(zip.getReader());
|
||||
|
||||
return {
|
||||
type: "finished",
|
||||
output: zipBytes,
|
||||
zip: true,
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(message.input.from);
|
||||
|
||||
const img = MagickImage.create(
|
||||
new Uint8Array(buffer),
|
||||
new MagickReadSettings({
|
||||
format: message.input.from
|
||||
.slice(1)
|
||||
.toUpperCase() as MagickFormat,
|
||||
}),
|
||||
);
|
||||
|
||||
const converted = await magickConvert(img, message.to);
|
||||
|
||||
return {
|
||||
type: "finished",
|
||||
output: converted,
|
||||
};
|
||||
}
|
||||
|
||||
let image = vips.Image.newFromBuffer(buffer, "");
|
||||
|
||||
// check if animated image & keep it animated when converting
|
||||
if (image.getTypeof("n-pages") > 0) {
|
||||
image = vips.Image.newFromBuffer(buffer, "[n=-1]");
|
||||
}
|
||||
|
||||
const opts: { [key: string]: string } = {};
|
||||
if (typeof message.compression !== "undefined") {
|
||||
opts["Q"] = Math.min(100, message.compression + 1).toString();
|
||||
}
|
||||
|
||||
const output = image.writeToBuffer(message.to, opts);
|
||||
image.delete();
|
||||
return {
|
||||
type: "finished",
|
||||
output: output.buffer,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const readToEnd = async (reader: ReadableStreamDefaultReader<Uint8Array>) => {
|
||||
const chunks: Uint8Array[] = [];
|
||||
let done = false;
|
||||
while (!done) {
|
||||
const { value, done: d } = await reader.read();
|
||||
if (value) chunks.push(value);
|
||||
done = d;
|
||||
}
|
||||
const blob = new Blob(chunks, { type: "application/zip" });
|
||||
const arrayBuffer = await blob.arrayBuffer();
|
||||
return new Uint8Array(arrayBuffer);
|
||||
};
|
||||
|
||||
const magickToBlob = async (img: IMagickImage): Promise<Blob> => {
|
||||
const canvas = new OffscreenCanvas(img.width, img.height);
|
||||
return new Promise<Blob>((resolve, reject) =>
|
||||
img.getPixels(async (p) => {
|
||||
const area = p.getArea(0, 0, img.width, img.height);
|
||||
const chunkSize = img.hasAlpha ? 4 : 3;
|
||||
const chunks = Math.ceil(area.length / chunkSize);
|
||||
const data = new Uint8ClampedArray(chunks * 4);
|
||||
|
||||
for (let j = 0, k = 0; j < area.length; j += chunkSize, k += 4) {
|
||||
data[k] = area[j];
|
||||
data[k + 1] = area[j + 1];
|
||||
data[k + 2] = area[j + 2];
|
||||
data[k + 3] = img.hasAlpha ? area[j + 3] : 255;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) {
|
||||
reject(new Error("Failed to get canvas context"));
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.putImageData(new ImageData(data, img.width, img.height), 0, 0);
|
||||
|
||||
const blob = await canvas.convertToBlob({
|
||||
type: "image/png",
|
||||
});
|
||||
|
||||
resolve(blob);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const magickConvert = async (img: IMagickImage, to: string) => {
|
||||
const vips = await vipsPromise;
|
||||
|
||||
const intermediary = await magickToBlob(img);
|
||||
const buf = await intermediary.arrayBuffer();
|
||||
|
||||
const imgVips = vips.Image.newFromBuffer(buf);
|
||||
const output = imgVips.writeToBuffer(to);
|
||||
|
||||
imgVips.delete();
|
||||
img.dispose();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
onmessage = async (e) => {
|
||||
const message = e.data;
|
||||
try {
|
||||
const res = await handleMessage(message);
|
||||
if (!res) return;
|
||||
postMessage({
|
||||
...res,
|
||||
id: message.id,
|
||||
});
|
||||
} catch (e) {
|
||||
postMessage({
|
||||
type: "error",
|
||||
error: e,
|
||||
id: message.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
import Vips from "wasm-vips";
|
||||
import {
|
||||
initializeImageMagick,
|
||||
MagickFormat,
|
||||
MagickImage,
|
||||
MagickImageCollection,
|
||||
MagickReadSettings,
|
||||
type IMagickImage,
|
||||
} from "@imagemagick/magick-wasm";
|
||||
import { makeZip } from "client-zip";
|
||||
import wasm from "@imagemagick/magick-wasm/magick.wasm?url";
|
||||
import { parseAni } from "$lib/parse/ani";
|
||||
import { Icns } from "@fiahfy/icns/dist";
|
||||
|
||||
const vipsPromise = Vips({
|
||||
dynamicLibraries: [],
|
||||
});
|
||||
|
||||
const magickPromise = initializeImageMagick(new URL(wasm, import.meta.url));
|
||||
|
||||
const magickRequiredFormats = [
|
||||
".dng",
|
||||
".heic",
|
||||
".ico",
|
||||
".cur",
|
||||
".ani",
|
||||
".cr2",
|
||||
".nef",
|
||||
];
|
||||
const unsupportedFrom: string[] = [];
|
||||
const unsupportedTo = [...magickRequiredFormats];
|
||||
|
||||
vipsPromise
|
||||
.then(() => {
|
||||
postMessage({ type: "loaded" });
|
||||
})
|
||||
.catch((error) => {
|
||||
postMessage({ type: "error", error });
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const handleMessage = async (message: any): Promise<any> => {
|
||||
const vips = await vipsPromise;
|
||||
switch (message.type) {
|
||||
case "convert": {
|
||||
if (!message.to.startsWith(".")) message.to = `.${message.to}`;
|
||||
console.log(message);
|
||||
if (unsupportedFrom.includes(message.input.from)) {
|
||||
return {
|
||||
type: "error",
|
||||
error: `Unsupported input format ${message.input.from}`,
|
||||
};
|
||||
}
|
||||
|
||||
if (unsupportedTo.includes(message.to)) {
|
||||
return {
|
||||
type: "error",
|
||||
error: `Unsupported output format ${message.to}`,
|
||||
};
|
||||
}
|
||||
|
||||
const buffer = await message.input.file.arrayBuffer();
|
||||
if (
|
||||
magickRequiredFormats.includes(message.input.from) ||
|
||||
magickRequiredFormats.includes(message.to)
|
||||
) {
|
||||
// only wait when we need to
|
||||
await magickPromise;
|
||||
|
||||
// special ico handling to split them all into separate images
|
||||
if (message.input.from === ".ico") {
|
||||
const imgs = MagickImageCollection.create();
|
||||
|
||||
while (true) {
|
||||
try {
|
||||
const img = MagickImage.create(
|
||||
new Uint8Array(buffer),
|
||||
new MagickReadSettings({
|
||||
format: MagickFormat.Ico,
|
||||
frameIndex: imgs.length,
|
||||
}),
|
||||
);
|
||||
imgs.push(img);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
} catch (_) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (imgs.length === 0) {
|
||||
return {
|
||||
type: "error",
|
||||
error: `Failed to read ICO -- no images found inside?`,
|
||||
};
|
||||
}
|
||||
|
||||
const convertedImgs: Uint8Array[] = [];
|
||||
await Promise.all(
|
||||
imgs.map(async (img, i) => {
|
||||
const output = await magickConvert(img, message.to);
|
||||
convertedImgs[i] = output;
|
||||
}),
|
||||
);
|
||||
|
||||
const zip = makeZip(
|
||||
convertedImgs.map(
|
||||
(img, i) =>
|
||||
new File(
|
||||
[img],
|
||||
`image${i}.${message.to.slice(1)}`,
|
||||
),
|
||||
),
|
||||
"images.zip",
|
||||
);
|
||||
|
||||
// read the ReadableStream to the end
|
||||
const zipBytes = await readToEnd(zip.getReader());
|
||||
|
||||
imgs.dispose();
|
||||
|
||||
return {
|
||||
type: "finished",
|
||||
output: zipBytes,
|
||||
zip: true,
|
||||
};
|
||||
} else if (message.input.from === ".ani") {
|
||||
console.log("Parsing ANI file");
|
||||
try {
|
||||
const parsedAni = parseAni(new Uint8Array(buffer));
|
||||
const files: File[] = [];
|
||||
await Promise.all(
|
||||
parsedAni.images.map(async (img, i) => {
|
||||
const blob = await magickConvert(
|
||||
MagickImage.create(
|
||||
img,
|
||||
new MagickReadSettings({
|
||||
format: MagickFormat.Ico,
|
||||
}),
|
||||
),
|
||||
message.to,
|
||||
);
|
||||
files.push(
|
||||
new File([blob], `image${i}${message.to}`),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const zip = makeZip(files, "images.zip");
|
||||
const zipBytes = await readToEnd(zip.getReader());
|
||||
|
||||
return {
|
||||
type: "finished",
|
||||
output: zipBytes,
|
||||
zip: true,
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(message.input.from);
|
||||
|
||||
const img = MagickImage.create(
|
||||
new Uint8Array(buffer),
|
||||
new MagickReadSettings({
|
||||
format: message.input.from
|
||||
.slice(1)
|
||||
.toUpperCase() as MagickFormat,
|
||||
}),
|
||||
);
|
||||
|
||||
const converted = await magickConvert(img, message.to);
|
||||
|
||||
return {
|
||||
type: "finished",
|
||||
output: converted,
|
||||
};
|
||||
}
|
||||
|
||||
if (message.input.from === ".icns") {
|
||||
const icns = Icns.from(new Uint8Array(buffer));
|
||||
console.log(icns);
|
||||
}
|
||||
|
||||
let image = vips.Image.newFromBuffer(buffer, "");
|
||||
|
||||
// check if animated image & keep it animated when converting
|
||||
if (image.getTypeof("n-pages") > 0) {
|
||||
image = vips.Image.newFromBuffer(buffer, "[n=-1]");
|
||||
}
|
||||
|
||||
const opts: { [key: string]: string } = {};
|
||||
if (typeof message.compression !== "undefined") {
|
||||
opts["Q"] = Math.min(100, message.compression + 1).toString();
|
||||
}
|
||||
|
||||
const output = image.writeToBuffer(message.to, opts);
|
||||
image.delete();
|
||||
return {
|
||||
type: "finished",
|
||||
output: output.buffer,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const readToEnd = async (reader: ReadableStreamDefaultReader<Uint8Array>) => {
|
||||
const chunks: Uint8Array[] = [];
|
||||
let done = false;
|
||||
while (!done) {
|
||||
const { value, done: d } = await reader.read();
|
||||
if (value) chunks.push(value);
|
||||
done = d;
|
||||
}
|
||||
const blob = new Blob(chunks, { type: "application/zip" });
|
||||
const arrayBuffer = await blob.arrayBuffer();
|
||||
return new Uint8Array(arrayBuffer);
|
||||
};
|
||||
|
||||
const magickToBlob = async (img: IMagickImage): Promise<Blob> => {
|
||||
const canvas = new OffscreenCanvas(img.width, img.height);
|
||||
return new Promise<Blob>((resolve, reject) =>
|
||||
img.getPixels(async (p) => {
|
||||
const area = p.getArea(0, 0, img.width, img.height);
|
||||
const chunkSize = img.hasAlpha ? 4 : 3;
|
||||
const chunks = Math.ceil(area.length / chunkSize);
|
||||
const data = new Uint8ClampedArray(chunks * 4);
|
||||
|
||||
for (let j = 0, k = 0; j < area.length; j += chunkSize, k += 4) {
|
||||
data[k] = area[j];
|
||||
data[k + 1] = area[j + 1];
|
||||
data[k + 2] = area[j + 2];
|
||||
data[k + 3] = img.hasAlpha ? area[j + 3] : 255;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) {
|
||||
reject(new Error("Failed to get canvas context"));
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.putImageData(new ImageData(data, img.width, img.height), 0, 0);
|
||||
|
||||
const blob = await canvas.convertToBlob({
|
||||
type: "image/png",
|
||||
});
|
||||
|
||||
resolve(blob);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const magickConvert = async (img: IMagickImage, to: string) => {
|
||||
const vips = await vipsPromise;
|
||||
|
||||
const intermediary = await magickToBlob(img);
|
||||
const buf = await intermediary.arrayBuffer();
|
||||
|
||||
const imgVips = vips.Image.newFromBuffer(buf);
|
||||
const output = imgVips.writeToBuffer(to);
|
||||
|
||||
imgVips.delete();
|
||||
img.dispose();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
onmessage = async (e) => {
|
||||
const message = e.data;
|
||||
try {
|
||||
const res = await handleMessage(message);
|
||||
if (!res) return;
|
||||
postMessage({
|
||||
...res,
|
||||
id: message.id,
|
||||
});
|
||||
} catch (e) {
|
||||
postMessage({
|
||||
type: "error",
|
||||
error: e,
|
||||
id: message.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,113 +1,113 @@
|
|||
<script lang="ts">
|
||||
import { flip } from "$lib/animation";
|
||||
import Uploader from "$lib/components/functional/Uploader.svelte";
|
||||
import Panel from "$lib/components/visual/Panel.svelte";
|
||||
import { files } from "$lib/store/index.svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { blur } from "svelte/transition";
|
||||
|
||||
const images = $derived(
|
||||
files.files.filter((f) =>
|
||||
f.converters.map((c) => c.name).includes("libvips"),
|
||||
),
|
||||
);
|
||||
|
||||
let forcedBlobURLs = $state<Map<string, string>>(new Map());
|
||||
|
||||
const jpegify = () => {
|
||||
const imgs = [...images];
|
||||
imgs.map(async (f, i) => {
|
||||
f.to = ".jpeg";
|
||||
const result = await f.convert(compression);
|
||||
if (!result) return;
|
||||
forcedBlobURLs.set(f.id, URL.createObjectURL(result.file));
|
||||
forcedBlobURLs = new Map([...forcedBlobURLs]);
|
||||
});
|
||||
};
|
||||
|
||||
let compressionInverted = $state(10);
|
||||
const compression = $derived(100 - compressionInverted);
|
||||
const processing = $derived(images.map((f) => f.processing).includes(true));
|
||||
</script>
|
||||
|
||||
<div class="mx-auto w-full max-w-[778px] flex flex-col gap-8">
|
||||
<h1 class="text-5xl text-center">SECRET JPEGIFY!!!</h1>
|
||||
<p class="text-muted text-center -mt-4 font-normal italic">
|
||||
(shh... don't tell anyone!)
|
||||
</p>
|
||||
<Uploader class="w-full h-64" jpegify={true} />
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
step="1"
|
||||
class="w-full h-2 bg-panel rounded-lg appearance-none cursor-pointer"
|
||||
bind:value={compressionInverted}
|
||||
disabled={processing}
|
||||
/>
|
||||
<button
|
||||
onclick={jpegify}
|
||||
disabled={processing}
|
||||
class="btn bg-accent text-black rounded-2xl text-2xl w-full mx-auto"
|
||||
>JPEGIFY {compressionInverted}%!!!</button
|
||||
>
|
||||
<div class="flex flex-wrap flex-row justify-center gap-4">
|
||||
{#each images as file, i (file.id)}
|
||||
<div
|
||||
class="max-w-full w-full h-96"
|
||||
animate:flip={{ duration: 400, easing: quintOut }}
|
||||
transition:blur={{
|
||||
duration: 400,
|
||||
amount: 8,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
<Panel class="w-full h-full flex flex-col gap-4 relative z-0">
|
||||
<div
|
||||
class="relative rounded-xl flex-grow overflow-hidden flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src={forcedBlobURLs.get(file.id) ||
|
||||
file.result?.blobUrl ||
|
||||
file.blobUrl}
|
||||
alt={file.name}
|
||||
class="h-full relative"
|
||||
/>
|
||||
<img
|
||||
src={forcedBlobURLs.get(file.id) ||
|
||||
file.result?.blobUrl ||
|
||||
file.blobUrl}
|
||||
alt={file.name}
|
||||
class="h-full absolute top-0 left-0 w-full object-cover blur-2xl -z-10"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex items-center gap-4 w-full">
|
||||
<button
|
||||
onclick={() => {
|
||||
file?.download();
|
||||
}}
|
||||
disabled={!!!file.result}
|
||||
class="btn bg-accent text-black rounded-2xl text-2xl w-full mx-auto"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
onclick={() => {
|
||||
URL.revokeObjectURL(
|
||||
forcedBlobURLs.get(file.id) || "",
|
||||
);
|
||||
forcedBlobURLs.delete(file.id);
|
||||
files.files = files.files.filter(
|
||||
(f) => f.id !== file.id,
|
||||
);
|
||||
}}
|
||||
class="btn border-accent-red border-2 bg-transparent text-black dynadark:text-white rounded-2xl text-2xl w-full mx-auto"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import { flip } from "$lib/animation";
|
||||
import Uploader from "$lib/components/functional/Uploader.svelte";
|
||||
import Panel from "$lib/components/visual/Panel.svelte";
|
||||
import { files } from "$lib/store/index.svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { blur } from "svelte/transition";
|
||||
|
||||
const images = $derived(
|
||||
files.files.filter((f) =>
|
||||
f.converters.map((c) => c.name).includes("libvips"),
|
||||
),
|
||||
);
|
||||
|
||||
let forcedBlobURLs = $state<Map<string, string>>(new Map());
|
||||
|
||||
const jpegify = () => {
|
||||
const imgs = [...images];
|
||||
imgs.map(async (f, i) => {
|
||||
f.to = ".jpeg";
|
||||
const result = await f.convert(compression);
|
||||
if (!result) return;
|
||||
forcedBlobURLs.set(f.id, URL.createObjectURL(result.file));
|
||||
forcedBlobURLs = new Map([...forcedBlobURLs]);
|
||||
});
|
||||
};
|
||||
|
||||
let compressionInverted = $state(10);
|
||||
const compression = $derived(100 - compressionInverted);
|
||||
const processing = $derived(images.map((f) => f.processing).includes(true));
|
||||
</script>
|
||||
|
||||
<div class="mx-auto w-full max-w-[778px] flex flex-col gap-8">
|
||||
<h1 class="text-5xl text-center">SECRET JPEGIFY!!!</h1>
|
||||
<p class="text-muted text-center -mt-4 font-normal italic">
|
||||
(shh... don't tell anyone!)
|
||||
</p>
|
||||
<Uploader class="w-full h-64" jpegify={true} />
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
step="1"
|
||||
class="w-full h-2 bg-panel rounded-lg appearance-none cursor-pointer"
|
||||
bind:value={compressionInverted}
|
||||
disabled={processing}
|
||||
/>
|
||||
<button
|
||||
onclick={jpegify}
|
||||
disabled={processing}
|
||||
class="btn bg-accent text-black rounded-2xl text-2xl w-full mx-auto"
|
||||
>JPEGIFY {compressionInverted}%!!!</button
|
||||
>
|
||||
<div class="flex flex-wrap flex-row justify-center gap-4">
|
||||
{#each images as file, i (file.id)}
|
||||
<div
|
||||
class="max-w-full w-full h-96"
|
||||
animate:flip={{ duration: 400, easing: quintOut }}
|
||||
transition:blur={{
|
||||
duration: 400,
|
||||
amount: 8,
|
||||
easing: quintOut,
|
||||
}}
|
||||
>
|
||||
<Panel class="w-full h-full flex flex-col gap-4 relative z-0">
|
||||
<div
|
||||
class="relative rounded-xl flex-grow overflow-hidden flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src={forcedBlobURLs.get(file.id) ||
|
||||
file.result?.blobUrl ||
|
||||
file.blobUrl}
|
||||
alt={file.name}
|
||||
class="h-full relative"
|
||||
/>
|
||||
<img
|
||||
src={forcedBlobURLs.get(file.id) ||
|
||||
file.result?.blobUrl ||
|
||||
file.blobUrl}
|
||||
alt={file.name}
|
||||
class="h-full absolute top-0 left-0 w-full object-cover blur-2xl -z-10"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex items-center gap-4 w-full">
|
||||
<button
|
||||
onclick={() => {
|
||||
file?.download();
|
||||
}}
|
||||
disabled={!!!file.result}
|
||||
class="btn bg-accent text-black rounded-2xl text-2xl w-full mx-auto"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
onclick={() => {
|
||||
URL.revokeObjectURL(
|
||||
forcedBlobURLs.get(file.id) || "",
|
||||
);
|
||||
forcedBlobURLs.delete(file.id);
|
||||
files.files = files.files.filter(
|
||||
(f) => f.id !== file.id,
|
||||
);
|
||||
}}
|
||||
class="btn border-accent-red border-2 bg-transparent text-black dynadark:text-white rounded-2xl text-2xl w-full mx-auto"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue