- Sometimes we need to keep asking for frames till we get a good one …

…on cptv single image component.
TheCacophonyProject · Oct 16, 2024 · 10cf4bf · 10cf4bf
1 parent 680d73f
commit 10cf4bf
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/browse-next/src/components/CptvSingleFrame.vue b/browse-next/src/components/CptvSingleFrame.vue
@@ -92,27 +92,35 @@ const loadRecording = async () => {
       creds.value.apiToken
     );
     if (result === true) {
-      let frame = await cptvDecoder.getNextFrame();
-      if (frame?.isBackgroundFrame) {
+      let gotGoodFrame = false;
+      let frame;
+
+      while (!gotGoodFrame) {
         frame = await cptvDecoder.getNextFrame();
-      }
-      if (frame) {
-        let max = Number.MIN_SAFE_INTEGER;
-        let min = Number.MAX_SAFE_INTEGER;
-        for (const px of frame.imageData) {
-          max = Math.max(px, max);
-          min = Math.min(px, min);
+        if (frame?.isBackgroundFrame) {
+          continue;
+        }
+        if (frame) {
+          let max = Number.MIN_SAFE_INTEGER;
+          let min = Number.MAX_SAFE_INTEGER;
+          for (const px of frame.imageData) {
+            max = Math.max(px, max);
+            min = Math.min(px, min);
+          }
+          if (max - min > 0) {
+            gotGoodFrame = true;
+          }
+          const buffer = new Uint8ClampedArray(160 * 120 * 4);
+          renderFrameIntoFrameBuffer(
+            buffer,
+            frame.imageData,
+            defaultPalette.value[1],
+            min,
+            max
+          );
+          frameData.value = new ImageData(buffer, 160, 120);
+          renderFrame();
         }
-        const buffer = new Uint8ClampedArray(160 * 120 * 4);
-        renderFrameIntoFrameBuffer(
-          buffer,
-          frame.imageData,
-          defaultPalette.value[1],
-          min,
-          max
-        );
-        frameData.value = new ImageData(buffer, 160, 120);
-        renderFrame();
       }
     }
     await cptvDecoder.close();

diff --git a/browse-next/src/components/DeviceRecordingSetup.vue b/browse-next/src/components/DeviceRecordingSetup.vue
@@ -16,6 +16,7 @@ import {
 import Datepicker from "@vuepic/vue-datepicker";
 import { projectDevicesLoaded } from "@models/LoggedInUser.ts";
 import { resourceIsLoading } from "@/helpers/utils.ts";
+import { DeviceType } from "@typedefs/api/consts.ts";
 type Time = { hours: number; minutes: number; seconds: number };
 const devices = inject(selectedProjectDevices) as Ref<
   ApiDeviceResponse[] | null
@@ -321,8 +322,7 @@ watch(customRecordingWindowStop, async () => {
     <div
       class="mt-4 mt-lg-0 settings-config w-100 justify-content-center align-items-center"
       v-if="
-        device &&
-        (device.type === 'thermal' || device.type === 'hybrid-thermal-audio')
+        device && [DeviceType.Thermal, DeviceType.Hybrid].includes(device.type)
       "
     >
       <div class="alert alert-info">
@@ -467,5 +467,5 @@ watch(customRecordingWindowStop, async () => {
 }
 </style>
 <style lang="css">
-@import url('@vuepic/vue-datepicker/dist/main.css');
+@import url("@vuepic/vue-datepicker/dist/main.css");
 </style>
diff --git a/browse-next/src/views/DeviceDiagnosticsSubView.vue b/browse-next/src/views/DeviceDiagnosticsSubView.vue
@@ -616,7 +616,7 @@ const hoveredPointValue = computed<number>(() => {
 <template>
   <div v-if="device && device.active" class="mt-3">
     <div class="d-flex justify-content-between flex-md-row flex-column">
-      <div v-if="device.type === 'thermal'">
+      <div v-if="[DeviceType.Thermal, DeviceType.Hybrid].includes(device.type)">
         <h6 v-if="latestStatusRecording">
           Camera view from
           {{