Camera disconnected + stream normalization improvements

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

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { computed, inject, ref, onBeforeUnmount } from "vue";
 import { useStateStore } from "@/stores/StateStore";
-import loadingImage from "@/assets/images/loading.svg";
+import loadingImage from "@/assets/images/loading-transparent.svg";
 import type { StyleValue } from "vue/types/jsx";
 import PvIcon from "@/components/common/pv-icon.vue";
 import type { UiCameraConfiguration } from "@/types/SettingTypes";
 
 const props = defineProps<{
   streamType: "Raw" | "Processed";
   id: string;
-  outerId?: string;
   cameraSettings: UiCameraConfiguration;
 }>();
 
@@ -91,7 +90,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :id="outerId" class="stream-container" :style="containerStyle">
+  <div class="stream-container" :style="containerStyle">
     <img :src="loadingImage" class="stream-loading" />
     <img
       :id="id"
@@ -131,18 +130,25 @@ onBeforeUnmount(() => {
   display: flex;
   position: relative;
   width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  justify-content: center;
+  align-items: center;
 }
 
 .stream-loading {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  width: 25%;
+  height: 25%;
+  object-fit: contain;
 }
 
 .stream-video {
   position: absolute;
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 
 .stream-overlay {

photon-client/src/components/common/pv-camera-info-card.vue

@@ -57,14 +57,14 @@ const cameraInfoFor: any = (camera: PVCameraInfo) => {
           <td>Path:</td>
           <td style="word-break: break-all">{{ cameraInfoFor(camera).path }}</td>
         </tr>
-        <tr v-if="cameraInfoFor(camera).otherPaths !== undefined && cameraInfoFor(camera).otherPaths !== null">
-          <td>Other Paths:</td>
-          <td>{{ cameraInfoFor(camera).otherPaths }}</td>
-        </tr>
         <tr v-if="cameraInfoFor(camera).uniquePath !== undefined && cameraInfoFor(camera).uniquePath !== null">
           <td>Unique Path:</td>
           <td style="word-break: break-all">{{ cameraInfoFor(camera).uniquePath }}</td>
         </tr>
+        <tr v-if="cameraInfoFor(camera).otherPaths !== undefined && cameraInfoFor(camera).otherPaths !== null">
+          <td>Other Paths:</td>
+          <td>{{ cameraInfoFor(camera).otherPaths }}</td>
+        </tr>
       </tbody>
     </v-simple-table>
   </div>

photon-client/src/components/common/pv-camera-match-card.vue

@@ -95,14 +95,6 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
           <td style="word-break: break-all">{{ cameraInfoFor(saved).path }}</td>
           <td style="word-break: break-all">{{ cameraInfoFor(current).path }}</td>
         </tr>
-        <tr
-          v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
-          :class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
-        >
-          <td>Other Paths:</td>
-          <td>{{ cameraInfoFor(saved).otherPaths }}</td>
-          <td>{{ cameraInfoFor(current).otherPaths }}</td>
-        </tr>
         <tr
           v-if="cameraInfoFor(saved).uniquePath !== undefined && cameraInfoFor(saved).uniquePath !== null"
           :class="cameraInfoFor(saved).uniquePath !== cameraInfoFor(current).uniquePath ? 'mismatch' : ''"
@@ -111,6 +103,14 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
           <td style="word-break: break-all">{{ cameraInfoFor(saved).uniquePath }}</td>
           <td style="word-break: break-all">{{ cameraInfoFor(current).uniquePath }}</td>
         </tr>
+        <tr
+          v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
+          :class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
+        >
+          <td>Other Paths:</td>
+          <td>{{ cameraInfoFor(saved).otherPaths }}</td>
+          <td>{{ cameraInfoFor(current).otherPaths }}</td>
+        </tr>
       </tbody>
     </v-simple-table>
   </div>

photon-client/src/components/common/pv-input.vue

@@ -64,6 +64,7 @@ const handleKeydown = ({ key }) => {
         :error-messages="errorMessage"
         :rules="rules"
         hide-details="auto"
+        class="light-error"
         @keydown="handleKeydown"
       />
     </v-col>
@@ -74,3 +75,9 @@ const handleKeydown = ({ key }) => {
   margin-top: 0px;
 }
 </style>
+<style>
+.light-error .error--text {
+  color: red !important;
+  caret-color: red !important;
+}
+</style>

photon-client/src/components/settings/ObjectDetectionCard.vue

@@ -70,7 +70,7 @@ const supportedModels = computed(() => {
     <div class="pa-6 pt-0">
       <v-row>
         <v-col cols="12 ">
-          <v-btn color="secondary" @click="() => (showImportDialog = true)" class="justify-center">
+          <v-btn color="secondary" class="justify-center" @click="() => (showImportDialog = true)">
             <v-icon left class="open-icon"> mdi-import </v-icon>
             <span class="open-label">Import New Model</span>
           </v-btn>
@@ -94,10 +94,10 @@ const supportedModels = computed(() => {
                 named <code>note-640-640-yolov5s-labels.txt</code>. Note that ONLY 640x640 YOLOv5 & YOLOv8 models
                 trained and converted to `.rknn` format for RK3588 CPUs are currently supported!
                 <v-row class="mt-6 ml-4 mr-8">
-                  <v-file-input label="RKNN File" v-model="importRKNNFile" accept=".rknn" />
+                  <v-file-input v-model="importRKNNFile" label="RKNN File" accept=".rknn" />
                 </v-row>
                 <v-row class="mt-6 ml-4 mr-8">
-                  <v-file-input label="Labels File" v-model="importLabelsFile" accept=".txt" />
+                  <v-file-input v-model="importLabelsFile" label="Labels File" accept=".txt" />
                 </v-row>
                 <v-row
                   class="mt-12 ml-8 mr-8 mb-1"