enable opening a single shared file

cypress/e2e/single-file-share.cy.js

@@ -0,0 +1,56 @@
+/**
+ * @copyright Copyright (c) 2022 Max <max@nextcloud.com>
+ *
+ * @author Max <max@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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 { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('See shared folder with link share', function() {
+	let imageToken
+	let videoToken
+
+	before(function() {
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+		cy.uploadFile('image1.jpg', 'image/jpeg')
+		cy.uploadFile('video1.mp4', 'video/mp4')
+		cy.createLinkShare('/image1.jpg').then(token => imageToken = token)
+		cy.createLinkShare('/video1.mp4').then(token => videoToken = token)
+		cy.logout()
+	})
+
+
+	it('opens the shared image in the viewer', function() {
+		cy.visit(`/s/${imageToken}`)
+		cy.get('#imgframe img').should('be.visible')
+		cy.get('#imgframe > #viewer').should('be.visible')
+		cy.scrollTo('bottom')
+		cy.get('a#downloadFile').should('be.visible')
+	})
+
+	it('opens the shared video in the viewer', function() {
+		cy.visit(`/s/${videoToken}`)
+		cy.get('#imgframe .plyr').should('be.visible')
+		cy.get('#imgframe > #viewer').should('be.visible')
+		cy.scrollTo('bottom')
+		cy.get('a#downloadFile').should('be.visible')
+	})
+})

src/components/Images.vue

@@ -172,7 +172,11 @@ export default {
 			this.disableSwipe()
 			this.shiftX = this.shiftX + Math.round(-scrollPercX * growX)
 			this.shiftY = this.shiftY + Math.round(-scrollPercY * growY)
-			this.zoomRatio = newZoomRatio
+
+			// only change zoomRatio when multiple files are in the fileList. Disable for single shared files
+			if (this.fileList.length > 1) {
+				this.zoomRatio = newZoomRatio
+			}
 		},
 
 		resetZoom() {

src/services/Viewer.js

@@ -47,6 +47,7 @@ export default class Viewer {
 		this._state.file = ''
 		this._state.fileInfo = null
 		this._state.files = []
+		this._state.el = null
 		this._state.loadMore = () => ([])
 		this._state.onPrev = () => {}
 		this._state.onNext = () => {}
@@ -114,6 +115,16 @@ export default class Viewer {
 		return this._state.files
 	}
 
+	/**
+	 * Get the element to render the current file in
+	 *
+	 * @memberof Viewer
+	 * @return {string} selector of the element
+	 */
+	get el() {
+		return this._state.el
+	}
+
 	/**
 	 * Get the supported mimetypes that can be opened with the viewer
 	 *
@@ -183,6 +194,19 @@ export default class Viewer {
 		return this._state.overrideHandlerId
 	}
 
+	/**
+	 * Set element to open viewer in
+	 *
+	 * @memberof Viewer
+	 * @param {string} el selector of the element to render the file in
+	 */
+	setRootElement(el = null) {
+		if (this._state.file) {
+			throw new Error('Please set root element before calling Viewer.open().')
+		}
+		this._state.el = el
+	}
+
 	/**
 	 * Open the path into the viewer
 	 *
@@ -223,12 +247,14 @@ export default class Viewer {
 		} else {
 			this._state.fileInfo = fileInfo
 		}
-		this._state.files = list
-		this._state.loadMore = loadMore
-		this._state.onPrev = onPrev
-		this._state.onNext = onNext
-		this._state.onClose = onClose
-		this._state.canLoop = canLoop
+		if (!this._state.el) {
+			this._state.files = list
+			this._state.loadMore = loadMore
+			this._state.onPrev = onPrev
+			this._state.onNext = onNext
+			this._state.onClose = onClose
+			this._state.canLoop = canLoop
+		}
 	}
 
 	/**

src/views/Viewer.vue

@@ -22,7 +22,24 @@
  -->
 
 <template>
-	<NcModal v-if="initiated || currentFile.modal"
+	<div v-if="el" id="viewer">
+		<component :is="currentFile.modal"
+			v-if="!currentFile.failed"
+			:key="currentFile.fileid"
+			ref="content"
+			:active="true"
+			:can-swipe="false"
+			v-bind="currentFile"
+			:file-list="[currentFile]"
+			:is-full-screen="false"
+			:loaded.sync="currentFile.loaded"
+			:is-sidebar-shown="false"
+			class="viewer__file viewer__file--active"
+			@error="currentFailed" />
+		<Error v-else
+			:name="currentFile.basename" />
+	</div>
+	<NcModal v-else-if="initiated || currentFile.modal"
 		id="viewer"
 		:additional-trap-elements="trapElements"
 		:class="modalClass"
@@ -230,6 +247,9 @@ export default {
 		files() {
 			return this.Viewer.files
 		},
+		el() {
+			return this.Viewer.el
+		},
 		loadMore() {
 			return this.Viewer.loadMore
 		},
@@ -299,6 +319,23 @@ export default {
 	},
 
 	watch: {
+		el(element) {
+			logger.info(element)
+			this.$nextTick(() => {
+				const viewerRoot = document.getElementById('viewer')
+				if (element) {
+					const el = document.querySelector(element)
+					if (el) {
+						el.appendChild(viewerRoot)
+					} else {
+						logger.warn('Could not find element ', { element })
+					}
+				} else {
+					document.body.appendChild(viewerRoot)
+				}
+			})
+		},
+
 		file(path) {
 			// we got a valid path! Load file...
 			if (path && path.trim() !== '') {
@@ -437,8 +474,10 @@ export default {
 			const [, fileName] = extractFilePaths(path)
 
 			// prevent scrolling while opened
-			document.body.style.overflow = 'hidden'
-			document.documentElement.style.overflow = 'hidden'
+			if (!this.el) {
+				document.body.style.overflow = 'hidden'
+				document.documentElement.style.overflow = 'hidden'
+			}
 
 			// swap title with original one
 			const title = document.getElementsByTagName('head')[0].getElementsByTagName('title')[0]
@@ -508,7 +547,7 @@ export default {
 
 				// store current position
 				this.currentIndex = this.fileList.findIndex(file => file.basename === fileInfo.basename)
-			} else if (group) {
+			} else if (group && this.el === null) {
 				const mimes = this.mimeGroups[group]
 					? this.mimeGroups[group]
 					: [mime]