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,14 +69,19 @@ 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 {
       content: '\e43c';

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 />;

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 <me@phuoc.ng>
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

static/js/about.js

@@ -1 +1 @@
-!function(){"use strict";var n,e={6814:function(n,e,r){(0,r(2541).X)()}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n].call(u.exports,u,u.exports,t),u.exports}t.m=e,n=[],t.O=function(e,r,o,u){if(!r){var i=1/0;for(a=0;a<n.length;a++){r=n[a][0],o=n[a][1],u=n[a][2];for(var f=!0,c=0;c<r.length;c++)(!1&u||i>=u)&&Object.keys(t.O).every((function(n){return t.O[n](r[c])}))?r.splice(c--,1):(f=!1,u<i&&(i=u));f&&(n.splice(a--,1),e=o())}return e}u=u||0;for(var a=n.length;a>0&&n[a-1][2]>u;a--)n[a]=n[a-1];n[a]=[r,o,u]},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,{a:e}),e},t.d=function(n,e){for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.j=443,function(){var n={443:0};t.O.j=function(e){return 0===n[e]};var e=function(e,r){var o,u,i=r[0],f=r[1],c=r[2],a=0;for(o in f)t.o(f,o)&&(t.m[o]=f[o]);if(c)var l=c(t);for(e&&e(r);a<i.length;a++)u=i[a],t.o(n,u)&&n[u]&&n[u][0](),n[i[a]]=0;return t.O(l)},r=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var o=t.O(void 0,[431],(function(){return t(6814)}));o=t.O(o)}();
+!function(){"use strict";var n,e={66814:function(n,e,r){(0,r(92541).X)()}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n].call(u.exports,u,u.exports,t),u.exports}t.m=e,n=[],t.O=function(e,r,o,u){if(!r){var i=1/0;for(a=0;a<n.length;a++){r=n[a][0],o=n[a][1],u=n[a][2];for(var f=!0,c=0;c<r.length;c++)(!1&u||i>=u)&&Object.keys(t.O).every((function(n){return t.O[n](r[c])}))?r.splice(c--,1):(f=!1,u<i&&(i=u));f&&(n.splice(a--,1),e=o())}return e}u=u||0;for(var a=n.length;a>0&&n[a-1][2]>u;a--)n[a]=n[a-1];n[a]=[r,o,u]},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,{a:e}),e},t.d=function(n,e){for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.j=443,function(){var n={443:0};t.O.j=function(e){return 0===n[e]};var e=function(e,r){var o,u,i=r[0],f=r[1],c=r[2],a=0;for(o in f)t.o(f,o)&&(t.m[o]=f[o]);if(c)var l=c(t);for(e&&e(r);a<i.length;a++)u=i[a],t.o(n,u)&&n[u]&&n[u][0](),n[i[a]]=0;return t.O(l)},r=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var o=t.O(void 0,[431],(function(){return t(66814)}));o=t.O(o)}();

static/js/add-media.js

@@ -1 +1 @@
-!function(){"use strict";var n,e={2772:function(n,e,r){(0,r(2541).X)()}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n].call(u.exports,u,u.exports,t),u.exports}t.m=e,n=[],t.O=function(e,r,o,u){if(!r){var i=1/0;for(a=0;a<n.length;a++){r=n[a][0],o=n[a][1],u=n[a][2];for(var f=!0,c=0;c<r.length;c++)(!1&u||i>=u)&&Object.keys(t.O).every((function(n){return t.O[n](r[c])}))?r.splice(c--,1):(f=!1,u<i&&(i=u));f&&(n.splice(a--,1),e=o())}return e}u=u||0;for(var a=n.length;a>0&&n[a-1][2]>u;a--)n[a]=n[a-1];n[a]=[r,o,u]},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,{a:e}),e},t.d=function(n,e){for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.j=841,function(){var n={841:0};t.O.j=function(e){return 0===n[e]};var e=function(e,r){var o,u,i=r[0],f=r[1],c=r[2],a=0;for(o in f)t.o(f,o)&&(t.m[o]=f[o]);if(c)var l=c(t);for(e&&e(r);a<i.length;a++)u=i[a],t.o(n,u)&&n[u]&&n[u][0](),n[i[a]]=0;return t.O(l)},r=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var o=t.O(void 0,[431],(function(){return t(2772)}));o=t.O(o)}();
+!function(){"use strict";var n,e={2772:function(n,e,r){(0,r(92541).X)()}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n].call(u.exports,u,u.exports,t),u.exports}t.m=e,n=[],t.O=function(e,r,o,u){if(!r){var i=1/0;for(a=0;a<n.length;a++){r=n[a][0],o=n[a][1],u=n[a][2];for(var f=!0,c=0;c<r.length;c++)(!1&u||i>=u)&&Object.keys(t.O).every((function(n){return t.O[n](r[c])}))?r.splice(c--,1):(f=!1,u<i&&(i=u));f&&(n.splice(a--,1),e=o())}return e}u=u||0;for(var a=n.length;a>0&&n[a-1][2]>u;a--)n[a]=n[a-1];n[a]=[r,o,u]},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,{a:e}),e},t.d=function(n,e){for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.j=841,function(){var n={841:0};t.O.j=function(e){return 0===n[e]};var e=function(e,r){var o,u,i=r[0],f=r[1],c=r[2],a=0;for(o in f)t.o(f,o)&&(t.m[o]=f[o]);if(c)var l=c(t);for(e&&e(r);a<i.length;a++)u=i[a],t.o(n,u)&&n[u]&&n[u][0](),n[i[a]]=0;return t.O(l)},r=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var o=t.O(void 0,[431],(function(){return t(2772)}));o=t.O(o)}();

static/js/base.js

@@ -1 +1 @@
-!function(){"use strict";var n,e={9980:function(n,e,r){(0,r(2541).X)()}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n].call(u.exports,u,u.exports,t),u.exports}t.m=e,n=[],t.O=function(e,r,o,u){if(!r){var i=1/0;for(a=0;a<n.length;a++){r=n[a][0],o=n[a][1],u=n[a][2];for(var f=!0,c=0;c<r.length;c++)(!1&u||i>=u)&&Object.keys(t.O).every((function(n){return t.O[n](r[c])}))?r.splice(c--,1):(f=!1,u<i&&(i=u));f&&(n.splice(a--,1),e=o())}return e}u=u||0;for(var a=n.length;a>0&&n[a-1][2]>u;a--)n[a]=n[a-1];n[a]=[r,o,u]},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,{a:e}),e},t.d=function(n,e){for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.j=348,function(){var n={348:0};t.O.j=function(e){return 0===n[e]};var e=function(e,r){var o,u,i=r[0],f=r[1],c=r[2],a=0;for(o in f)t.o(f,o)&&(t.m[o]=f[o]);if(c)var l=c(t);for(e&&e(r);a<i.length;a++)u=i[a],t.o(n,u)&&n[u]&&n[u][0](),n[i[a]]=0;return t.O(l)},r=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var o=t.O(void 0,[431],(function(){return t(9980)}));o=t.O(o)}();
+!function(){"use strict";var n,e={49980:function(n,e,r){(0,r(92541).X)()}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n].call(u.exports,u,u.exports,t),u.exports}t.m=e,n=[],t.O=function(e,r,o,u){if(!r){var i=1/0;for(a=0;a<n.length;a++){r=n[a][0],o=n[a][1],u=n[a][2];for(var f=!0,c=0;c<r.length;c++)(!1&u||i>=u)&&Object.keys(t.O).every((function(n){return t.O[n](r[c])}))?r.splice(c--,1):(f=!1,u<i&&(i=u));f&&(n.splice(a--,1),e=o())}return e}u=u||0;for(var a=n.length;a>0&&n[a-1][2]>u;a--)n[a]=n[a-1];n[a]=[r,o,u]},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,{a:e}),e},t.d=function(n,e){for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.j=348,function(){var n={348:0};t.O.j=function(e){return 0===n[e]};var e=function(e,r){var o,u,i=r[0],f=r[1],c=r[2],a=0;for(o in f)t.o(f,o)&&(t.m[o]=f[o]);if(c)var l=c(t);for(e&&e(r);a<i.length;a++)u=i[a],t.o(n,u)&&n[u]&&n[u][0](),n[i[a]]=0;return t.O(l)},r=self.webpackChunkmediacms_frontend=self.webpackChunkmediacms_frontend||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var o=t.O(void 0,[431],(function(){return t(49980)}));o=t.O(o)}();