From d977aa0a7045ec94633b317c5d4c1661c00084eb Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Fri, 5 Jul 2024 11:41:03 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A5=20Moves=20camera=20stream=20to=20c?=
 =?UTF-8?q?omponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/Stream.svelte          | 21 +++++++++++++++++++
 .../routes/peripherals/camera/Camera.svelte   | 14 ++-----------
 2 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 app/src/lib/components/Stream.svelte

diff --git a/app/src/lib/components/Stream.svelte b/app/src/lib/components/Stream.svelte
new file mode 100644
index 0000000..2a9b7e2
--- /dev/null
+++ b/app/src/lib/components/Stream.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { user } from '$lib/stores/user';
+	import { onDestroy } from 'svelte';
+
+	const ws_token = `?access_token=${$user.bearer_token}`
+
+    let source = "/api/camera/stream"+ ws_token;
+
+	onDestroy(() => {
+		source = '#';
+	});
+</script>
+
+<div class="w-full h-full">
+	<img
+		src={source}
+		class="absolute object-cover blur-3xl w-full h-full -z-10"
+		alt="Live stream is down"
+	/>
+	<img src={source} class="object-contain w-full h-full" alt="Live stream is down" />
+</div>
diff --git a/app/src/routes/peripherals/camera/Camera.svelte b/app/src/routes/peripherals/camera/Camera.svelte
index 89dc387..254fe21 100644
--- a/app/src/routes/peripherals/camera/Camera.svelte
+++ b/app/src/routes/peripherals/camera/Camera.svelte
@@ -1,24 +1,14 @@
 <script lang="ts">
-    import { user } from '$lib/stores/user';
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
     import Camera from '~icons/mdi/camera-outline'
     import Record from '~icons/mdi/radio-button-unchecked'
 	import CameraSetting from './CameraSetting.svelte';
-	import { onDestroy } from 'svelte';
-
-    const ws_token = `?access_token=${$user.bearer_token}`
-
-    let source = "/api/camera/stream"+ ws_token;
-
-    onDestroy(() => {
-        source = ""
-    })
+	import Stream from '$lib/components/Stream.svelte';
 </script>
 
-
 <SettingsCard collapsible={false}>
     <Camera slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
     <span slot="title">Camera</span>
-    <img src={source} alt="Live-stream" class="w-full rounded-lg shadow-lg" />
+    <Stream />
     <CameraSetting />
 </SettingsCard>
\ No newline at end of file