Display PDF documents inline on supported devices

Signed-off-by: Knut Ahlers <knut@ahlers.me>

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,

package.json

@@ -20,4 +20,4 @@
     "vue": "^3.5.13",
     "vue-i18n": "^9.14.2"
   }
-}
+}