Merge pull request #236 from alantoa/webp-file-support

feat: webp file support

Author: cyntler

README.md

@@ -30,6 +30,7 @@ File viewer for React.
 | xls       | application/vnd.ms-excel                                                  |
 | xlsx      | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet         |
 | mp4       | video/mp4                                                                 |
+| webp      | image/webp                                                                |
 
 ## Storybook Demo
 

package-lock.json

@@ -38,7 +38,7 @@
     "@types/papaparse": "^5.3.9",
     "mustache": "^4.2.0",
     "papaparse": "^5.4.1",
-    "react-pdf": "7.5.0",
+    "react-pdf": "7.7.1",
     "styled-components": "^6.0.8"
   },
   "devDependencies": {
@@ -85,6 +85,9 @@
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1"
   },
+  "resolutions": {
+    "typescript": "^5.2.2"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

package.json

@@ -7,6 +7,8 @@ import pdfMultiplePagesFile from "./exampleFiles/pdf-multiple-pages-file.pdf";
 import pngFile from "./exampleFiles/png-image.png";
 import csvFile from "./exampleFiles/csv-file.csv";
 import epsFile from "./exampleFiles/eps-file.eps";
+import webpFile from "./exampleFiles/webp-file.webp";
+
 import { DocViewerRef, IDocument } from ".";
 
 /* eslint-disable import/no-anonymous-default-export */
@@ -19,6 +21,7 @@ const docs: IDocument[] = [
   { uri: pngFile },
   { uri: csvFile },
   { uri: pdfMultiplePagesFile },
+  { uri: webpFile },
 ];
 
 export const Default = () => (

src/DocViewer.stories.tsx

@@ -9,6 +9,7 @@ import TXTRenderer from "./txt";
 import CSVRenderer from "./csv";
 import GIFRenderer from "./gif";
 import VideoRenderer from "./video";
+import WebPRenderer from "./webp";
 
 export const DocViewerRenderers = [
   BMPRenderer,
@@ -22,6 +23,7 @@ export const DocViewerRenderers = [
   CSVRenderer,
   GIFRenderer,
   VideoRenderer,
+  WebPRenderer,
 ];
 
 export {
@@ -36,4 +38,5 @@ export {
   CSVRenderer,
   GIFRenderer,
   VideoRenderer,
+  WebPRenderer,
 };

src/exampleFiles/webp-file.webp

@@ -5,8 +5,6 @@ import { DocRenderer, IStyledProps } from "../..";
 import PDFPages from "./components/pages/PDFPages";
 import PDFControls from "./components/PDFControls";
 import { PDFProvider } from "./state";
-import "react-pdf/dist/esm/Page/AnnotationLayer.css";
-import "react-pdf/dist/esm/Page/TextLayer.css";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
 

src/renderers/index.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DocRenderer } from "../..";
+import ImageProxyRenderer from "../image";
+
+const WebPRenderer: DocRenderer = (props) => <ImageProxyRenderer {...props} />;
+
+WebPRenderer.fileTypes = ["webp", "image/webp"];
+WebPRenderer.weight = 0;
+
+export default WebPRenderer;