react-file-preview-engine 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,6 +1,6 @@
-import Mime from 'mime/lite';
 import React2, { useMemo, useState, useRef, useEffect } from 'react';
 import { FileIcon, defaultStyles } from 'react-file-icon';
+import Mime from 'mime/lite';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -47,6 +47,7 @@ function Loader({ children, text }) {
 
 // src/constants.ts
 var defaults = { additionalContext: {}, customRenderers: [], props: {} };
+var fileExtensionRegex = /\.([^.]+)$/;
 function useResolvedSrc(src) {
   const objectUrlRef = useRef(null);
   const revokeObjectURL = () => {
@@ -64,8 +65,6 @@ function useResolvedSrc(src) {
   useEffect(() => revokeObjectURL, []);
   return resolvedSrc;
 }
-
-// src/lib/utils.ts
 var composeClass = (baseClass, props) => `${baseClass}${(props == null ? void 0 : props.className) ? " " + props.className : ""}`;
 var composeProps = (baseClass, props, overrideProps) => {
   const mergedProps = __spreadValues(__spreadValues({}, props), overrideProps);
@@ -81,20 +80,22 @@ function fetchResource(src, type, signal) {
     return res[type]();
   });
 }
+var getFileExtension = (mimeType, fileName) => {
+  var _a, _b, _c;
+  return (_c = (_b = Mime.getExtension(mimeType)) != null ? _b : (_a = fileName == null ? void 0 : fileName.match(fileExtensionRegex)) == null ? void 0 : _a[1]) != null ? _c : "";
+};
+var getFileType = (mimeType, fileName) => mimeType || fileName && Mime.getType(fileName) || "";
 
 // src/lib/rendererRegistry.tsx
 var audioRenderer = {
   canRender: ({ mimeType }) => mimeType.startsWith("audio/"),
   Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
-    return /* @__PURE__ */ React2.createElement("audio", { controls: true, autoPlay, onCanPlay: onLoad, onError, style: { width: "100%" }, "aria-label": fileName || "Audio preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
+    return /* @__PURE__ */ React2.createElement("audio", { className: "rfpe-audio", controls: true, autoPlay, onCanPlay: onLoad, onError, "aria-label": fileName || "Audio preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
   }
 };
 var fallbackRenderer = {
-  Component({ mimeType, iconProps, onLoad }) {
-    const extension = useMemo(() => {
-      var _a;
-      return (_a = Mime.getExtension(mimeType)) != null ? _a : "";
-    }, [mimeType]);
+  Component({ mimeType, fileName, iconProps, onLoad }) {
+    const extension = useMemo(() => getFileExtension(mimeType, fileName), [mimeType, fileName]);
     useEffect(() => {
       onLoad();
     }, []);
@@ -113,13 +114,13 @@ var htmlRenderer = {
       }).catch(onError);
       return () => controller.abort();
     }, [src]);
-    return /* @__PURE__ */ React2.createElement("iframe", { src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`, sandbox: "", className: "rfpe-iframe" });
+    return /* @__PURE__ */ React2.createElement("iframe", { className: "rfpe-iframe", src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`, sandbox: "" });
   }
 };
 var imageRenderer = {
   canRender: ({ mimeType }) => mimeType.startsWith("image/"),
   Component({ src, fileName, onLoad, onError }) {
-    return /* @__PURE__ */ React2.createElement("img", { src, alt: fileName || "Image preview", onLoad, onError, style: { width: "100%", height: "100%" } });
+    return /* @__PURE__ */ React2.createElement("img", { className: "rfpe-image", src, alt: fileName || "Image preview", onLoad, onError });
   }
 };
 var pdfRenderer = {
@@ -140,7 +141,7 @@ var pdfRenderer = {
         if (objectUrl) URL.revokeObjectURL(objectUrl);
       };
     }, [src]);
-    return /* @__PURE__ */ React2.createElement("iframe", { src: data, className: "rfpe-iframe" });
+    return /* @__PURE__ */ React2.createElement("iframe", { className: "rfpe-iframe", src: data });
   }
 };
 var textRenderer = {
@@ -155,13 +156,13 @@ var textRenderer = {
       }).catch(onError);
       return () => controller.abort();
     }, [src]);
-    return /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "100%", overflow: "auto", whiteSpace: "pre-wrap" } }, data);
+    return /* @__PURE__ */ React2.createElement("div", { className: "rfpe-text" }, data);
   }
 };
 var videoRenderer = {
   canRender: ({ mimeType }) => mimeType.startsWith("video/"),
   Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
-    return /* @__PURE__ */ React2.createElement("video", { controls: true, autoPlay, onCanPlay: onLoad, onError, style: { width: "100%", height: "100%" }, "aria-label": fileName || "Video preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
+    return /* @__PURE__ */ React2.createElement("video", { className: "rfpe-video", controls: true, autoPlay, onCanPlay: onLoad, onError, "aria-label": fileName || "Video preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
   }
 };
 var defaultRenderers = [textRenderer, pdfRenderer, htmlRenderer, imageRenderer, audioRenderer, videoRenderer];
@@ -190,7 +191,7 @@ function injectStyle(css) {
     style.appendChild(document.createTextNode(css));
   }
 }
-injectStyle(".rfpe-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  max-width: 100lvw;\n}\n.rfpe-icon {\n  width: 50px;\n  height: 50px;\n}\n.rfpe-iframe {\n  width: 100%;\n  height: 100%;\n  background-color: white;\n}\n.rfpe-loader {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.rfpe-loader-spinner {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  border-top-color: black;\n  border-bottom-color: black;\n  animation: rfpe-spin-fast 0.6s ease infinite;\n}\n.rfpe-loader-text {\n  font-size: 0.875rem;\n}\n@keyframes rfpe-spin-fast {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+injectStyle(".rfpe-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  max-width: 100lvw;\n}\n.rfpe-icon {\n  width: 50px;\n  height: 50px;\n}\n.rfpe-audio {\n  width: 100%;\n}\n.rfpe-iframe {\n  width: 100%;\n  height: 100%;\n  background-color: white;\n}\n.rfpe-image {\n  width: 100%;\n  height: 100%;\n}\n.rfpe-text {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n.rfpe-video {\n  width: 100%;\n  height: 100%;\n}\n.rfpe-loader {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.rfpe-loader-spinner {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  border-top-color: black;\n  border-bottom-color: black;\n  animation: rfpe-spin-fast 0.6s ease infinite;\n}\n.rfpe-loader-text {\n  font-size: 0.875rem;\n}\n@keyframes rfpe-spin-fast {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
 
 // src/index.tsx
 var { additionalContext: defaultContext, customRenderers: defaultRenderers2, props: defaultProps } = defaults;
@@ -209,10 +210,7 @@ function FilePreviewer({
   onError
 }) {
   const resolvedSrc = useResolvedSrc(src);
-  const fileType = useMemo(() => {
-    var _a;
-    return (_a = mimeType != null ? mimeType : Mime.getType(fileName)) != null ? _a : "";
-  }, [mimeType, fileName]);
+  const fileType = useMemo(() => getFileType(mimeType, fileName), [mimeType, fileName]);
   const fileKey = `${resolvedSrc}|${fileType}|${fileName}`;
   const [state, setState] = useState({ key: fileKey, status: "loading" });
   if (state.key !== fileKey) setState({ key: fileKey, status: "loading" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-file-preview-engine",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A renderer-driven React file preview engine with extensible architecture for images, video, audio, PDF, HTML, and custom formats.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
@@ -22,7 +22,6 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
     "mime": "^4.1.0",