fixup! WIP

apps/files_versions/src/components/Version.vue

@@ -19,9 +19,9 @@
 	<div>
 		<NcListItem class="version"
 			:name="versionLabel"
-			@click="click"
 			:force-display-actions="true"
-			data-files-versions-version>
+			data-files-versions-version
+			@click="click">
 			<template #icon>
 				<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
 				<img v-else-if="isCurrent || version.hasPreview"
@@ -54,6 +54,14 @@
 					</template>
 					{{ version.label === '' ? t('files_versions', 'Name this version') : t('files_versions', 'Edit version name') }}
 				</NcActionButton>
+				<NcActionButton v-if="!isCurrent && canView"
+					:close-after-click="true"
+					@click="compareVersion">
+					<template #icon>
+						<FileCompare :size="22" />
+					</template>
+					{{ t('files_versions', 'Compare to current version') }}
+				</NcActionButton>
 				<NcActionButton v-if="!isCurrent"
 					:close-after-click="true"
 					@click="restoreVersion">
@@ -116,6 +124,7 @@
 <script>
 import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
 import Download from 'vue-material-design-icons/Download.vue'
+import FileCompare from 'vue-material-design-icons/FileCompare.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -144,6 +153,7 @@ export default {
 		NcTextField,
 		BackupRestore,
 		Download,
+		FileCompare,
 		Pencil,
 		Check,
 		Delete,
@@ -245,7 +255,12 @@ export default {
 		/** @return {boolean} */
 		enableDeletion() {
 			return this.capabilities.files.version_deletion === true && this.fileInfo.mountType !== 'group'
-		}
+		},
+
+		/** @return {boolean} */
+		canView() {
+			return window.OCA?.Viewer.mimetypes.includes(this.fileInfo.mimetype)
+		},
 	},
 	methods: {
 		openVersionLabelModal() {
@@ -270,8 +285,19 @@ export default {
 		},
 
 		click() {
+			if (!this.canView) {
+				window.location = this.downloadURL
+				return
+			}
 			this.$emit('click', { version: this.version })
-		}
+		},
+
+		compareVersion() {
+			if (!this.canView) {
+				throw new Error('Cannot compare version of this file')
+			}
+			this.$emit('compare', { version: this.version })
+		},
 	},
 }
 </script>

apps/files_versions/src/views/VersionTab.vue

@@ -25,6 +25,7 @@
 			:is-current="version.mtime === fileInfo.mtime"
 			:is-first-version="version.mtime === initialVersionMtime"
 			@click="openVersion"
+			@compare="compareVersion"
 			@restore="handleRestore"
 			@label-update="handleLabelUpdate"
 			@delete="handleDelete" />
@@ -80,6 +81,33 @@ 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.mimetypes.includes(this.fileInfo.mimetype)
+		},
 	},
 	methods: {
 		/**
@@ -186,6 +214,12 @@ export default {
 		},
 
 		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 }))
@@ -197,6 +231,12 @@ export default {
 				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>