Feat/settings mic state on join (#56)

* feat(audio): configure if audio is enabled on joining

* fix(audio): no host audio

src/main/stateKeeper.ts

@@ -11,6 +11,7 @@ type IceServer = {
 export type SettingsData = {
   username: string
   color: string
+  isMicrophoneEnabledOnConnect: boolean
   iceServers: IceServer[]
 }
 
@@ -35,6 +36,7 @@ export const settingsKeeper = async (): Promise<Settings> => {
   const defaultSettings: SettingsData = {
     username: 'Banana Joe',
     color: '#ffffff',
+    isMicrophoneEnabledOnConnect: true,
     iceServers: [
       {
         urls: 'stun:stun.l.google.com:19302'

src/preload/index.d.ts

@@ -1,5 +1,11 @@
 import { ElectronAPI } from '@electron-toolkit/preload'
 
+type IceServer = {
+  urls: string
+  username?: string
+  credential?: string
+}
+
 declare global {
   interface Window {
     electron: ElectronAPI
@@ -13,8 +19,18 @@ declare global {
         x: number
         y: number
       }) => Promise<void>
-      updateSettings: (settings: { username: string; color: string }) => Promise<void>
-      getSettings: () => Promise<{ username: string; color: string }>
+      updateSettings: (settings: {
+        username: string
+        color: string
+        isMicrophoneEnabledOnConnect: boolean
+        iceServers: IceServer[]
+      }) => Promise<void>
+      getSettings: () => Promise<{
+        username: string
+        color: string
+        isMicrophoneEnabledOnConnect: boolean
+        iceServers: IceServer[]
+      }>
       getAppVersion: () => Promise<string>
     }
   }

src/preload/index.ts

@@ -36,13 +36,15 @@ const BananasApi = {
   getSettings: async (): Promise<{
     username: string
     color: string
+    isMicrophoneEnabledOnConnect: boolean
     iceServers: IceServer[]
   }> => {
     return await ipcRenderer.invoke('getSettings')
   },
   updateSettings: async (settings: {
     username: string
     color: string
+    isMicrophoneEnabledOnConnect: boolean
     iceServers: IceServer[]
   }): Promise<void> => {
     ipcRenderer.invoke('updateSettings', settings)

src/renderer/src/BananasTypes.ts

@@ -5,3 +5,16 @@ export type BananasRemoteCursorData = {
   x: number
   y: number
 }
+
+type IceServer = {
+  urls: string
+  username?: string
+  credential?: string
+}
+
+export type SettingsData = {
+  username: string
+  color: string
+  isMicrophoneEnabledOnConnect: boolean
+  iceServers: IceServer[]
+}

src/renderer/src/Host.svelte

@@ -13,7 +13,7 @@
 
   let cursorsActive = false
   let displayStreamActive = false
-  let microphoneActive = true
+  let microphoneActive = false
   let isStreaming = false
   let sessionStarted = false
   let connectionStringIsValid: boolean | null = null
@@ -43,6 +43,7 @@
 
   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)

src/renderer/src/Join.svelte

@@ -19,7 +19,7 @@
   let remoteScreen: HTMLVideoElement
   let UUID = getUUIDv4()
   let zoomFactor = 1
-  let microphoneActive = true
+  let microphoneActive = false
   let isStreaming = false
   let isConnected = false
   let connectionStringIsValid: boolean | null = null
@@ -43,6 +43,7 @@
 
   onMount(async () => {
     const settings = await window.BananasApi.getSettings()
+    microphoneActive = settings.isMicrophoneEnabledOnConnect
     makeVideoDraggable(remoteScreen)
     connectButton.addEventListener('click', async () => {
       await webRTCComponent.Setup(remoteScreen)

src/renderer/src/Settings.svelte

@@ -11,10 +11,12 @@
   let isIceServersValid = true
   let modalSuccessIsActive = false
   let modalFailureIsActive = false
+  let isMicrophoneEnabledOnConnect = true
 
   $: colorValue, checkColor()
   $: usernameValue, checkUsername()
   $: iceServersValue, checkIceServers()
+  $: isMicrophoneEnabledOnConnect
 
   const checkIceServers = (): void => {
     const serversObjects = iceServersValue.split('\n')
@@ -51,6 +53,7 @@
       await window.BananasApi.updateSettings({
         username: usernameValue,
         color: colorValue,
+        isMicrophoneEnabledOnConnect,
         iceServers: iceServersValue.split('\n').map((srv) => JSON.parse(srv))
       })
       modalSuccessIsActive = true
@@ -68,6 +71,7 @@
     const settings = await window.BananasApi.getSettings()
     usernameValue = settings.username
     colorValue = settings.color
+    isMicrophoneEnabledOnConnect = settings.isMicrophoneEnabledOnConnect
     iceServersValue = settings.iceServers.map((srv) => JSON.stringify(srv)).join('\n')
   })
 </script>
@@ -129,15 +133,34 @@
       </div>
     </div>
 
+    <h2>Media</h2>
+
+    <div class="field">
+      <div class="control">
+        <label class="checkbox" for="microphone_active_on_connect">
+          <input
+            bind:checked={isMicrophoneEnabledOnConnect}
+            class="checkbox"
+            type="checkbox"
+            id="microphone_active_on_connect"
+            placeholder="#fffff"
+          />
+          Is microphone active on connect
+        </label>
+      </div>
+    </div>
+
     <h2>Advanced</h2>
 
     <div class="field">
-      <label class="label" for="color">STUN/TURN Server Objects (separated by new lines)</label>
+      <label class="label" for="ice_servers"
+        >STUN/TURN Server Objects (separated by new lines)</label
+      >
       <div class="control has-icons-left has-icons-right">
         <textarea
           bind:value={iceServersValue}
           class="textarea {isIceServersValid ? 'is-success' : 'is-danger'}"
-          id="color"
+          id="ice_servers"
           placeholder="&lbrace; &quot;urls&quot;: &quot;stun:stun.l.google.com:19302&quot; &rbrace;"
         ></textarea>
       </div>

src/renderer/src/WebRTC.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { RTCSessionDescriptionOptions } from './Utils'
-  import type { BananasRemoteCursorData } from './BananasTypes'
+  import type { BananasRemoteCursorData, SettingsData } from './BananasTypes'
   import { getConnectionString, ConnectionType } from './Utils'
   import { getRTCPeerConnectionConfig } from './Config'
 
@@ -16,6 +16,7 @@
   let audioStream: MediaStream | null = null
   let stream: MediaStream | null = null
   let audioElement: HTMLAudioElement | null = null
+  let userSettings: SettingsData | null = null
 
   const remoteMouseCursorPositionsChannelIsReady = (): boolean => {
     if (!remoteMouseCursorPositionsChannel) return false
@@ -69,8 +70,11 @@
     return enabled
   }
   export async function Setup(v: HTMLVideoElement = null): Promise<void> {
+    userSettings = await window.BananasApi.getSettings()
     remoteVideo = v
     audioElement = document.createElement('audio')
+    audioElement.controls = true
+    document.body.appendChild(audioElement)
     audioElement.autoplay = true
     if (pc) {
       pc.close()
@@ -89,7 +93,9 @@
       if (remoteVideo) {
         remoteVideo.srcObject = evt.streams[0]
       }
-      audioElement.srcObject = evt.streams[0]
+      if (audioStream) {
+        audioElement.srcObject = evt.streams[0]
+      }
     }
     pc.onicecandidate = function (e: RTCPeerConnectionIceEvent): void {
       const cand = e.candidate
@@ -121,7 +127,8 @@
         }
         if (audioStream) {
           for (const track of audioStream.getTracks()) {
-            pc.addTrack(track, audioStream)
+            track.enabled = userSettings.isMicrophoneEnabledOnConnect
+            pc.addTrack(track, stream)
           }
         }
       } catch (e) {
@@ -130,6 +137,7 @@
     } else {
       if (audioStream) {
         for (const track of audioStream.getTracks()) {
+          track.enabled = userSettings.isMicrophoneEnabledOnConnect
           pc.addTrack(track, audioStream)
         }
       }

src/renderer/src/env.d.ts

@@ -24,9 +24,15 @@ declare global {
       updateSettings: (settings: {
         username: string
         color: string
+        isMicrophoneEnabledOnConnect: boolean
         iceServers: IceServer[]
       }) => Promise<void>
-      getSettings: () => Promise<{ username: string; color: string; iceServers: IceServer[] }>
+      getSettings: () => Promise<{
+        username: string
+        color: string
+        isMicrophoneEnabledOnConnect: boolean
+        iceServers: IceServer[]
+      }>
       getAppVersion: () => Promise<string>
     }
   }