From d38b3c1cc04a933b11654fe2ab47268e21cef470 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>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
---
 src/components/Audios.vue | 11 +++++++++++
 src/components/Videos.vue | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/components/Audios.vue b/src/components/Audios.vue
index 840f2061a..251bef16b 100644
--- a/src/components/Audios.vue
+++ b/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
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index 3d16d8e00..7aa546081 100644
--- a/src/components/Videos.vue
+++ b/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() {