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>

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -2,7 +2,11 @@
   <div ref="modal" class="" uk-modal="bg-close: false; esc-close: false; stack: true;">
     <div id="status-modal" class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
       <h2>{{ title }}</h2>
-      <mini-stream-display v-if="displayStream" class="uk-margin-small-bottom" />
+      <mini-stream-display
+        v-if="displayStream"
+        :stream-id="setStreamId"
+        class="uk-margin-small-bottom"
+      />
       <action-log-display :log="log" :task-status="taskStatus" />
       <div id="progress-and-cancel-row">
         <div class="stretchy">
@@ -79,6 +83,13 @@ export default {
 
   emits: ["terminateTask"],
 
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
+
   methods: {
     show() {
       UIkit.modal(this.$refs.modal).show();

webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot></slot>
-    <miniStreamDisplay class="mini-preview" />
+    <miniStreamDisplay class="mini-preview" :stream-id="setStreamId" />
     <slot name="below-stream"></slot>
   </div>
 </template>
@@ -15,6 +15,13 @@ export default {
   components: {
     miniStreamDisplay,
   },
+
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
 };
 </script>
 

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -34,6 +34,7 @@ import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
 import autofocusControl from "./autofocusControl.vue";
+import { eventBus } from "../../../eventBus.js";
 
 export default {
   name: "PaneControl",
@@ -61,8 +62,12 @@ export default {
         this.modalError("No image URI returned from capture task.");
         return;
       }
+      // Emit flash capture stream animation
+      eventBus.emit("globalFlashStream");
+
       // To save the returned data, we make a virtual link and click it
       let imageResponse = await axios.get(imageUri, { responseType: "blob" });
+
       const url = window.URL.createObjectURL(new Blob([imageResponse.data]));
       const link = document.createElement("a");
       link.href = url;

webapp/src/components/tabContentComponents/controlContent.vue

@@ -24,6 +24,7 @@ export default {
 
   data() {
     return {
+      // This adds the parent name as value for prop streamId
       setStreamId: this.$options.name,
     };
   },

webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue

@@ -10,7 +10,7 @@
         <CSMCalibrationSettings />
       </div>
       <div id="mini-stream">
-        <miniStreamDisplay />
+        <miniStreamDisplay :stream-id="setStreamId" />
       </div>
     </div>
   </div>
@@ -28,6 +28,13 @@ export default {
     CSMCalibrationSettings,
     miniStreamDisplay,
   },
+
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
 };
 </script>
 

webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue

@@ -15,7 +15,7 @@
       </div>
 
       <div id="mini-stream">
-        <miniStreamDisplay />
+        <miniStreamDisplay :stream-id="setStreamId" />
       </div>
     </div>
   </div>
@@ -41,6 +41,8 @@ export default {
   data() {
     return {
       manualCameraSettings: [],
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
     };
   },
 

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -81,7 +81,8 @@ export default {
       lastStitchedImage: null,
       scanComplete: false,
       scan_name: "",
-      setStreamId: "slideScan",
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
     };
   },
 

webapp/src/components/tabContentComponents/streamContent.vue

@@ -203,7 +203,6 @@ export default {
 
     handleDoneResize: function () {
       // Recalculate size
-
       this.recalculateSize();
       // Handle closed stream
       if (this.displaySize[0] == 0 && this.displaySize[1] == 0) {

webapp/src/components/tabContentComponents/viewContent.vue

@@ -19,7 +19,8 @@ export default {
 
   data() {
     return {
-      setStreamId: "view",
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
     };
   },
 };