From 37286cce05ba15e1ee9023e739bb8a98c28469b8 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 16 Mar 2024 19:12:08 -0700
Subject: [PATCH] feat: add camera feed configuration in settings And beautify
 settings page

---
 client/src/lib/Apps/Camera/Camera.svelte      |  5 ++-
 client/src/lib/Apps/Settings/Settings.svelte  | 42 +++++++++++++------
 .../lib/Apps/Settings/SettingsInput.svelte    |  1 -
 client/src/lib/Sequences/sequences.ts         |  4 +-
 client/src/lib/stores/settingsStore.ts        | 10 +++--
 5 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/client/src/lib/Apps/Camera/Camera.svelte b/client/src/lib/Apps/Camera/Camera.svelte
index c43b895..0ce73e0 100644
--- a/client/src/lib/Apps/Camera/Camera.svelte
+++ b/client/src/lib/Apps/Camera/Camera.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
   import AppContainer from '../AppContainer.svelte'
   import CameraContainer from './CameraContainer.svelte'
+  import { settingsStore } from '../../stores/settingsStore'
 </script>
 
 <AppContainer
   class="px-10 py-20 flex gap-4 w-full backdrop-blur-lg justify-center h-full rounded-3xl shadow-md bg-slate-300 bg-opacity-30"
 >
   <div class="my-auto">
-    <CameraContainer cameraUrl="camera_url_here" />
+    <CameraContainer cameraUrl={$settingsStore.frontCameraAddr} />
   </div>
   <div class="my-auto">
-    <CameraContainer cameraUrl="camera_url_here" />
+    <CameraContainer cameraUrl={$settingsStore.rearCameraAddr} />
   </div>
 </AppContainer>
diff --git a/client/src/lib/Apps/Settings/Settings.svelte b/client/src/lib/Apps/Settings/Settings.svelte
index b60def9..394f905 100644
--- a/client/src/lib/Apps/Settings/Settings.svelte
+++ b/client/src/lib/Apps/Settings/Settings.svelte
@@ -22,17 +22,38 @@
 >
   <h1 class="text-5xl font-medium text-slate-100 basis-full">Settings</h1>
   <p class="text-slate-300">Hover over setting names to see helpful tooltips</p>
-  <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">General</h2>
   <div class="flex flex-col gap-2">
+    <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">General</h2>
     <SettingsToggle
       setting="disableAnnoyances"
       tooltip="Disable non-critical popups and audio cues."
       >Disable Annoyances</SettingsToggle
     >
+    <SettingsSelector
+      setting="voiceLang"
+      options={['en-US', 'en-RU', 'en-UK']}
+      tooltip="Selects the language/locale used for Jankboard voice prompts. Does not affect application language (ie. Jankboard itself will always be in English)."
+      >Voice Prompt Language</SettingsSelector
+    >
+
+    <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">
+      Camera Configuration
+    </h2>
+    <SettingsInput
+      setting="frontCameraAddr"
+      tooltip="Set the IP address of the front-facing camera. Input in the format xxx.xxx.xxx.xxx:PORT (eg. 244.178.44.111:8080)"
+      width="16rem">Front Camera IP</SettingsInput
+    >
+    <SettingsInput
+      setting="rearCameraAddr"
+      tooltip="Set the IP address of the rear-facing camera. Input in the format xxx.xxx.xxx.xxx:PORT (eg. 244.178.44.111:8080)"
+      width="16rem">Rear Camera IP</SettingsInput
+    >
+    <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">Fun</h2>
     <SettingsToggle
-      setting="goWoke"
-      tooltip="Disables content that could be perceived as offensive for PR and DEI purposes."
-      >Go Woke</SettingsToggle
+      setting="sentry"
+      tooltip="Sentry mode protects the robot and operator from foreign threats (doesn't actually do anything besides add extra voice prompts)"
+      >Sentry Mode</SettingsToggle
     >
     <SettingsInput
       setting="randomWeight"
@@ -41,16 +62,11 @@
     >
       RNG Weight
     </SettingsInput>
