[stable21] Properly cancel and reset ongoing streams when unmounting

src/components/Audios.vue

@@ -64,6 +64,8 @@ export default {
 		options() {
 			return {
 				autoplay: this.active === true,
+				// Used to reset the audio streams https://github.com/sampotts/plyr#javascript-1
+				blankVideo: '/blank.aac',
 				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings'],
 				loadSprite: false,
 			}
@@ -94,6 +96,14 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		// Force stop any ongoing request
+		console.debug('Closing audio stream', { filename: this.filename })
+		this.$refs.audio.pause()
+		this.player.stop()
+		this.player.destroy()
+	},
+
 	methods: {
 		donePlaying() {
 			this.$refs.audio.autoplay = false

src/components/Audios.vue.orig

@@ -0,0 +1,155 @@
+<!--
+ - @copyright Copyright (c) 2020 Daniel Kesselberg <[email protected]>
+ -
+ - @author Daniel Kesselberg <[email protected]>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - 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/>.
+ -
+ -->
+
+<template>
+	<!-- Plyr currently replaces the parent. Wrapping to prevent this
+	https://github.com/redxtech/vue-plyr/issues/259 -->
+	<div v-if="davPath">
+		<VuePlyr
+			ref="plyr"
+			:options="options">
+			<audio
+				ref="audio"
+				:autoplay="active"
+				:src="davPath"
+				preload="metadata"
+				@ended="donePlaying"
+				@canplay="doneLoading">
+
+				<!-- Omitting `type` on purpose because most of the
+					browsers auto detect the appropriate codec.
+					Having it set force the browser to comply to
+					the provided mime instead of detecting a potential
+					compatibility. -->
+
+				{{ t('viewer', 'Your browser does not support audio.') }}
+			</audio>
+		</VuePlyr>
+	</div>
+</template>
+
+<script>
+import Vue from 'vue'
+import VuePlyr from '@skjnldsv/vue-plyr'
+import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
+import logger from '../services/logger'
+
+Vue.use(VuePlyr)
+
+export default {
+	name: 'Audios',
+
+	computed: {
+		player() {
+			return this.$refs.plyr.player
+		},
+		options() {
+			return {
+				autoplay: this.active === true,
+				// Used to reset the audio streams https://github.com/sampotts/plyr#javascript-1
+				blankVideo: '/blank.aac',
+				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings'],
+				loadSprite: false,
+			}
+		},
+	},
+
+	watch: {
+		active(val, old) {
+			// the item was hidden before and is now the current view
+			if (val === true && old === false) {
+				this.player.play()
+
+			// the item was playing before and is now hidden
+			} else if (val === false && old === true) {
+				this.player.pause()
+			}
+		},
+	},
+
+	mounted() {
+		// Prevent swiping to the next/previous item when scrubbing the timeline or changing volume
+		[...this.$el.querySelectorAll('.plyr__controls__item')].forEach(control => {
+			if (!control?.addEventListener) {
+				return
+			}
+			control.addEventListener('mouseenter', this.disableSwipe)
+			control.addEventListener('mouseleave', this.enableSwipe)
+		})
+	},
+
+	beforeDestroy() {
+		// Force stop any ongoing request
+<<<<<<< HEAD
+		logger.debug('Closing audio stream', { filename: this.filename })
+=======
+		console.debug('Closing audio stream', { filename: this.filename })
+>>>>>>> 12b5579 (Properly cancel and reset ongoing streams when unmounting)
+		this.$refs.audio.pause()
+		this.player.stop()
+		this.player.destroy()
+	},
+
+	methods: {
+		donePlaying() {
+			this.$refs.audio.autoplay = false
+			this.$refs.audio.load()
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+audio {
+	background-color: black;
+	max-width: 100%;
+	max-height: 100%;
+	align-self: center;
+	justify-self: center;
+	/* over arrows in tiny screens */
+	z-index: 20050;
+}
+
+::v-deep {
+	.plyr__progress__container {
+		flex: 1 1;
+	}
+	.plyr__volume {
+		min-width: 80px;
+	}
+	// plyr buttons style
+	.plyr--audio .plyr__progress__buffer,
+	.plyr--audio .plyr__control {
+		&.plyr__tab-focus,
+		&:hover,
+		&[aria-expanded=true] {
+			background-color: var(--color-primary-element);
+			color: var(--color-primary-text);
+			box-shadow: none !important;
+		}
+	}
+	// plyr volume control
+	.plyr--full-ui input[type=range] {
+		color: var(--color-primary-element);
+	}
+}
+</style>

src/components/Videos.vue

@@ -85,6 +85,8 @@ export default {
 		options() {
 			return {
 				autoplay: this.active === true,
+				// Used to reset the video streams https://github.com/sampotts/plyr#javascript-1
+				blankVideo: '/blank.mp4',
 				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'],
 				loadSprite: false,
 			}
@@ -115,6 +117,14 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		// Force stop any ongoing request
+		console.debug('Closing video stream', { filename: this.filename })
+		this.$refs.video.pause()
+		this.player.stop()
+		this.player.destroy()
+	},
+
 	methods: {
 		// Updates the dimensions of the modal
 		updateVideoSize() {