Properly cancel and reset ongoing streams when unmounting

src/components/Audios.vue

@@ -49,6 +49,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)
 
@@ -62,6 +63,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,
 			}
@@ -92,6 +95,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

@@ -55,6 +55,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')
@@ -82,6 +83,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,
 			}
@@ -112,6 +115,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() {

src/views/Viewer.vue

@@ -252,7 +252,7 @@ export default {
 		file(path) {
 			// we got a valid path! Load file...
 			if (path.trim() !== '') {
-				logger.info('Opening viewer for file ', path)
+				logger.info('Opening viewer for file ', { path })
 				this.openFile(path)
 			} else {
 				// path is empty, we're closing!