From bfa65cf0cb6875a4e62955be962e082d727f713d Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Tue, 5 Mar 2024 17:29:17 +0100
Subject: feat(files): add Viewer Files ressource handler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/src/reference-files.js            |  58 ---------------
 apps/files/src/reference-files.ts            |  58 +++++++++++++++
 apps/files/src/views/ReferenceFileWidget.vue | 102 +++++++++++++++++++++++++--
 3 files changed, 155 insertions(+), 63 deletions(-)
 delete mode 100644 apps/files/src/reference-files.js
 create mode 100644 apps/files/src/reference-files.ts

(limited to 'apps/files/src')

diff --git a/apps/files/src/reference-files.js b/apps/files/src/reference-files.js
deleted file mode 100644
index db563200cd0..00000000000
--- a/apps/files/src/reference-files.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import Vue from 'vue'
-import { translate as t } from '@nextcloud/l10n'
-
-import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
-
-import FileWidget from './views/ReferenceFileWidget.vue'
-import FileReferencePickerElement from './views/FileReferencePickerElement.vue'
-
-Vue.mixin({
-	methods: {
-		t,
-	},
-})
-
-registerWidget('file', (el, { richObjectType, richObject, accessible }) => {
-	const Widget = Vue.extend(FileWidget)
-	new Widget({
-		propsData: {
-			richObjectType,
-			richObject,
-			accessible,
-		},
-	}).$mount(el)
-})
-
-registerCustomPickerElement('files', (el, { providerId, accessible }) => {
-	const Element = Vue.extend(FileReferencePickerElement)
-	const vueElement = new Element({
-		propsData: {
-			providerId,
-			accessible,
-		},
-	}).$mount(el)
-	return new NcCustomPickerRenderResult(vueElement.$el, vueElement)
-}, (el, renderResult) => {
-	renderResult.object.$destroy()
-})
diff --git a/apps/files/src/reference-files.ts b/apps/files/src/reference-files.ts
new file mode 100644
index 00000000000..74a64b43df6
--- /dev/null
+++ b/apps/files/src/reference-files.ts
@@ -0,0 +1,58 @@
+/**
+ * @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Vue from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+
+import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
+
+import FileWidget from './views/ReferenceFileWidget.vue'
+import FileReferencePickerElement from './views/FileReferencePickerElement.vue'
+
+Vue.mixin({
+	methods: {
+		t,
+	},
+})
+
+registerWidget('file', (el, { richObjectType, richObject, accessible }) => {
+	const Widget = Vue.extend(FileWidget)
+	new Widget({
+		propsData: {
+			richObjectType,
+			richObject,
+			accessible,
+		},
+	}).$mount(el)
+}, { hasInteractiveView: true })
+
+registerCustomPickerElement('files', (el, { providerId, accessible }) => {
+	const Element = Vue.extend(FileReferencePickerElement)
+	const vueElement = new Element({
+		propsData: {
+			providerId,
+			accessible,
+		},
+	}).$mount(el)
+	return new NcCustomPickerRenderResult(vueElement.$el, vueElement)
+}, (el, renderResult) => {
+	renderResult.object.$destroy()
+})
diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue
index 311c105055a..db2baffce65 100644
--- a/apps/files/src/views/ReferenceFileWidget.vue
+++ b/apps/files/src/views/ReferenceFileWidget.vue
@@ -31,6 +31,22 @@
 			</p>
 		</div>
 	</div>
+
+	<!-- Live preview if a handler is available -->
+	<component :is="viewerHandler.component"
+		v-else-if="viewerHandler && !failedViewer"
+		:active="true"
+		:can-swipe="false"
+		:can-zoom="false"
+		:is-embedded="true"
+		v-bind="viewerFile"
+		:file-list="[viewerFile]"
+		:is-full-screen="false"
+		:is-sidebar-shown="false"
+		class="widget-file"
+		@error="failedViewer = true" />
+
+	<!-- The file is accessible -->
 	<a v-else
 		class="widget-file"
 		:href="richObject.link"
@@ -43,28 +59,100 @@
 		</div>
 	</a>
 </template>
-<script>
-import { generateUrl } from '@nextcloud/router'
+
+<script lang="ts">
+import { defineComponent, type Component, type PropType } from 'vue'
+import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import path from 'path'
+import { getCurrentUser } from '@nextcloud/auth'
+
+// see lib/private/Collaboration/Reference/File/FileReferenceProvider.php
+type Ressource = {
+	id: number
+	name: string
+	size: number
+	path: string
+	link: string
+	mimetype: string
+	mtime: number // as unix timestamp
+	'preview-available': boolean
+}
 
-export default {
+type ViewerHandler = {
+	id: string
+	group: string
+	mimes: string[]
+	component: Component
+}
+
+/**
+ * Minimal mock of the legacy Viewer FileInfo
+ * TODO: replace by Node object
+ */
+type ViewerFile = {
+	filename: string // the path to the root folder
+	basename: string // the file name
+	lastmod: Date // the last modification date
+	size: number // the file size in bytes
+	type: string
+	mime: string
+	fileid: number
+	failed: boolean
+	loaded: boolean
+	davPath: string
+	source: string
+}
+
+export default defineComponent({
 	name: 'ReferenceFileWidget',
 	props: {
 		richObject: {
-			type: Object,
+			type: Object as PropType<Ressource>,
 			required: true,
 		},
 		accessible: {
 			type: Boolean,
 			default: true,
 		},
+		interactive: {
+			type: Bool,
+			default: true,
+		}
 	},
+
 	data() {
 		return {
 			previewUrl: window.OC.MimeType.getIconUrl(this.richObject.mimetype),
+			failedViewer: false,
 		}
 	},
+
 	computed: {
+		availableViewerHandlers(): ViewerHandler[] {
+			return (window?.OCA?.Viewer?.availableHandlers || []) as ViewerHandler[]
+		},
+		viewerHandler(): ViewerHandler | undefined {
+			return this.availableViewerHandlers
+				.find(handler => handler.mimes.includes(this.richObject.mimetype))
+		},
+		viewerFile(): ViewerFile {
+			const davSource = generateRemoteUrl(`dav/files/${getCurrentUser()?.uid}/${this.richObject.path}`)
+				.replace(/\/\/$/, '/')
+			return {
+				filename: this.richObject.path,
+				basename: this.richObject.name,
+				lastmod: new Date(this.richObject.mtime * 1000),
+				size: this.richObject.size,
+				type: 'file',
+				mime: this.richObject.mimetype,
+				fileid: this.richObject.id,
+				failed: false,
+				loaded: true,
+				davPath: davSource,
+				source: davSource,
+			}
+		},
+
 		fileSize() {
 			return window.OC.Util.humanFileSize(this.richObject.size)
 		},
@@ -94,6 +182,7 @@ export default {
 
 		},
 	},
+
 	mounted() {
 		if (this.richObject['preview-available']) {
 			const previewUrl = generateUrl('/core/preview?fileId={fileId}&x=250&y=250', {
@@ -108,6 +197,8 @@ export default {
 			}
 			img.src = previewUrl
 		}
+
+		console.debug('ReferenceFileWidget', this.richObject)
 	},
 	methods: {
 		navigate() {
@@ -118,8 +209,9 @@ export default {
 			window.location = this.richObject.link
 		},
 	},
-}
+})
 </script>
+
 <style lang="scss" scoped>
 .widget-file {
 	display: flex;
-- 
cgit v1.2.3