feat: integrate react-pdf-viewer for PDF display (#1112)

frontend/package.json

@@ -49,6 +49,10 @@
     "react-mentions": "^4.3.1",
     "sortablejs": "^1.13.0",
     "timeago.js": "^4.0.2",
-    "url-parse": "^1.5.1"
+    "url-parse": "^1.5.1",
+    "pdfjs-dist": "^3.4.120",
+    "@react-pdf-viewer/core": "^3.9.0",
+    "@react-pdf-viewer/default-layout": "^3.12.0"
+
   }
 }

frontend/src/static/js/components/list-item/Item.scss

@@ -69,13 +69,18 @@ a.item-thumb {
     }
   }
 
-  .item.pdf-item &,
-  .item.attachment-item & {
+  .item.pdf-item & {
     &:before {
       content: '\e415';
+    }
+  }
+
+  .item.attachment-item & {
+    &:before {
       content: '\e24d';
     }
   }
+
 
   .item.playlist-item & {
     &:before {

frontend/src/static/js/components/media-page/MediaPage.scss

@@ -537,7 +537,6 @@
 }
 
 .viewer-container .player-container.audio-player-container {
-
   @media screen and (min-width: 480px) {
     padding-top: 0.75 * 56.25%;
   }
@@ -551,6 +550,26 @@
   }
 }
 
+.viewer-container .pdf-container {
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%; // Default width for mobile
+  height: 400px; // Default height for mobile
+
+  @media (min-width: 768px) and (max-width: 1023px) { // Tablets
+    width: 90%;
+    height: 600px;
+  }
+
+  @media (min-width: 1024px) { // Desktop
+    width: 85%;
+    height: 900px;
+  }
+}
+
+
 .viewer-container .player-container.viewer-pdf-container,
 .viewer-container .player-container.viewer-attachment-container {
   background-color: var(--item-thumb-bg-color);

frontend/src/static/js/components/media-viewer/PdfViewer.js

@@ -1,15 +1,18 @@
 import React from 'react';
+import { Worker, Viewer } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
 
-export default function PdfViewer() {
+import '@react-pdf-viewer/core/lib/styles/index.css'
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+
+
+export default function PdfViewer({ fileUrl }) {
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
   return (
-    <div className="player-container viewer-pdf-container">
-      <div className="player-container-inner">
-        <span>
-          <span>
-            <i className="material-icons">insert_drive_file</i>
-          </span>
-        </span>
+    <div className='pdf-container'>
+        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
+          <Viewer fileUrl={fileUrl} plugins={[defaultLayoutPluginInstance]} />
+        </Worker>
       </div>
-    </div>
   );
 }

frontend/src/static/js/pages/MediaPage.js

@@ -7,6 +7,8 @@ import ImageViewer from '../components/media-viewer/ImageViewer';
 import PdfViewer from '../components/media-viewer/PdfViewer';
 import VideoViewer from '../components/media-viewer/VideoViewer';
 import { _VideoMediaPage } from './_VideoMediaPage';
+import { formatInnerLink } from '../utils/helpers';
+import {SiteContext} from '../utils/contexts/';
 
 if (window.MediaCMS.site.devEnv) {
   const extractUrlParams = () => {
@@ -52,7 +54,8 @@ export class MediaPage extends _VideoMediaPage {
       case 'image':
         return <ImageViewer />;
       case 'pdf':
-        return <PdfViewer />;
+        const pdf_url = formatInnerLink(MediaPageStore.get('media-original-url'), SiteContext._currentValue.url);
+        return <PdfViewer fileUrl={pdf_url} />;
     }
 
     return <AttachmentViewer />;

static/js/_commons.js.LICENSE.txt

@@ -11,6 +11,45 @@ object-assign
  * @license  MIT
  */
 
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * @licstart The following is the entire license notice for the
+ * JavaScript code in this page
+ *
+ * Copyright 2023 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @licend The above is the entire license notice for the
+ * JavaScript code in this page
+ */
+
+/**
+ * A React component to view a PDF document
+ *
+ * @see https://react-pdf-viewer.dev
+ * @license https://react-pdf-viewer.dev/license
+ * @copyright 2019-2023 Nguyen Huu Phuoc <[email protected]>
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *