@frkntmbs/strapi-plugin-video-optimizer 1.0.0 → 1.0.2

package/admin/src/utils/uploadAssetStore.ts

@@ -8,12 +8,15 @@ import type {
 import { isVideoFileName } from '../pluginId';
 import { PLUGIN_BUILD_MARKER } from '../buildVersion';
 import { wakeJobPoller } from './initJobPoller';
+import type { VideoSourceMetadata } from './evaluateOptimizationBenefit';
 
 export interface UploadAssetEntry {
   assetId: string;
   assetName: string;
   width?: number;
   height?: number;
+  sizeBytes?: number;
+  durationSeconds?: number;
   actionsContainer: HTMLElement;
   footerHost?: HTMLElement;
 }
@@ -22,6 +25,7 @@ let globalSettings: GlobalOptimizationSettings = { ...DEFAULT_GLOBAL_SETTINGS };
 const assetPreferencesById = new Map<string, AssetOptimizationPreference>();
 const assetNamesById = new Map<string, string>();
 const assetDimensionsById = new Map<string, { width: number; height: number }>();
+const assetMetadataById = new Map<string, VideoSourceMetadata>();
 const assetPreferencesByFileKey = new Map<string, AssetOptimizationPreference>();
 const committedPreferencesByAssetId = new Map<string, AssetOptimizationPreference>();
 const committedPreferencesByName = new Map<string, AssetOptimizationPreference>();
@@ -101,19 +105,48 @@ export const resolveCustomSettingsForAsset = (
 
 export const getSourceDimensionsForAsset = (assetId: string) => assetDimensionsById.get(assetId);
 
-export const updateAssetDimensions = (
-  assetId: string,
-  dimensions: { width: number; height: number }
-) => {
-  assetDimensionsById.set(assetId, dimensions);
+export const getSourceMetadataForAsset = (assetId: string): VideoSourceMetadata => {
+  const stored = assetMetadataById.get(assetId);
+
+  if (stored) {
+    return stored;
+  }
+
+  const dimensions = assetDimensionsById.get(assetId);
+  const card = cardsSnapshot.find((entry) => entry.assetId === assetId);
+
+  return {
+    width: dimensions?.width ?? card?.width,
+    height: dimensions?.height ?? card?.height,
+    sizeBytes: card?.sizeBytes,
+    durationSeconds: card?.durationSeconds,
+  };
+};
+
+export const updateAssetMetadata = (assetId: string, metadata: VideoSourceMetadata) => {
+  const nextMetadata = {
+    ...assetMetadataById.get(assetId),
+    ...metadata,
+  };
+
+  assetMetadataById.set(assetId, nextMetadata);
+
+  if (nextMetadata.width && nextMetadata.height) {
+    assetDimensionsById.set(assetId, {
+      width: nextMetadata.width,
+      height: nextMetadata.height,
+    });
+  }
 
   const index = cards.findIndex((entry) => entry.assetId === assetId);
 
   if (index >= 0) {
     cards[index] = {
       ...cards[index],
-      width: dimensions.width,
-      height: dimensions.height,
+      width: nextMetadata.width ?? cards[index].width,
+      height: nextMetadata.height ?? cards[index].height,
+      sizeBytes: nextMetadata.sizeBytes ?? cards[index].sizeBytes,
+      durationSeconds: nextMetadata.durationSeconds ?? cards[index].durationSeconds,
     };
     cardsSnapshot = cards.slice();
   }
@@ -121,6 +154,13 @@ export const updateAssetDimensions = (
   notify();
 };
 
+export const updateAssetDimensions = (
+  assetId: string,
+  dimensions: { width: number; height: number }
+) => {
+  updateAssetMetadata(assetId, dimensions);
+};
+
 export const getAssetDimensions = (assetId: string) => assetDimensionsById.get(assetId);
 
 export const createDefaultPreference = (): AssetOptimizationPreference => {
@@ -260,6 +300,7 @@ export const clearUploadSession = () => {
   assetPreferencesById.clear();
   assetNamesById.clear();
   assetDimensionsById.clear();
+  assetMetadataById.clear();
   cards = [];
   cardsSnapshot = [];
   editingAssetId = null;

package/dist/admin/{SettingsPage-D6e536P0.mjs → SettingsPage-CiTCB9pJ.mjs}

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { Typography, Button, Flex, Box, Grid, Field, SingleSelect, SingleSelectOption, TextInput } from "@strapi/design-system";
 import { Check } from "@strapi/icons";
 import { useFetchClient, useNotification, useRBAC, Page, Layouts } from "@strapi/strapi/admin";
-import { u as useIntl, D as DEFAULT_GLOBAL_SETTINGS, g as getTranslationKey, O as OptimizationVideoFields, a as OptimizationResizeFields, M as MAX_CONCURRENT_JOBS_LIMIT, c as clampMaxConcurrentJobs, b as MAX_FFMPEG_THREADS_LIMIT, d as clampMaxFfmpegThreads, P as PLUGIN_ID, m as mergeGlobalSettings } from "./index-rAmxCQz6.mjs";
+import { u as useIntl, D as DEFAULT_GLOBAL_SETTINGS, g as getTranslationKey, O as OptimizationVideoFields, a as OptimizationResizeFields, M as MAX_CONCURRENT_JOBS_LIMIT, c as clampMaxConcurrentJobs, b as MAX_FFMPEG_THREADS_LIMIT, d as clampMaxFfmpegThreads, P as PLUGIN_ID, m as mergeGlobalSettings } from "./index-B_Qy06R1.mjs";
 const SETTINGS_READ = [{ action: "plugin::video-optimizer.settings.read", subject: null }];
 const SETTINGS_UPDATE = [{ action: "plugin::video-optimizer.settings.update", subject: null }];
 const CHOICES = ["original", "global", "custom"];

package/dist/admin/{SettingsPage-CN2fR83m.js → SettingsPage-CzelpJtC.js}

@@ -5,7 +5,7 @@ const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-DOuHOS2G.js");
+const index = require("./index-CCnMe2zb.js");
 const SETTINGS_READ = [{ action: "plugin::video-optimizer.settings.read", subject: null }];
 const SETTINGS_UPDATE = [{ action: "plugin::video-optimizer.settings.update", subject: null }];
 const CHOICES = ["original", "global", "custom"];

package/dist/admin/{en-CsHicGzL.mjs → en-Cv305Xlb.mjs}

@@ -45,6 +45,8 @@ const en = {
   "choice.global.description": "Uses the global optimization profile configured in Settings.",
   "choice.custom": "Custom",
   "choice.custom.description": "Configure format and quality settings specifically for this video.",
+  "optimization.warning.title": "This video may already be well optimized",
+  "optimization.warning.description": "Re-encoding may not reduce file size and can even make it larger. Consider Keep original, or raise CRF / lower resolution if you need a smaller output.",
   "upload.optimization.label": "Optimization",
   "upload.button.label": "Optimization settings",
   "upload.modal.title": "Video optimization",

package/dist/admin/{en-CqM903j3.js → en-YfXcNqYi.js}

@@ -47,6 +47,8 @@ const en = {
   "choice.global.description": "Uses the global optimization profile configured in Settings.",
   "choice.custom": "Custom",
   "choice.custom.description": "Configure format and quality settings specifically for this video.",
+  "optimization.warning.title": "This video may already be well optimized",
+  "optimization.warning.description": "Re-encoding may not reduce file size and can even make it larger. Consider Keep original, or raise CRF / lower resolution if you need a smaller output.",
   "upload.optimization.label": "Optimization",
   "upload.button.label": "Optimization settings",
   "upload.modal.title": "Video optimization",

package/dist/admin/{index-rAmxCQz6.mjs → index-B_Qy06R1.mjs}

@@ -6093,6 +6093,7 @@ const listeners$2 = /* @__PURE__ */ new Set();
 let editingFileId = null;
 let editingFileName = null;
 let editingDimensions = null;
+let editingSizeBytes;
 let draftPreference$1 = null;
 let enqueueInFlight = false;
 let cancelInFlight = /* @__PURE__ */ new Set();
@@ -6143,15 +6144,17 @@ const setMediaLibraryCards = (nextCards) => {
 const getEditingMediaLibraryFileId = () => editingFileId;
 const getEditingMediaLibraryFileName = () => editingFileName;
 const getEditingMediaLibraryDimensions = () => editingDimensions;
+const getEditingMediaLibrarySizeBytes = () => editingSizeBytes;
 const getMediaLibraryDraftPreference = () => {
   return draftPreference$1 ?? STABLE_EMPTY_DRAFT$1;
 };
 const isMediaLibraryEnqueueInFlight = () => enqueueInFlight;
 const isMediaLibraryCancelInFlight = (fileId) => cancelInFlight.has(fileId);
-const openMediaLibraryEditor = (fileId, fileName, dimensions) => {
+const openMediaLibraryEditor = (fileId, fileName, metadata) => {
   editingFileId = fileId;
   editingFileName = fileName;
-  editingDimensions = dimensions ?? null;
+  editingDimensions = metadata ? { width: metadata.width, height: metadata.height } : null;
+  editingSizeBytes = metadata?.sizeBytes;
   draftPreference$1 = createDefaultPreference();
   if (draftPreference$1.choice === "custom") {
     draftPreference$1.custom = createCustomForMediaLibraryFile();
@@ -6162,6 +6165,7 @@ const closeMediaLibraryEditor = () => {
   editingFileId = null;
   editingFileName = null;
   editingDimensions = null;
+  editingSizeBytes = void 0;
   draftPreference$1 = null;
   notify$2();
 };
@@ -6391,8 +6395,9 @@ const collectCardActions = (uploadAssets) => {
     entries2.push({
       fileId,
       fileName: asset?.name ?? card.querySelector('[id$="-title"]')?.textContent?.trim() ?? "",
-      width: dimensions?.width,
-      height: dimensions?.height,
+      width: dimensions?.width ?? asset?.width,
+      height: dimensions?.height ?? asset?.height,
+      sizeBytes: typeof asset?.sizeInBytes === "number" ? asset.sizeInBytes : typeof asset?.size === "number" ? Math.round(asset.size * 1024) : void 0,
       optimizeHost,
       cancelHost
     });
@@ -6674,6 +6679,7 @@ let globalSettings = { ...DEFAULT_GLOBAL_SETTINGS };
 const assetPreferencesById = /* @__PURE__ */ new Map();
 const assetNamesById = /* @__PURE__ */ new Map();
 const assetDimensionsById = /* @__PURE__ */ new Map();
+const assetMetadataById = /* @__PURE__ */ new Map();
 const assetPreferencesByFileKey = /* @__PURE__ */ new Map();
 const committedPreferencesByAssetId = /* @__PURE__ */ new Map();
 const committedPreferencesByName = /* @__PURE__ */ new Map();
@@ -6733,14 +6739,40 @@ const resolveCustomSettingsForAsset = (assetId, current) => {
   };
 };
 const getSourceDimensionsForAsset = (assetId) => assetDimensionsById.get(assetId);
-const updateAssetDimensions = (assetId, dimensions) => {
-  assetDimensionsById.set(assetId, dimensions);
+const getSourceMetadataForAsset = (assetId) => {
+  const stored = assetMetadataById.get(assetId);
+  if (stored) {
+    return stored;
+  }
+  const dimensions = assetDimensionsById.get(assetId);
+  const card = cardsSnapshot.find((entry) => entry.assetId === assetId);
+  return {
+    width: dimensions?.width ?? card?.width,
+    height: dimensions?.height ?? card?.height,
+    sizeBytes: card?.sizeBytes,
+    durationSeconds: card?.durationSeconds
+  };
+};
+const updateAssetMetadata = (assetId, metadata) => {
+  const nextMetadata = {
+    ...assetMetadataById.get(assetId),
+    ...metadata
+  };
+  assetMetadataById.set(assetId, nextMetadata);
+  if (nextMetadata.width && nextMetadata.height) {
+    assetDimensionsById.set(assetId, {
+      width: nextMetadata.width,
+      height: nextMetadata.height
+    });
+  }
   const index2 = cards.findIndex((entry) => entry.assetId === assetId);
   if (index2 >= 0) {
     cards[index2] = {
       ...cards[index2],
-      width: dimensions.width,
-      height: dimensions.height
+      width: nextMetadata.width ?? cards[index2].width,
+      height: nextMetadata.height ?? cards[index2].height,
+      sizeBytes: nextMetadata.sizeBytes ?? cards[index2].sizeBytes,
+      durationSeconds: nextMetadata.durationSeconds ?? cards[index2].durationSeconds
     };
     cardsSnapshot = cards.slice();
   }
@@ -6844,6 +6876,7 @@ const clearUploadSession = () => {
   assetPreferencesById.clear();
   assetNamesById.clear();
   assetDimensionsById.clear();
+  assetMetadataById.clear();
   cards = [];
   cardsSnapshot = [];
   editingAssetId = null;
@@ -7158,6 +7191,104 @@ const AssetOptimizationLabel = ({ preference }) => {
     }
   ) });
 };
+const willResize = (sourceWidth, sourceHeight, targetWidth, targetHeight, resizeMode) => {
+  if (targetWidth === sourceWidth && targetHeight === sourceHeight) {
+    return false;
+  }
+  if (resizeMode === "fit-within") {
+    return sourceWidth > targetWidth || sourceHeight > targetHeight;
+  }
+  return true;
+};
+const bitrateMbps = (sizeBytes, durationSeconds) => sizeBytes * 8 / durationSeconds / 1e6;
+const maxBitrateMbpsForResolution = (maxDimension) => {
+  if (maxDimension <= 720) {
+    return 1.5;
+  }
+  if (maxDimension <= 1080) {
+    return 2.5;
+  }
+  if (maxDimension <= 1440) {
+    return 5;
+  }
+  return 8;
+};
+const isBitrateAlreadyEfficient = (metadata) => {
+  const { width, height, sizeBytes, durationSeconds } = metadata;
+  if (!width || !height || !sizeBytes || !durationSeconds || durationSeconds <= 0) {
+    return false;
+  }
+  const maxDimension = Math.max(width, height);
+  const bitrate = bitrateMbps(sizeBytes, durationSeconds);
+  return bitrate <= maxBitrateMbpsForResolution(maxDimension);
+};
+const evaluateOptimizationBenefit = (choice, metadata, globalSettings2, customSettings) => {
+  if (choice === "original") {
+    return false;
+  }
+  const { width, height } = metadata;
+  if (!width || !height) {
+    return false;
+  }
+  if (choice === "global") {
+    const wouldResize = willResize(
+      width,
+      height,
+      globalSettings2.maxWidth,
+      globalSettings2.maxHeight,
+      "fit-within"
+    );
+    if (wouldResize) {
+      return false;
+    }
+    return isBitrateAlreadyEfficient(metadata) || Boolean(metadata.sizeBytes);
+  }
+  if (choice === "custom" && customSettings) {
+    const wouldResizeCustom = willResize(
+      width,
+      height,
+      customSettings.maxWidth,
+      customSettings.maxHeight,
+      "exact"
+    );
+    if (wouldResizeCustom) {
+      return false;
+    }
+    return isBitrateAlreadyEfficient(metadata) || Boolean(metadata.sizeBytes);
+  }
+  return false;
+};
+const OptimizationBenefitWarning = ({
+  choice,
+  metadata,
+  customSettings
+}) => {
+  const { formatMessage: formatMessage2 } = useIntl();
+  const showWarning = evaluateOptimizationBenefit(
+    choice,
+    metadata,
+    getGlobalSettings(),
+    customSettings
+  );
+  if (!showWarning) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      padding: 4,
+      hasRadius: true,
+      background: "warning100",
+      borderColor: "warning200",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "warning700", children: formatMessage2({ id: getTranslationKey("optimization.warning.title") }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "warning700", children: formatMessage2({ id: getTranslationKey("optimization.warning.description") }) }) })
+      ]
+    }
+  );
+};
 const CHOICES = ["original", "global", "custom"];
 const OptimizationChoicePicker = ({
   value,
@@ -7432,6 +7563,7 @@ const UploadEnhancerBridge = () => {
   const dialogElement2 = useSyncExternalStore(subscribeUploadAssets, getUploadDialogElement);
   const editingCard = cards2.find((card) => card.assetId === editingAssetId2);
   const sourceDimensions = editingAssetId2 ? getSourceDimensionsForAsset(editingAssetId2) : void 0;
+  const sourceMetadata = editingAssetId2 ? getSourceMetadataForAsset(editingAssetId2) : {};
   const resolvedCustom = editingAssetId2 && draftPreference2.choice === "custom" ? resolveCustomSettingsForAsset(editingAssetId2, draftPreference2.custom) : draftPreference2.custom;
   useEffect(() => {
     if (!dialogElement2 || !editingAssetId2) {
@@ -7516,6 +7648,19 @@ const UploadEnhancerBridge = () => {
               ),
               /* @__PURE__ */ jsx(Box, { padding: 7, style: { overflow: "auto" }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
                 editingCard?.assetName && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: editingCard.assetName }),
+                /* @__PURE__ */ jsx(
+                  OptimizationBenefitWarning,
+                  {
+                    choice: draftPreference2.choice,
+                    metadata: {
+                      width: editingCard?.width ?? sourceMetadata.width ?? sourceDimensions?.width,
+                      height: editingCard?.height ?? sourceMetadata.height ?? sourceDimensions?.height,
+                      sizeBytes: editingCard?.sizeBytes ?? sourceMetadata.sizeBytes,
+                      durationSeconds: editingCard?.durationSeconds ?? sourceMetadata.durationSeconds
+                    },
+                    customSettings: resolvedCustom ?? void 0
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   OptimizationChoicePicker,
                   {
@@ -7652,6 +7797,10 @@ const MediaLibraryCardActionsBridge = () => {
     subscribeMediaLibraryCards,
     getEditingMediaLibraryDimensions
   );
+  const editingSizeBytes2 = useSyncExternalStore(
+    subscribeMediaLibraryCards,
+    getEditingMediaLibrarySizeBytes
+  );
   const draftPreference2 = useSyncExternalStore(
     subscribeMediaLibraryCards,
     getMediaLibraryDraftPreference
@@ -7740,6 +7889,18 @@ const MediaLibraryCardActionsBridge = () => {
               ),
               /* @__PURE__ */ jsx(Box, { padding: 7, style: { overflow: "auto" }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
                 editingFileName2 && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: editingFileName2 }),
+                /* @__PURE__ */ jsx(
+                  OptimizationBenefitWarning,
+                  {
+                    choice: draftPreference2.choice,
+                    metadata: {
+                      width: editingDimensions2?.width,
+                      height: editingDimensions2?.height,
+                      sizeBytes: editingSizeBytes2
+                    },
+                    customSettings: resolvedCustom ?? void 0
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   OptimizationChoicePicker,
                   {
@@ -7812,7 +7973,8 @@ const MediaLibraryCardActionsBridge = () => {
                 event.stopPropagation();
                 openMediaLibraryEditor(card.fileId, card.fileName, {
                   width: card.width,
-                  height: card.height
+                  height: card.height,
+                  sizeBytes: card.sizeBytes
                 });
               },
               children: /* @__PURE__ */ jsx(Sparkle, {})
@@ -7857,6 +8019,8 @@ const enMessages = {
   [`${PLUGIN_ID}.choice.global.description`]: "Uses the global optimization profile configured in Settings.",
   [`${PLUGIN_ID}.choice.custom`]: "Custom",
   [`${PLUGIN_ID}.choice.custom.description`]: "Configure format and quality settings specifically for this video.",
+  [`${PLUGIN_ID}.optimization.warning.title`]: "This video may already be well optimized",
+  [`${PLUGIN_ID}.optimization.warning.description`]: "Re-encoding may not reduce file size and can even make it larger. Consider Keep original, or raise CRF / lower resolution if you need a smaller output.",
   [`${PLUGIN_ID}.settings.global.defaultFormat`]: "Output format",
   [`${PLUGIN_ID}.settings.global.videoCodec`]: "Video codec",
   [`${PLUGIN_ID}.settings.global.crf`]: "CRF (quality)",
@@ -8220,7 +8384,7 @@ const MediaLibraryCacheBridge = () => {
   }, [dispatch, queryClient]);
   return null;
 };
-const probeVideoFileDimensions = (file) => new Promise((resolve) => {
+const probeVideoFileMetadata = (file) => new Promise((resolve) => {
   const url = URL.createObjectURL(file);
   const video = document.createElement("video");
   video.preload = "metadata";
@@ -8230,9 +8394,14 @@ const probeVideoFileDimensions = (file) => new Promise((resolve) => {
     video.load();
   };
   video.onloadedmetadata = () => {
-    const dimensions = video.videoWidth > 0 && video.videoHeight > 0 ? { width: video.videoWidth, height: video.videoHeight } : void 0;
+    const metadata = video.videoWidth > 0 && video.videoHeight > 0 ? {
+      width: video.videoWidth,
+      height: video.videoHeight,
+      durationSeconds: Number.isFinite(video.duration) && video.duration > 0 ? video.duration : void 0,
+      sizeBytes: file.size
+    } : void 0;
     cleanup();
-    resolve(dimensions);
+    resolve(metadata);
   };
   video.onerror = () => {
     cleanup();
@@ -8497,11 +8666,15 @@ const queueDimensionProbe = (dialog, assetId, assetName, card) => {
         const files = findUploadFilesInDialog(dialog);
         const file = matchUploadFile(files, assetName);
         if (file) {
-          dimensions = await probeVideoFileDimensions(file);
+          const metadata = await probeVideoFileMetadata(file);
+          if (metadata) {
+            updateAssetMetadata(assetId, metadata);
+            return;
+          }
         }
       }
       if (dimensions) {
-        updateAssetDimensions(assetId, dimensions);
+        updateAssetMetadata(assetId, dimensions);
       }
     } finally {
       pendingDimensionProbes.delete(assetId);
@@ -8608,7 +8781,7 @@ const installQueryClientCapture = () => {
     return;
   }
   installed = true;
-  void import("./index-Cs_uiChW.mjs").then((reactQuery) => {
+  void import("./index-ClPTEo43.mjs").then((reactQuery) => {
     const original = reactQuery.useQueryClient;
     if (original.__videoOptimizerPatched) {
       return;
@@ -8692,7 +8865,7 @@ const index = {
         id: getTranslationKey("settings.section-label"),
         defaultMessage: "Video Optimizer"
       },
-      Component: () => import("./SettingsPage-D6e536P0.mjs").then((mod) => ({
+      Component: () => import("./SettingsPage-CiTCB9pJ.mjs").then((mod) => ({
         default: mod.ProtectedSettingsPage
       })),
       permissions: []
@@ -8724,7 +8897,7 @@ const index = {
     const importedTrads = await Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-CsHicGzL.mjs"), "./translations/tr.json": () => import("./tr-Y0-ANilh.mjs") }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-Cv305Xlb.mjs"), "./translations/tr.json": () => import("./tr-CEXm27JX.mjs") }), `./translations/${locale}.json`, 3);
           return {
             data: prefixPluginTranslations(data, PLUGIN_ID),
             locale