From e4b64f479b43f0b8c0cda6e809baf263f45d11ca Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Fri, 23 Feb 2024 18:02:10 -0800
Subject: [PATCH] add camera placeholder

---
 client/src/App.svelte                         |  2 +-
 client/src/lib/Apps/Camera/Camera.svelte      |  8 ++---
 .../lib/Apps/Camera/CameraContainer.svelte    | 35 +++++++++++++++----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/src/App.svelte b/client/src/App.svelte
index 2dddd53..5af38b2 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -8,7 +8,7 @@
   import { initializeTelemetry } from './lib/utils/initializeTelemetry'
   import { onMount } from 'svelte'
 
-  let activeApp: App = 'media-player'
+  let activeApp: App = 'camera'
   let topics: TelemetryTopics = {
     doubles: [
       'orientation',
diff --git a/client/src/lib/Apps/Camera/Camera.svelte b/client/src/lib/Apps/Camera/Camera.svelte
index d743de6..04bc726 100644
--- a/client/src/lib/Apps/Camera/Camera.svelte
+++ b/client/src/lib/Apps/Camera/Camera.svelte
@@ -6,14 +6,10 @@
   class="flex gap-4 w-full py-40 px-10 backdrop-blur-lg justify-center h-full rounded-3xl shadow-md bg-slate-300 bg-opacity-30"
 >
   <div class="my-auto">
-    <CameraContainer
-      cameraUrl="https://www.investopedia.com/thmb/1epKngue22nqkTg1v8H_Yz5O6Ng=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/Soros-final-f2fd5a6b1dce4ef88d60443754b79bcb.png"
-    />
+    <CameraContainer cameraUrl="camera_url_here" />
   </div>
   <div class="my-auto">
-    <CameraContainer
-      cameraUrl="https://www.investopedia.com/thmb/1epKngue22nqkTg1v8H_Yz5O6Ng=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/Soros-final-f2fd5a6b1dce4ef88d60443754b79bcb.png"
-    />
+    <CameraContainer cameraUrl="camera_url_here" />
   </div>
 </div>
 
diff --git a/client/src/lib/Apps/Camera/CameraContainer.svelte b/client/src/lib/Apps/Camera/CameraContainer.svelte
index 875d356..279667b 100644
--- a/client/src/lib/Apps/Camera/CameraContainer.svelte
+++ b/client/src/lib/Apps/Camera/CameraContainer.svelte
@@ -1,13 +1,34 @@
+<!-- 
+  @component
+  
+  @param cameraUrl - URL of the camera
+
+  Displays a camera feed, or a placeholder if it doesn't exist
+ -->
 <script lang="ts">
   export let cameraUrl: string
 </script>
 
 <div>
-  <img
-    src={cameraUrl}
-    width="400px"
-    height="400px"
-    alt="camera feed"
-    class="rounded-xl shadow-md"
-  />
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <div class="grid">
+    <img
+      src={cameraUrl}
+      width="400px"
+      height="400px"
+      class="rounded-xl shadow-md layer1 z-10"
+      alt="⠀"
+    />
+    <div
+      class="w-[400px] h-[400px] rounded-xl shadow-md bg-neutral-300 animate-pulse layer2"
+    />
+  </div>
 </div>
+
+<style lang="postcss">
+  .layer1,
+  .layer2 {
+    grid-column: 1;
+    grid-row: 1;
+  }
+</style>