feat: Compare files side by side

Signed-off-by: Julius Härtl <[email protected]>

Author: juliusknorr

src/services/Viewer.js

@@ -24,6 +24,18 @@ import Images from '../models/images.js'
 import Videos from '../models/videos.js'
 import Audios from '../models/audios.js'
 
+/**
+ * Handler type definition
+ *
+ * @typedef {object} Handler
+ * @property {string} id unique identifier for the handler
+ * @property {string[]} mimes list of mime types that are supported for opening
+ * @property {object} component Vue component to render the file
+ * @property {string} group group identifier to combine for navigating to the next/previous files
+ * @property {?string} theme viewer modal theme (one of 'dark', 'light', 'default')
+ * @property {boolean} canCompare Indicate support for comparing two files
+ */
+
 /**
  * File info type definition
  *
@@ -41,12 +53,15 @@ export default class Viewer {
 
 	_state
 	_mimetypes
+	_mimetypesCompare
 
 	constructor() {
 		this._mimetypes = []
+		this._mimetypesCompare = []
 		this._state = {}
 		this._state.file = ''
 		this._state.fileInfo = null
+		this._state.compareFileInfo = null
 		this._state.files = []
 		this._state.enableSidebar = true
 		this._state.el = null
@@ -71,6 +86,7 @@ export default class Viewer {
 	 *
 	 * @readonly
 	 * @memberof Viewer
+	 * @return {Handler[]}
 	 */
 	get availableHandlers() {
 		return this._state.handlers
@@ -80,11 +96,14 @@ export default class Viewer {
 	 * Register a new handler
 	 *
 	 * @memberof Viewer
-	 * @param {object} handler a new unregistered handler
+	 * @param {Handler} handler a new unregistered handler
 	 */
 	registerHandler(handler) {
 		this._state.handlers.push(handler)
 		this._mimetypes.push.apply(this._mimetypes, handler.mimes)
+		if (handler?.canCompare === true) {
+			this._mimetypesCompare.push.apply(this._mimetypesCompare, handler.mimes)
+		}
 	}
 
 	/**
@@ -107,6 +126,16 @@ export default class Viewer {
 		return this._state.fileInfo
 	}
 
+	/**
+	 * Get the current comparison view opened file fileInfo
+	 *
+	 * @memberof Viewer
+	 * @return {?Fileinfo} the currently opened file fileInfo
+	 */
+	get compareFileInfo() {
+		return this._state.compareFileInfo
+	}
+
 	/**
 	 * Get the current files list
 	 *
@@ -147,6 +176,16 @@ export default class Viewer {
 		return this._mimetypes
 	}
 
+	/**
+	 * Get the supported mimetypes that can be opened side by side for comparison
+	 *
+	 * @memberof Viewer
+	 * @return {Array} list of mimetype strings that the viewer can open side by side for comparison
+	 */
+	get mimetypesCompare() {
+		return this._mimetypesCompare
+	}
+
 	/**
 	 * Return the method provided to fetch more results
 	 *
@@ -291,6 +330,20 @@ export default class Viewer {
 		this.open(options)
 	}
 
+	/**
+	 * Open the viewer with two files side by side
+	 *
+	 * @memberof Viewer
+	 * @param {Fileinfo} fileInfo current file
+	 * @param {Fileinfo} compareFileInfo older file to compare
+	 */
+	compare(fileInfo, compareFileInfo) {
+		this.open({
+			fileInfo,
+		})
+		this._state.compareFileInfo = compareFileInfo
+	}
+
 	/**
 	 * Close the opened file
 	 *

src/views/Viewer.vue

@@ -111,7 +111,22 @@
 			</NcActionButton>
 		</template>
 
-		<div class="viewer__content" @click.self.exact="close">
+		<div class="viewer__content" :class="contentClass" @click.self.exact="close">
+			<component :is="comparisonFile.modal"
+				v-if="comparisonFile && !comparisonFile.failed && showComparison"
+				:key="comparisonFile.fileid"
+				ref="content"
+				v-bind="comparisonFile"
+				:active="true"
+				:can-swipe="false"
+				:can-zoom="false"
+				:editing="false"
+				:is-full-screen="isFullscreen"
+				:is-sidebar-shown="isSidebarShown"
+				:loaded.sync="comparisonFile.loaded"
+				class="viewer__file viewer__file--active"
+				@error="currentFailed" />
+
 			<!-- PREVIOUS -->
 			<component :is="previousFile.modal"
 				v-if="previousFile && !previousFile.failed"
@@ -230,6 +245,7 @@ export default {
 			currentIndex: 0,
 			previousFile: {},
 			currentFile: {},
+			comparisonFile: {},
 			nextFile: {},
 			fileList: [],
 
@@ -274,6 +290,9 @@ export default {
 		fileInfo() {
 			return this.Viewer.fileInfo
 		},
+		comparisonFileInfo() {
+			return this.Viewer.compareFileInfo
+		},
 		files() {
 			return this.Viewer.files
 		},
@@ -365,6 +384,16 @@ export default {
 				'image--fullscreen': this.isImage && this.isFullscreenMode,
 			}
 		},
+
+		showComparison() {
+			return !this.isMobile
+		},
+
+		contentClass() {
+			return {
+				'viewer--split': this.comparisonFile,
+			}
+		},
 	},
 
 	watch: {
@@ -406,6 +435,16 @@ export default {
 			}
 		},
 
+		comparisonFileInfo(fileInfo) {
+			if (fileInfo) {
+				logger.info('Opening viewer for comparisonFileInfo ', { fileInfo })
+				this.compareFile(fileInfo)
+			} else {
+				// object is undefined, we're closing!
+				this.cleanup()
+			}
+		},
+
 		files(fileList) {
 			// the files list changed, let's update the current opened index
 			const currentIndex = fileList.findIndex(file => file.basename === this.currentFile.basename)
@@ -516,7 +555,7 @@ export default {
 			this.cancelRequestFile()
 
 			// do not open the same file again
-			if (path === this.currentFile.path) {
+			if (path === this.currentFile.path && !this.currentFile.source) { // need to still run when switching from version to current file
 				return
 			}
 
@@ -567,7 +606,7 @@ export default {
 			this.cancelRequestFolder()
 
 			// do not open the same file info again
-			if (fileInfo.basename === this.currentFile.basename) {
+			if (fileInfo.basename === this.currentFile.basename && fileInfo.source !== this.currentFile.source) {
 				return
 			}
 
@@ -637,6 +676,7 @@ export default {
 
 			// show file
 			this.currentFile = new File(fileInfo, mime, handler.component)
+			this.comparisonFile = null
 			this.updatePreviousNext()
 
 			// if sidebar was opened before, let's update the file
@@ -656,6 +696,10 @@ export default {
 			this.updatePreviousNext()
 		},
 
+		async compareFile(fileInfo) {
+			this.comparisonFile = new File(fileInfo, fileInfo.mime, this.components[fileInfo.mime])
+		},
+
 		/**
 		 * Show sidebar if available and a file is already opened
 		 */
@@ -1085,6 +1129,12 @@ export default {
 		cursor: pointer;
 	}
 
+	&--split {
+		.viewer__file--active {
+			width: 50%;
+		}
+	}
+
 	:deep(.modal-wrapper) {
 		.modal-container {
 			// Ensure some space at the bottom