feat(settings): make turn auth possible (#27)

src/main/stateKeeper.ts

@@ -1,10 +1,16 @@
 import { screen } from 'electron'
 import settings from 'electron-settings'
 
+type IceServer = {
+  urls: string
+  username?: string
+  credential?: string
+}
+
 export type SettingsData = {
   username: string
   color: string
-  punchHoleServers: string[]
+  iceServers: IceServer[]
 }
 
 type Settings = {
@@ -28,7 +34,11 @@ export const settingsKeeper = async (): Promise<Settings> => {
   const defaultSettings: SettingsData = {
     username: 'Banana Joe',
     color: '#ffffff',
-    punchHoleServers: ['stun:stun.l.google.com:19302']
+    iceServers: [
+      {
+        urls: 'stun:stun.l.google.com:19302'
+      }
+    ]
   }
   const hasSettings = await settings.has('settings')
   if (hasSettings) {

src/preload/index.ts

@@ -19,6 +19,12 @@ ipcRenderer.on('openBananasURL', (_, url) => {
   })
 })
 
+type IceServer = {
+  urls: string
+  username?: string
+  credential?: string
+}
+
 const BananasApi = {
   handleUrlClicks: (state: boolean | undefined): boolean => {
     if (state) HANDLE_URL_CLICKS = state
@@ -27,14 +33,14 @@ const BananasApi = {
   getSettings: async (): Promise<{
     username: string
     color: string
-    punchHoleServers: string[]
+    iceServers: IceServer[]
   }> => {
     return await ipcRenderer.invoke('getSettings')
   },
   updateSettings: async (settings: {
     username: string
     color: string
-    punchHoleServers: string[]
+    iceServers: IceServer[]
   }): Promise<void> => {
     ipcRenderer.invoke('updateSettings', settings)
   },

src/renderer/src/Config.ts

@@ -1,6 +1,18 @@
+type IceServer = {
+  urls: string
+  username?: string
+  credential?: string
+}
+
 export const getRTCPeerConnectionConfig = async (): Promise<RTCConfiguration> => {
   const settings = await window.BananasApi.getSettings()
-  const iceServers = settings.punchHoleServers.map((url) => ({ urls: url }))
+  const iceServers = settings.iceServers.map((server: IceServer) => {
+    return {
+      urls: server.urls,
+      username: server.username,
+      credential: server.credential
+    }
+  })
   return {
     iceServers
   }

src/renderer/src/Settings.svelte

@@ -5,27 +5,26 @@
   let colorPreviewIcon: HTMLElement
   let usernameValue: string = 'Banana Joe'
   let colorValue: string = '#ffffff'
-  let punchHoleServersValue: string = 'stun:stun.l.google.com:19302'
+  let iceServersValue: string = '{ "urls": "stun:stun.l.google.com:19302" }'
   let isUsernameValid = false
   let isColorValid = false
-  let isPunchHoleServersValid = true
+  let isIceServersValid = true
   let modalSuccessIsActive = false
   let modalFailureIsActive = false
 
   $: colorValue, checkColor()
   $: usernameValue, checkUsername()
-  $: punchHoleServersValue, checkPunchHoleServers()
+  $: iceServersValue, checkIceServers()
 
-  const checkPunchHoleServers = (): void => {
-    const servers = punchHoleServersValue.split('\n')
-    isPunchHoleServersValid = servers.every((server) => {
-      const [protocol, host, port] = server.split(':')
-      if (protocol === 'stun' || protocol === 'turn') {
-        if (host && port) {
-          return true
-        }
+  const checkIceServers = (): void => {
+    const serversObjects = iceServersValue.split('\n')
+    isIceServersValid = serversObjects.every((serverObject) => {
+      try {
+        const srv = JSON.parse(serverObject)
+        return srv.urls && srv.urls.length > 0
+      } catch (e) {
+        return false
       }
-      return false
     })
   }
   const checkIsValidHexColor = (color: string): boolean => {
@@ -48,11 +47,11 @@
   }
   async function onSubmit(evt: Event): Promise<void> {
     evt.preventDefault()
-    if (isUsernameValid && isColorValid && isPunchHoleServersValid) {
+    if (isUsernameValid && isColorValid && isIceServersValid) {
       await window.BananasApi.updateSettings({
         username: usernameValue,
         color: colorValue,
-        punchHoleServers: punchHoleServersValue.split('\n')
+        iceServers: iceServersValue.split('\n').map((srv) => JSON.parse(srv))
       })
       modalSuccessIsActive = true
       setTimeout(() => {
@@ -69,7 +68,7 @@
     const settings = await window.BananasApi.getSettings()
     usernameValue = settings.username
     colorValue = settings.color
-    punchHoleServersValue = settings.punchHoleServers.join('\n')
+    iceServersValue = settings.iceServers.map((srv) => JSON.stringify(srv)).join('\n')
   })
 </script>
 
@@ -133,13 +132,13 @@
     <h2>Advanced</h2>
 
     <div class="field">
-      <label class="label" for="color">STUN/TURN Servers (separated by new lines)</label>
+      <label class="label" for="color">STUN/TURN Server Objects (separated by new lines)</label>
       <div class="control has-icons-left has-icons-right">
         <textarea
-          bind:value={punchHoleServersValue}
-          class="textarea {isPunchHoleServersValid ? 'is-success' : 'is-danger'}"
+          bind:value={iceServersValue}
+          class="textarea {isIceServersValid ? 'is-success' : 'is-danger'}"
           id="color"
-          placeholder="stun:stun.l.google.com:19302"
+          placeholder="&lbrace; &quot;urls&quot;: &quot;stun:stun.l.google.com:19302&quot; &rbrace;"
         />
       </div>
     </div>

src/renderer/src/env.d.ts

@@ -2,6 +2,12 @@
 /// <reference types="vite/client" />
 import { ElectronAPI } from '@electron-toolkit/preload'
 
+type IceServer = {
+  urls: string
+  username?: string
+  credential?: string
+}
+
 declare global {
   interface Window {
     electron: ElectronAPI
@@ -18,9 +24,9 @@ declare global {
       updateSettings: (settings: {
         username: string
         color: string
-        punchHoleServers: string[]
+        iceServers: IceServer[]
       }) => Promise<void>
-      getSettings: () => Promise<{ username: string; color: string; punchHoleServers: string[] }>
+      getSettings: () => Promise<{ username: string; color: string; iceServers: IceServer[] }>
     }
   }
 }