Properly cancel and reset ongoing streams when unmounting

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

src/components/Audios.vue

@@ -51,6 +51,7 @@
 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)
 
@@ -64,6 +65,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 +97,14 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		// Force stop any ongoing request
+		logger.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/Videos.vue

@@ -58,6 +58,7 @@
 import Vue from 'vue'
 import VuePlyr from '@skjnldsv/vue-plyr'
 import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
+import logger from '../services/logger'
 
 const liveExt = ['jpg', 'jpeg', 'png']
 const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
@@ -85,6 +86,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 +118,14 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		// Force stop any ongoing request
+		logger.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() {