feat: Use viewer to open and compare versions

Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 62 insertions, 0 deletions

diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue
index 6d3b07c2f88..a8b7ce10092 100644
--- a/apps/files_versions/src/views/VersionTab.vue
+++ b/apps/files_versions/src/views/VersionTab.vue
@@ -19,11 +19,15 @@
 	<ul data-files-versions-versions-list>
 		<Version v-for="version in orderedVersions"
 			:key="version.mtime"
+			:can-view="canView"
+			:can-compare="canCompare"
 			:load-preview="isActive"
 			:version="version"
 			:file-info="fileInfo"
 			:is-current="version.mtime === fileInfo.mtime"
 			:is-first-version="version.mtime === initialVersionMtime"
+			@click="openVersion"
+			@compare="compareVersion"
 			@restore="handleRestore"
 			@label-update="handleLabelUpdate"
 			@delete="handleDelete" />
@@ -32,6 +36,7 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import { fetchVersions, deleteVersion, restoreVersion, setVersionLabel } from '../utils/versions.js'
 import Version from '../components/Version.vue'
 
@@ -40,6 +45,9 @@ export default {
 	components: {
 		Version,
 	},
+	mixins: [
+		isMobile,
+	],
 	data() {
 		return {
 			fileInfo: null,
@@ -78,6 +86,37 @@ export default {
 				.map(version => version.mtime)
 				.reduce((a, b) => Math.min(a, b))
 		},
+
+		viewerFileInfo() {
+			// We need to remap bitmask to dav permissions as the file info we have is converted through client.js
+			let davPermissions = ''
+			if (this.fileInfo.permissions & 1) {
+				davPermissions += 'R'
+			}
+			if (this.fileInfo.permissions & 2) {
+				davPermissions += 'W'
+			}
+			if (this.fileInfo.permissions & 8) {
+				davPermissions += 'D'
+			}
+			return {
+				...this.fileInfo,
+				mime: this.fileInfo.mimetype,
+				basename: this.fileInfo.name,
+				filename: this.fileInfo.path + this.fileInfo.name,
+				permissions: davPermissions,
+				fileid: this.fileInfo.id,
+			}
+		},
+
+		/** @return {boolean} */
+		canView() {
+			return window.OCA.Viewer?.mimetypesCompare?.includes(this.fileInfo.mimetype)
+		},
+
+		canCompare() {
+			return !this.isMobile
+		},
 	},
 	methods: {
 		/**
@@ -182,6 +221,29 @@ export default {
 		resetState() {
 			this.$set(this, 'versions', [])
 		},
+
+		openVersion({ version }) {
+			// Open current file view instead of read only
+			if (version.mtime === this.fileInfo.mtime) {
+				OCA.Viewer.open({ fileInfo: this.viewerFileInfo })
+				return
+			}
+
+			// Versions previews are too small for our use case, so we override hasPreview and previewUrl
+			// which makes the viewer render the original file.
+			const versions = this.versions.map(version => ({ ...version, hasPreview: false, previewUrl: undefined }))
+
+			OCA.Viewer.open({
+				fileInfo: versions.find(v => v.source === version.source),
+				enableSidebar: false,
+			})
+		},
+
+		compareVersion({ version }) {
+			const versions = this.versions.map(version => ({ ...version, hasPreview: false, previewUrl: undefined }))
+
+			OCA.Viewer.compare(this.viewerFileInfo, versions.find(v => v.source === version.source))
+		},
 	},
 }
 </script>