-    <SettingsSelector
-      setting="voiceLang"
-      options={['en-US', 'en-RU', 'en-UK']}
-      tooltip="Selects the language/locale used for Jankboard voice prompts. Does not affect application language (ie. Jankboard itself will always be in English)."
-      >Voice Prompt Language</SettingsSelector
-    >
+    <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">Secret</h2>
     <SettingsToggle
-      setting="sentry"
-      tooltip="Sentry mode protects the robot and operator from foreign threats."
-      >Sentry Mode</SettingsToggle
+      setting="goWoke"
+      tooltip="Disables content that could be perceived as offensive for PR and DEI purposes."
+      >Go Woke</SettingsToggle
     >
     <button
       class="mt-10 px-4 py-2 bg-amber-600 hover:brightness-75 text-medium rounded-lg w-min"
diff --git a/client/src/lib/Apps/Settings/SettingsInput.svelte b/client/src/lib/Apps/Settings/SettingsInput.svelte
index 74ed9b5..f6bb6e9 100644
--- a/client/src/lib/Apps/Settings/SettingsInput.svelte
+++ b/client/src/lib/Apps/Settings/SettingsInput.svelte
@@ -13,7 +13,6 @@
 
   const handleSubmit = async () => {
     await tick()
-    // @ts-expect-error
     settingsStore.update(setting, value)
   }
 
diff --git a/client/src/lib/Sequences/sequences.ts b/client/src/lib/Sequences/sequences.ts
index 7479479..50d0fa8 100644
--- a/client/src/lib/Sequences/sequences.ts
+++ b/client/src/lib/Sequences/sequences.ts
@@ -217,7 +217,7 @@ export const infotainmentBootupSequence = async () => {
   }
 
   if (!get(sequenceStore).initializationComplete) {
-    const unsubscribe = sequenceStore.subscribe((data) => {
+    const unsubscribe = sequenceStore.subscribe(data => {
       if (data.initializationComplete) {
         sequence()
         unsubscribe()
@@ -237,7 +237,7 @@ export const infotainmentBootupSequence = async () => {
  */
 const waitForInfotainmentBootup = (sequence: () => void) => {
   if (!get(sequenceStore).infotainmentStartedFirstTime) {
-    const unsubscribe = sequenceStore.subscribe((data) => {
+    const unsubscribe = sequenceStore.subscribe(data => {
       if (data.infotainmentStartedFirstTime) {
         sequence()
         unsubscribe()
diff --git a/client/src/lib/stores/settingsStore.ts b/client/src/lib/stores/settingsStore.ts
index d435135..48dfe73 100644
--- a/client/src/lib/stores/settingsStore.ts
+++ b/client/src/lib/stores/settingsStore.ts
@@ -11,6 +11,8 @@ export interface SettingsStoreData {
   randomWeight: number
   voiceLang: SupportedLanguage
   sentry: boolean
+  frontCameraAddr: string
+  rearCameraAddr: string
 }
 
 export const defaults: SettingsStoreData = {
@@ -18,8 +20,10 @@ export const defaults: SettingsStoreData = {
   goWoke: true, // go woke (for showing parents or other officials where DEI has taken over), disables "offensive" sequences
   fastStartup: false, // skip the loading splash screen (for development purposes. Setting this from within the app has no effect.)
   randomWeight: 1, // the weight of random events (multiplied by the original probability)
-  voiceLang: 'en-US', // locale-specific voice for alerts
-  sentry: true, // protect the robot and operator from foreign threats
+  voiceLang: 'en-UK', // locale-specific voice for alerts
+  sentry: false, // protect the robot and operator from foreign threats
+  frontCameraAddr: '',
+  rearCameraAddr: '',
 }
 
 const createSequenceStore = () => {
@@ -30,7 +34,7 @@ const createSequenceStore = () => {
       data: keyof SettingsStoreData,
       newValue: SettingsStoreData[typeof data]
     ) => {
-      update((store) => {
+      update(store => {
         // @ts-expect-error
         store[data] = newValue
         return store