Merge pull request #1273 from nextcloud/enh/open_with

Add `openWith` function to OCA.Viewer

Author: juliusknorr

viewer/src/services/Viewer.js

@@ -40,6 +40,7 @@ export default class Viewer {
 		this._state.onClose = () => {}
 		this._state.canLoop = true
 		this._state.handlers = []
+		this._state.overrideHandlerId = null
 
 		// ! built-in handlers
 		this.registerHandler(Images)
@@ -150,6 +151,15 @@ export default class Viewer {
 		return this._state.canLoop
 	}
 
+	/**
+	 * If this handler is set, it should be used for viewing the next file.
+	 *
+	 * @memberof Viewer
+	 */
+	get overrideHandlerId() {
+		return this._state.overrideHandlerId
+	}
+
 	/**
 	 * Open the path into the viewer
 	 *
@@ -189,6 +199,25 @@ export default class Viewer {
 		this._state.canLoop = canLoop
 	}
 
+	/**
+	 * Open the path into the viewer
+	 *
+	 * @memberof Viewer
+	 * @param {object} handlerId ID of the handler with which to open the files
+	 * @param {object} options Options for opening the viewer
+	 * @param {string} options.path path of the file to open
+	 * @param {object[]} [options.list] the list of files as objects (fileinfo) format
+	 * @param {Function} options.loadMore callback for loading more files
+	 * @param {boolean} options.canLoop can the viewer loop over the array
+	 * @param {Function} options.onPrev callback when navigating back to previous file
+	 * @param {Function} options.onNext callback when navigation forward to next file
+	 * @param {Function} options.onClose callback when closing the viewer
+	 */
+	openWith(handlerId, options = {}) {
+		this._state.overrideHandlerId = handlerId
+		this.open(options)
+	}
+
 	/**
 	 * Close the opened file
 	 *
@@ -199,6 +228,7 @@ export default class Viewer {
 		this._state.files = []
 		this._state.canLoop = true
 		this._state.loadMore = () => ([])
+		this._state.overrideHandlerId = null
 	}
 
 }

viewer/src/views/Viewer.vue

@@ -253,7 +253,7 @@ export default {
 			// we got a valid path! Load file...
 			if (path.trim() !== '') {
 				logger.info('Opening viewer for file ', { path })
-				this.openFile(path)
+				this.openFile(path, OCA.Viewer.overrideHandlerId)
 			} else {
 				// path is empty, we're closing!
 				this.cleanup()
@@ -340,8 +340,9 @@ export default {
 		 * Open the view and display the clicked file
 		 *
 		 * @param {string} path the file path to open
+		 * @param {string|null} overrideHandlerId the ID of the handler with which to view the files, if any
 		 */
-		async openFile(path) {
+		async openFile(path, overrideHandlerId = null) {
 			// cancel any previous requests
 			this.cancelRequestFile()
 			this.cancelRequestFolder()
@@ -380,13 +381,24 @@ export default {
 				// retrieve and store the file info
 				let fileInfo = await fileRequest(path)
 
-				// get original mime
-				let mime = fileInfo.mime
+				// get original mime and alias
+				const mime = fileInfo.mime
+				const alias = mime.split('/')[0]
 
-				this.theme = this.registeredHandlers[mime].theme ?? 'dark'
+				let handler
+				// Try provided handler, if any
+				if (overrideHandlerId !== null) {
+					const overrideHandler = Object.values(this.registeredHandlers).find(h => h.id === overrideHandlerId)
+					handler = overrideHandler ?? handler
+				}
+				// If no provided handler, or provided handler not found: try a supported handler with mime/mime-alias
+				if (!handler) {
+					handler = this.registeredHandlers[mime] ?? this.registeredHandlers[alias]
+				}
 
+				this.theme = handler.theme ?? 'dark'
 				// if we don't have a handler for this mime, abort
-				if (!(mime in this.components)) {
+				if (!handler) {
 					logger.error('The following file could not be displayed', { fileName, fileInfo })
 					showError(t('viewer', 'There is no plugin available to display this file type'))
 					this.close()
@@ -428,13 +440,8 @@ export default {
 				// get saved fileInfo
 				fileInfo = this.fileList[this.currentIndex]
 
-				// override mimetype if existing alias
-				if (!this.components[mime]) {
-					mime = mime.split('/')[0]
-				}
-
 				// show file
-				this.currentFile = new File(fileInfo, mime, this.components[mime])
+				this.currentFile = new File(fileInfo, mime, handler.component)
 				this.updatePreviousNext()
 
 				// if sidebar was opened before, let's update the file