From 8c9dc8d30794f79c2ae287acaf8afc8be255693d Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Thu, 26 Dec 2024 15:49:51 +0100
Subject: [PATCH] Display PDF documents inline on supported devices

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 frontend-src/display.vue | 28 +++++++++++++++++++++++++++-
 package.json             |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend-src/display.vue b/frontend-src/display.vue
index 19b2975..3321ee7 100644
--- a/frontend-src/display.vue
+++ b/frontend-src/display.vue
@@ -12,7 +12,7 @@
       </div>
     </nav>
 
-    <div class="container mt-4">
+    <div class="container my-4">
       <div class="row">
         <div class="col">
           <div
@@ -36,6 +36,19 @@
               </div>
             </div>
 
+            <div
+              v-else-if="fileType.startsWith('application/pdf') && canViewPDF"
+              class="card position-relative"
+              style="padding-top: calc(297/210*100%);"
+            >
+              <div class="card-body text-center">
+                <iframe
+                  class="h-100 position-absolute start-0 top-0 w-100"
+                  :src="path"
+                />
+              </div>
+            </div>
+
             <div
               v-else-if="fileType.startsWith('image/')"
               class="card"
@@ -125,6 +138,19 @@ const rewrites = {
 }
 
 export default defineComponent({
+  computed: {
+    canViewPDF(): boolean {
+      /*
+       * iOS reports they can display PDFs but they'll display only
+       * the first page without any means of navigation, therefore we
+       * disable PDF viewing on iOS
+       */
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
+
+      return navigator.pdfViewerEnabled && !isIOS
+    },
+  },
+
   data() {
     return {
       error: null,
diff --git a/package.json b/package.json
index e8f8347..c59e5a6 100644
--- a/package.json
+++ b/package.json
@@ -20,4 +20,4 @@
     "vue": "^3.5.13",
     "vue-i18n": "^9.14.2"
   }
-}
+}
\ No newline at end of file