ssovee-os-web-ui 0.1.102 → 0.1.103

package/README.md

@@ -107,7 +107,7 @@ export function NoteEditor() {
 
 ### PreviewComponent
 
-`PreviewComponent` previews a file from base64 data supplied by the host application. Pass either raw base64 or a complete data URL along with the original file name. Image files, PDFs, text files, and JSON are supported.
+`PreviewComponent` previews a file from base64 data supplied by the host application. Pass either raw base64 or a complete data URL along with the original file name. Images, PDFs, text files, JSON, audio, and video use browser-native previews. Office and binary formats receive a download action because browsers cannot render them directly from base64 without a document parser.
 
 ```tsx
 import { PreviewComponent } from "ssovee-os-web-ui";
@@ -123,7 +123,7 @@ export function FilePreview({ fileName, base64 }: { fileName: string; base64: st
 }
 ```
 
-Supported image extensions include `avif`, `bmp`, `gif`, `jpg`, `jpeg`, `png`, `svg`, and `webp`. Supported text extensions include `css`, `csv`, `html`, `js`, `jsx`, `md`, `ts`, `tsx`, `txt`, `xml`, `yaml`, and `yml`.
+Supported image extensions include `avif`, `bmp`, `gif`, `heic`, `jpg`, `jpeg`, `png`, `svg`, `tif`, `tiff`, and `webp`. Supported text extensions include common `c`, `cpp`, `css`, `csv`, `env`, `html`, `java`, `js`, `jsx`, `md`, `php`, `py`, `rb`, `rs`, `sh`, `sql`, `ts`, `tsx`, `txt`, `xml`, `yaml`, and `yml` files. Audio and video include common `aac`, `flac`, `m4a`, `mp3`, `ogg`, `wav`, `avi`, `m4v`, `mkv`, `mov`, `mp4`, `mpeg`, `ogv`, `webm`, and `wmv` files. Office formats such as `doc`, `docx`, `xls`, `xlsx`, `ppt`, and `pptx`, plus archives such as `zip`, `7z`, and `rar`, are available to download.
 
 ## Window components
 

package/dist/index.cjs

@@ -2318,12 +2318,16 @@ var Tabs = ({
   ] });
 };
 var Tabs_default = Tabs;
-var imageExtensions = /\.(avif|bmp|gif|jpe?g|png|svg|webp)$/i;
-var textExtensions = /\.(css|csv|html?|js|jsx|md|mjs|ts|tsx|txt|xml|yaml|yml)$/i;
+var imageExtensions = /\.(avif|bmp|gif|heic|jpe?g|png|svg|tiff?|webp)$/i;
+var textExtensions = /\.(c|cc|conf|cpp|css|csv|env|h|hpp|html?|ini|java|js|jsx|log|md|mjs|php|py|rb|rs|sh|sql|swift|ts|tsx|txt|xml|yaml|yml)$/i;
+var audioExtensions = /\.(aac|flac|m4a|mp3|ogg|wav|weba)$/i;
+var videoExtensions = /\.(avi|m4v|mkv|mov|mp4|mpeg|ogv|webm|wmv)$/i;
 var getPreviewType = (fileName) => {
   if (/\.pdf$/i.test(fileName)) return "pdf";
   if (/\.json$/i.test(fileName)) return "json";
   if (imageExtensions.test(fileName)) return "image";
+  if (audioExtensions.test(fileName)) return "audio";
+  if (videoExtensions.test(fileName)) return "video";
   if (textExtensions.test(fileName) || !fileName.includes(".")) return "text";
   return "unsupported";
 };
@@ -2333,12 +2337,40 @@ var getMimeType = (fileName) => {
     avif: "image/avif",
     bmp: "image/bmp",
     gif: "image/gif",
+    heic: "image/heic",
     jpeg: "image/jpeg",
     jpg: "image/jpeg",
     png: "image/png",
     svg: "image/svg+xml",
+    tif: "image/tiff",
+    tiff: "image/tiff",
     webp: "image/webp",
-    pdf: "application/pdf"
+    pdf: "application/pdf",
+    aac: "audio/aac",
+    flac: "audio/flac",
+    m4a: "audio/mp4",
+    mp3: "audio/mpeg",
+    ogg: "audio/ogg",
+    wav: "audio/wav",
+    weba: "audio/webm",
+    avi: "video/x-msvideo",
+    m4v: "video/mp4",
+    mkv: "video/x-matroska",
+    mov: "video/quicktime",
+    mp4: "video/mp4",
+    mpeg: "video/mpeg",
+    ogv: "video/ogg",
+    webm: "video/webm",
+    wmv: "video/x-ms-wmv",
+    doc: "application/msword",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    xls: "application/vnd.ms-excel",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ppt: "application/vnd.ms-powerpoint",
+    pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    zip: "application/zip",
+    "7z": "application/x-7z-compressed",
+    rar: "application/vnd.rar"
   };
   return mimeTypes[extension ?? ""] ?? "application/octet-stream";
 };
