feat: discover NDI sources, renaming, and button to discover in sourc…

…e popup settings
olzzon · Oct 19, 2021 · 618041e · 618041e
1 parent c880a31
commit 618041e
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 171 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/src/client/components/mainPage.tsx b/src/client/components/mainPage.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'
 import io from 'socket.io-client'
 import Matrix from './matrix'
 import SettingsPage from './settings'
-import { INetWorkSource, ISource, ITarget } from '../../models/interfaces'
+import { IDiscoveredNdiSource, ISource, ITarget } from '../../models/interfaces'
 
 export const socketClient = io()
 
@@ -14,7 +14,7 @@ const MainPage = () => {
     const [showSettings, setShowSettings] = useState<boolean>(false)
     const [targets, setTargets] = useState<ITarget[]>([])
     const [sources, setSources] = useState<ISource[]>([])
-    const [networkSources, setNetworkSources] = useState<INetWorkSource[]>([])
+    const [discoveredNdiSources, setDiscoveredNdiSources] = useState<IDiscoveredNdiSource[]>([])
 
 
     useEffect(() => {
@@ -30,7 +30,7 @@ const MainPage = () => {
         if (socketClient) {
             socketClient.on(
                 IO.UPDATE_CLIENT,
-                (sourceList: ISource[], targetList: ITarget[], networkSourcesList: INetWorkSource[]) => {
+                (sourceList: ISource[], targetList: ITarget[], networkSourcesList: IDiscoveredNdiSource[]) => {
                     console.log(
                         'Source List: ',
                         sourceList,
@@ -39,7 +39,7 @@ const MainPage = () => {
                     )
                     setSources(sourceList)
                     setTargets(targetList)
-                    setNetworkSources(networkSourcesList)
+                    setDiscoveredNdiSources(networkSourcesList)
                 }
             )
         }
@@ -86,7 +86,7 @@ const MainPage = () => {
             {!showSettings ? (
                 <Matrix sources={sources} targets={targets} />
             ) : (
-                <SettingsPage sources={sources} targets={targets} networkSources={networkSources} setSources={setSources}/>
+                <SettingsPage sources={sources} targets={targets} discoveredNdiSources={discoveredNdiSources} setSources={setSources}/>
             )}
         </React.Fragment>
     )

diff --git a/src/client/components/settings.tsx b/src/client/components/settings.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
-import { INetWorkSource, ISource, ITarget } from '../../models/interfaces'
+import { IDiscoveredNdiSource, ISource, ITarget } from '../../models/interfaces'
 import '../styles/Settings.css'
 import SettingsSourcePopUp from './settingsSourcePopUp'
 
 interface ISettingsProps {
     sources: ISource[]
     targets: ITarget[]
-    networkSources: INetWorkSource[]
+    discoveredNdiSources: IDiscoveredNdiSource[]
     setSources: React.Dispatch<React.SetStateAction<ISource[]>>
 }
 
@@ -63,7 +63,7 @@ const SettingsPage: React.FC<ISettingsProps> = (props) => {
                 <SettingsSourcePopUp
                     sources={props.sources}
                     setSources={props.setSources}
-                    networkSources={props.networkSources}
+                    discoveredNdiSources={props.discoveredNdiSources}
                     selectedPopUp={selectedSource}
                     setSelectedPopUp={setSelectedSource}
                 />

diff --git a/src/client/components/settingsSourcePopUp.tsx b/src/client/components/settingsSourcePopUp.tsx
@@ -1,51 +1,52 @@
 import React from 'react'
-import { INetWorkSource, ISource } from '../../models/interfaces'
+import { IDiscoveredNdiSource, ISource } from '../../models/interfaces'
+import * as IO from '../../models/SOCKET_IO_CONTANTS'
 import '../styles/SettingsPopup.css'
+import { socketClient } from './mainPage'
 
 interface ISettingsSourcePopup {
     sources: ISource[]
     setSources: React.Dispatch<React.SetStateAction<ISource[]>>
     selectedPopUp: number
     setSelectedPopUp: React.Dispatch<React.SetStateAction<number>>
-    networkSources: INetWorkSource[]
+    discoveredNdiSources: IDiscoveredNdiSource[]
 }
 
 const SettingsSourcePopUp: React.FC<ISettingsSourcePopup> = (props) => {
-    const settingsSourcePopup = () => {
-        const handleSelectNdiSource = (
-            event: React.ChangeEvent<HTMLSelectElement>
-        ) => {
-            let newSources = props.sources
-            let selectedFromList = parseInt(event.target.value)
-            newSources[props.selectedPopUp] = {
-                label: props.networkSources[selectedFromList].name,
-                dnsSource: props.networkSources[selectedFromList].name,
-                url: props.networkSources[selectedFromList].url,
-            }
-            props.setSources(newSources)
-            console.log('Source changed to NDI source : ', event.target.value)
+    const handleDiscoverNDISources = () => {
+        socketClient.emit(IO.DISCOVER_NDI_SOURCES)
+    }
+    const handleSelectNdiSource = (
+        event: React.ChangeEvent<HTMLSelectElement>
+    ) => {
+        let newSources = props.sources
+        let selectedFromList = parseInt(event.target.value)
+        newSources[props.selectedPopUp] = {
+            label: props.discoveredNdiSources[selectedFromList].name,
+            dnsName: props.discoveredNdiSources[selectedFromList].name,
+            url: props.discoveredNdiSources[selectedFromList].url,
         }
+        props.setSources(newSources)
+        console.log('Source changed to NDI source : ', event.target.value)
+    }
 
-        const handleUserLabelInput = (
-            event: React.ChangeEvent<HTMLInputElement>
-        ) => {
-            console.log('TYPING LABEL')
-        }
-        const handleUserDnsInput = (
-            event: React.ChangeEvent<HTMLInputElement>
-        ) => {
-            console.log('TYPING DNS')
-        }
-        const handleUserIpInput = (
-            event: React.ChangeEvent<HTMLInputElement>
-        ) => {
-            console.log('TYPING IP')
-        }
+    const handleUserLabelInput = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        console.log('TYPING LABEL')
+    }
+    const handleUserDnsInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+        console.log('TYPING DNS')
+    }
+    const handleUserIpInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+        console.log('TYPING IP')
+    }
+    const SettingsSourcePopup = () => {
         return (
             <div>
                 <div className="settings-popup-header">
                     Change Source :{' '}
-                    {props.sources[props.selectedPopUp].dnsSource}
+                    {props.sources[props.selectedPopUp].dnsName}
                 </div>
                 <label className="settings-popup-input">
                     Label :
@@ -59,7 +60,7 @@ const SettingsSourcePopUp: React.FC<ISettingsSourcePopup> = (props) => {
                     NDI Name :
                     <input
                         type="text"
-                        value={props.sources[props.selectedPopUp].dnsSource}
+                        value={props.sources[props.selectedPopUp].dnsName}
                         onChange={(event) => handleUserDnsInput(event)}
                     />
                 </label>{' '}
@@ -72,8 +73,8 @@ const SettingsSourcePopUp: React.FC<ISettingsSourcePopup> = (props) => {
                     />
                 </label>{' '}
                 <select onChange={(event) => handleSelectNdiSource(event)}>
-                    {props.networkSources.map(
-                        (networkSource: INetWorkSource, index: number) => {
+                    {props.discoveredNdiSources.map(
+                        (networkSource: IDiscoveredNdiSource, index: number) => {
                             return (
                                 <option
                                     className="settings-popup-select"
@@ -86,6 +87,13 @@ const SettingsSourcePopUp: React.FC<ISettingsSourcePopup> = (props) => {
                         }
                     )}
                 </select>
+                <button
+                    onClick={() => {
+                        handleDiscoverNDISources()
+                    }}
+                >
+                    DISCOVER NDI
+                </button>
                 <button
                     onClick={() => {
                         props.setSelectedPopUp(-1)
@@ -104,7 +112,7 @@ const SettingsSourcePopUp: React.FC<ISettingsSourcePopup> = (props) => {
         )
     }
 
-    return <div className={'settings-popup'}>{settingsSourcePopup()}</div>
+    return <div className={'settings-popup'}>{SettingsSourcePopup()}</div>
 }
 
 export default SettingsSourcePopUp
diff --git a/src/models/SOCKET_IO_CONTANTS.ts b/src/models/SOCKET_IO_CONTANTS.ts
@@ -2,6 +2,7 @@
 export const CHANGE_SOURCE = 'change_source'
 export const CHANGE_SETTINGS = 'change_settings'
 export const RESTART_SERVER = 'restart_server'
+export const DISCOVER_NDI_SOURCES = 'udiscover_ndi_sources'
 
 //Server to Clients:
 export const UPDATE_CLIENT = 'update_client'
diff --git a/src/models/interfaces.ts b/src/models/interfaces.ts
@@ -1,6 +1,6 @@
 export interface ISource {
     label: string
-    dnsSource: string
+    dnsName: string
     url: string
 }
 
@@ -9,7 +9,7 @@ export interface ITarget {
     selectedSource: number
 }
 
-export interface INetWorkSource {
+export interface IDiscoveredNdiSource {
     name: string
     url: string
 }
diff --git a/src/server/index.ts b/src/server/index.ts
@@ -5,15 +5,15 @@ import { webServer } from './webserver/webServer'
 
 import { loadSourceList, loadTargetList } from './utils/storage'
 import { logger } from './utils/logger'
-import { findAllNdiSources } from './ndi/ndiMatrice'
-import { INetWorkSource } from '../models/interfaces'
+import { discoverNdiSources } from './ndi/ndiMatrice'
+import { IDiscoveredNdiSource } from '../models/interfaces'
 
 initializeEmberServer().then(() => {
     initializeEmberLocalClient()
         .then(() => {
             let sources = loadSourceList()
             let targets = loadTargetList()
-            let networkSources: INetWorkSource[] = findAllNdiSources()
+            let networkSources: IDiscoveredNdiSource[] = discoverNdiSources()
 
             setAllCrossPoints(sources, targets)
             webServer(sources, targets, networkSources)