ui_migration bugfix(component) fix ministream add prop id and visibility stream add and remove

webapp/src/components/genericComponents/miniStreamDisplay.vue

@@ -5,7 +5,7 @@
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
-      v-if="isVisible"
+      v-show="isVisible && streamEnabled"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
       :src="streamImgUri"
@@ -19,33 +19,78 @@ import { useIntersectionObserver } from "@vueuse/core";
 import { useSettingsStore } from "@/stores/settings.js";
 import { mapState } from "pinia";
 
+const ONE_PIXEL_FALLBACK = "data:image/PNG;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+
 // Export main app
 export default {
   name: "MiniStreamDisplay",
 
+  props: {
+    streamId: {
+      type: [String],
+      required: true,
+    },
+  },
+  setup() {
+    const store = useSettingsStore();
+    return {
+      store,
+    };
+  },
   data: function () {
     return {
       isVisible: false,
+      observerTimeout: null,
     };
   },
 
   computed: {
-    ...mapState(useSettingsStore, ["baseUri"]),
-    streamImgUri() {
-      return `${this.baseUri}/camera/mjpeg_stream`;
+    ...mapState(useSettingsStore, ["baseUri", "disableStream", "ready"]),
+    streamEnabled: function () {
+      return this.ready && !this.disableStream;
+    },
+    streamImgUri: function () {
+      // Only request the real stream if it's enabled AND currently visible on screen
+      if (this.isVisible) {
+        return `${this.baseUri}/camera/mjpeg_stream`;
+      }
+      // Force the browser to kill the connection by loading a 1 pixel image
+      return ONE_PIXEL_FALLBACK;
     },
   },
 
   mounted() {
-    useIntersectionObserver(
+    const { stop } = useIntersectionObserver(
       this.$refs.streamDisplay,
       ([{ isIntersecting }]) => {
+        // Always update local visibility instantly
         this.isVisible = isIntersecting;
+
+        // Clear any previous pending timers to prevent ghost fires
+        clearTimeout(this.observerTimeout);
+
+        if (isIntersecting) {
+          // If it's TRUE, we don't want to wait! Turn the stream on immediately.
+          this.store.addStream(this.streamId);
+        } else {
+          // If it's FALSE, wait 50ms before telling the store.
+          // If a TRUE event fires in the next 50ms (like during a tab switch),
+          // this timeout will be cancelled and the stream will never flicker off!
+          this.observerTimeout = setTimeout(() => {
+            this.store.removeStream(this.streamId);
+          }, 50);
+        }
       },
-      {
-        threshold: 0.0,
-      },
+      { threshold: 0.0 },
     );
+    this.stopIntersectionObserver = stop;
+  },
+  beforeUnmount() {
+    clearTimeout(this.observerTimeout); // Clean up the timer!
+    if (this.stopIntersectionObserver) {
+      this.stopIntersectionObserver();
+    }
+    this.store.removeStream(this.streamId);
   },
 };
 </script>