@@ -2351,33 +2383,69 @@ var decodeBase64 = (base64) => {
   const bytes = Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
   return new TextDecoder().decode(bytes);
 };
-var toPdfBlob = (base64) => {
+var toPdfBytes = (base64) => {
   const value = base64.includes(",") ? base64.slice(base64.indexOf(",") + 1) : base64;
-  const bytes = Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
-  return new Blob([bytes], { type: "application/pdf" });
+  return Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
 };
 var PreviewComponent = ({ fileName, base64, className }) => {
   const previewType = getPreviewType(fileName);
   const dataUrl = toDataUrl(base64, fileName);
-  const [pdfUrl, setPdfUrl] = React24.useState(dataUrl);
+  const pdfContainerRef = React24.useRef(null);
+  const [pdfState, setPdfState] = React24.useState("loading");
   React24.useEffect(() => {
-    if (previewType !== "pdf" || typeof URL.createObjectURL !== "function") return;
-    try {
-      const objectUrl = URL.createObjectURL(toPdfBlob(base64));
-      setPdfUrl(objectUrl);
-      return () => URL.revokeObjectURL(objectUrl);
-    } catch {
-      setPdfUrl(dataUrl);
-    }
-  }, [base64, dataUrl, previewType]);
+    if (previewType !== "pdf" || !pdfContainerRef.current) return;
+    let cancelled = false;
+    const container = pdfContainerRef.current;
+    setPdfState("loading");
+    container.replaceChildren();
+    import('pdfjs-dist/legacy/build/pdf.mjs').then(async ({ getDocument }) => {
+      const pdf = await getDocument({ data: toPdfBytes(base64) }).promise;
+      for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
+        if (cancelled) return;
+        const page = await pdf.getPage(pageNumber);
+        const viewport = page.getViewport({ scale: 1.35 });
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context) throw new Error("Canvas is not supported");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        canvas.setAttribute("aria-label", `${fileName}, page ${pageNumber}`);
+        canvas.className = "mb-3 max-w-full shadow-sm";
+        container.appendChild(canvas);
+        await page.render({ canvas, canvasContext: context, viewport }).promise;
+      }
+      if (!cancelled) setPdfState("ready");
+    }).catch(() => {
+      if (!cancelled) setPdfState("error");
+    });
+    return () => {
+      cancelled = true;
+      container.replaceChildren();
+    };
+  }, [base64, fileName, previewType]);
   if (previewType === "image") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-full min-h-48 w-full items-center justify-center overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: dataUrl, alt: fileName, className: "max-h-full max-w-full object-contain" }) });
   }
   if (previewType === "pdf") {
-    return /* @__PURE__ */ jsxRuntime.jsx("object", { data: pdfUrl, type: "application/pdf", "aria-label": fileName, className: cn("h-full min-h-96 w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: pdfUrl, download: fileName, children: [
-      "Download ",
-      fileName
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-96 flex-col items-center overflow-auto p-3", className), children: [
+      pdfState === "loading" && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        "Loading ",
+        fileName,
+        "..."
+      ] }),
+      pdfState === "error" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3", children: "Unable to render this PDF." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: pdfContainerRef, className: "flex w-full flex-col items-center" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("a", { href: dataUrl, download: fileName, className: "mt-3", children: [
+        "Download ",
+        fileName
+      ] })
+    ] });
+  }
+  if (previewType === "audio") {
+    return /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: true, src: dataUrl, className: cn("w-full", className) });
+  }
+  if (previewType === "video") {
+    return /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, src: dataUrl, className: cn("max-h-full max-w-full", className) });
   }
   if (previewType === "text" || previewType === "json") {
     let content;
@@ -2394,7 +2462,7 @@ var PreviewComponent = ({ fileName, base64, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-h-48 items-center justify-center p-4 text-center", className), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
     "Preview is not available for ",
     fileName,
-    "."
+    ". This file format is not supported."
   ] }) });
 };
 var PreviewComponent_default = PreviewComponent;