From 17dd6ac011bb9579828f327b2d12ac37fb8bd4fe Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Mon, 18 Mar 2024 22:19:57 -0700
Subject: [PATCH] feat: add closable cutouts Didn't even code it, Svelte magic
 made it start working mid development even though I didn't add half the
 logic. :D

---
 client/src/App.svelte                         |  8 +++--
 client/src/lib/Apps/Settings/Settings.svelte  |  1 +
 .../Dashboard/Cutouts/ClosableCutout.svelte   | 32 +++++++++++++++++++
 .../src/lib/Dashboard/Cutouts/Cutouts.svelte  | 20 ++++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 client/src/lib/Dashboard/Cutouts/ClosableCutout.svelte
 create mode 100644 client/src/lib/Dashboard/Cutouts/Cutouts.svelte

diff --git a/client/src/App.svelte b/client/src/App.svelte
index 2a22397..73e6701 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -12,6 +12,7 @@
   import { settingsStore } from './lib/stores/settingsStore'
   import getSettings from './lib/utils/getSettings'
   import hideSplashscreen from './lib/utils/hideSplashscreen'
+  import Cutouts from './lib/Dashboard/Cutouts/Cutouts.svelte'
 
   let activeApp: App = 'camera'
   // fake loading splash screen to look cool if the model loads too fast
@@ -78,6 +79,9 @@
   </div>
 </main>
 
+<!-- Camera cutouts -->
+<Cutouts show={activeApp !== 'camera'} />
+
 <!-- toast service -->
 <Toaster />
 
@@ -88,14 +92,14 @@
 
   .infotainment-container {
     background-image: url('./assets/wallpaper.jpg');
-    background-repeat: no-repeat;
+    background-repeat: repeat-y;
     background-size: cover;
     /* hide scrollbar */
     -ms-overflow-style: none;
     scrollbar-width: none;
     background-position: top right;
     width: 65vw;
-    height: 100vw;
+    height: 100vh;
   }
 
   .infotainment-container::-webkit-scrollbar {
diff --git a/client/src/lib/Apps/Settings/Settings.svelte b/client/src/lib/Apps/Settings/Settings.svelte
index 88a0769..854020b 100644
--- a/client/src/lib/Apps/Settings/Settings.svelte
+++ b/client/src/lib/Apps/Settings/Settings.svelte
@@ -119,6 +119,7 @@
     </footer>
   </div>
 </AppContainer>
+
 <div class="w-full h-24" />
 
 <style lang="postcss">
diff --git a/client/src/lib/Dashboard/Cutouts/ClosableCutout.svelte b/client/src/lib/Dashboard/Cutouts/ClosableCutout.svelte
new file mode 100644
index 0000000..09ec5d1
--- /dev/null
+++ b/client/src/lib/Dashboard/Cutouts/ClosableCutout.svelte
@@ -0,0 +1,32 @@
+<!-- 
+  @component
+
+  An individual camera cutout that can be closed
+
+  @param src - The source URL of the camera feed
+  @param show - Whether or not to show the cutout
+ -->
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+
+  export let src: string
+  export let show: boolean = true
+
+  const closeCutout = () => {
+    show = false
+  }
+</script>
+
+{#if show}
+  <div
+    class="rounded-lg bg-white bg-opacity-20 backdrop-blur-xl p-4 relative"
+    out:fly={{ y: -50 }}
+  >
+    <button
+      class="absolute top-2 right-2 bg-white bg-opacity-20 backdrop-blur-md hover:brightness-75 rounded-lg pt-2 px-2 pb-1"
+      on:click={closeCutout}
+      ><span class="material-symbols-outlined">close</span></button
+    >
+    <img {src} alt="Front Camera" class="min-w-[300px] min-h-[300px]" />
+  </div>
+{/if}
diff --git a/client/src/lib/Dashboard/Cutouts/Cutouts.svelte b/client/src/lib/Dashboard/Cutouts/Cutouts.svelte
new file mode 100644
index 0000000..81d8741
--- /dev/null
+++ b/client/src/lib/Dashboard/Cutouts/Cutouts.svelte
@@ -0,0 +1,20 @@
+<!-- 
+  @component
+
+  Camera cutout overlay that displays over the app
+ -->
+
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { settingsStore } from '../../stores/settingsStore'
+  import ClosableCutout from './ClosableCutout.svelte'
+
+  export let show: boolean = false
+</script>
+
+{#if show}
+  <div class="fixed top-4 right-4 flex gap-4" transition:fly={{ y: -50 }}>
+    <ClosableCutout src={$settingsStore.frontCameraAddr} />
+    <ClosableCutout src={$settingsStore.rearCameraAddr} />
+  </div>
+{/if}