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

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;
-    onRotate?: ((...args: any[]) => any) | undefined;
-    onDestroy?: ((...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;
 }>, {
     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;
-    onRotate?: ((...args: any[]) => any) | undefined;
-    onDestroy?: ((...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;
 }>, {
     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;
@@ -4773,6 +4798,36 @@ var CodePlugin = class {
       pre.style.transition = "transform 0.15s ease";
       pre.style.flexShrink = "0";
     } else {
+      if (typeof document !== "undefined" && !document.getElementById("fp-code-syntax-styles")) {
+        const style = document.createElement("style");
+        style.id = "fp-code-syntax-styles";
+        style.textContent = `
+          .fp-code-scroll-wrapper .hljs-keyword { color: #569cd6; font-weight: normal; }
+          .fp-code-scroll-wrapper .hljs-built_in { color: #4ec9b0; }
+          .fp-code-scroll-wrapper .hljs-type { color: #4ec9b0; }
+          .fp-code-scroll-wrapper .hljs-literal { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-number { color: #b5cea8; }
+          .fp-code-scroll-wrapper .hljs-regexp { color: #d16969; }
+          .fp-code-scroll-wrapper .hljs-string { color: #ce9178; }
+          .fp-code-scroll-wrapper .hljs-subst { color: #d4d4d4; }
+          .fp-code-scroll-wrapper .hljs-symbol { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-class { color: #4ec9b0; }
+          .fp-code-scroll-wrapper .hljs-function { color: #dcdcaa; }
+          .fp-code-scroll-wrapper .hljs-title { color: #dcdcaa; }
+          .fp-code-scroll-wrapper .hljs-params { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-comment { color: #6a9955; font-style: italic; }
+          .fp-code-scroll-wrapper .hljs-doctag { color: #608b4e; }
+          .fp-code-scroll-wrapper .hljs-meta { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-section { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-tag { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-name { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-attr { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-attribute { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-variable { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-punctuation { color: #d4d4d4; }
+        `;
+        document.head.appendChild(style);
+      }
       ctx.container.style.backgroundColor = "#1e1e1e";
       ctx.container.style.color = "#d4d4d4";
       scrollWrapper.className = "fp-code-scroll-wrapper";
@@ -4782,9 +4837,13 @@ var CodePlugin = class {
       scrollWrapper.style.height = "max-content";
       scrollWrapper.style.display = "flex";
       scrollWrapper.style.alignItems = "flex-start";
-      scrollWrapper.style.padding = "16px";
+      scrollWrapper.style.padding = "16px 16px 16px 0";
       scrollWrapper.style.boxSizing = "border-box";
-      const lineCount = fullText.split(/\r?\n/).length || 1;
+      const rawLines = fullText.split(/\r?\n/);
+      if (rawLines.length > 1 && rawLines[rawLines.length - 1] === "") {
+        rawLines.pop();
+      }
+      const lineCount = Math.max(1, rawLines.length);
       const gutterLines = [];
       for (let i = 1; i <= lineCount; i++) {
         gutterLines.push(String(i));
@@ -4792,16 +4851,23 @@ var CodePlugin = class {
       lineGutter.className = "fp-code-gutter";
       lineGutter.style.userSelect = "none";
       lineGutter.style.textAlign = "right";
-      lineGutter.style.paddingRight = "16px";
-      lineGutter.style.marginRight = "16px";
+      lineGutter.style.padding = "0 16px";
+      lineGutter.style.margin = "0 16px 0 0";
       lineGutter.style.borderRight = "1px solid #333333";
       lineGutter.style.color = "#858585";
       lineGutter.style.fontFamily = "Consolas, Menlo, Monaco, 'Courier New', monospace";
       lineGutter.style.fontSize = `${fontSize}px`;
       lineGutter.style.lineHeight = "1.6";
+      lineGutter.style.whiteSpace = "pre";
       lineGutter.style.flexShrink = "0";
+      lineGutter.style.position = "sticky";
+      lineGutter.style.left = "0";
+      lineGutter.style.backgroundColor = "#1e1e1e";
+      lineGutter.style.zIndex = "2";
+      lineGutter.style.boxSizing = "border-box";
       lineGutter.textContent = gutterLines.join("\n");
       pre.style.margin = "0";
+      pre.style.padding = "0 16px 0 0";
       pre.style.fontFamily = "Consolas, Menlo, Monaco, 'Courier New', monospace";
       pre.style.fontSize = `${fontSize}px`;
       pre.style.lineHeight = "1.6";
@@ -4809,6 +4875,11 @@ var CodePlugin = class {
       pre.style.wordBreak = "normal";
       pre.style.overflowWrap = "normal";
       pre.style.flex = "1";
+      code.style.display = "block";
+      code.style.fontFamily = "inherit";
+      code.style.fontSize = "inherit";
+      code.style.lineHeight = "inherit";
+      code.style.whiteSpace = "inherit";
     }
     const ext = (ctx.metadata.extension || "").replace(".", "");
     const renderCodePage = (text) => {