pdfvuer resolve

package-lock.json

@@ -6525,6 +6525,21 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "pdfjs-dist": {
+            "version": "2.5.207",
+            "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz",
+            "integrity": "sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw=="
+        },
+        "pdfvuer": {
+            "version": "1.9.2",
+            "resolved": "https://registry.npmjs.org/pdfvuer/-/pdfvuer-1.9.2.tgz",
+            "integrity": "sha512-SI2fnjVzlFEoJZ5uBgW3KsLyQ60Rguxj30l13VH5462cMn9tDwbs35dTM9KeBOuNuK7jZ5nHRzLWkU/xYfxsuQ==",
+            "requires": {
+                "pdfjs-dist": "2.5.207",
+                "raw-loader": "^0.5.1",
+                "vue-resize-sensor": "^2.0.0"
+            }
+        },
         "performance-now": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -7174,6 +7189,11 @@
                 }
             }
         },
+        "raw-loader": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+            "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao="
+        },
         "read-pkg": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -8639,6 +8659,11 @@
                 "recaptcha-v3": "^1.8.0"
             }
         },
+        "vue-resize-sensor": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
+            "integrity": "sha512-W+y2EAI/BxS4Vlcca9scQv8ifeBFck56DRtSwWJ2H4Cw1GLNUYxiZxUHHkuzuI5JPW/cYtL1bPO5xPyEXx4LmQ=="
+        },
         "vue-router": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",

package.json

@@ -31,6 +31,7 @@
         "@stripe/stripe-js": "^1.22.0",
         "lodash": "^4.17.21",
         "node-sass": "^4.14.1",
+        "pdfvuer": "^1.9.2",
         "tailwind-scrollbar-hide": "^1.1.7",
         "twemoji": "^13.1.0",
         "vee-validate": "^3.4.14",

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -13,7 +13,7 @@
         </div>
 
         <!--Desktop preview-->
-        <div v-if="!$isMobile() && (isAudio || isImage || isVideo)" class="w-full h-full flex justify-center items-center">
+        <div v-if="!$isMobile() && (isAudio || isImage || isVideo || isPDF)" class="w-full h-full flex justify-center items-center">
 
 			<!--Show PDF-->
             <PdfFile v-if="isPDF" :file="currentFile" />
@@ -27,11 +27,12 @@
         </div>
 
 		<!--Mobile Preview-->
-		<div v-if="$isMobile() && (isAudio || isImage || isVideo)" @scroll="checkGroupInView" id="group-box" class="flex gap-6 snap-x snap-mandatory overflow-x-auto h-full">
-			<div v-for="(file, i) in files" :key="i" :id="`group-${file.data.id}`" class="w-screen h-full flex items-center justify-center snap-center shrink-0">
+		<div v-if="$isMobile() && (isAudio || isImage || isVideo || isPDF)" @scroll="checkGroupInView" id="group-box" ref="scrollBox" class="flex gap-6 snap-x snap-mandatory overflow-x-auto h-full">
+			<div v-for="(file, i) in files" :key="i" :id="`group-${file.data.id}`" class="w-screen h-full flex items-center justify-center snap-center shrink-0 relative">
                 <ImageFile v-if="isImage" :file="file" class="max-w-[100%] max-h-[100%] self-center mx-auto"/>
 				<Audio v-if="isAudio" :file="file"/>
                 <Video v-if="isVideo" :file="file" />
+				<PdfFile v-if="isPDF" :file="file" />
 			</div>
 		</div>
     </div>
