From f69bb64db96a805c366a994fa0162f5f00b745a6 Mon Sep 17 00:00:00 2001
From: Patrick Baxter <patrickb321@gmail.com>
Date: Wed, 9 Oct 2024 09:23:30 +1300
Subject: [PATCH] add audio modes to browse-next

---
 api/api/V1/Device.ts                          |   5 +-
 browse-next/src/api/Device.ts                 |  32 ++
 .../src/components/DeviceRecordingSetup.vue   | 339 +++++++++++++++++-
 types/api/device.d.ts                         |  12 +
 4 files changed, 376 insertions(+), 12 deletions(-)

diff --git a/api/api/V1/Device.ts b/api/api/V1/Device.ts
index 7ad0f58e..e1479a70 100755
--- a/api/api/V1/Device.ts
+++ b/api/api/V1/Device.ts
@@ -1549,7 +1549,10 @@ export default function (app: Application, baseUrl: string) {
           }
         );
       } catch (e) {
-        return next(new FatalError("Failed to update device settings."));
+        console.log(e);
+        return next(
+          new FatalError(`Failed to update device settings: ${e.message}`)
+        );
       }
     }
   );
diff --git a/browse-next/src/api/Device.ts b/browse-next/src/api/Device.ts
index 50da20e3..eb51bdc2 100644
--- a/browse-next/src/api/Device.ts
+++ b/browse-next/src/api/Device.ts
@@ -141,6 +141,7 @@ export const getDeviceNodeGroup = (deviceId: DeviceId) => {
       type: "salt-update",
       limit: 1,
     }).then((response) => {
+      debugger;
       if (response.success && response.result.rows.length) {
         resolve(
           response.result.rows[0].EventDetail.details.nodegroup ||
@@ -153,6 +154,37 @@ export const getDeviceNodeGroup = (deviceId: DeviceId) => {
   }) as Promise<string | false>;
 };
 
+export const getDeviceModel = async (deviceId: DeviceId) => {
+  try {
+    const nodegroup = await getDeviceNodeGroup(deviceId);
+    if (nodegroup) {
+      const model = nodegroup.includes("tc2")
+        ? "tc2"
+        : nodegroup.includes("pi")
+        ? "pi"
+        : null;
+      if (model !== null) {
+        return model;
+      }
+    }
+    const model = await getLatestEventsByDeviceId(deviceId, {
+      type: "versionData",
+      limit: 1,
+    }).then((response) => {
+      if (response.success && response.result.rows.length) {
+        return response.result.rows[0].EventDetail.details["tc2-agent"]
+          ? "tc2"
+          : "pi";
+      } else {
+        return null;
+      }
+    });
+    return model;
+  } catch (e) {
+    return null;
+  }
+};
+
 export interface BatteryInfoEvent {
   dateTime: IsoFormattedString | Date;
   voltage: number | null;
diff --git a/browse-next/src/components/DeviceRecordingSetup.vue b/browse-next/src/components/DeviceRecordingSetup.vue
index 0518f1fa..d82c399d 100644
--- a/browse-next/src/components/DeviceRecordingSetup.vue
+++ b/browse-next/src/components/DeviceRecordingSetup.vue
@@ -4,11 +4,13 @@ import { selectedProjectDevices } from "@models/provides.ts";
 import type {
   ApiDeviceHistorySettings,
   ApiDeviceResponse,
+  AudioModes,
 } from "@typedefs/api/device";
 import { useRoute } from "vue-router";
 import type { DeviceId } from "@typedefs/api/common";
 import type { LoadedResource } from "@api/types.ts";
 import {
+  getDeviceModel,
   getDeviceNodeGroup,
   getSettingsForDevice,
   updateDeviceSettings,
@@ -21,7 +23,7 @@ const devices = inject(selectedProjectDevices) as Ref<
   ApiDeviceResponse[] | null
 >;
 const route = useRoute();
-const saltNodeGroup = ref<LoadedResource<string>>(null);
+const deviceModel = ref<LoadedResource<"tc2" | "pi">>(null);
 // Device Settings
 const settings = ref<LoadedResource<ApiDeviceHistorySettings>>(null);
 const syncedSettings = ref<LoadedResource<ApiDeviceHistorySettings>>(null);
@@ -52,9 +54,9 @@ const device = computed<ApiDeviceResponse | null>(() => {
 
 const settingsLoading = resourceIsLoading(settings);
 const lastSyncedSettingsLoading = resourceIsLoading(lastSyncedSettings);
-const nodeGroupInfoLoading = resourceIsLoading(saltNodeGroup);
+const nodeGroupInfoLoading = resourceIsLoading(deviceModel);
 const isTc2Device = computed<boolean>(() => {
-  return (saltNodeGroup.value || "").includes("tc2");
+  return deviceModel.value === "tc2";
 });
 const defaultWindows = {
   powerOn: "-30m",
@@ -78,6 +80,7 @@ const timeObjToTimeStr = (time: Time): string => {
 
 const fetchSettings = async () => {
   const response = await getSettingsForDevice(deviceId.value);
+  debugger;
   if (response && response.success && response.result.settings) {
     return response.result.settings;
   }
@@ -151,8 +154,8 @@ const loadResource = async (
 const initialised = ref<boolean>(false);
 onBeforeMount(async () => {
   await projectDevicesLoaded();
-  await loadResource(saltNodeGroup, () => getDeviceNodeGroup(deviceId.value));
   await loadResource(settings, fetchSettings);
+  await loadResource(deviceModel, () => getDeviceModel(deviceId.value));
   initialised.value = true;
   if (settings.value && !settings.value.synced) {
     // Load last synced settings
@@ -282,6 +285,236 @@ const customRecordingWindowStop = computed<Time>({
   },
 });
 
+const audioModeOptions = [
+  { value: "Disabled", text: "Disabled" },
+  { value: "AudioOnly", text: "Audio Only" },
+  { value: "AudioAndThermal", text: "Audio and Thermal" },
+  { value: "AudioOrThermal", text: "Audio or Thermal" },
+];
+
+// Computed property for Audio Mode
+const audioMode = computed<AudioModes>({
+  get: () => {
+    return (
+      (settings.value as ApiDeviceHistorySettings)?.audioRecording?.audioMode ??
+      "Disabled"
+    );
+  },
+  set: (val: AudioModes) => {
+    if (settings.value) {
+      (settings.value as ApiDeviceHistorySettings).audioRecording = {
+        ...(settings.value as ApiDeviceHistorySettings).audioRecording,
+        audioMode: val,
+        updated: new Date().toISOString(),
+      };
+    }
+  },
+});
+const audioModeExplanation = computed<string>(() => {
+  switch (audioMode.value) {
+    case "AudioOnly":
+      return "Records audio in a 24-hour window and disables thermal recording.";
+    case "AudioOrThermal":
+      return "Records audio outside of the thermal recording window.";
+    case "AudioAndThermal":
+      return "Records audio in a 24-hour window; however, the camera cannot record during the 1 minute of audio recording.";
+    default:
+      return "";
+  }
+});
+// Helper functions
+function timeToMinutes(timeStr: string): number {
+  const [hours, minutes] = timeStr.split(":").map(Number);
+  return hours * 60 + minutes;
+}
+
+function timeToPercentage(timeStr: string): number {
+  const totalMinutes = timeToMinutes(timeStr);
+  return (totalMinutes / (24 * 60)) * 100;
+}
+
+function calculateTimePercentagePoints(
+  startTime: string,
+  endTime: string
+): Array<{ left: string; width: string }> {
+  if (startTime === "12:00" && endTime === "12:00")
+    return [{ left: "0%", width: "100%" }];
+  const startPercentage = timeToPercentage(startTime);
+  const endPercentage = timeToPercentage(endTime);
+
+  if (startPercentage <= endPercentage) {
+    return [
+      {
+        left: `${startPercentage}%`,
+        width: `${endPercentage - startPercentage}%`,
+      },
+    ];
+  } else {
+    return [
+      { left: `${startPercentage}%`, width: `${100 - startPercentage}%` },
+      { left: `0%`, width: `${endPercentage}%` },
+    ];
+  }
+}
+
+// Computed property for Thermal Bar Styles
+const thermalBarStyles = computed(() => {
+  if (audioMode.value === "AudioOnly") {
+    return [];
+  }
+  debugger;
+
+  const setting = settings.value ? settings.value : undefined;
+  const windows = setting?.windows;
+  const startRecording = windows?.startRecording || "-30m";
+  const stopRecording = windows?.stopRecording || "+30m";
+
+  // Handle relative times (cannot accurately represent without actual sunset/sunrise times)
+  if (
+    startRecording.startsWith("+") ||
+    startRecording.startsWith("-") ||
+    stopRecording.startsWith("+") ||
+    stopRecording.startsWith("-")
+  ) {
+    // Default to full night time (e.g., 18:00 to 06:00)
+    return [
+      { left: "0%", width: "33%" },
+      {
+        left: "66%", // Approximate 18:00
+        width: "33%", // From 18:00 to 06:00
+      },
+    ];
+  }
+
+  const thermalRanges = calculateTimePercentagePoints(
+    startRecording,
+    stopRecording
+  );
+
+  return thermalRanges.map((range) => ({
+    left: range.left,
+    width: range.width,
+  }));
+});
+
+// Computed property for Audio Bar Styles
+const audioBarStyles = computed(() => {
+  if (audioMode.value === "Disabled") {
+    return [];
+  }
+
+  if (
+    audioMode.value === "AudioOnly" ||
+    audioMode.value === "AudioAndThermal"
+  ) {
+    return [
+      {
+        left: "0%",
+        width: "100%",
+      },
+    ];
+  }
+
+  if (audioMode.value === "AudioOrThermal") {
+    const windows = (settings.value ? settings.value : {})?.windows;
+    const startRecording = windows?.startRecording || "-30m";
+    const stopRecording = windows?.stopRecording || "+30m";
+
+    // Handle relative times (cannot accurately represent without actual sunset/sunrise times)
+    if (
+      startRecording.startsWith("+") ||
+      startRecording.startsWith("-") ||
+      stopRecording.startsWith("+") ||
+      stopRecording.startsWith("-")
+    ) {
+      // Default to daytime (outside of night time)
+      return [
+        {
+          left: "33%",
+          width: "33%", // From 00:00 to 18:00
+        },
+      ];
+    }
+    debugger;
+
+    const thermalRanges = calculateTimePercentagePoints(
+      startRecording,
+      stopRecording
+    );
+
+    // Audio ranges are inverse of thermal ranges
+    const audioRanges: Array<{ left: string; width: string }> = [];
+
+    if (thermalRanges.length === 1) {
+      const thermalStart = parseFloat(thermalRanges[0].left);
+      const thermalWidth = parseFloat(thermalRanges[0].width);
+
+      // Before thermal recording window
+      if (thermalStart > 0) {
+        audioRanges.push({
+          left: "0%",
+          width: `${thermalStart}%`,
+        });
+      }
+
+      // After thermal recording window
+      const afterThermalStart = thermalStart + thermalWidth;
+      if (afterThermalStart < 100) {
+        audioRanges.push({
+          left: `${afterThermalStart}%`,
+          width: `${100 - afterThermalStart}%`,
+        });
+      }
+    } else if (thermalRanges.length === 2) {
+      // Thermal ranges cross midnight
+      const firstThermalRangeEnd =
+        parseFloat(thermalRanges[0].left) + parseFloat(thermalRanges[0].width);
+
+      const secondThermalRangeStart = parseFloat(thermalRanges[1].left);
+
+      // Audio range between thermal ranges
+      if (firstThermalRangeEnd < secondThermalRangeStart) {
+        audioRanges.push({
+          left: `${firstThermalRangeEnd}%`,
+          width: `${secondThermalRangeStart - firstThermalRangeEnd}%`,
+        });
+      }
+    }
+
+    return audioRanges;
+  }
+
+  return [];
+});
+
+// Computed property for Audio Seed
+const audioSeed = computed<number>({
+  get: () => {
+    return (
+      (settings.value as ApiDeviceHistorySettings)?.audioRecording?.audioSeed ??
+      0
+    );
+  },
+  set: (val: number) => {
+    if (settings.value) {
+      (settings.value as ApiDeviceHistorySettings).audioRecording = {
+        ...((settings.value as ApiDeviceHistorySettings).audioRecording || {}),
+        audioSeed: val,
+        updated: new Date().toISOString(),
+      };
+    }
+  },
+});
+const savingAudioSettings = ref<boolean>(false);
+
+watch([audioMode, audioSeed], async () => {
+  if (settings.value && initialised.value) {
+    savingAudioSettings.value = true;
+    await updateDeviceSettings(deviceId.value, settings.value);
+    savingAudioSettings.value = false;
+  }
+});
+
 const savingPowerModeSettings = ref<boolean>(false);
 const savingRecordingWindowSettings = ref<boolean>(false);
 watch(useLowPowerMode, async () => {
@@ -352,12 +585,22 @@ watch(customRecordingWindowStop, async () => {
           <strong>Synced with remote device:</strong>
           {{ settings.synced ? "Yes" : "No" }}
         </div>
-        <span
-          ><span v-if="!settings.synced">Once synced, w</span
-          ><span v-else>W</span>ill {{ recordingWindow }} in
-          <span v-if="useLowPowerMode">low</span> <span v-else>high</span> power
-          mode.</span
-        >
+        <span>
+          <span v-if="!settings.synced">Once synced, w</span>
+          <span v-else>W</span>ill {{ recordingWindow }} in
+          <span v-if="useLowPowerMode">low</span>
+          <span v-else>high</span> power mode
+          <span v-if="audioMode !== 'Disabled'">
+            and
+            <span v-if="audioMode === 'AudioOnly'">audio only</span>
+            <span v-else-if="audioMode === 'AudioAndThermal'"
+              >audio and thermal</span
+            >
+            <span v-else-if="audioMode === 'AudioOrThermal'"
+              >audio or thermal</span
+            > </span
+          >.
+        </span>
         <hr />
         <div v-if="isTc2Device">
           <div class="h5">Set power profile</div>
@@ -387,6 +630,79 @@ watch(customRecordingWindowStop, async () => {
           </p>
           <hr />
         </div>
+        <div v-if="isTc2Device">
+          <div class="h5">Set Audio Recording Settings</div>
+          <p>
+            Audio recordings are made 32 times a day for one minute at random
+            intervals.
+          </p>
+          <div class="alert-light alert">
+            <b-form-group label="Audio Mode">
+              <b-form-select
+                v-model="audioMode"
+                :options="audioModeOptions"
+                :disabled="savingAudioSettings"
+              ></b-form-select>
+            </b-form-group>
+            <div class="d-flex justify-content-end">
+              <b-spinner
+                class="ms-2"
+                v-if="savingAudioSettings"
+                variant="secondary"
+                small
+              />
+            </div>
+            <div class="pt-2">{{ audioModeExplanation }}</div>
+          </div>
+          <div v-if="audioMode !== 'Disabled' || recordingWindow" class="mt-4">
+            <div class="d-flex align-items-center">
+              <div :style="{ width: '12%' }"></div>
+              <div class="d-flex w-100 justify-content-between text-muted">
+                <div>00:00</div>
+                <div>12:00</div>
+                <div>24:00</div>
+              </div>
+            </div>
+            <div class="d-flex flex-column mt-2">
+              <div class="d-flex align-items-center mb-2">
+                <h6 class="text-muted mb-0 py-1" :style="{ width: '12%' }">
+                  Thermal:
+                </h6>
+                <div
+                  class="position-relative flex-fill rounded bg-light p-0"
+                  :style="{ height: '1em' }"
+                >
+                  <!-- Thermal Recording Windows -->
+                  <div
+                    v-if="audioMode !== 'AudioOnly'"
+                    v-for="(style, index) in thermalBarStyles"
+                    :key="'thermal-' + index"
+                    class="position-absolute h-100 bg-success p-0"
+                    :style="style"
+                  ></div>
+                </div>
+              </div>
+              <div class="d-flex align-items-center">
+                <h6 class="text-muted mb-0 py-1" :style="{ width: '12%' }">
+                  Audio:
+                </h6>
+                <div
+                  class="position-relative flex-fill rounded bg-light"
+                  :style="{ height: '1em' }"
+                >
+                  <!-- Audio Recording Windows -->
+                  <div
+                    v-for="(style, index) in audioBarStyles"
+                    :key="'audio-' + index"
+                    class="position-absolute h-100 bg-primary"
+                    :style="style"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr />
+        </div>
         <div>
           <div class="h5">Set recording time windows</div>
           <p>
@@ -456,6 +772,7 @@ watch(customRecordingWindowStop, async () => {
             >
           </p>
         </div>
+        <hr />
       </div>
     </div>
   </div>
@@ -467,5 +784,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/types/api/device.d.ts b/types/api/device.d.ts
index a948f74d..1bea3614 100644
--- a/types/api/device.d.ts
+++ b/types/api/device.d.ts
@@ -59,6 +59,17 @@ export type ThermalRecordingSettings = {
   useLowPowerMode: boolean;
 } & SettingsBase;
 
+export type AudioModes =
+  | "Disabled"
+  | "AudioOnly"
+  | "AudioAndThermal"
+  | "AudioOrThermal";
+
+export type AudioRecordingSettings = {
+  audioMode?: AudioModes;
+  audioSeed?: number;
+} & SettingsBase;
+
 export type WindowsSettings = {
   startRecording: string;
   stopRecording: string;
@@ -82,6 +93,7 @@ export interface ApiDeviceHistorySettings {
   maskRegions?: MaskRegions;
   ratThresh?: any;
   thermalRecording?: ThermalRecordingSettings;
+  audioRecording?: AudioRecordingSettings;
   windows?: WindowsSettings;
   synced?: boolean;
 }