From bbb33b829fbc4feab3c7dc2aa615c8aee6dcdf82 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 24 Aug 2024 23:24:13 +0200
Subject: [PATCH] fix: only start stream, when the panel is open

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/webcams/WebcamWrapperItem.vue  |  2 +-
 .../streamers/WebrtcCameraStreamer.vue        | 35 ++++++++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/webcams/WebcamWrapperItem.vue b/src/components/webcams/WebcamWrapperItem.vue
index 8d95a42f7..d0931ad00 100644
--- a/src/components/webcams/WebcamWrapperItem.vue
+++ b/src/components/webcams/WebcamWrapperItem.vue
@@ -19,7 +19,7 @@
             <j-muxer-stream-async :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-camerastreamer'">
-            <webrtc-camera-streamer-async :cam-settings="webcam" :printer-url="printerUrl" />
+            <webrtc-camera-streamer-async :cam-settings="webcam" :printer-url="printerUrl" :page="page" />
         </template>
         <template v-else-if="service === 'webrtc-janus'">
             <janus-streamer-async :cam-settings="webcam" :printer-url="printerUrl" />
diff --git a/src/components/webcams/streamers/WebrtcCameraStreamer.vue b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
index 9dbc0aabf..27e724fb3 100644
--- a/src/components/webcams/streamers/WebrtcCameraStreamer.vue
+++ b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
@@ -38,6 +38,7 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) declare readonly printerUrl: string | null
+    @Prop({ type: String, default: null }) readonly page!: string | null
     @Ref() declare stream: HTMLVideoElement
 
     get url() {
@@ -59,8 +60,25 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
         return output
     }
 
+    get expanded(): boolean {
+        if (this.page !== 'dashboard') return true
+
+        return this.$store.getters['gui/getPanelExpand']('webcam-panel', this.viewport) ?? false
+    }
+
+    // start or stop the video when the expanded state changes
+    @Watch('expanded', { immediate: true })
+    expandChanged(newExpanded: boolean): void {
+        if (!newExpanded) {
+            this.terminate()
+            return
+        }
+
+        this.start()
+    }
+
     // This WebRTC signaling pattern is designed for camera-streamer, a common webcam server the supports WebRTC.
-    async startStream() {
+    async start() {
         if (this.restartTimer) {
             this.log('Clearing restart timer before starting stream')
             window.clearTimeout(this.restartTimer)
@@ -163,7 +181,7 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
     onConnectionStateChange() {
         this.status = this.pc?.connectionState ?? 'connecting'
 
-        this.log(`ConnectionState: ${this.status}`)
+        this.log(`State: ${this.status}`)
 
         if (['failed', 'disconnected'].includes(this.status)) {
             this.restartStream(5000)
@@ -186,23 +204,24 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
         window.console.log(message)
     }
 
-    mounted() {
-        this.startStream()
-    }
-
     beforeDestroy() {
         this.pc?.close()
         if (this.restartTimer) window.clearTimeout(this.restartTimer)
     }
 
-    restartStream(delay = 500) {
+    terminate() {
+        this.log('Terminating stream')
         this.pc?.close()
+    }
+
+    restartStream(delay = 500) {
+        this.terminate()
 
         if (this.restartTimer) return
 
         this.restartTimer = window.setTimeout(async () => {
             this.restartTimer = null
-            await this.startStream()
+            await this.start()
         }, delay)
     }