feat: Support auto-starting slideshow

Signed-off-by: Louis Chmn <louis@chmn.me>

Author: artonge

src/components/Videos.vue

@@ -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()

src/services/Viewer.js

@@ -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
 	}

src/views/Viewer.vue

@@ -29,6 +29,7 @@
 	<!-- Modal view rendering -->
 	<NcModal v-else-if="initiated || currentFile.modal"
 		id="viewer"
+		ref="modal"
 		:additional-trap-elements="trapElements"
 		:class="modalClass"
 		:clear-view-delay="-1 /* disable fade-out because of accessibility reasons */"
@@ -37,7 +38,7 @@
 		:light-backdrop="lightBackdrop"
 		:data-handler="handlerId"
 		:enable-slideshow="hasPrevious || hasNext"
-		:slideshow-paused="editing"
+		:slideshow-paused="editing || playingVideo"
 		:enable-swipe="canSwipe && !editing"
 		:has-next="hasNext"
 		:has-previous="hasPrevious"
@@ -150,6 +151,7 @@
 					:loaded.sync="currentFile.loaded"
 					class="viewer__file viewer__file--active"
 					@update:editing="toggleEditor"
+					@update:playing="playingVideo = $event"
 					@error="currentFailed" />
 				<Error v-else
 					:name="currentFile.basename" />
@@ -257,6 +259,8 @@ export default defineComponent({
 			isLoaded: false,
 			initiated: false,
 			editing: false,
+			slideshowStarted: false,
+			playingVideo: false,
 
 			// cancellable requests
 			cancelRequestFile: () => {},
@@ -313,6 +317,9 @@ export default defineComponent({
 		canLoop() {
 			return this.Viewer.canLoop
 		},
+		startSlideshow() {
+			return this.Viewer.startSlideshow
+		},
 		isStartOfList() {
 			return this.currentIndex === 0
 		},
@@ -428,6 +435,12 @@ export default defineComponent({
 	},
 
 	watch: {
+		fileList(fileList) {
+			if (fileList.length > 1) {
+				this.beginSlideshow()
+			}
+		},
+
 		el(element) {
 			logger.info(element)
 			this.$nextTick(() => {
@@ -623,6 +636,34 @@ export default defineComponent({
 			}
 		},
 
+		async beginSlideshow() {
+			if (!this.startSlideshow || this.slideshowStarted) {
+				return
+			}
+			this.slideshowStarted = true
+
+			// Hack: NcModal is imported lazily, so its ref is only there once the chunk
+			// has resolved and it has been rendered.
+			await NcModal()
+			await this.$nextTick()
+			if (!this.$refs.modal) {
+				await this.$nextTick()
+			}
+
+			// const modal = this.$refs.modal;
+			if (!this.$refs.modal) {
+				logger.warn(
+					'Could not start the slideshow, the viewer this.$refs.modal is not mounted',
+				)
+				return
+			}
+			this.$refs.modal.togglePlayPause()
+
+			if (this.playingVideo) {
+				this.$refs.modal.slideshowTimeout?.pause()
+			}
+		},
+
 		/**
 		 * Open the view and display the clicked file
 		 *
@@ -1035,6 +1076,8 @@ export default defineComponent({
 			this.currentModal = null
 			this.fileList = []
 			this.initiated = false
+			this.slideshowStarted = false
+			this.playingVideo = false
 			this.theme = null
 
 			// cancel requests