youwen5/jankboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add camera placeholder

Browse source
This commit is contained in:
Youwen Wu 2024-02-23 18:02:10 -08:00
parent e447b133ca
commit e4b64f479b
3 changed files with 31 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/App.svelte
View file

@ -8,7 +8,7 @@
import { initializeTelemetry } from './lib/utils/initializeTelemetry' import { initializeTelemetry } from './lib/utils/initializeTelemetry'
import { onMount } from 'svelte' import { onMount } from 'svelte'
let activeApp: App = 'media-player' let activeApp: App = 'camera'
let topics: TelemetryTopics = { let topics: TelemetryTopics = {
doubles: [ doubles: [
'orientation', 'orientation',

8
client/src/lib/Apps/Camera/Camera.svelte
View file

@ -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" 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"> <div class="my-auto">
<CameraContainer <CameraContainer cameraUrl="camera_url_here" />
cameraUrl="https://www.investopedia.com/thmb/1epKngue22nqkTg1v8H_Yz5O6Ng=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/Soros-final-f2fd5a6b1dce4ef88d60443754b79bcb.png"
/>
</div> </div>
<div class="my-auto"> <div class="my-auto">
<CameraContainer <CameraContainer cameraUrl="camera_url_here" />
cameraUrl="https://www.investopedia.com/thmb/1epKngue22nqkTg1v8H_Yz5O6Ng=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/Soros-final-f2fd5a6b1dce4ef88d60443754b79bcb.png"
/>
</div> </div>
</div> </div>

35
client/src/lib/Apps/Camera/CameraContainer.svelte
View file

@ -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"> <script lang="ts">
export let cameraUrl: string export let cameraUrl: string
</script> </script>
<div> <div>
<img <!-- svelte-ignore a11y-missing-attribute -->
src={cameraUrl} <div class="grid">
width="400px" <img
height="400px" src={cameraUrl}
alt="camera feed" width="400px"
class="rounded-xl shadow-md" 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> </div>
<style lang="postcss">
.layer1,
.layer2 {
grid-column: 1;
grid-row: 1;
}
</style>