From e65d755104d1e4ee71f1647822e9f4d96f754fee Mon Sep 17 00:00:00 2001
From: Vincent Schmandt <vincentscode@gmail.com>
Date: Sun, 31 Dec 2023 18:27:08 +0100
Subject: [PATCH] Migrate to new pdf viewer

---
 client/components/readers/PdfReader.vue |  10 +-
 client/nuxt.config.js                   |   7 +-
 client/package-lock.json                | 126 +++++++++++++++++++++++-
 client/package.json                     |   3 +-
 package-lock.json                       |   2 +-
 5 files changed, 140 insertions(+), 8 deletions(-)

diff --git a/client/components/readers/PdfReader.vue b/client/components/readers/PdfReader.vue
index 3100f907c..a073eda0c 100644
--- a/client/components/readers/PdfReader.vue
+++ b/client/components/readers/PdfReader.vue
@@ -21,9 +21,12 @@
 
     <div :style="{ height: pdfHeight + 'px' }" class="overflow-hidden m-auto">
       <div class="flex items-center justify-center">
-        <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="overflow-auto">
+        <div>
           <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
-          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="progressEvt" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
+
+          <pdf ref="pdf" :src="pdfDocInitParams" :page="page" class="m-auto z-10 border border-black border-opacity-20 shadow-md" @link-clicked="page = $event" @numpages="numPagesLoaded" @loaded="loadedEvt" :scale.sync="scale" :style="{ scale: scale * 50 + '%' }">
+            <template slot="loading"> loading content here... </template>
+          </pdf>
         </div>
       </div>
     </div>
@@ -34,7 +37,8 @@
 </template>
 
 <script>
-import pdf from '@teckel/vue-pdf'
+import pdf from 'pdfvuer'
+/*import pdf from '@teckel/vue-pdf'*/
 
 export default {
   components: {
diff --git a/client/nuxt.config.js b/client/nuxt.config.js
index 2494fa26c..d721a5b92 100644
--- a/client/nuxt.config.js
+++ b/client/nuxt.config.js
@@ -49,7 +49,7 @@ module.exports = {
     '@/plugins/axios.js',
     '@/plugins/toast.js',
     '@/plugins/utils.js',
-    '@/plugins/i18n.js'
+    '@/plugins/i18n.js',
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -132,7 +132,10 @@ module.exports = {
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    },
+    transpile: [
+      'pdfjs-dist'
+    ]
   },
   watchers: {
     webpack: {
diff --git a/client/package-lock.json b/client/package-lock.json
index 1dc72e4c3..b3bf109b2 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,6 +20,7 @@
         "libarchive.js": "^1.3.0",
         "nuxt": "^2.15.8",
         "nuxt-socket-io": "^1.1.18",
+        "pdfvuer": "^1.10.0",
         "trix": "^1.3.1",
         "v-click-outside": "^3.1.2",
         "vue-toastification": "^1.7.11",
@@ -6270,6 +6271,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==",
+      "deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix."
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -10456,6 +10463,67 @@
       "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
       "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
     },
+    "node_modules/pdfvuer": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/pdfvuer/-/pdfvuer-1.10.0.tgz",
+      "integrity": "sha512-sPeyBeLE12nkOzhiOh97LwSQ72NkGo8WwLC5vpHsFRgeDmquW40PJAxPqrHW12Ua8bpi6RXNm7BjGxvz8jjZ9g==",
+      "dependencies": {
+        "es-abstract": "^1.18.0",
+        "pdfjs-dist": "2.14.305",
+        "raw-loader": "^0.5.1",
+        "vue-resize-sensor": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "pdfjs-dist": "2.14.305",
+        "vue": "^2.6.11"
+      }
+    },
+    "node_modules/pdfvuer/node_modules/pdfjs-dist": {
+      "version": "2.14.305",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.14.305.tgz",
+      "integrity": "sha512-5f7i25J1dKIBczhgfxEgNxfYNIxXEdxqo6Qb4ehY7Ja+p6AI4uUmk/OcVGXfRGm2ys5iaJJhJUwBFwv6Jl/Qww==",
+      "dependencies": {
+        "dommatrix": "^1.0.1",
+        "web-streams-polyfill": "^3.2.1"
+      },
+      "peerDependencies": {
+        "worker-loader": "^3.0.8"
+      },
+      "peerDependenciesMeta": {
+        "worker-loader": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pdfvuer/node_modules/raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q=="
+    },
+    "node_modules/pdfvuer/node_modules/worker-loader": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.8.tgz",
+      "integrity": "sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -16400,6 +16468,14 @@
         "yarn": "*"
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -22207,6 +22283,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -25453,6 +25534,44 @@
       "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
       "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
     },
+    "pdfvuer": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/pdfvuer/-/pdfvuer-1.10.0.tgz",
+      "integrity": "sha512-sPeyBeLE12nkOzhiOh97LwSQ72NkGo8WwLC5vpHsFRgeDmquW40PJAxPqrHW12Ua8bpi6RXNm7BjGxvz8jjZ9g==",
+      "requires": {
+        "es-abstract": "^1.18.0",
+        "pdfjs-dist": "2.14.305",
+        "raw-loader": "^0.5.1",
+        "vue-resize-sensor": "^2.0.0"
+      },
+      "dependencies": {
+        "pdfjs-dist": {
+          "version": "2.14.305",
+          "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.14.305.tgz",
+          "integrity": "sha512-5f7i25J1dKIBczhgfxEgNxfYNIxXEdxqo6Qb4ehY7Ja+p6AI4uUmk/OcVGXfRGm2ys5iaJJhJUwBFwv6Jl/Qww==",
+          "requires": {
+            "dommatrix": "^1.0.1",
+            "web-streams-polyfill": "^3.2.1"
+          }
+        },
+        "raw-loader": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+          "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q=="
+        },
+        "worker-loader": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.8.tgz",
+          "integrity": "sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "loader-utils": "^2.0.0",
+            "schema-utils": "^3.0.0"
+          }
+        }
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -30026,6 +30145,11 @@
         }
       }
     },
+    "web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -30753,4 +30877,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
\ No newline at end of file
+}
diff --git a/client/package.json b/client/package.json
index c815d388d..3b14c1b0c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "libarchive.js": "^1.3.0",
     "nuxt": "^2.15.8",
     "nuxt-socket-io": "^1.1.18",
+    "pdfvuer": "^1.10.0",
     "trix": "^1.3.1",
     "v-click-outside": "^3.1.2",
     "vue-toastification": "^1.7.11",
@@ -38,4 +39,4 @@
     "postcss": "^8.3.6",
     "tailwindcss": "^3.1.4"
   }
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 888c3beb4..40a2d051c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4704,4 +4704,4 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     }
   }
-}
\ No newline at end of file
+}