WIP PDF Viewer

package.json

@@ -10,6 +10,7 @@
     "packages/web-app-files",
     "packages/web-app-markdown-editor",
     "packages/web-app-media-viewer",
+    "packages/web-app-pdf-viewer",
     "packages/web-app-search",
     "packages/web-client",
     "packages/web-pkg",

packages/web-app-files/src/components/FilesList/ContextActions.vue

@@ -140,8 +140,7 @@ export default {
     menuItemsContext() {
       const fileHandlers = [
         ...this.$_fileActions_editorActions,
-        ...this.$_fileActions_loadExternalAppActions(this.filterParams.resources),
-        ...this.$_fetch_items
+        ...this.$_fileActions_loadExternalAppActions(this.filterParams.resources)
       ]
 
       return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))

packages/web-app-files/src/mixins/fileActions.js

@@ -10,15 +10,13 @@ import Delete from './actions/delete'
 import DownloadArchive from './actions/downloadArchive'
 import DownloadFile from './actions/downloadFile'
 import Favorite from './actions/favorite'
-import Fetch from './actions/fetch'
 import Move from './actions/move'
 import Navigate from './actions/navigate'
 import Rename from './actions/rename'
 import Restore from './actions/restore'
 import kebabCase from 'lodash-es/kebabCase'
 
 const actionsMixins = [
-  'fetch',
   'navigate',
   'downloadArchive',
   'downloadFile',
@@ -44,7 +42,6 @@ export default {
     DownloadFile,
     DownloadArchive,
     Favorite,
-    Fetch,
     Move,
     Navigate,
     Rename,

packages/web-app-pdf-viewer/l10n/.tx/config

@@ -0,0 +1,10 @@
+[main]
+host = https://www.transifex.com
+
+[owncloud-web.pdf-viewer]
+file_filter = locale/<lang>/LC_MESSAGES/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
+

packages/web-app-pdf-viewer/l10n/translations.json

@@ -0,0 +1 @@
+{}

packages/web-app-pdf-viewer/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "pdf-viewer",
+  "version": "0.0.0",
+  "description": "ownCloud web PDF viewer integration",
+  "license": "AGPL-3.0"
+}

packages/web-app-pdf-viewer/src/App.vue

@@ -0,0 +1,93 @@
+<template>
+  <main>
+    <loading-screen v-if="loading" />
+    <error-screen v-else-if="loadingError" />
+    <object
+      v-else
+      class="pdf-viewer oc-width-1-1 oc-height-1-1"
+      :data="blobUrl"
+      type="application/pdf"
+    />
+  </main>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { useAppDefaults } from 'web-pkg/src/composables'
+import { DavProperties } from 'web-pkg/src/constants'
+import { buildResource } from '../../web-app-files/src/helpers/resources'
+import HTTPError from 'owncloud-sdk'
+import ErrorScreen from './components/ErrorScreen.vue'
+import LoadingScreen from './components/LoadingScreen.vue'
+
+export default {
+  name: 'PDFViewer',
+  components: {
+    ErrorScreen,
+    LoadingScreen
+  },
+  setup() {
+    return {
+      ...useAppDefaults({
+        applicationName: 'pdf-viewer'
+      })
+    }
+  },
+  data: () => ({
+    loading: true,
+    loadingError: false,
+    filePath: '',
+    blobUrl: ''
+  }),
+  computed: {
+    ...mapGetters(['getToken'])
+  },
+  async created() {
+    this.filePath = this.currentFileContext.path
+
+    try {
+      let resource = await this.getFileInfo(
+        this.filePath,
+        this.isPublicLinkContext ? DavProperties.PublicLink : DavProperties.Default
+      )
+      resource = buildResource(resource)
+
+      let url
+      const headers = new Headers()
+      if (this.isPublicLinkContext) {
+        url = resource.downloadURL
+      } else {
+        url = `${this.$client.helpers._davPath}${resource.webDavPath}`
+        headers.append('Authorization', 'Bearer ' + this.getToken)
+        headers.append('X-Requested-With', 'XMLHttpRequest')
+      }
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers
+      })
+
+      if (response.status !== 200) {
+        throw new HTTPError(response.status, response.message)
+      }
+
+      const newBlob = new Blob([await response.blob()], { type: 'application/pdf' })
+      this.blobUrl = URL.createObjectURL(newBlob)
+      this.loading = false
+    } catch (e) {
+      this.loading = false
+      this.loadingError = true
+      console.error('Error fetching pdf', e.statusCode, e)
+    }
+
+    // TODO free memory when leaving
+  }
+}
+</script>
+<style scoped>
+.pdf-viewer {
+  border: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+</style>

packages/web-app-pdf-viewer/src/components/ErrorScreen.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="oc-position-center oc-text-center">
+    <oc-icon size="xxlarge" name="error-warning" fill-type="line" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorScreen'
+}
+</script>

packages/web-app-pdf-viewer/src/components/LoadingScreen.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="oc-position-center oc-text-center">
+    <oc-spinner size="xlarge" />
+    <p v-translate class="oc-invisible">Loading PDF document</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoadingScreen'
+}
+</script>

packages/web-app-pdf-viewer/src/index.js

@@ -0,0 +1,34 @@
+import translations from '../l10n/translations'
+import App from './App.vue'
+
+const routes = [
+  {
+    name: 'pdf-viewer',
+    path: '/:contextRouteName/:filePath*',
+    component: App,
+    meta: {
+      auth: false,
+      patchCleanPath: true
+    }
+  }
+]
+
+const appInfo = {
+  name: 'PDF viewer',
+  id: 'pdf-viewer',
+  icon: 'eye',
+  extensions: [
+    {
+      extension: 'pdf',
+      newTab: true,
+      routeName: 'pdf-viewer',
+      canBeDefault: true
+    }
+  ]
+}
+
+export default {
+  appInfo,
+  routes,
+  translations
+}

yarn.lock

@@ -9815,6 +9815,12 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pdf-viewer@workspace:packages/web-app-pdf-viewer":
+  version: 0.0.0-use.local
+  resolution: "pdf-viewer@workspace:packages/web-app-pdf-viewer"
+  languageName: unknown
+  linkType: soft
+
 "pend@npm:~1.2.0":
   version: 1.2.0
   resolution: "pend@npm:1.2.0"