@unicitylabs/sphere-ui 0.1.26 → 0.1.27

package/dist/index.js

@@ -1422,6 +1422,48 @@ async function readImageSize(file) {
     return null;
   }
 }
+async function fitImage(file, limit) {
+  if (file.type === "image/svg+xml") return file;
+  if (typeof createImageBitmap !== "function" || typeof document === "undefined") return file;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const sw = bitmap.width;
+    const sh = bitmap.height;
+    let cropW = sw, cropH = sh, cropX = 0, cropY = 0;
+    if (limit.aspectRatio) {
+      if (sw / sh > limit.aspectRatio) {
+        cropW = Math.round(sh * limit.aspectRatio);
+        cropX = Math.round((sw - cropW) / 2);
+      } else if (sw / sh < limit.aspectRatio) {
+        cropH = Math.round(sw / limit.aspectRatio);
+        cropY = Math.round((sh - cropH) / 2);
+      }
+    }
+    const scale = Math.min(1, (limit.maxWidth ?? cropW) / cropW, (limit.maxHeight ?? cropH) / cropH);
+    const outW = Math.max(1, Math.round(cropW * scale));
+    const outH = Math.max(1, Math.round(cropH * scale));
+    if (cropX === 0 && cropY === 0 && cropW === sw && cropH === sh && scale === 1) {
+      bitmap.close?.();
+      return file;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap.close?.();
+      return file;
+    }
+    ctx.drawImage(bitmap, cropX, cropY, cropW, cropH, 0, 0, outW, outH);
+    bitmap.close?.();
+    const mime = file.type === "image/jpeg" || file.type === "image/webp" ? file.type : "image/png";
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, mime, 0.92));
+    if (!blob) return file;
+    return new File([blob], file.name, { type: mime });
+  } catch {
+    return file;
+  }
+}
 function MediaUploader({
   kind,
   ownerType,
@@ -1464,8 +1506,9 @@ function MediaUploader({
         });
         return;
       }
-      if (file.type !== "image/svg+xml") {
-        const size = await readImageSize(file);
+      const fitted = await fitImage(file, limit);
+      if (fitted.type !== "image/svg+xml") {
+        const size = await readImageSize(fitted);
         if (size) {
           const { width, height } = size;
           if (limit.maxWidth && width > limit.maxWidth || limit.maxHeight && height > limit.maxHeight) {
@@ -1490,18 +1533,18 @@ function MediaUploader({
       }
       if (deferUpload) {
         if (previewRef.current) URL.revokeObjectURL(previewRef.current);
-        previewRef.current = URL.createObjectURL(file);
-        setState({ phase: "pending", file });
-        onFileSelected?.(file);
+        previewRef.current = URL.createObjectURL(fitted);
+        setState({ phase: "pending", file: fitted });
+        onFileSelected?.(fitted);
         onChange(null);
         return;
       }
       const abort = new AbortController();
-      setState({ phase: "uploading", file, progress: 0, abort });
+      setState({ phase: "uploading", file: fitted, progress: 0, abort });
       if (previewRef.current) URL.revokeObjectURL(previewRef.current);
-      previewRef.current = URL.createObjectURL(file);
+      previewRef.current = URL.createObjectURL(fitted);
       try {
-        const result = await uploadFn(file, {
+        const result = await uploadFn(fitted, {
           kind,
           ownerType,
           ownerId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",