ssovee-os-web-ui 0.1.102 → 0.1.104

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

@@ -7,7 +7,9 @@ var Editor = require('@monaco-editor/react');
 var react$1 = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var uaParserJs = require('ua-parser-js');
+var reactPdf = require('react-pdf');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
@@ -2318,12 +2320,20 @@ 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;
+reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))
+).toString();
+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 +2343,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 +2389,61 @@ 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);
-  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]);
+  const [pageCount, setPageCount] = React24.useState(null);
+  const [pdfError, setPdfError] = React24.useState(false);
   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.jsx("div", { className: cn("flex min-h-96 flex-col items-center overflow-auto p-3", className), children: pdfError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Unable to render ",
+      fileName,
+      ". The PDF may be invalid or corrupted."
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactPdf.Document,
+      {
+        file: { data: toPdfBytes(base64) },
+        loading: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "Loading ",
+          fileName,
+          "..."
+        ] }),
+        error: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "Unable to render ",
+          fileName,
+          ". The PDF may be invalid or corrupted."
+        ] }),
+        onLoadSuccess: ({ numPages }) => {
+          setPageCount(numPages);
+          setPdfError(false);
+        },
+        onLoadError: () => setPdfError(true),
+        className: "flex w-full flex-col items-center",
+        children: pageCount !== null && Array.from({ length: pageCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          reactPdf.Page,
+          {
+            pageNumber: index + 1,
+            renderAnnotationLayer: false,
+            renderTextLayer: false,
+            className: "mb-3 max-w-full shadow-sm"
+          },
+          `${fileName}-${index + 1}`
+        ))
+      }
+    ) });
+  }
+  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 +2460,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;