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

package/dist/vue.js

@@ -168,6 +168,10 @@ var EXTENSION_MIME_MAP = {
   ".wav": "audio/wav",
   ".aac": "audio/aac",
   ".flac": "audio/flac",
+  ".m4a": "audio/mp4",
+  ".wma": "audio/x-ms-wma",
+  ".opus": "audio/opus",
+  ".weba": "audio/webm",
   // Code/Text
   ".txt": "text/plain",
   ".log": "text/plain",
@@ -494,6 +498,7 @@ var ICON_FULLSCREEN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
 var ICON_COPY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
 var ICON_FAST_FORWARD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg>`;
 var ICON_REWIND = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg>`;
+var ICON_SPEED = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`;
 var ICON_EXTERNAL_WINDOW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><line x1="3" y1="8" x2="21" y2="8"></line><circle cx="6" cy="5.5" r="0.75" fill="currentColor"></circle><circle cx="8.5" cy="5.5" r="0.75" fill="currentColor"></circle><polyline points="14 13 18 13 18 17"></polyline><line x1="11" y1="20" x2="18" y2="13"></line></svg>`;
 var ICON_RESET_ZOOM = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><path d="M13 11a3 3 0 1 0-3 3"></path><path d="M10 11v3h3"></path></svg>`;
 var ICON_MAP = {
@@ -528,7 +533,8 @@ var ICON_MAP = {
   "openSeparateWindow": ICON_EXTERNAL_WINDOW,
   "reset-zoom": ICON_RESET_ZOOM,
   "zoom-reset": ICON_RESET_ZOOM,
-  "resetZoom": ICON_RESET_ZOOM
+  "resetZoom": ICON_RESET_ZOOM,
+  "speed": ICON_SPEED
 };
 var ToolbarController = class {
   el;
@@ -2662,13 +2668,42 @@ var MediaPlugin = class {
         }
       });
     }
+    actions.push({
+      id: "open-window",
+      icon: "open-window",
+      label: "Open in Separate Full Window",
+      type: "button",
+      group: "actions",
+      execute: () => {
+        instance.openInSeparateWindow?.();
+      }
+    });
     return actions;
   }
   async render(ctx) {
-    const mimeType = ctx.metadata.mimeType || "application/octet-stream";
-    const isImage = mimeType.startsWith("image/") || IMAGE_EXTS.includes(ctx.metadata.extension || "");
-    const isVideo = mimeType.startsWith("video/") || VIDEO_EXTS.includes(ctx.metadata.extension || "");
-    const isAudio = mimeType.startsWith("audio/") || AUDIO_EXTS.includes(ctx.metadata.extension || "");
+    const ext = (ctx.metadata.extension || "").toLowerCase();
+    let mimeType = ctx.metadata.mimeType || "";
+    if (!mimeType || mimeType === "application/octet-stream") {
+      const audioMimes = {
+        ".mp3": "audio/mpeg",
+        ".wav": "audio/wav",
+        ".ogg": "audio/ogg",
+        ".flac": "audio/flac",
+        ".aac": "audio/aac",
+        ".m4a": "audio/mp4",
+        ".wma": "audio/x-ms-wma",
+        ".opus": "audio/opus",
+        ".weba": "audio/webm"
+      };
+      if (audioMimes[ext]) {
+        mimeType = audioMimes[ext];
+      } else {
+        mimeType = "application/octet-stream";
+      }
+    }
+    const isImage = mimeType.startsWith("image/") || IMAGE_EXTS.includes(ext);
+    const isVideo = mimeType.startsWith("video/") || VIDEO_EXTS.includes(ext);
+    const isAudio = mimeType.startsWith("audio/") || AUDIO_EXTS.includes(ext);
     let url = "";
     let naturalW = 800;
     let naturalH = 600;
@@ -2740,10 +2775,79 @@ var MediaPlugin = class {
         video.addEventListener("canplay", onMeta, { once: true });
       }
     } else if (isAudio) {
+      const audioCard = document.createElement("div");
+      audioCard.className = "fp-audio-card";
+      const artWrapper = document.createElement("div");
+      artWrapper.className = "fp-audio-artwork-wrapper";
+      const disc = document.createElement("div");
+      disc.className = "fp-audio-disc";
+      const discCenter = document.createElement("div");
+      discCenter.className = "fp-audio-disc-center";
+      const discHole = document.createElement("div");
+      discHole.className = "fp-audio-disc-hole";
+      discCenter.appendChild(discHole);
+      disc.appendChild(discCenter);
+      artWrapper.appendChild(disc);
+      audioCard.appendChild(artWrapper);
+      const info = document.createElement("div");
+      info.className = "fp-audio-info";
+      const title = document.createElement("div");
+      title.className = "fp-audio-title";
+      title.textContent = ctx.metadata.name || "Audio Track";
+      const badges = document.createElement("div");
+      badges.className = "fp-audio-badges";
+      const extTag = document.createElement("span");
+      extTag.className = "fp-audio-ext-tag";
+      const cleanExt = (ext || ".mp3").replace(".", "").toUpperCase();
+      extTag.textContent = `${cleanExt} AUDIO`;
+      badges.appendChild(extTag);
+      const timeTag = document.createElement("span");
+      timeTag.className = "fp-audio-time-tag";
+      timeTag.textContent = "0:00";
+      badges.appendChild(timeTag);
+      info.appendChild(title);
+      info.appendChild(badges);
+      audioCard.appendChild(info);
+      const waveform = document.createElement("div");
+      waveform.className = "fp-audio-waveform";
+      for (let i = 0; i < 16; i++) {
+        const bar = document.createElement("div");
+        bar.className = "fp-audio-wave-bar";
+        waveform.appendChild(bar);
+      }
+      audioCard.appendChild(waveform);
+      const nativeWrapper = document.createElement("div");
+      nativeWrapper.className = "fp-audio-native-wrapper";
       const audio = document.createElement("audio");
       audio.src = url;
       audio.controls = true;
-      element = audio;
+      nativeWrapper.appendChild(audio);
+      audioCard.appendChild(nativeWrapper);
+      const onPlay = () => {
+        disc.classList.add("playing");
+        waveform.classList.add("playing");
+      };
+      const onPause = () => {
+        disc.classList.remove("playing");
+        waveform.classList.remove("playing");
+      };
+      const formatTime = (secs) => {
+        if (!isFinite(secs) || isNaN(secs)) return "0:00";
+        const m = Math.floor(secs / 60);
+        const s = Math.floor(secs % 60);
+        return `${m}:${s < 10 ? "0" : ""}${s}`;
+      };
+      const onTimeUpdate = () => {
+        timeTag.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
+      };
+      const onLoadedMetadata = () => {
+        timeTag.textContent = `0:00 / ${formatTime(audio.duration)}`;
+      };
+      audio.addEventListener("play", onPlay);
+      audio.addEventListener("pause", onPause);
+      audio.addEventListener("timeupdate", onTimeUpdate);
+      audio.addEventListener("loadedmetadata", onLoadedMetadata);
+      element = audioCard;
       mediaElement = audio;
     } else {
       element = document.createElement("div");
@@ -2753,11 +2857,12 @@ var MediaPlugin = class {
     scrollWrapper.className = "fp-media-scroll-wrapper";
     scrollWrapper.style.minWidth = "100%";
     scrollWrapper.style.minHeight = "100%";
-    scrollWrapper.style.width = "max-content";
-    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.width = isAudio ? "100%" : "max-content";
+    scrollWrapper.style.height = isAudio ? "100%" : "max-content";
     scrollWrapper.style.display = "flex";
     scrollWrapper.style.flexDirection = "column";
     scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.justifyContent = isAudio ? "center" : "flex-start";
     scrollWrapper.style.padding = "16px";
     scrollWrapper.style.boxSizing = "border-box";
     const sizer = document.createElement("div");
@@ -2768,6 +2873,11 @@ var MediaPlugin = class {
     sizer.style.justifyContent = "center";
     sizer.style.alignItems = "center";
     sizer.style.margin = "auto 0";
+    if (isAudio) {
+      sizer.style.width = "100%";
+      sizer.style.maxWidth = "520px";
+      sizer.style.margin = "auto";
+    }
     sizer.appendChild(element);
     scrollWrapper.appendChild(sizer);
     ctx.container.style.overflow = "auto";
@@ -2826,7 +2936,9 @@ var MediaPlugin = class {
         element.style.transformOrigin = "center center";
         element.style.flexShrink = "0";
       } else {
-        element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        if (!isAudio) {
+          element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        }
       }
     };
     updateBaseDimensions();
@@ -2852,6 +2964,10 @@ var MediaPlugin = class {
     ro?.observe(ctx.container);
     const cleanup = () => {
       ro?.disconnect();
+      if (mediaElement) {
+        mediaElement.pause();
+        mediaElement.src = "";
+      }
       if (url) URL.revokeObjectURL(url);
       scrollWrapper.remove();
       ctx.container.innerHTML = "";
@@ -2875,36 +2991,54 @@ var MediaPlugin = class {
         currentZoom = level;
         applyTransform();
       } : void 0,
-      fitToPage: isImage || isVideo ? () => {
-        isUserZoomed = false;
-        fitMode = "page";
-        currentZoom = 1;
-        rotation = 0;
-        ctx.container.scrollTop = 0;
-        ctx.container.scrollLeft = 0;
-        updateBaseDimensions();
-        applyTransform();
-      } : void 0,
-      fitToWidth: isImage || isVideo ? () => {
-        isUserZoomed = false;
-        fitMode = "width";
-        currentZoom = 1;
-        rotation = 0;
-        ctx.container.scrollTop = 0;
-        ctx.container.scrollLeft = 0;
-        updateBaseDimensions();
-        applyTransform();
-      } : void 0,
-      resetZoom: isImage || isVideo ? () => {
-        isUserZoomed = false;
-        fitMode = ctx?.options?.fitMode || "width";
-        currentZoom = 1;
-        rotation = 0;
-        ctx.container.scrollTop = 0;
-        ctx.container.scrollLeft = 0;
-        updateBaseDimensions();
-        applyTransform();
-      } : void 0,
+      fitToPage: () => {
+        if (isImage || isVideo) {
+          isUserZoomed = false;
+          fitMode = "page";
+          currentZoom = 1;
+          rotation = 0;
+          ctx.container.scrollTop = 0;
+          ctx.container.scrollLeft = 0;
+          updateBaseDimensions();
+          applyTransform();
+        } else if (isAudio) {
+          ctx.container.scrollTop = 0;
+          ctx.container.scrollLeft = 0;
+          currentZoom = 1;
+        }
+      },
+      fitToWidth: () => {
+        if (isImage || isVideo) {
+          isUserZoomed = false;
+          fitMode = "width";
+          currentZoom = 1;
+          rotation = 0;
+          ctx.container.scrollTop = 0;
+          ctx.container.scrollLeft = 0;
+          updateBaseDimensions();
+          applyTransform();
+        } else if (isAudio) {
+          ctx.container.scrollTop = 0;
+          ctx.container.scrollLeft = 0;
+          currentZoom = 1;
+        }
+      },
+      resetZoom: () => {
+        if (isImage || isVideo) {
+          isUserZoomed = false;
+          fitMode = ctx?.options?.fitMode || "width";
+          currentZoom = 1;
+          rotation = 0;
+          ctx.container.scrollTop = 0;
+          ctx.container.scrollLeft = 0;
+          updateBaseDimensions();
+          applyTransform();
+        } else if (isAudio) {
+          ctx.container.scrollTop = 0;
+          ctx.container.scrollLeft = 0;
+          currentZoom = 1;
+        }
+      },
       rotateCW: isImage || isVideo ? () => {
         rotation = (rotation + 90) % 360;
         applyTransform();