diff --git a/pkg/coordinator/handlers.go b/pkg/coordinator/handlers.go index e37311ef..2adde404 100644 --- a/pkg/coordinator/handlers.go +++ b/pkg/coordinator/handlers.go @@ -233,7 +233,7 @@ func (s *Server) WS(w http.ResponseWriter, r *http.Request) { bc.Send(cws.WSPacket{ ID: "init", - Data: createInitPackage(wc.StunTurnServer, s.library.GetAll()), + Data: createInitPackage(wc.Id, wc.StunTurnServer, s.library.GetAll()), }, nil) // If peerconnection is done (client.Done is signalled), we close peerconnection @@ -360,15 +360,14 @@ func (s *Server) cleanWorker(wc *WorkerClient, workerID string) { wc.Close() } -// createInitPackage returns serverhost + game list in encoded wspacket format +// createInitPackage returns xid + serverhost + game list in encoded wspacket format // This package will be sent to initialize -func createInitPackage(stunturn string, games []games.GameMetadata) string { +func createInitPackage(id xid.ID, stunturn string, games []games.GameMetadata) string { var gameName []string for _, game := range games { gameName = append(gameName, game.Name) } - - initPackage := append([]string{stunturn}, gameName...) + initPackage := append([]string{id.String(), stunturn}, gameName...) encodedList, _ := json.Marshal(initPackage) return string(encodedList) } diff --git a/web/css/ui.css b/web/css/ui.css index 306095bf..989271a0 100644 --- a/web/css/ui.css +++ b/web/css/ui.css @@ -157,6 +157,12 @@ background-color: #e7e7e7; } +.server-list div.active::before { + content: '>'; + position: absolute; + left: 4px; +} + .server-list .server-list__header { font-weight: bold; padding: 1em 1em .6em 1em; diff --git a/web/js/controller.js b/web/js/controller.js index c5df0882..dfa6c292 100644 --- a/web/js/controller.js +++ b/web/js/controller.js @@ -428,6 +428,7 @@ }); event.sub(MEDIA_STREAM_INITIALIZED, (data) => { + workerManager.whoami(data.xid); rtcp.start(data.stunturn); gameList.set(data.games); }); @@ -463,4 +464,4 @@ // initial app state setState(app.state.eden); -})(document, event, env, gameList, input, KEY, log, message, recording, room, rtcp, settings, socket, stats, stream, utils); +})(document, event, env, gameList, input, KEY, log, message, recording, room, rtcp, settings, socket, stats, stream, utils, workerManager); diff --git a/web/js/network/socket.js b/web/js/network/socket.js index a65a1035..b675cb84 100644 --- a/web/js/network/socket.js +++ b/web/js/network/socket.js @@ -56,10 +56,10 @@ const socket = (() => { switch (message) { case 'init': // TODO: Read from struct - // init package has 2 part [stunturn, game1, game2, game3 ...] - // const [stunturn, ...games] = data; - let serverData = JSON.parse(data.data); - event.pub(MEDIA_STREAM_INITIALIZED, {stunturn: serverData.shift(), games: serverData}); + // init package has 3 part [xid, stunturn, game1, game2, game3 ...] + const [xid, stunturn, ...games] = JSON.parse(data.data); + // let serverData = data.data); + event.pub(MEDIA_STREAM_INITIALIZED, {xid: xid, stunturn: stunturn, games: games}); break; case 'offer': // this is offer from worker diff --git a/web/js/workerManager.js b/web/js/workerManager.js index 0fb51d3e..c1c40c80 100644 --- a/web/js/workerManager.js +++ b/web/js/workerManager.js @@ -40,10 +40,16 @@ const workerManager = (() => { }, fields = Object.keys(list); + let state = { + lastId: null, + workers: [], + } + const onNewData = (dat = {servers: []}) => { panel.setLoad(false); index.r(); - _render(dat?.servers); + state.workers = dat?.servers || []; + _render(state.workers); } function _render(servers = []) { @@ -63,11 +69,16 @@ const workerManager = (() => { }); content.append(header) - const renderRow = (server) => (row) => fields.forEach(field => { - const val = server.hasOwnProperty(field) ? server[field] : ''; - const renderer = list[field]?.renderer; - row.append(gui.create('span', (f) => f.append(renderer ? renderer(server) : val))); - }) + const renderRow = (server) => (row) => { + if (server?.id && state.lastId && state.lastId === server?.xid) { + row.classList.add('active'); + } + return fields.forEach(field => { + const val = server.hasOwnProperty(field) ? server[field] : ''; + const renderer = list[field]?.renderer; + row.append(gui.create('span', (f) => f.append(renderer ? renderer(server) : val))); + }) + } servers.forEach(server => content.append(gui.create('div', renderRow(server)))) panel.setContent(content); } @@ -112,9 +123,15 @@ const workerManager = (() => { })) }; + const whoami = (id) => { + state.lastId = id; + _render(state.workers); + } + event.sub(GET_SERVER_LIST, onNewData); return { checkLatencies, + whoami, } })(ajax, document, event, gui, log, socket, utils);