Camera view updated to better respond to state (#1437)

Author: stephenjust

photon-client/src/components/app/photon-camera-stream.vue

@@ -11,27 +11,41 @@ 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`;
 });
 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,23 @@ const handleFullscreenRequest = () => {
 const mjpgStream: any = ref(null);
 onBeforeUnmount(() => {
   if (!mjpgStream.value) return;
-  mjpgStream.value["src"] = "//:0";
+  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 +113,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 {

photon-client/src/components/cameras/CamerasView.vue

@@ -84,15 +84,15 @@ 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%"
         />
       </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%"
@@ -149,6 +149,7 @@ th {
 .stream {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
 
 @media only screen and (min-width: 960px) {

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>