68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { lazy } from "react";
|
|
import type { PlimiPlugin } from "../../core/plugins/plugin-types";
|
|
import { runImageOptimizer } from "./run";
|
|
|
|
export interface ImageOptimizerOptions {
|
|
quality: number;
|
|
format: "image/jpeg" | "image/webp" | "image/png";
|
|
}
|
|
|
|
// Lazy load the custom UI to keep the main bundle small
|
|
const ImageOptimizerUi = lazy(() => import("./ImageOptimizerUi"));
|
|
|
|
export const imageOptimizerPlugin: PlimiPlugin<ImageOptimizerOptions> = {
|
|
manifest: {
|
|
id: "image-optimizer",
|
|
name: "Image Optimizer",
|
|
description:
|
|
"Compress and convert images entirely in your browser using the Canvas API.",
|
|
category: "image",
|
|
version: "1.0.0",
|
|
tags: ["image", "compress", "resize", "webp", "jpeg"],
|
|
input: {
|
|
type: "files",
|
|
accept: ["image/jpeg", "image/png", "image/webp"],
|
|
multiple: true,
|
|
maxSizeMb: 20,
|
|
},
|
|
output: { type: "files" },
|
|
offlineReady: true,
|
|
},
|
|
|
|
optionsSchema: {
|
|
fields: [
|
|
{
|
|
type: "slider",
|
|
key: "quality",
|
|
label: "Quality",
|
|
defaultValue: 80,
|
|
min: 1,
|
|
max: 100,
|
|
step: 1,
|
|
},
|
|
{
|
|
type: "select",
|
|
key: "format",
|
|
label: "Output Format",
|
|
defaultValue: "image/webp",
|
|
options: [
|
|
{ label: "WebP", value: "image/webp" },
|
|
{ label: "JPEG", value: "image/jpeg" },
|
|
{ label: "PNG", value: "image/png" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
|
|
capabilities: {
|
|
cancelable: false,
|
|
worker: false,
|
|
customUi: true,
|
|
},
|
|
|
|
run: runImageOptimizer,
|
|
|
|
// Provide the custom UI
|
|
customUi: ImageOptimizerUi,
|
|
};
|