From 2327f2ba45537197c4201a801a128110d49f2b7c Mon Sep 17 00:00:00 2001
From: Marco Kellershoff <marco@kellershoff.net>
Date: Mon, 9 Dec 2024 16:12:44 +0100
Subject: [PATCH] wip

---
 src/renderer/src/BananasTypes.ts        |  12 ++
 src/renderer/src/Host.svelte            | 165 ++++++-------------
 src/renderer/src/Join.svelte            | 205 ++++++------------------
 src/renderer/src/RemoteScreen.svelte    | 147 +++++++++++++++++
 src/renderer/src/StreamInterface.svelte | 166 ++++---------------
 src/renderer/src/WebRTC.svelte          |  91 +++++++++--
 6 files changed, 376 insertions(+), 410 deletions(-)
 create mode 100644 src/renderer/src/RemoteScreen.svelte

diff --git a/src/renderer/src/BananasTypes.ts b/src/renderer/src/BananasTypes.ts
index f85e00d..3a16994 100644
--- a/src/renderer/src/BananasTypes.ts
+++ b/src/renderer/src/BananasTypes.ts
@@ -1,3 +1,15 @@
+export enum BananasConnectionState {
+  CONNECTED = 'connected',
+  DISCONNECTED = 'disconnected',
+  FAILED = 'failed',
+  CLOSED = 'closed'
+}
+
+export enum BananasReadyState {
+  READY = 'ready',
+  UNINITIALIZED = 'uninitialized'
+}
+
 type BananasRemoteCursorMovement = {
   x: number
   y: number
diff --git a/src/renderer/src/Host.svelte b/src/renderer/src/Host.svelte
index 34891f9..b45e733 100644
--- a/src/renderer/src/Host.svelte
+++ b/src/renderer/src/Host.svelte
@@ -1,30 +1,34 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import Swal from 'sweetalert2'
+  import { BananasConnectionState, BananasReadyState } from './BananasTypes'
   import { useNavigationEnabled, useIsHosting, useHostUrl } from './stores'
   import { mayBeConnectionString, getDataFromBananasUrl, ConnectionType } from './Utils'
-  import AudioVisualizer from './AudioVisualizer.svelte'
   import WebRTC from './WebRTC.svelte'
+  import StreamInterface from './StreamInterface.svelte'
+  import RemoteScreen from './RemoteScreen.svelte'
 
   const navigationEnabled = useNavigationEnabled()
   const isHosting = useIsHosting()
 
-  let webRTCComponent: WebRTC
+  let remoteScreen: HTMLVideoElement
   let connectButton: HTMLButtonElement
+  let connectToUserName = ''
+  let connectionState = BananasConnectionState.DISCONNECTED
+  let connectionString = useHostUrl()
+  let connectionStringIsValid: boolean | null = null
   let copyButton: HTMLButtonElement
-
-  let connectionState = 'disconnected'
-  let cursorsActive = false
-  let displayStreamActive = false
-  let microphoneActive = false
+  let copyButtonIsLoading = false
+  let isConnected = false
+  let isReady = false
   let isStreaming = false
+  let readyState = BananasReadyState.UNINITIALIZED
   let sessionStarted = false
-  let connectionStringIsValid: boolean | null = null
-  let connectToUserName = ''
-  let copyButtonIsLoading = false
-  let connectionString = useHostUrl()
-  let hasAudioInput = false
-  let visualizerIsActive: boolean = true
+  let webRTCComponent: WebRTC
+
+  $: isConnected = connectionState === BananasConnectionState.CONNECTED
+  $: readyState, onReadyStateChange()
+  $: isReady = readyState === BananasReadyState.READY
 
   const onConnectionStringChange = async (): Promise<void> => {
     if ($connectionString === '') {
@@ -33,23 +37,30 @@
     }
     connectionStringIsValid = mayBeConnectionString(ConnectionType.PARTICIPANT, $connectionString)
     if (connectionStringIsValid) {
-      const banansData = await getDataFromBananasUrl($connectionString)
-      connectToUserName = banansData.data.username
+      const bananasData = await getDataFromBananasUrl($connectionString)
+      connectToUserName = bananasData.data.username
     }
   }
 
-  const onConnectionStateChange = (): void => {
-    switch (connectionState) {
-      case 'connected':
+  const onReadyStateChange = (): void => {
+    switch (readyState) {
+      case BananasReadyState.READY:
         Swal.fire({
           position: 'top-end',
           icon: 'success',
-          title: 'Connection established',
+          title: 'Connection ready',
           showConfirmButton: false,
           timer: 1500
         })
         break
-      case 'failed':
+      default:
+        break
+    }
+  }
+
+  const onConnectionStateChange = (): void => {
+    switch (connectionState) {
+      case BananasConnectionState.FAILED:
         Swal.fire({
           position: 'top-end',
           icon: 'error',
@@ -58,7 +69,7 @@
           timer: 1500
         })
         break
-      case 'closed':
+      case BananasConnectionState.CLOSED:
         Swal.fire({
           position: 'top-end',
           icon: 'info',
@@ -75,20 +86,11 @@
   $: $connectionString, onConnectionStringChange()
   $: connectionState, onConnectionStateChange()
 
-  const toggleRemoteCursors = (): void => {
-    cursorsActive = !cursorsActive
-    window.BananasApi.toggleRemoteCursors(cursorsActive)
-    webRTCComponent.ToggleRemoteCursors(cursorsActive)
-  }
-
   onMount(async () => {
     const settings = await window.BananasApi.getSettings()
-    microphoneActive = settings.isMicrophoneEnabledOnConnect
     connectButton.addEventListener('click', async () => {
       const data = await getDataFromBananasUrl($connectionString)
       await webRTCComponent.Connect(data.rtcSessionDescription)
-      isStreaming = true
-      displayStreamActive = true
     })
     copyButton.addEventListener('click', async () => {
       copyButtonIsLoading = true
@@ -106,13 +108,9 @@
     sessionStarted = true
     $navigationEnabled = false
     $isHosting = true
-    hasAudioInput = webRTCComponent.HasAudioInput()
   }
   const reset = (): void => {
     $connectionString = ''
-    cursorsActive = false
-    displayStreamActive = false
-    microphoneActive = true
     isStreaming = false
     sessionStarted = false
     connectionStringIsValid = null
@@ -124,86 +122,25 @@
     await webRTCComponent.Disconnect()
     reset()
   }
-  const onMicrophoneToggle = async (): Promise<void> => {
-    microphoneActive = !microphoneActive
-    webRTCComponent.ToggleMicrophone()
-  }
-  const onDisplayStreamToggle = async (): Promise<void> => {
-    displayStreamActive = !displayStreamActive
-    webRTCComponent.ToggleDisplayStream()
-    if (!displayStreamActive) {
-      cursorsActive = false
-      window.BananasApi.toggleRemoteCursors(cursorsActive)
-      webRTCComponent.ToggleRemoteCursors(cursorsActive)
-    }
-  }
 </script>
 
-<WebRTC bind:connectionState bind:this={webRTCComponent} />
+<WebRTC
+  bind:connectionState
+  bind:isConnected
+  bind:isStreaming
+  bind:readyState
+  bind:remoteScreen
+  bind:sessionStarted
+  bind:this={webRTCComponent}
+/>
 
-<div class="container p-5">
-  <h1 class="title">{!isStreaming ? 'Host' : 'Hosting'} a session</h1>
-  <div class={!isStreaming ? 'is-hidden' : ''}>
-    <div class="fixed-grid">
-      <div class="grid">
-        <div class="cell">
-          <button
-            title={displayStreamActive ? 'Streaming your display' : 'Not streaming your display'}
-            class="button {displayStreamActive ? 'is-success' : 'is-danger'}"
-            on:click={onDisplayStreamToggle}
-          >
-            <span class="icon">
-              <i class="fa-solid fa-display"></i>
-            </span>
-          </button>
-          {#if hasAudioInput}
-            <button
-              title={microphoneActive ? 'Microphone active' : 'Microphone muted'}
-              class="button {microphoneActive ? 'is-success' : 'is-danger'}"
-              on:click={onMicrophoneToggle}
-            >
-              <span class="icon">
-                {#if microphoneActive}
-                  <AudioVisualizer
-                    className="icon {!visualizerIsActive ? 'is-hidden' : ''}"
-                    bind:visualizerIsActive
-                    stream={webRTCComponent.GetAudioStream()}
-                  />
-                  <i class="fas fa-microphone {visualizerIsActive ? 'is-hidden' : ''}"></i>
-                {:else}
-                  <i class="fas fa-microphone-slash"></i>
-                {/if}
-              </span>
-            </button>
-          {/if}
-          <button
-            title={cursorsActive ? 'Remote cursors enabled' : 'Remote cursors disabled'}
-            class="button {cursorsActive ? 'is-success' : 'is-danger'} {!displayStreamActive
-              ? 'is-hidden'
-              : ''}"
-            on:click={toggleRemoteCursors}
-          >
-            <span class="icon">
-              <i class="fas fa-mouse-pointer"></i>
-            </span>
-          </button>
-        </div>
-        <div class="cell has-text-right">
-          <button class="button is-danger" on:click={onDisconnectClick}>
-            <span class="icon">
-              <i class="fas fa-unlink"></i>
-            </span>
-            <span>Disconnect</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="container p-5 {isReady ? 'is-hidden' : ''}">
+  <h1 class="title">{!sessionStarted ? 'Host' : 'Hosting'} a session</h1>
   <div class="fixed-grid has-2-cols">
     <div class="grid">
       <div class="cell">
         <button
-          class="button is-link {isStreaming ? 'is-hidden' : ''}"
+          class="button is-link {isConnected ? 'is-hidden' : ''}"
           disabled={sessionStarted}
           on:click={onStartSessionButtonClick}
         >
@@ -216,7 +153,7 @@
 
       <div class="cell">
         <button
-          class="button is-danger {!sessionStarted || isStreaming ? 'is-hidden' : ''}"
+          class="button is-danger {!sessionStarted ? 'is-hidden' : ''}"
           on:click={onDisconnectClick}
         >
           <span class="icon">
@@ -228,9 +165,9 @@
 
       <div class="cell">
         <button
-          class="button is-link {!sessionStarted || isStreaming
-            ? 'is-hidden'
-            : ''} {copyButtonIsLoading ? 'is-loading' : ''}"
+          class="button is-link {!sessionStarted ? 'is-hidden' : ''} {copyButtonIsLoading
+            ? 'is-loading'
+            : ''}"
           bind:this={copyButton}
         >
           <span class="icon">
@@ -241,7 +178,7 @@
       </div>
     </div>
 
-    <div class="field has-addons {!sessionStarted || isStreaming ? 'is-hidden' : ''}">
+    <div class="field has-addons {!sessionStarted ? 'is-hidden' : ''}">
       <div class="control has-icons-left has-icons-right">
         <input
           bind:value={$connectionString}
@@ -285,3 +222,7 @@
     </div>
   </div>
 </div>
+
+<StreamInterface bind:isReady bind:isStreaming bind:webRTCComponent />
+
+<RemoteScreen bind:remoteScreen />
diff --git a/src/renderer/src/Join.svelte b/src/renderer/src/Join.svelte
index 9e042ef..b5d7736 100644
--- a/src/renderer/src/Join.svelte
+++ b/src/renderer/src/Join.svelte
@@ -1,35 +1,33 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import Swal from 'sweetalert2'
-  import {
-    makeVideoDraggable,
-    mayBeConnectionString,
-    getDataFromBananasUrl,
-    ConnectionType,
-    getUUIDv4
-  } from './Utils'
+  import { BananasConnectionState, BananasReadyState } from './BananasTypes'
+  import { mayBeConnectionString, getDataFromBananasUrl, ConnectionType } from './Utils'
   import { useNavigationEnabled, useIsWatching, useParticipantUrl } from './stores'
   import WebRTC from './WebRTC.svelte'
-  import AudioVisualizer from './AudioVisualizer.svelte'
+  import StreamInterface from './StreamInterface.svelte'
+  import RemoteScreen from './RemoteScreen.svelte'
 
   const navigationEnabled = useNavigationEnabled()
   const isWatching = useIsWatching()
 
-  let connectionState = 'disconnected'
-  let webRTCComponent: WebRTC
-  let connectButton: HTMLButtonElement
-  let copyButton: HTMLButtonElement
   let remoteScreen: HTMLVideoElement
-  let UUID = getUUIDv4()
-  let zoomFactor = 1
-  let microphoneActive = false
-  let isStreaming = false
-  let isConnected = false
-  let connectionStringIsValid: boolean | null = null
+  let connectButton: HTMLButtonElement
   let connectToUserName = ''
-  let copyButtonIsLoading = false
+  let connectionState = BananasConnectionState.DISCONNECTED
   let connectionString = useParticipantUrl()
-  let visualizerIsActive: boolean = true
+  let connectionStringIsValid: boolean | null = null
+  let copyButton: HTMLButtonElement
+  let copyButtonIsLoading = false
+  let isConnected = false
+  let isReady = false
+  let isStreaming = false
+  let readyState = BananasReadyState.UNINITIALIZED
+  let sessionStarted = false
+  let webRTCComponent: WebRTC
+
+  $: isConnected = connectionState === BananasConnectionState.CONNECTED
+  $: (isReady = readyState === BananasReadyState.READY), onReadyStateChange()
 
   const onConnectionStringChange = async (): Promise<void> => {
     if ($connectionString === '') {
@@ -43,18 +41,25 @@
     }
   }
 
-  const onConnectionStateChange = (): void => {
-    switch (connectionState) {
-      case 'connected':
+  const onReadyStateChange = (): void => {
+    switch (readyState) {
+      case BananasReadyState.READY:
         Swal.fire({
           position: 'top-end',
           icon: 'success',
-          title: 'Connection established',
+          title: 'Connection ready',
           showConfirmButton: false,
           timer: 1500
         })
         break
-      case 'failed':
+      default:
+        break
+    }
+  }
+
+  const onConnectionStateChange = (): void => {
+    switch (connectionState) {
+      case BananasConnectionState.FAILED:
         Swal.fire({
           position: 'top-end',
           icon: 'error',
@@ -63,7 +68,7 @@
           timer: 1500
         })
         break
-      case 'closed':
+      case BananasConnectionState.CLOSED:
         Swal.fire({
           position: 'top-end',
           icon: 'info',
@@ -82,13 +87,11 @@
 
   onMount(async () => {
     const settings = await window.BananasApi.getSettings()
-    microphoneActive = settings.isMicrophoneEnabledOnConnect
-    makeVideoDraggable(remoteScreen)
     connectButton.addEventListener('click', async () => {
-      await webRTCComponent.Setup(remoteScreen)
+      await webRTCComponent.Setup()
       const data = await getDataFromBananasUrl($connectionString)
       await webRTCComponent.Connect(data.rtcSessionDescription)
-      isConnected = true
+      sessionStarted = true
       $isWatching = true
       $navigationEnabled = false
     })
@@ -103,30 +106,10 @@
         copyButtonIsLoading = false
       }, 400)
     })
-    remoteScreen.addEventListener('dblclick', () => {
-      webRTCComponent.PingRemoteCursor('cursor-' + UUID)
-    })
-    remoteScreen.addEventListener('mousemove', (e) => {
-      const { offsetX, offsetY } = e
-      // TODO: Batch cursor updates
-      webRTCComponent.UpdateRemoteCursor({
-        x: offsetX / remoteScreen.clientWidth,
-        y: offsetY / remoteScreen.clientHeight,
-        name: settings.username,
-        id: 'cursor-' + UUID,
-        color: settings.color
-      })
-    })
-    remoteScreen.addEventListener('play', () => {
-      if (!webRTCComponent.IsConnected()) return
-      isStreaming = true
-    })
   })
   const reset = (): void => {
     $connectionString = ''
     connectionStringIsValid = null
-    isStreaming = false
-    microphoneActive = false
     isConnected = false
     $navigationEnabled = true
     $isWatching = false
@@ -135,67 +118,24 @@
     await webRTCComponent.Disconnect()
     reset()
   }
-  const onFullscreenClick = (): void => {
-    remoteScreen.requestFullscreen()
-  }
-  const onZoomInClick = (): void => {
-    zoomFactor += 0.1
-    remoteScreen.style.scale = zoomFactor.toString()
-  }
-  const onZoomOutClick = (): void => {
-    if (zoomFactor <= 1) return
-    zoomFactor -= 0.1
-    remoteScreen.style.scale = zoomFactor.toString()
-  }
-  const onMicrophoneToggle = async (): Promise<void> => {
-    microphoneActive = !microphoneActive
-    webRTCComponent.ToggleMicrophone()
-  }
 </script>
 
-<WebRTC bind:connectionState bind:this={webRTCComponent} />
+<WebRTC
+  bind:connectionState
+  bind:isConnected
+  bind:isStreaming
+  bind:readyState
+  bind:remoteScreen
+  bind:sessionStarted
+  bind:this={webRTCComponent}
+/>
 
-<div class="container p-5">
-  <h1 class="title">{!isStreaming ? 'Join' : 'Joined'} a session</h1>
-  <div class={!isStreaming ? 'is-hidden' : ''}>
-    <div class="fixed-grid">
-      <div class="grid">
-        <div class="cell">
-          <button
-            aria-label={microphoneActive ? 'Microphone active' : 'Microphone muted'}
-            title={microphoneActive ? 'Microphone active' : 'Microphone muted'}
-            class="button {microphoneActive ? 'is-success' : 'is-danger'}"
-            on:click={onMicrophoneToggle}
-          >
-            <span class="icon">
-              {#if microphoneActive}
-                <AudioVisualizer
-                  className="icon {!visualizerIsActive ? 'is-hidden' : ''}"
-                  bind:visualizerIsActive
-                  stream={webRTCComponent.GetAudioStream()}
-                />
-                <i class="fas fa-microphone {visualizerIsActive ? 'is-hidden' : ''}"></i>
-              {:else}
-                <i class="fas fa-microphone-slash"></i>
-              {/if}
-            </span>
-          </button>
-        </div>
-        <div class="cell has-text-right">
-          <button class="button is-danger" aria-label="Disconnect" on:click={onDisconnectClick}>
-            <span class="icon">
-              <i class="fas fa-unlink"></i>
-            </span>
-            <span>Disconnect</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="container p-5 {isReady ? 'is-hidden' : ''}">
+  <h1 class="title">{!isConnected ? 'Join' : 'Joined'} a session</h1>
   <div class="fixed-grid has-2-cols">
     <div class="grid">
       <div class="cell">
-        <div class="field has-addons {isStreaming || isConnected ? 'is-hidden' : ''}">
+        <div class="field has-addons {sessionStarted ? 'is-hidden' : ''}">
           <div class="control has-icons-left has-icons-right">
             <input
               bind:value={$connectionString}
@@ -239,9 +179,9 @@
         </div>
         <div class="control">
           <button
-            class="button is-link {!isConnected || isStreaming
-              ? 'is-hidden'
-              : ''} {copyButtonIsLoading ? 'is-loading' : ''}"
+            class="button is-link {!sessionStarted ? 'is-hidden' : ''} {copyButtonIsLoading
+              ? 'is-loading'
+              : ''}"
             bind:this={copyButton}
           >
             <span class="icon">
@@ -253,7 +193,7 @@
       </div>
       <div class="cell">
         <button
-          class="button is-danger {isStreaming || !isConnected ? 'is-hidden' : ''}"
+          class="button is-danger {!isConnected ? 'is-hidden' : ''}"
           on:click={onDisconnectClick}
         >
           <span class="icon">
@@ -266,49 +206,6 @@
   </div>
 </div>
 
-<div class={!isStreaming ? 'is-hidden' : ''}>
-  <div class="field">
-    <label class="label" for="remote_screen">Remote screen</label>
-    <div class="control">
-      <div class="video-overflow">
-        <video bind:this={remoteScreen} id="remote_screen" class="video" autoplay playsinline muted
-        ></video>
-      </div>
-    </div>
-  </div>
-  <div class="field">
-    <div class="control">
-      <button class="button is-info" on:click={onZoomInClick}>
-        <span class="icon">
-          <i class="fas fa-search-plus"></i>
-        </span>
-        <span>Zoom In</span>
-      </button>
-      <button class="button is-info" on:click={onZoomOutClick}>
-        <span class="icon">
-          <i class="fas fa-search-minus"></i>
-        </span>
-        <span>Zoom Out</span>
-      </button>
-      <button class="button is-info" on:click={onFullscreenClick}>
-        <span class="icon">
-          <i class="fas fa-expand"></i>
-        </span>
-        <span>Fullscreen</span>
-      </button>
-    </div>
-  </div>
-</div>
+<StreamInterface bind:isReady bind:isStreaming bind:webRTCComponent />
 
-<style>
-  .video {
-    width: 100%;
-    height: auto;
-    transition: transform 0.5s linear;
-  }
-  .video-overflow {
-    width: 100%;
-    height: auto;
-    overflow: hidden;
-  }
-</style>
+<RemoteScreen bind:remoteScreen />
diff --git a/src/renderer/src/RemoteScreen.svelte b/src/renderer/src/RemoteScreen.svelte
new file mode 100644
index 0000000..bec6f96
--- /dev/null
+++ b/src/renderer/src/RemoteScreen.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte'
+  import { makeVideoDraggable, getUUIDv4 } from './Utils'
+  import WebRTC from './WebRTC.svelte'
+
+  export let remoteScreen: HTMLVideoElement
+  export let webRTCComponent: WebRTC | null = null
+  export let isReady: boolean = false
+  export let isStreaming = false
+  export let receivingRemoteScreen: boolean = false
+
+  // Time interval for batching cursor updates (in ms)
+  const BATCH_SEND_INTERVAL = 100
+
+  let cursorMovementQueue: { x: number; y: number }[] = []
+  let batchTimer: number | null = null
+
+  let isRemoteScreenVisible = false
+
+  let UUID = getUUIDv4()
+  let zoomFactor = 1
+  let settings = null
+
+  $: isRemoteScreenVisible = isReady && !isStreaming && receivingRemoteScreen
+
+  function sendBatchedCursorUpdates(): void {
+    if (cursorMovementQueue.length > 0) {
+      webRTCComponent.UpdateRemoteCursor({
+        movements: cursorMovementQueue, // Send all queued movements
+        name: settings.username,
+        id: 'cursor-' + UUID,
+        color: settings.color
+      })
+      cursorMovementQueue = [] // Clear the queue after sending
+    }
+  }
+
+  onMount(async () => {
+    settings = await window.BananasApi.getSettings()
+
+    makeVideoDraggable(remoteScreen)
+
+    remoteScreen.addEventListener('dblclick', () => {
+      webRTCComponent.PingRemoteCursor('cursor-' + UUID)
+    })
+
+    remoteScreen.addEventListener('mousemove', (e) => {
+      const { offsetX, offsetY } = e
+
+      // Normalize cursor position
+      const x = offsetX / remoteScreen.clientWidth
+      const y = offsetY / remoteScreen.clientHeight
+
+      cursorMovementQueue.push({ x, y })
+
+      if (!batchTimer) {
+        batchTimer = window.setInterval(() => {
+          sendBatchedCursorUpdates()
+        }, BATCH_SEND_INTERVAL)
+      }
+    })
+
+    remoteScreen.addEventListener('mouseout', () => {
+      if (batchTimer) {
+        clearInterval(batchTimer)
+        batchTimer = null
+        sendBatchedCursorUpdates() // Flush the queue immediately
+      }
+    })
+  })
+
+  const onFullscreenClick = (): void => {
+    remoteScreen.requestFullscreen()
+  }
+
+  const onZoomInClick = (): void => {
+    zoomFactor += 0.1
+    remoteScreen.style.scale = zoomFactor.toString()
+  }
+
+  const onZoomOutClick = (): void => {
+    if (zoomFactor <= 1) return
+    zoomFactor -= 0.1
+    remoteScreen.style.scale = zoomFactor.toString()
+  }
+
+  onDestroy(() => {
+    if (batchTimer) {
+      clearInterval(batchTimer)
+      batchTimer = null
+    }
+    sendBatchedCursorUpdates() // Send any remaining movements
+  })
+</script>
+
+<!--
+INFO:
+Show only when not streaming, because we only want one Desktop stream at a time
+and if you are the Host, you are already streaming your screen and thus should not
+be able to see the remote screen, which would be your own screen.
+-->
+<div class={isRemoteScreenVisible ? '' : 'is-hidden'}>
+  <div class="field">
+    <label class="label" for="remote_screen">Remote screen</label>
+    <div class="control">
+      <div class="video-overflow">
+        <video bind:this={remoteScreen} id="remote_screen" class="video" autoplay playsinline muted
+        ></video>
+      </div>
+    </div>
+  </div>
+  <div class="field">
+    <div class="control">
+      <button class="button is-info" on:click={onZoomInClick}>
+        <span class="icon">
+          <i class="fas fa-search-plus"></i>
+        </span>
+        <span>Zoom In</span>
+      </button>
+      <button class="button is-info" on:click={onZoomOutClick}>
+        <span class="icon">
+          <i class="fas fa-search-minus"></i>
+        </span>
+        <span>Zoom Out</span>
+      </button>
+      <button class="button is-info" on:click={onFullscreenClick}>
+        <span class="icon">
+          <i class="fas fa-expand"></i>
+        </span>
+        <span>Fullscreen</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .video {
+    width: 100%;
+    height: auto;
+    transition: transform 0.5s linear;
+  }
+  .video-overflow {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/renderer/src/StreamInterface.svelte b/src/renderer/src/StreamInterface.svelte
index 6df78e6..f7cec51 100644
--- a/src/renderer/src/StreamInterface.svelte
+++ b/src/renderer/src/StreamInterface.svelte
@@ -1,116 +1,56 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte'
-  import { makeVideoDraggable, getUUIDv4 } from './Utils'
+  import { onMount } from 'svelte'
   import WebRTC from './WebRTC.svelte'
   import AudioVisualizer from './AudioVisualizer.svelte'
 
   export let webRTCComponent: WebRTC
-  export let connectionState: string = 'disconnected'
+  export let isReady: boolean = false
+  export let isStreaming = false
 
-  // Time interval for batching cursor updates (in ms)
-  const BATCH_SEND_INTERVAL = 100
+  let cursorsActive = false
 
-  let cursorMovementQueue: { x: number; y: number }[] = []
-  let batchTimer: number | null = null
-
-  let remoteScreen: HTMLVideoElement
-  let UUID = getUUIDv4()
-  let zoomFactor = 1
   let microphoneActive = false
-  let isStreaming = false
   let visualizerIsActive: boolean = true
-  let isConnected = connectionState === 'connected'
   let settings = null
 
-  function sendBatchedCursorUpdates(): void {
-    if (cursorMovementQueue.length > 0) {
-      webRTCComponent.UpdateRemoteCursor({
-        movements: cursorMovementQueue, // Send all queued movements
-        name: settings.username,
-        id: 'cursor-' + UUID,
-        color: settings.color
-      })
-      cursorMovementQueue = [] // Clear the queue after sending
-    }
+  const toggleRemoteCursors = (): void => {
+    cursorsActive = !cursorsActive
+    window.BananasApi.toggleRemoteCursors(cursorsActive)
+    webRTCComponent.ToggleRemoteCursors(cursorsActive)
   }
 
   onMount(async () => {
     settings = await window.BananasApi.getSettings()
-
     microphoneActive = settings.isMicrophoneEnabledOnConnect
-    makeVideoDraggable(remoteScreen)
-
-    remoteScreen.addEventListener('dblclick', () => {
-      webRTCComponent.PingRemoteCursor('cursor-' + UUID)
-    })
-
-    remoteScreen.addEventListener('mousemove', (e) => {
-      const { offsetX, offsetY } = e
-
-      // Normalize cursor position
-      const x = offsetX / remoteScreen.clientWidth
-      const y = offsetY / remoteScreen.clientHeight
-
-      cursorMovementQueue.push({ x, y })
-
-      if (!batchTimer) {
-        batchTimer = window.setInterval(() => {
-          sendBatchedCursorUpdates()
-        }, BATCH_SEND_INTERVAL)
-      }
-    })
-
-    remoteScreen.addEventListener('mouseout', () => {
-      if (batchTimer) {
-        clearInterval(batchTimer)
-        batchTimer = null
-        sendBatchedCursorUpdates() // Flush the queue immediately
-      }
-    })
-
-    remoteScreen.addEventListener('play', () => {
-      if (!webRTCComponent.IsConnected()) return
-      isStreaming = true
-    })
   })
 
   const onDisconnectClick = async (): Promise<void> => {
     await webRTCComponent.Disconnect()
   }
 
-  const onFullscreenClick = (): void => {
-    remoteScreen.requestFullscreen()
-  }
-
-  const onZoomInClick = (): void => {
-    zoomFactor += 0.1
-    remoteScreen.style.scale = zoomFactor.toString()
-  }
-
-  const onZoomOutClick = (): void => {
-    if (zoomFactor <= 1) return
-    zoomFactor -= 0.1
-    remoteScreen.style.scale = zoomFactor.toString()
-  }
-
   const onMicrophoneToggle = async (): Promise<void> => {
     microphoneActive = !microphoneActive
     webRTCComponent.ToggleMicrophone()
   }
 
-  onDestroy(() => {
-    if (batchTimer) {
-      clearInterval(batchTimer)
-      batchTimer = null
-    }
-    sendBatchedCursorUpdates() // Send any remaining movements
-  })
+  const requestStreamer = async (): Promise<void> => {
+    console.log('Requesting streamer')
+  }
 </script>
 
-<div class="container p-5 {isConnected ? '' : 'is-hidden'}">
+<div class="container p-5 {isReady ? '' : 'is-hidden'}">
   <div class="fixed-grid">
     <div class="grid">
       <div class="cell">
+        <button
+          title={isStreaming ? 'Stop streaming your screen' : 'Request to stream your screen'}
+          class="button {isStreaming ? 'is-success' : 'is-danger'}"
+          on:click={requestStreamer}
+        >
+          <span class="icon">
+            <i class="fa-solid fa-display"></i>
+          </span>
+        </button>
         <button
           aria-label={microphoneActive ? 'Microphone active' : 'Microphone muted'}
           title={microphoneActive ? 'Microphone active' : 'Microphone muted'}
@@ -130,6 +70,17 @@
             {/if}
           </span>
         </button>
+        <button
+          title={cursorsActive ? 'Remote cursors enabled' : 'Remote cursors disabled'}
+          class="button {cursorsActive ? 'is-success' : 'is-danger'} {isStreaming
+            ? ''
+            : 'is-hidden'}"
+          on:click={toggleRemoteCursors}
+        >
+          <span class="icon">
+            <i class="fas fa-mouse-pointer"></i>
+          </span>
+        </button>
       </div>
       <div class="cell has-text-right">
         <button class="button is-danger" aria-label="Disconnect" on:click={onDisconnectClick}>
@@ -142,56 +93,3 @@
     </div>
   </div>
 </div>
-
-<!--
-INFO:
-Show only when not streaming, because we only want one Desktop stream at a time
-and if you are the Host, you are already streaming your screen and thus should not
-be able to see the remote screen, which would be your own screen.
--->
-<div class={isStreaming ? 'is-hidden' : ''}>
-  <div class="field">
-    <label class="label" for="remote_screen">Remote screen</label>
-    <div class="control">
-      <div class="video-overflow">
-        <video bind:this={remoteScreen} id="remote_screen" class="video" autoplay playsinline muted
-        ></video>
-      </div>
-    </div>
-  </div>
-  <div class="field">
-    <div class="control">
-      <button class="button is-info" on:click={onZoomInClick}>
-        <span class="icon">
-          <i class="fas fa-search-plus"></i>
-        </span>
-        <span>Zoom In</span>
-      </button>
-      <button class="button is-info" on:click={onZoomOutClick}>
-        <span class="icon">
-          <i class="fas fa-search-minus"></i>
-        </span>
-        <span>Zoom Out</span>
-      </button>
-      <button class="button is-info" on:click={onFullscreenClick}>
-        <span class="icon">
-          <i class="fas fa-expand"></i>
-        </span>
-        <span>Fullscreen</span>
-      </button>
-    </div>
-  </div>
-</div>
-
-<style>
-  .video {
-    width: 100%;
-    height: auto;
-    transition: transform 0.5s linear;
-  }
-  .video-overflow {
-    width: 100%;
-    height: auto;
-    overflow: hidden;
-  }
-</style>
diff --git a/src/renderer/src/WebRTC.svelte b/src/renderer/src/WebRTC.svelte
index e97a6a7..b4d2e9c 100644
--- a/src/renderer/src/WebRTC.svelte
+++ b/src/renderer/src/WebRTC.svelte
@@ -1,20 +1,27 @@
 <script lang="ts">
   import type { RTCSessionDescriptionOptions } from './Utils'
   import type { BananasRemoteCursorData, SettingsData } from './BananasTypes'
+  import { BananasConnectionState, BananasReadyState } from './BananasTypes'
   import { getConnectionString, ConnectionType } from './Utils'
   import { getRTCPeerConnectionConfig } from './Config'
+  import { onDestroy } from 'svelte'
 
-  export let connectionState: string = 'disconnected'
+  export let remoteScreen: HTMLVideoElement | null = null
+  export let connectionState: string = BananasConnectionState.DISCONNECTED
+  export let isStreaming = false
+  export let readyState: BananasReadyState = BananasReadyState.UNINITIALIZED
+  export let sessionStarted = false
+  export let isConnected = false
 
   const errorHander = (e: ErrorEvent): void => {
     console.error(e)
   }
 
-  let remoteVideo: HTMLVideoElement | null = null
   let pc: RTCPeerConnection | null = null
   let remoteCursorPositionsEnabled = false
   let remoteMouseCursorPositionsChannel: RTCDataChannel | null = null
   let remoteCursorPingChannel: RTCDataChannel | null = null
+  let signalingChannel: RTCDataChannel | null = null
   let audioStream: MediaStream | null = null
   let stream: MediaStream | null = null
   let audioElement: HTMLAudioElement | null = null
@@ -37,7 +44,7 @@
       remoteMouseCursorPositionsChannel = dc
       dc.onmessage = function (e: MessageEvent): void {
         if (!remoteCursorPositionsEnabled) return
-        if (remoteVideo) return
+        if (isStreaming) return
         const data = JSON.parse(e.data)
         window.BananasApi.updateRemoteCursor(data)
       }
@@ -46,10 +53,16 @@
       remoteCursorPingChannel = dc
       dc.onmessage = function (e: MessageEvent): void {
         if (!remoteCursorPositionsEnabled) return
-        if (remoteVideo) return
+        if (isStreaming) return
         window.BananasApi.remoteCursorPing(e.data)
       }
     }
+    if (dc.label === 'signaling') {
+      signalingChannel = dc
+      dc.onopen = function (): void {
+        readyState = BananasReadyState.READY
+      }
+    }
   }
   export function PingRemoteCursor(cursorId: string): void {
     if (!remoteCursorPingChannelIsReady()) {
@@ -84,9 +97,8 @@
     remoteCursorPositionsEnabled = enabled
     return enabled
   }
-  export async function Setup(v: HTMLVideoElement = null): Promise<void> {
+  export async function Setup(): Promise<void> {
     userSettings = await window.BananasApi.getSettings()
-    remoteVideo = v
     audioElement = document.createElement('audio')
     audioElement.controls = true
     audioElement.autoplay = true
@@ -102,11 +114,12 @@
       if (e.channel.label === 'remoteCursorPing') {
         setupDataChannel(e.channel)
       }
+      if (e.channel.label === 'signaling') {
+        setupDataChannel(e.channel)
+      }
     }
     pc.ontrack = (evt): void => {
-      if (remoteVideo) {
-        remoteVideo.srcObject = evt.streams[0]
-      }
+      remoteScreen.srcObject = evt.streams[0]
       if (audioStream) {
         audioElement.srcObject = evt.streams[0]
       }
@@ -130,7 +143,7 @@
     } catch (e) {
       errorHander(e)
     }
-    if (!remoteVideo) {
+    if (isStreaming) {
       try {
         stream = await navigator.mediaDevices.getDisplayMedia({
           video: true,
@@ -176,8 +189,10 @@
   export async function CreateHostUrl(data: { username: string }): Promise<string> {
     remoteMouseCursorPositionsChannel = pc.createDataChannel('remoteMouseCursorPositions')
     remoteCursorPingChannel = pc.createDataChannel('remoteCursorPing')
+    signalingChannel = pc.createDataChannel('signaling')
     setupDataChannel(remoteMouseCursorPositionsChannel)
     setupDataChannel(remoteCursorPingChannel)
+    setupDataChannel(signalingChannel)
     const desc = await pc.createOffer()
     await pc.setLocalDescription(desc)
     return await getConnectionString(ConnectionType.HOST, pc.localDescription, data)
@@ -238,5 +253,61 @@
     } catch (e) {
       errorHander(e)
     }
+    readyState = BananasReadyState.UNINITIALIZED
+    sessionStarted = false
+    isConnected = false
   }
+
+  onDestroy(() => {
+    // Close the peer connection
+    if (pc) {
+      pc.close()
+      pc = null
+    }
+
+    // Stop and release all tracks in the audio stream
+    if (audioStream) {
+      for (const track of audioStream.getTracks()) {
+        track.stop()
+      }
+      audioStream = null
+    }
+
+    // Stop and release all tracks in the display/media stream
+    if (stream) {
+      for (const track of stream.getTracks()) {
+        track.stop()
+      }
+      stream = null
+    }
+
+    // Clean up data channels
+    if (signalingChannel) {
+      signalingChannel.close()
+      signalingChannel = null
+    }
+
+    if (remoteMouseCursorPositionsChannel) {
+      remoteMouseCursorPositionsChannel.close()
+      remoteMouseCursorPositionsChannel = null
+    }
+
+    if (remoteCursorPingChannel) {
+      remoteCursorPingChannel.close()
+      remoteCursorPingChannel = null
+    }
+
+    // Reset other references
+    if (audioElement) {
+      audioElement.srcObject = null
+      audioElement = null
+    }
+
+    if (remoteScreen) {
+      remoteScreen.srcObject = null
+    }
+
+    userSettings = null
+    remoteCursorPositionsEnabled = false
+  })
 </script>