@pushwoosh/smart-components-kit 1.19.0 → 1.20.0

package/MediaStorage/MediaStorage.js

@@ -11,7 +11,7 @@ import { CanvaImportDrawer } from './CanvaImportDrawer';
 import { CreateCropDrawer } from './CreateCropDrawer';
 import { GenerateImageTab } from './GenerateImageTab';
 import { useCanvaEdit, useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
-import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
+import { compressionSavings, formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
 import { StockPhotosTab } from './StockPhotosTab';
 import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, MenuItemPreview, MenuItemThumb, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, TooltipAnchor, UsageLine, VersionsBadge, WarningBadge } from './styles';
@@ -220,8 +220,13 @@ export const MediaStorage = ({
       }));
       const failed = results.filter(result => result.status === 'rejected').length;
       if (failed < images.length) {
+        const savings = compressionSavings(results.flatMap(result => result.status === 'fulfilled' ? [result.value] : []));
         openToast({
-          title: lang({
+          title: savings ? lang({
+            message: 'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED',
+            percent: savings.percent,
+            size: formatBytes(savings.savedBytes)
+          }) : lang({
             message: 'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS'
           }),
           type: 'success'

package/MediaStorage/mediaFile.utils.d.ts

@@ -11,3 +11,13 @@ export declare const getAspectRatio: (file: MediaFile) => number;
 export declare const hasVersions: (file: MediaFile) => boolean;
 /** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
 export declare const formatBytes: (bytes: number) => string;
+/** The part of the `/api/media/upload` answer the upload toast reads. */
+export type UploadedFile = {
+    file_size: number;
+    original_file_size?: number;
+};
+/** Savings of PNG compression over a batch: compressed files only; null when nothing worth a whole percent was saved. */
+export declare const compressionSavings: (files: UploadedFile[]) => {
+    percent: number;
+    savedBytes: number;
+} | null;

package/MediaStorage/mediaFile.utils.js

@@ -33,4 +33,20 @@ export const formatBytes = bytes => {
   // Whole numbers for bytes and for values >= 100; one decimal otherwise.
   const rounded = exp === 0 || value >= 100 ? Math.round(value) : Math.round(value * 10) / 10;
   return `${rounded} ${BYTE_UNITS[exp]}`;
+};
+/** Savings of PNG compression over a batch: compressed files only; null when nothing worth a whole percent was saved. */
+export const compressionSavings = files => {
+  let before = 0;
+  let after = 0;
+  for (const file of files) {
+    if (file.original_file_size && file.original_file_size > file.file_size) {
+      before += file.original_file_size;
+      after += file.file_size;
+    }
+  }
+  const percent = before === 0 ? 0 : Math.round((1 - after / before) * 100);
+  return percent > 0 ? {
+    percent,
+    savedBytes: before - after
+  } : null;
 };

package/MediaStorage/polyglot/messages_ar.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'تعذّر رفع الصورة',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'تنسيق غير مدعوم. استخدم JPEG أو PNG أو GIF أو WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'تم رفع الصورة',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'تم رفع الصورة. تم ضغط PNG: توفير {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': 'الملفات: {{count}} · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': 'اقتصاصات: {{count}}',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': 'إصدارات: {{count}}',

package/MediaStorage/polyglot/messages_bn.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'ছবি আপলোড করা যায়নি',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'অসমর্থিত ফরম্যাট। JPEG, PNG, GIF বা WebP ব্যবহার করুন',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'ছবি আপলোড হয়েছে',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'ছবি আপলোড হয়েছে। PNG সংকুচিত: {{percent}}% সাশ্রয় ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}}টি ফাইল · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}}টি ক্রপ',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}}টি সংস্করণ',

package/MediaStorage/polyglot/messages_de.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Bild konnte nicht hochgeladen werden',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Nicht unterstütztes Format. Verwenden Sie JPEG, PNG, GIF oder WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Bild hochgeladen',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Bild hochgeladen. PNG komprimiert: {{percent}} % gespart ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} Dateien · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} Zuschn.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} Vers.',

package/MediaStorage/polyglot/messages_en.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Failed to upload image',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Unsupported format. Use JPEG, PNG, GIF or WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Image uploaded',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Image uploaded. PNG compressed: saved {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} files · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} cr.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} ver.',

