Merge pull request #3352 from nextcloud/backport/3350/stable35

[stable35] feat: Support auto-starting slideshow

Author: susnux

css/init-Pfn7QR6a.chunk.css css/init-BD3WReu1.chunk.csscss/init-Pfn7QR6a.chunk.css renamed to css/init-BD3WReu1.chunk.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './init-Pfn7QR6a.chunk.css';
+@import './init-BD3WReu1.chunk.css';
 @import './previewUtils-DsspQ6dL.chunk.css';
 @import './NcIconSvgWrapper-Bui9PhAS-3xIBDiQU.chunk.css';
 @import './NcActionButton-BjaRp7qa.chunk.css';

css/main-fKdjIrca.chunk.css css/main-C9ftJeUl.chunk.csscss/main-fKdjIrca.chunk.css renamed to css/main-C9ftJeUl.chunk.css

@@ -1,3 +1,3 @@
 /* extracted by css-entry-points-plugin */
-@import './main-fKdjIrca.chunk.css';
+@import './main-C9ftJeUl.chunk.css';
 @import './previewUtils-DsspQ6dL.chunk.css';

css/viewer-init.css

@@ -20,6 +20,8 @@
 				:src="url"
 				preload="metadata"
 				@error.capture.prevent.stop.once="onFail"
+				@play="onPlay"
+				@pause="onPause"
 				@ended="donePlaying"
 				@canplay="doneLoading"
 				@loadedmetadata="onLoadedMetadata">
@@ -182,7 +184,17 @@ export default {
 			this.updateHeightWidth()
 		},
 
+		onPlay() {
+			this.$emit('update:playing', true)
+		},
+
+		onPause() {
+			this.$emit('update:playing', false)
+		},
+
 		donePlaying() {
+			this.$emit('update:playing', false)
+
 			// reset and show poster after play
 			this.$refs.video.autoplay = false
 			this.$refs.video.load()

css/viewer-main.css

@@ -55,6 +55,7 @@ export default class Viewer {
 		this._state.onNext = () => {}
 		this._state.onClose = () => {}
 		this._state.canLoop = true
+		this._state.startSlideshow = false
 		this._state.handlers = []
 		this._state.overrideHandlerId = null
 
@@ -258,6 +259,16 @@ export default class Viewer {
 		return this._state.canLoop
 	}
 
+	/**
+	 * Whether the slideshow start playing as soon as the viewer is opens
+	 *
+	 * @memberof Viewer
+	 * @return {boolean}
+	 */
+	get startSlideshow() {
+		return this._state.startSlideshow
+	}
+
 	/**
 	 * If this handler is set, it should be used for viewing the next file.
 	 *
@@ -291,11 +302,23 @@ export default class Viewer {
 	 * @param {boolean} options.enableSidebar whether to enable the sidebar or not
 	 * @param {Function} options.loadMore callback for loading more files
 	 * @param {boolean} options.canLoop can the viewer loop over the array
+	 * @param {boolean} options.startSlideshow start playing the slideshow right away
 	 * @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
 	 */
-	open({ path, fileInfo, list = [], enableSidebar = true, loadMore = () => ([]), canLoop = true, onPrev = () => {}, onNext = () => {}, onClose = () => {} } = {}) {
+	open({
+		path,
+		fileInfo,
+		list = [],
+		enableSidebar = true,
+		loadMore = () => [],
+		canLoop = true,
+		startSlideshow = false,
+		onPrev = () => {},
+		onNext = () => {},
+		onClose = () => {},
+	} = {}) {
 		if (typeof arguments[0] === 'string') {
 			throw new Error('Opening the viewer with a single string parameter is deprecated. Please use a destructuring object instead', `OCA.Viewer.open({ path: '${path}' })`)
 		}
@@ -330,6 +353,7 @@ export default class Viewer {
 			this._state.onNext = onNext
 			this._state.onClose = onClose
 			this._state.canLoop = canLoop
+			this._state.startSlideshow = startSlideshow
 		}
 	}
 
@@ -378,6 +402,7 @@ export default class Viewer {
 		this._state.files = []
 		this._state.enableSidebar = true
 		this._state.canLoop = true
+		this._state.startSlideshow = false
 		this._state.loadMore = () => ([])
 		this._state.overrideHandlerId = null
 	}