🙏 Adds mis components and services

app/src/App.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import Topbar from './components/Topbar.svelte';
+	import { connect } from './lib/socket';
+	import Stream from './components/Views/Stream.svelte';
+	import Controls from './components/Controls.svelte';
+
+	onMount(() => {
+		connect('ws://leika.local');
+	});
 </script>
 
 <main class="w-screen h-screen">
 	<Topbar />
 	<div class="flex justify-center items-center w-full h-full">
-		<h1>🎥Weee! This is the start project for the spot micro controller</h1>
+		<Stream />
+		<Controls />
 	</div>
 </main>

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" />

app/src/lib/UseOrientation.ts

@@ -0,0 +1,23 @@
+import { onMount } from "svelte";
+import { writable, type Writable } from "svelte/store";
+
+onMount(() => {
+    window.addEventListener("", () => {
+        screen.orientation.addEventListener("change", _handleOrientationChange);
+    })
+})
+
+export type OrientationType = 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary'
+
+export const orientation:Writable<OrientationType> = writable('portrait-primary');
+
+export const isPortrait = writable(true);
+
+const _isPortrait = (orientation:OrientationType | undefined):boolean => {
+    return orientation === "portrait-primary" || orientation ===  "portrait-secondary";
+}
+
+const _handleOrientationChange = () => {
+    orientation.set(screen.orientation.type)
+    isPortrait.set(_isPortrait(screen.orientation.type))
+}

app/src/lib/socket.ts

@@ -0,0 +1,28 @@
+import { writable, type Writable } from 'svelte/store';
+
+export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED'
+
+export const isConnected = writable(false)
+
+export const status:Writable<WebSocketStatus> = writable('CLOSED')
+
+export const socket = writable(null)
+
+export const connect = (url:string) => {
+    status.set('CONNECTING')
+    let _socket = new WebSocket(url);
+    _socket.onopen = _connected;
+    _socket.onclose = _disconnected;
+    socket.set(_socket)
+}
+
+const _connected = () => {
+    status.set('OPEN')
+    isConnected.set(true)
+}
+
+const _disconnected = () => {
+    status.set('CLOSED')
+    isConnected.set(false)
+}
+

app/src/lib/store.ts

@@ -0,0 +1 @@
+import { writable } from 'svelte/store';