@files-preview-app/preview-file 1.3.10 → 1.3.11

package/dist/react.cjs

@@ -2751,13 +2751,28 @@ var MediaPlugin = class {
       video.src = url;
       video.controls = true;
       video.playsInline = true;
-      video.style.maxWidth = "90%";
-      video.style.maxHeight = "90%";
       video.style.borderRadius = "8px";
       video.style.boxShadow = "0 8px 30px rgba(0,0,0,0.3)";
       video.style.backgroundColor = "#000000";
+      video.style.objectFit = "contain";
+      video.style.transition = "transform 0.2s ease";
       element = video;
       mediaElement = video;
+      const onMeta = () => {
+        if (video.videoWidth > 0 && video.videoHeight > 0) {
+          naturalW = video.videoWidth;
+          naturalH = video.videoHeight;
+        }
+        updateBaseDimensions();
+        applyTransform();
+      };
+      if (video.readyState >= 1 && video.videoWidth > 0) {
+        naturalW = video.videoWidth;
+        naturalH = video.videoHeight;
+      } else {
+        video.addEventListener("loadedmetadata", onMeta, { once: true });
+        video.addEventListener("canplay", onMeta, { once: true });
+      }
     } else if (isAudio) {
       const audio = document.createElement("audio");
       audio.src = url;
@@ -2798,11 +2813,19 @@ var MediaPlugin = class {
     let fitMode = ctx?.options?.fitMode || "width";
     let isUserZoomed = false;
     const updateBaseDimensions = () => {
-      if (!isImage) return;
-      const img = element;
-      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
-        naturalW = img.naturalWidth;
-        naturalH = img.naturalHeight;
+      if (!isImage && !isVideo) return;
+      if (isImage) {
+        const img = element;
+        if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+          naturalW = img.naturalWidth;
+          naturalH = img.naturalHeight;
+        }
+      } else if (isVideo) {
+        const vid = element;
+        if (vid.videoWidth > 0 && vid.videoHeight > 0) {
+          naturalW = vid.videoWidth;
+          naturalH = vid.videoHeight;
+        }
       }
       const availW = Math.max(100, ctx.container.clientWidth - 32);
       const availH = Math.max(100, ctx.container.clientHeight - 32);
@@ -2816,7 +2839,7 @@ var MediaPlugin = class {
       baseH = Math.max(1, Math.round(naturalH * fitRatio));
     };
     const applyTransform = () => {
-      if (isImage) {
+      if (isImage || isVideo) {
         if (!isUserZoomed) {
           updateBaseDimensions();
         }
@@ -2827,10 +2850,10 @@ var MediaPlugin = class {
         sizer.style.width = `${boxW}px`;
         sizer.style.height = `${boxH}px`;
         sizer.style.margin = boxH < availH ? "auto 0" : "0";
-        const imgW = isRotated90 ? boxH : boxW;
-        const imgH = isRotated90 ? boxW : boxH;
-        element.style.width = `${imgW}px`;
-        element.style.height = `${imgH}px`;
+        const elW = isRotated90 ? boxH : boxW;
+        const elH = isRotated90 ? boxW : boxH;
+        element.style.width = `${elW}px`;
+        element.style.height = `${elH}px`;
         element.style.maxWidth = "none";
         element.style.maxHeight = "none";
         element.style.transform = rotation ? `rotate(${rotation}deg)` : "none";
@@ -2840,6 +2863,8 @@ var MediaPlugin = class {
         element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
       }
     };
+    updateBaseDimensions();
+    applyTransform();
     if (isImage) {
       const img = element;
       if (img.complete && img.naturalWidth > 0) {
@@ -2884,7 +2909,7 @@ var MediaPlugin = class {
         currentZoom = level;
         applyTransform();
       } : void 0,
-      fitToPage: isImage ? () => {
+      fitToPage: isImage || isVideo ? () => {
         isUserZoomed = false;
         fitMode = "page";
         currentZoom = 1;
@@ -2894,7 +2919,7 @@ var MediaPlugin = class {
         updateBaseDimensions();
         applyTransform();
       } : void 0,
-      fitToWidth: isImage ? () => {
+      fitToWidth: isImage || isVideo ? () => {
         isUserZoomed = false;
         fitMode = "width";
         currentZoom = 1;
@@ -2904,7 +2929,7 @@ var MediaPlugin = class {
         updateBaseDimensions();
         applyTransform();
       } : void 0,
-      resetZoom: isImage ? () => {
+      resetZoom: isImage || isVideo ? () => {
         isUserZoomed = false;
         fitMode = ctx?.options?.fitMode || "width";
         currentZoom = 1;