From 9f55085f2091a3de27030528066337441e6a8c07 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 14 May 2020 14:17:02 +0100
Subject: [PATCH] Only have a single stream connection open at a time

---
 .../viewComponents/streamDisplay.vue          | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
index b1da9344..87b446a4 100644
--- a/src/components/viewComponents/streamDisplay.vue
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -5,15 +5,16 @@
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
+      v-if="streamVisible"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
-      :hidden="!showStream"
+      :hidden="!streamEnabled"
       :src="streamImgUri"
       alt="Stream"
       @dblclick="clickMonitor"
     />
 
-    <div v-if="!showStream" class="uk-height-1-1">
+    <div v-if="!streamEnabled" class="uk-height-1-1">
       <div v-if="$store.state.waiting" class="uk-position-center">
         <div uk-spinner="ratio: 4.5"></div>
       </div>
@@ -50,12 +51,16 @@ export default {
   },
 
   computed: {
-    showStream: function() {
+    streamEnabled: function() {
       return (
         this.$store.getters.ready &&
         !this.$store.state.globalSettings.disableStream
       );
     },
+    streamVisible: function() {
+      // Only a single MJPEG connection should be open at a time
+      return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
+    },
     streamImgUri: function() {
       return `${this.$store.getters.baseUri}/api/v2/streams/mjpeg`;
     },
@@ -122,14 +127,20 @@ export default {
       let yCoordinate = event.offsetY;
 
       let xRelative =
-        (0.5 * event.target.offsetWidth - xCoordinate) /
-        event.target.offsetWidth * event.target.naturalWidth;
+        ((0.5 * event.target.offsetWidth - xCoordinate) /
+          event.target.offsetWidth) *
+        event.target.naturalWidth;
       let yRelative =
-        (0.5 * event.target.offsetHeight - yCoordinate) /
-        event.target.offsetHeight * event.target.naturalHeight;
+        ((0.5 * event.target.offsetHeight - yCoordinate) /
+          event.target.offsetHeight) *
+        event.target.naturalHeight;
 
       // Emit a signal to move, acted on by panelNavigate.vue
-      this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
+      this.$root.$emit(
+        "globalMoveInImageCoordinatesEvent",
+        -xRelative,
+        -yRelative
+      );
     },
 
     handleResize: function() {