🙏 Adds mis components and services

app/src/components/Controls.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import nipplejs from 'nipplejs';
+	import { onMount } from 'svelte';
+	import { isPortrait } from '../lib/UseOrientation';
+
+	onMount(() => {
+		let left = nipplejs.create({
+			zone: document.getElementById('left') as HTMLElement,
+			color: 'grey',
+			dynamicPage: true,
+			mode: 'static'
+		});
+		let right = nipplejs.create({
+			zone: document.getElementById('right') as HTMLElement,
+			color: 'grey',
+			dynamicPage: true,
+			mode: 'static'
+		});
+	});
+</script>
+
+<div class="absolute top-0 left-0 w-screen h-screen">
+	<div class="absolute top-0 left-0 h-full w-full flex {isPortrait ? 'hide' : ''}">
+		<div id="left" class="flex w-60 items-center justify-end" />
+		<div class="flex-1" />
+		<div id="right" class="flex w-60 items-center" />
+	</div>
+</div>

app/src/components/Topbar.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import { isConnected } from '../lib/socket';
 </script>
 
 <div class="absolute top-0 flex justify-center w-full z-20">
 	<svg height="40" width="300" class="Settings_topSVG__2VXbU">
 		<path stroke="none" fill="#36393f" d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z" />
 	</svg>
-	<div class="absolute flex gap-1 h-10 w-36 justify-center items-center dots disconnected">
+	<div
+		class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
+        {$isConnected ? 'connected' : 'disconnected'}"
+	>
 		<span class="dot h-4 w-4" />
 		<span class="dot h-4 w-4" />
 		<span class="dot h-4 w-4" />
@@ -20,14 +24,10 @@
 	.disconnected .dot {
 		animation: _fade 0.5s 3s infinite alternate forwards;
 	}
-	/*.connected .dot:first-child {
-    background-color: #00bbe3;
-    transform: scale(1.1);
-  }*/
-	/*.dots .activedot {
-    background-color: #00bbe3;
-    transform: scale(1.1);
-  }*/
+	.connected .dot:first-child {
+		background-color: #00bbe3;
+		transform: scale(1.1);
+	}
 	.dots .dot:first-child {
 		animation-delay: 0.25s;
 	}

app/src/components/Views/Stream.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	let videoStream = '//leika.local/stream';
+
+	onDestroy(() => {
+		videoStream = '#';
+	});
+</script>
+
+<img src={videoStream} class="object-contain w-full h-full" alt="Live stream is down" />