From fd1468b876cfb8db36adcf38dbd9f18dad21ebf3 Mon Sep 17 00:00:00 2001
From: Jordan Rash <15827604+jordan-rash@users.noreply.github.com>
Date: Wed, 13 Mar 2024 16:03:01 -0600
Subject: [PATCH 1/2] functioning pdf viewer

---
 natster-io/package.json                |  1 +
 natster-io/pnpm-lock.yaml              |  7 +++++++
 natster-io/src/components/File.vue     | 12 +++++++++++-
 natster-io/src/components/FileComp.vue |  9 ++++++++-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/natster-io/package.json b/natster-io/package.json
index 37af574..3b1715a 100644
--- a/natster-io/package.json
+++ b/natster-io/package.json
@@ -26,6 +26,7 @@
     "jwt-decode": "^4.0.0",
     "nats.ws": "^1.19.1",
     "nkeys.js": "^1.1.0",
+    "pdf-vue3": "^1.0.12",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
diff --git a/natster-io/pnpm-lock.yaml b/natster-io/pnpm-lock.yaml
index 748176a..969b46f 100644
--- a/natster-io/pnpm-lock.yaml
+++ b/natster-io/pnpm-lock.yaml
@@ -41,6 +41,9 @@ dependencies:
   nkeys.js:
     specifier: ^1.1.0
     version: 1.1.0
+  pdf-vue3:
+    specifier: ^1.0.12
+    version: 1.0.12
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.3.3)(vue@3.4.18)
@@ -2211,6 +2214,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /pdf-vue3@1.0.12:
+    resolution: {integrity: sha512-7SMTx1RfRwdc+2WPniDzqM8MxJLqTNNzdyV0SeQTxeRLJGndb5Wv/fz5afO13oBSIvvaqcbZ/S3gF+XjqkSb9g==}
+    dev: false
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
diff --git a/natster-io/src/components/File.vue b/natster-io/src/components/File.vue
index bdfdb57..185aff7 100644
--- a/natster-io/src/components/File.vue
+++ b/natster-io/src/components/File.vue
@@ -89,13 +89,19 @@
                   :alt="title"
                 />
 
+                <PDF
+                  v-else-if="
+                    blob != null && mimeType && mimeType.toLowerCase() === 'application/pdf'
+                  "
+                  :src="blobData"
+                  v-show="!loading"
+                />
                 <p
                   v-else-if="blob != null && mimeType && mimeType.toLowerCase() === 'text/plain'"
                   v-show="!loading"
                 >
                   {{ blobData }}
                 </p>
-
                 <p v-else v-show="!loading">Error displaying media</p>
               </div>
               <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
@@ -121,6 +127,7 @@ import { storeToRefs } from 'pinia'
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { VueSpinnerAudio } from 'vue3-spinners'
+import PDF from 'pdf-vue3'
 
 import AudioPlayer from 'vue3-audio-player'
 import 'vue3-audio-player/dist/style.css'
@@ -143,6 +150,9 @@ watch(blob, async (newVal, oldVal) => {
   if (newVal != null && mimeType.value.toLowerCase().indexOf('image/') === 0) {
     var urlCreator = window.URL || window.webkitURL
     blobData.value = urlCreator.createObjectURL(newVal)
+  } else if (newVal != null && mimeType.value == 'application/pdf') {
+    const buffer = await new Response(newVal).arrayBuffer()
+    blobData.value = new Uint8Array(buffer)
   } else if (newVal != null && mimeType.value == 'text/plain') {
     await newVal.text().then((text) => {
       blobData.value = text
diff --git a/natster-io/src/components/FileComp.vue b/natster-io/src/components/FileComp.vue
index fc1d165..c69752c 100644
--- a/natster-io/src/components/FileComp.vue
+++ b/natster-io/src/components/FileComp.vue
@@ -164,6 +164,13 @@ function catalogImage(cat) {
 }
 
 function isMimeTypeSupported(mimeType: string) {
-  return ['image/png', 'image/jpeg', 'video/mp4', 'text/plain', 'audio/mpeg'].includes(mimeType)
+  return [
+    'image/png',
+    'image/jpeg',
+    'video/mp4',
+    'text/plain',
+    'audio/mpeg',
+    'application/pdf'
+  ].includes(mimeType)
 }
 </script>

From 7310115c320575020dbfe03bd9bc9b8627b77ee9 Mon Sep 17 00:00:00 2001
From: Jordan Rash <15827604+jordan-rash@users.noreply.github.com>
Date: Wed, 13 Mar 2024 16:47:40 -0600
Subject: [PATCH 2/2] some _better_ formatting...sigh

---
 natster-io/src/components/File.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/natster-io/src/components/File.vue b/natster-io/src/components/File.vue
index 185aff7..520a5bd 100644
--- a/natster-io/src/components/File.vue
+++ b/natster-io/src/components/File.vue
@@ -51,9 +51,8 @@
                   </div>
                 </div>
               </div>
-              <div class="relative">
+              <div class="relative max-h-screen">
                 <VueSpinnerAudio v-if="loading" size="80" class="loading-spinner" />
-
                 <video
                   v-if="!!mediaUrl && mimeType && mimeType.toLowerCase() == 'video/mp4'"
                   v-show="!loading"
@@ -94,6 +93,7 @@
                     blob != null && mimeType && mimeType.toLowerCase() === 'application/pdf'
                   "
                   :src="blobData"
+                  class="max-h-96"
                   v-show="!loading"
                 />
                 <p