From d679f147787079ae8eade3881eff5233b30ea4f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@protonmail.com>
Date: Tue, 12 Apr 2022 15:19:58 +0200
Subject: [PATCH] Properly cancel and reset ongoing streams when unmounting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 src/components/Audios.vue | 11 +++++++++++
 src/components/Videos.vue | 11 +++++++++++
 src/views/Viewer.vue      |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/Audios.vue b/src/components/Audios.vue
index b86cf8248..33ec13edd 100644
--- a/src/components/Audios.vue
+++ b/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
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index d4454f9c8..a524c99fa 100644
--- a/src/components/Videos.vue
+++ b/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() {
diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
index 0af22c47c..16d6b0ba8 100644
--- a/src/views/Viewer.vue
+++ b/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!