diff --git a/renderer/components/ui/streamcomponent.tsx b/renderer/components/ui/streamcomponent.tsx index 3885914c..6b0657be 100644 --- a/renderer/components/ui/streamcomponent.tsx +++ b/renderer/components/ui/streamcomponent.tsx @@ -27,7 +27,7 @@ function StreamComponent({ function performance_now_seconds() { return performance.now() / 1000.0 } - + let lastMovement = 0 let gamebarElement = document.getElementById('component_streamcomponent_gamebar') let debugElement = document.getElementById('component_streamcomponent_debug') @@ -103,7 +103,7 @@ function StreamComponent({ }, ] }, jitterData, document.getElementById('component_streamcomponent_debug_webrtc_jitter')); - + const droppedUplot = new uPlot({ title: "Packets lost / Frames dropped", id: "component_streamcomponent_debug_webrtc_dropped", @@ -156,7 +156,7 @@ function StreamComponent({ webRtcStatsInterval = setInterval(() => { xPlayer._webrtcClient.getStats().then((stats) => { let statsOutput = ""; - + stats.forEach((report) => { if (report.type === "inbound-rtp" && report.kind === "video") { @@ -190,7 +190,7 @@ function StreamComponent({ } } }); - + // document.querySelector('div#component_streamcomponent_debug_text').innerHTML = statsOutput; }); }, 33); @@ -228,7 +228,7 @@ function StreamComponent({ } } window.addEventListener('keypress', keyboardPressEvent) - + // cleanup this component return () => { window.removeEventListener('mousemove', mouseEvent) @@ -266,7 +266,6 @@ function StreamComponent({ if(confirm('Are you sure you want to end your stream?')){ document.getElementById('streamComponentHolder').innerHTML = ''; onDisconnect() - xPlayer.close() } } @@ -286,17 +285,18 @@ function StreamComponent({ function drawWaitingTimes(seconds){ if(seconds !== false){ setWaitingSeconds(seconds) - const html = '
Estimated waiting time in queue: '+seconds+' seconds
' - + const formattedWaitingTime = formatWaitingTime(seconds); + const html = '
Estimated waiting time in queue: '+formattedWaitingTime+'
' + document.getElementById('component_streamcomponent_waitingtimes').innerHTML = html const secondsInterval = setInterval(() => { seconds--; setWaitingSeconds(seconds) - + if(document.getElementById('component_streamcomponent_waitingtimes') !== null){ - document.getElementById('component_streamcomponent_waitingtimes_seconds').innerText = seconds + document.getElementById('component_streamcomponent_waitingtimes_seconds').innerText = formatWaitingTime(seconds); } else { clearInterval(secondsInterval) } @@ -308,6 +308,28 @@ function StreamComponent({ } } + function formatWaitingTime(rawSeconds: number): string { + let formattedText = ""; + + const hours = Math.floor(rawSeconds / 3600); + const minutes = Math.floor((rawSeconds % 3600) / 60); + const seconds = (rawSeconds % 3600) % 60; + + if (hours > 0) { + formattedText += hours + " hour(s), "; + } + + if (minutes > 0) { + formattedText += minutes + " minute(s), "; + } + + if (seconds > 0) { + formattedText += seconds + " second(s)."; + } + + return formattedText; + } + return (