Migrate to new pdf viewer

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: {

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: {

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",

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",