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/pdfjs-dist@3.4.120/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 />;