From 058df18f97abfebddb9d266a16d2f7a00237c380 Mon Sep 17 00:00:00 2001
From: Stephen Just <stephenjust@gmail.com>
Date: Sat, 28 Sep 2024 12:25:20 -0700
Subject: [PATCH 1/3] Camera view updated to better respond to state

In the previous camera view code, the frame didn't respond well to
losses of connection, camera aspect ratio changes, etc.

Instead of changing the stream src, we can layer the camera view
on top of the loading image, so that any time the camera signal is lost,
even if it's because PhotonVision is restarting or you lose connection
to the robot, the loading image is still in memory. This also fixes the
responsiveness to connection loss.
---
 .../components/app/photon-camera-stream.vue   | 45 ++++++++++++++++---
 .../src/components/cameras/CamerasView.vue    |  1 +
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index 710fd81b2a..7bc0c74d99 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -11,12 +11,13 @@ const props = defineProps<{
   id: string;
 }>();
 
+const emptyStreamSrc = "//:0";
 const streamSrc = computed<string>(() => {
   const port =
     useCameraSettingsStore().currentCameraSettings.stream[props.streamType === "Raw" ? "inputPort" : "outputPort"];
 
   if (!useStateStore().backendConnected || port === 0) {
-    return loadingImage;
+    return emptyStreamSrc;
   }
 
   return `http://${inject("backendHostname")}:${port}/stream.mjpg`;
@@ -24,14 +25,27 @@ const streamSrc = computed<string>(() => {
 const streamDesc = computed<string>(() => `${props.streamType} Stream View`);
 const streamStyle = computed<StyleValue>(() => {
   if (useStateStore().colorPickingMode) {
-    return { width: "100%", cursor: "crosshair" };
+    return { cursor: "crosshair" };
   }
 
-  return { width: "100%" };
+  return { };
+});
+
+const containerStyle = computed<StyleValue>(() => {
+  const resolution = useCameraSettingsStore().currentVideoFormat.resolution;
+  const rotation = useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode;
+  if (rotation === 1 || rotation === 3) {
+    return {
+      aspectRatio: `${resolution.height}/${resolution.width}`
+    };
+  }
+  return {
+    aspectRatio: `${resolution.width}/${resolution.height}`
+  };
 });
 
 const overlayStyle = computed<StyleValue>(() => {
-  if (useStateStore().colorPickingMode || streamSrc.value == loadingImage) {
+  if (useStateStore().colorPickingMode || streamSrc.value == emptyStreamSrc) {
     return { display: "none" };
   } else {
     return {};
@@ -57,13 +71,16 @@ const handleFullscreenRequest = () => {
 const mjpgStream: any = ref(null);
 onBeforeUnmount(() => {
   if (!mjpgStream.value) return;
-  mjpgStream.value["src"] = null;
+  mjpgStream.value["src"] = emptyStreamSrc;
 });
+
+
 </script>
 
 <template>
-  <div class="stream-container">
-    <img :id="id" ref="mjpgStream" crossorigin="anonymous" :src="streamSrc" :alt="streamDesc" :style="streamStyle" />
+  <div class="stream-container" :style="containerStyle">
+    <img :src="loadingImage" class="stream-loading" />
+    <img :id="id" class="stream-video" ref="mjpgStream" v-show="streamSrc !== emptyStreamSrc" crossorigin="anonymous" :src="streamSrc" :alt="streamDesc" :style="streamStyle" />
     <div class="stream-overlay" :style="overlayStyle">
       <pv-icon
         icon-name="mdi-camera-image"
@@ -89,7 +106,21 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .stream-container {
+  display: flex;
   position: relative;
+  width: 100%;
+}
+
+.stream-loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.stream-video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 .stream-overlay {
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index de47248271..0da283daf3 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -149,6 +149,7 @@ th {
 .stream {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
 
 @media only screen and (min-width: 960px) {

From 6c4220a1fe144b6f54c28789059d4d395110475a Mon Sep 17 00:00:00 2001
From: Stephen Just <stephenjust@gmail.com>
Date: Sat, 28 Sep 2024 13:50:26 -0700
Subject: [PATCH 2/3] Lint errors

---
 .../src/components/app/photon-camera-stream.vue   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index 7bc0c74d99..7e225e042c 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -28,7 +28,7 @@ const streamStyle = computed<StyleValue>(() => {
     return { cursor: "crosshair" };
   }
 
-  return { };
+  return {};
 });
 
 const containerStyle = computed<StyleValue>(() => {
@@ -73,14 +73,21 @@ onBeforeUnmount(() => {
   if (!mjpgStream.value) return;
   mjpgStream.value["src"] = emptyStreamSrc;
 });
-
-
 </script>
 
 <template>
   <div class="stream-container" :style="containerStyle">
     <img :src="loadingImage" class="stream-loading" />
-    <img :id="id" class="stream-video" ref="mjpgStream" v-show="streamSrc !== emptyStreamSrc" crossorigin="anonymous" :src="streamSrc" :alt="streamDesc" :style="streamStyle" />
+    <img
+      :id="id"
+      class="stream-video"
+      ref="mjpgStream"
+      v-show="streamSrc !== emptyStreamSrc"
+      crossorigin="anonymous"
+      :src="streamSrc"
+      :alt="streamDesc"
+      :style="streamStyle"
+    />
     <div class="stream-overlay" :style="overlayStyle">
       <pv-icon
         icon-name="mdi-camera-image"

From b3944e3c8dd52d5c7486c05443feaf449f1ea9fe Mon Sep 17 00:00:00 2001
From: Stephen Just <stephenjust@gmail.com>
Date: Sat, 28 Sep 2024 14:11:48 -0700
Subject: [PATCH 3/3] Only load visible streams

---
 photon-client/src/components/cameras/CamerasView.vue   | 4 ++--
 photon-client/src/components/dashboard/CamerasCard.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 0da283daf3..1e1b897e07 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -84,7 +84,7 @@ const fpsTooLow = computed<boolean>(() => {
     <div class="stream-container pb-4">
       <div class="stream">
         <photon-camera-stream
-          v-show="value.includes(0)"
+          v-if="value.includes(0)"
           id="input-camera-stream"
           stream-type="Raw"
           style="max-width: 100%"
@@ -92,7 +92,7 @@ const fpsTooLow = computed<boolean>(() => {
       </div>
       <div class="stream">
         <photon-camera-stream
-          v-show="value.includes(1)"
+          v-if="value.includes(1)"
           id="output-camera-stream"
           stream-type="Processed"
           style="max-width: 100%"
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index cd52f51d1f..eed2e75786 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -81,10 +81,10 @@ const performanceRecommendation = computed<string>(() => {
     </v-row>
     <v-divider style="border-color: white" />
     <v-row class="stream-viewer-container pa-3">
-      <v-col v-show="value.includes(0)" class="stream-view">
+      <v-col v-if="value.includes(0)" class="stream-view">
         <photon-camera-stream id="input-camera-stream" stream-type="Raw" style="width: 100%; height: auto" />
       </v-col>
-      <v-col v-show="value.includes(1)" class="stream-view">
+      <v-col v-if="value.includes(1)" class="stream-view">
         <photon-camera-stream id="output-camera-stream" stream-type="Processed" style="width: 100%; height: auto" />
       </v-col>
     </v-row>