@tradly/asset 1.0.10 → 1.0.11

package/dist/components/FileUpload.js

@@ -20,7 +20,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Helper: compress image on the client before upload
 // - Downscale to fit within maxWidth/maxHeight.
-// - Convert PNG to JPEG by default so quality applies (PNG ignores quality).
+// - Convert raster images (JPEG/PNG, etc.) to WebP for better compression.
 // - Skip SVG (vector) to avoid degradation.
 var compressImage = function compressImage(file) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -29,10 +29,9 @@ var compressImage = function compressImage(file) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
     _ref$quality = _ref.quality,
-    quality = _ref$quality === void 0 ? 0.9 : _ref$quality,
-    _ref$convertPngToJpeg = _ref.convertPngToJpeg,
-    convertPngToJpeg = _ref$convertPngToJpeg === void 0 ? false : _ref$convertPngToJpeg;
-  console.log("compressImage", file, maxWidth, maxHeight, quality, convertPngToJpeg);
+    quality = _ref$quality === void 0 ? 1 : _ref$quality,
+    _ref$convertToWebp = _ref.convertToWebp,
+    convertToWebp = _ref$convertToWebp === void 0 ? true : _ref$convertToWebp;
   return new Promise(function (resolve) {
     // Non-image or SVG: skip compression to avoid losing vector quality
     if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
@@ -62,8 +61,10 @@ var compressImage = function compressImage(file) {
       }
       ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
 
-      // Use JPEG for PNG to allow lossy compression (optional)
-      var targetType = file.type === "image/png" && convertPngToJpeg ? "image/jpeg" : file.type;
+      // Prefer WebP for raster images to reduce size (where supported)
+      // Keep original type for GIF to avoid breaking animation.
+      var isRaster = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "image/webp" || file.type === "image/heic" || file.type === "image/heif";
+      var targetType = convertToWebp && isRaster && file.type !== "image/gif" ? "image/webp" : file.type;
       canvas.toBlob(function (blob) {
         if (!blob) {
           resolve(file);
@@ -139,7 +140,7 @@ var FileUpload = function FileUpload(_ref2) {
               return compressImage(file, {
                 maxWidth: 1600,
                 maxHeight: 1600,
-                quality: 0.9
+                quality: 1
               });
             }));
           case 2:

package/dist/esm/components/FileUpload.js

@@ -13,7 +13,7 @@ import { CameraIcon } from "./Icons";
 
 // Helper: compress image on the client before upload
 // - Downscale to fit within maxWidth/maxHeight.
-// - Convert PNG to JPEG by default so quality applies (PNG ignores quality).
+// - Convert raster images (JPEG/PNG, etc.) to WebP for better compression.
 // - Skip SVG (vector) to avoid degradation.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var compressImage = function compressImage(file) {
@@ -23,10 +23,9 @@ var compressImage = function compressImage(file) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
     _ref$quality = _ref.quality,
-    quality = _ref$quality === void 0 ? 0.9 : _ref$quality,
-    _ref$convertPngToJpeg = _ref.convertPngToJpeg,
-    convertPngToJpeg = _ref$convertPngToJpeg === void 0 ? false : _ref$convertPngToJpeg;
-  console.log("compressImage", file, maxWidth, maxHeight, quality, convertPngToJpeg);
+    quality = _ref$quality === void 0 ? 1 : _ref$quality,
+    _ref$convertToWebp = _ref.convertToWebp,
+    convertToWebp = _ref$convertToWebp === void 0 ? true : _ref$convertToWebp;
   return new Promise(function (resolve) {
     // Non-image or SVG: skip compression to avoid losing vector quality
     if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
@@ -56,8 +55,10 @@ var compressImage = function compressImage(file) {
       }
       ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
 
-      // Use JPEG for PNG to allow lossy compression (optional)
-      var targetType = file.type === "image/png" && convertPngToJpeg ? "image/jpeg" : file.type;
+      // Prefer WebP for raster images to reduce size (where supported)
+      // Keep original type for GIF to avoid breaking animation.
+      var isRaster = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "image/webp" || file.type === "image/heic" || file.type === "image/heif";
+      var targetType = convertToWebp && isRaster && file.type !== "image/gif" ? "image/webp" : file.type;
       canvas.toBlob(function (blob) {
         if (!blob) {
           resolve(file);
@@ -133,7 +134,7 @@ var FileUpload = function FileUpload(_ref2) {
               return compressImage(file, {
                 maxWidth: 1600,
                 maxHeight: 1600,
-                quality: 0.9
+                quality: 1
               });
             }));
           case 2:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",