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

package/dist/styles.css

@@ -409,3 +409,179 @@
   text-transform: uppercase;
   flex-shrink: 0;
 }
+
+/* ==========================================================================
+   Audio Preview Card Component
+   ========================================================================== */
+.fp-audio-card {
+  width: 100%;
+  max-width: 520px;
+  background: var(--fp-toolbar-bg, #ffffff);
+  border: 1px solid var(--fp-toolbar-border, #e2e8f0);
+  border-radius: 20px;
+  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
+  padding: 36px 32px 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  box-sizing: border-box;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fp-audio-artwork-wrapper {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  margin-bottom: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fp-audio-disc {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 60%, #020617 100%);
+  border: 4px solid var(--fp-toolbar-border, #e2e8f0);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 
+              inset 0 0 0 8px rgba(255, 255, 255, 0.05), 
+              inset 0 0 0 18px rgba(0, 0, 0, 0.3), 
+              inset 0 0 0 28px rgba(255, 255, 255, 0.03);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.fp-audio-disc.playing {
+  animation: fp-spin 4s linear infinite;
+}
+
+.fp-audio-disc-center {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5);
+}
+
+.fp-audio-disc-hole {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.fp-audio-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.fp-audio-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--fp-text-color, #0f172a);
+  margin-bottom: 6px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fp-audio-badges {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--fp-btn-color, #64748b);
+  margin-bottom: 8px;
+}
+
+.fp-audio-ext-tag {
+  background: rgba(59, 130, 246, 0.12);
+  color: var(--fp-accent, #3b82f6);
+  font-weight: 700;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.fp-audio-time-tag {
+  font-size: 12px;
+  color: var(--fp-btn-color, #64748b);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sound Waveform / Equalizer Bars */
+.fp-audio-waveform {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 32px;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.fp-audio-wave-bar {
+  width: 4px;
+  height: 8px;
+  background: var(--fp-accent, #3b82f6);
+  border-radius: 2px;
+  opacity: 0.35;
+  transition: height 0.2s ease, opacity 0.2s ease;
+}
+
+.fp-audio-waveform.playing .fp-audio-wave-bar {
+  opacity: 0.85;
+  animation: fp-wave-dance 1.2s ease-in-out infinite alternate;
+}
+
+@keyframes fp-wave-dance {
+  0% { height: 6px; }
+  50% { height: 26px; }
+  100% { height: 10px; }
+}
+
+.fp-audio-wave-bar:nth-child(1)  { animation-delay: 0.05s !important; }
+.fp-audio-wave-bar:nth-child(2)  { animation-delay: 0.20s !important; }
+.fp-audio-wave-bar:nth-child(3)  { animation-delay: 0.35s !important; }
+.fp-audio-wave-bar:nth-child(4)  { animation-delay: 0.10s !important; }
+.fp-audio-wave-bar:nth-child(5)  { animation-delay: 0.45s !important; }
+.fp-audio-wave-bar:nth-child(6)  { animation-delay: 0.25s !important; }
+.fp-audio-wave-bar:nth-child(7)  { animation-delay: 0.50s !important; }
+.fp-audio-wave-bar:nth-child(8)  { animation-delay: 0.15s !important; }
+.fp-audio-wave-bar:nth-child(9)  { animation-delay: 0.40s !important; }
+.fp-audio-wave-bar:nth-child(10) { animation-delay: 0.30s !important; }
+.fp-audio-wave-bar:nth-child(11) { animation-delay: 0.55s !important; }
+.fp-audio-wave-bar:nth-child(12) { animation-delay: 0.18s !important; }
+.fp-audio-wave-bar:nth-child(13) { animation-delay: 0.42s !important; }
+.fp-audio-wave-bar:nth-child(14) { animation-delay: 0.22s !important; }
+.fp-audio-wave-bar:nth-child(15) { animation-delay: 0.48s !important; }
+.fp-audio-wave-bar:nth-child(16) { animation-delay: 0.12s !important; }
+
+.fp-audio-native-wrapper {
+  width: 100%;
+}
+
+.fp-audio-native-wrapper audio {
+  width: 100%;
+  height: 44px;
+  border-radius: 22px;
+  outline: none;
+}
+

package/dist/vue.cjs

@@ -201,6 +201,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",
@@ -527,6 +531,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 = {
@@ -561,7 +566,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;
@@ -2695,13 +2701,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;
@@ -2773,10 +2808,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");
@@ -2786,11 +2890,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");
@@ -2801,6 +2906,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";
@@ -2859,7 +2969,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();
@@ -2885,6 +2997,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 = "";
@@ -2908,36 +3024,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();