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

package/dist/vue.d.cts

@@ -34,10 +34,10 @@ declare const FilePreview: vue.DefineComponent<vue.ExtractPropTypes<{
     onLoading?: ((...args: any[]) => any) | undefined;
     onLoaded?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
-    "onPage-change"?: ((...args: any[]) => any) | undefined;
-    "onZoom-change"?: ((...args: any[]) => any) | undefined;
     onRotate?: ((...args: any[]) => any) | undefined;
     onDestroy?: ((...args: any[]) => any) | undefined;
+    "onPage-change"?: ((...args: any[]) => any) | undefined;
+    "onZoom-change"?: ((...args: any[]) => any) | undefined;
 }>, {
     plugins: PreviewPlugin[];
     options: PreviewViewerOptions;

package/dist/vue.d.ts

@@ -34,10 +34,10 @@ declare const FilePreview: vue.DefineComponent<vue.ExtractPropTypes<{
     onLoading?: ((...args: any[]) => any) | undefined;
     onLoaded?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
-    "onPage-change"?: ((...args: any[]) => any) | undefined;
-    "onZoom-change"?: ((...args: any[]) => any) | undefined;
     onRotate?: ((...args: any[]) => any) | undefined;
     onDestroy?: ((...args: any[]) => any) | undefined;
+    "onPage-change"?: ((...args: any[]) => any) | undefined;
+    "onZoom-change"?: ((...args: any[]) => any) | undefined;
 }>, {
     plugins: PreviewPlugin[];
     options: PreviewViewerOptions;

package/dist/vue.js

@@ -2717,13 +2717,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;
@@ -2764,11 +2779,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);
@@ -2782,7 +2805,7 @@ var MediaPlugin = class {
       baseH = Math.max(1, Math.round(naturalH * fitRatio));
     };
     const applyTransform = () => {
-      if (isImage) {
+      if (isImage || isVideo) {
         if (!isUserZoomed) {
           updateBaseDimensions();
         }
@@ -2793,10 +2816,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";
@@ -2806,6 +2829,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) {
@@ -2850,7 +2875,7 @@ var MediaPlugin = class {
         currentZoom = level;
         applyTransform();
       } : void 0,
-      fitToPage: isImage ? () => {
+      fitToPage: isImage || isVideo ? () => {
         isUserZoomed = false;
         fitMode = "page";
         currentZoom = 1;
@@ -2860,7 +2885,7 @@ var MediaPlugin = class {
         updateBaseDimensions();
         applyTransform();
       } : void 0,
-      fitToWidth: isImage ? () => {
+      fitToWidth: isImage || isVideo ? () => {
         isUserZoomed = false;
         fitMode = "width";
         currentZoom = 1;
@@ -2870,7 +2895,7 @@ var MediaPlugin = class {
         updateBaseDimensions();
         applyTransform();
       } : void 0,
-      resetZoom: isImage ? () => {
+      resetZoom: isImage || isVideo ? () => {
         isUserZoomed = false;
         fitMode = ctx?.options?.fitMode || "width";
         currentZoom = 1;
@@ -6009,6 +6034,16 @@ var ThreeDPlugin = class {
         type: "button",
         group: "actions",
         execute: () => instance.download?.()
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.openInSeparateWindow?.();
+        }
       }
     ];
   }
@@ -6079,12 +6114,21 @@ var ThreeDPlugin = class {
       });
       meshGroup.add(obj);
     }
+    const initialBox = new THREE.Box3().setFromObject(meshGroup);
+    const center = initialBox.getCenter(new THREE.Vector3());
+    meshGroup.position.sub(center);
     scene.add(meshGroup);
     const box = new THREE.Box3().setFromObject(meshGroup);
-    const sphere = box.getBoundingSphere(new THREE.Sphere());
-    const radius = Math.max(sphere.radius, 10);
+    const size = box.getSize(new THREE.Vector3());
+    const maxDim = Math.max(size.x, size.y, size.z) || 10;
+    grid.position.y = -size.y / 2;
+    const gridScale = Math.max(0.1, maxDim / 50);
+    grid.scale.set(gridScale, 1, gridScale);
+    const fovRad = camera.fov * (Math.PI / 180);
+    let cameraDistance = maxDim / 2 / Math.tan(fovRad / 2);
+    cameraDistance = Math.max(cameraDistance * 1.5, 2);
     const fitCamera = () => {
-      camera.position.set(radius * 1.5, radius * 1.2, radius * 2);
+      camera.position.set(cameraDistance * 0.8, cameraDistance * 0.6, cameraDistance);
       camera.lookAt(0, 0, 0);
       controls.target.set(0, 0, 0);
       controls.update();
@@ -6130,6 +6174,7 @@ var ThreeDPlugin = class {
         controls.update();
       },
       fitToPage: fitCamera,
+      fitToWidth: fitCamera,
       resetZoom: fitCamera,
       rotateCW: () => {
         isWireframe = !isWireframe;