package/MediaStorage/polyglot/messages_es.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'No se pudo subir la imagen',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Formato no compatible. Usa JPEG, PNG, GIF o WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Imagen subida',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Imagen subida. PNG comprimido: ahorro del {{percent}} % ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} archivos · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} rec.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',

package/MediaStorage/polyglot/messages_fr.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Échec de l’importation de l’image',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Format non pris en charge. Utilisez JPEG, PNG, GIF ou WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Image importée',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Image importée. PNG compressé : {{percent}} % économisés ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} fichiers · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} recadr.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',

package/MediaStorage/polyglot/messages_he.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'העלאת התמונה נכשלה',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'פורמט לא נתמך. השתמשו ב-JPEG, PNG, GIF או WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'התמונה הועלתה',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'התמונה הועלתה. PNG נדחס: חיסכון של {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} קבצים · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} חית.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} גרס.',

package/MediaStorage/polyglot/messages_hi.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'छवि अपलोड नहीं हो सकी',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'असमर्थित फ़ॉर्मेट। JPEG, PNG, GIF या WebP का उपयोग करें',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'छवि अपलोड हो गई',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'छवि अपलोड हो गई। PNG संपीड़ित: {{percent}}% की बचत ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} फ़ाइलें · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} क्रॉप',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} संस्करण',

package/MediaStorage/polyglot/messages_ja.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': '画像のアップロードに失敗しました',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'サポートされていない形式です。JPEG、PNG、GIF、WebPを使用してください',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '画像をアップロードしました',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': '画像をアップロードしました。PNG を圧縮: {{percent}}% 削減（{{size}}）',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}}ファイル · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': 'トリミング{{count}}',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': 'バージョン{{count}}',

package/MediaStorage/polyglot/messages_ko.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': '이미지를 업로드하지 못했습니다',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': '지원되지 않는 형식입니다. JPEG, PNG, GIF 또는 WebP를 사용하세요',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '이미지가 업로드되었습니다',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': '이미지가 업로드되었습니다. PNG 압축: {{percent}}% 절감 ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '파일 {{count}}개 · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '크롭 {{count}}개',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '버전 {{count}}개',

package/MediaStorage/polyglot/messages_pt.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Falha ao enviar a imagem',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Formato não suportado. Use JPEG, PNG, GIF ou WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Imagem enviada',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Imagem enviada. PNG comprimido: economia de {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} arquivos · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} rec.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',

package/MediaStorage/polyglot/messages_ru.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Не удалось загрузить изображение',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Неподдерживаемый формат. Используйте JPEG, PNG, GIF или WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Изображение загружено',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Изображение загружено. PNG сжат: экономия {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} файлов · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} кр.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} вер.',

package/MediaStorage/polyglot/messages_th.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'อัปโหลดรูปภาพไม่สำเร็จ',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'ไม่รองรับรูปแบบนี้ ใช้ JPEG, PNG, GIF หรือ WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'อัปโหลดรูปภาพแล้ว',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'อัปโหลดรูปภาพแล้ว บีบอัด PNG: ประหยัด {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} ไฟล์ · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} ครอป',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} เวอร์ชัน',

package/MediaStorage/polyglot/messages_zh.js

@@ -10,6 +10,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': '上传图片失败',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': '不支持的格式。请使用 JPEG、PNG、GIF 或 WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '图片已上传',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': '图片已上传。PNG 已压缩：节省 {{percent}}%（{{size}}）',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} 个文件 · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} 个裁剪图',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} 个版本',

package/MediaStorage/polyglot/types.d.ts

@@ -11,6 +11,10 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.UPLOAD_ERROR': NoParams;
     'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': NoParams;
     'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': NoParams;
+    'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': {
+        percent: number;
+        size: string;
+    };
     'SMART.MEDIA_STORAGE.USAGE': {
         count: number;
         size: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",