@@ -132,7 +133,7 @@ export default {
         getFilesForView() {
             let requestedFile = this.clipboard[0]
 
-            this.entries.map((element) => {
+            this.entries.map(element => {
                 if (requestedFile.data.attributes.mimetype === 'pdf') {
                     if (element.data.attributes.mimetype === 'pdf') this.files.push(element)
                 } else {
@@ -142,9 +143,16 @@ export default {
 
             this.files.forEach((element, index) => {
                 if (element.data.id === this.clipboard[0].data.id) {
-                    this.currentIndex = index
+					this.currentIndex = index
                 }
             })
+
+			// Scroll to the selected item
+			this.$nextTick(() => {
+				let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
+
+				this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
+			})
         },
         next() {
             if (!this.files.length > 1) return

resources/js/components/FilePreview/Media/PdfFile.vue

@@ -1,25 +1,39 @@
 <template>
-    <div id="pdf-wrapper" :style="{ width: documentSize + '%' }">
-        <!--		<pdf :src="pdfData" v-for="i in numPages" :key="i" :resize="true" :page="i" scale="page-width" style="width:100%; margin:0 auto 35px;" id="printable-file" class="pdf-file">
-			<template slot="loading">
-				<h1>loading content...</h1>
-			</template>
-		</pdf>-->
+    <div
+        class="absolute bottom-0 top-0 left-0 right-0 z-10 mx-auto overflow-y-auto rounded-xl md:p-5"
+        :style="{ width: documentSize + '%' }"
+    >
+        <pdf
+            :src="pdfData"
+            v-for="i in numPages"
+            :key="i"
+            :resize="true"
+            :page="i"
+            scale="page-width"
+            id="printable-file"
+            class="mx-auto mb-6 w-full overflow-hidden md:rounded-xl md:shadow-lg"
+        >
+            <template slot="loading">
+                <b>
+                    {{ $t('loading content...') }}
+                </b>
+            </template>
+        </pdf>
     </div>
 </template>
 
 <script>
-//todo: resolve pdf
-
 import { events } from '../../../bus'
-//import pdf from 'pdfvuer'
+import pdf from 'pdfvuer'
 
 export default {
     name: 'PdfFile',
     components: {
-        //pdf,
+        pdf,
     },
-    props: ['file'],
+    props: [
+		'file',
+	],
     watch: {
         file() {
             this.getPdf()
@@ -28,8 +42,8 @@ export default {
     data() {
         return {
             pdfData: undefined,
-            numPages: 0,
             documentSize: 50,
+            numPages: 0,
         }
     },
     methods: {
@@ -39,9 +53,9 @@ export default {
 
             let self = this
 
-            //self.pdfData = pdf.createLoadingTask(this.file.data.attributes.file_url);
+            self.pdfData = pdf.createLoadingTask(this.file.data.attributes.file_url)
 
-            //self.pdfData.then(pdf => self.numPages = pdf.numPages);
+            self.pdfData.then((pdf) => (self.numPages = pdf.numPages))
         },
         getDocumentSize() {
             if (window.innerWidth < 960) {
@@ -49,7 +63,9 @@ export default {
             }
 
             if (window.innerWidth > 960) {
-                this.documentSize = localStorage.getItem('documentSize') ? parseInt(localStorage.getItem('documentSize')) : 50
+                this.documentSize = localStorage.getItem('documentSize')
+                    ? parseInt(localStorage.getItem('documentSize'))
+                    : 50
             }
         },
         zoomIn() {
@@ -75,38 +91,4 @@ export default {
 }
 </script>
 
-<!--<style src="pdfvuer/dist/pdfvuer.css" lang="css"></style>-->
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-
-#pdf-wrapper {
-    border-radius: 8px;
-    overflow-y: scroll;
-    margin: 0 auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-    padding: 40px;
-
-    .pdf-file {
-        box-shadow: $light_mode_popup_shadow;
-        border-radius: 8px;
-        overflow: hidden;
-    }
-}
-
-@media only screen and (max-width: 960px) {
-    #pdf-wrapper {
-        border-radius: 0;
-        padding: 0;
-
-        .pdf-file {
-            box-shadow: none;
-            border-radius: 0;
-        }
-    }
-}
-</style>
+<style src="pdfvuer/dist/pdfvuer.css" lang="css"></style>