Merge pull request #1105 from NiccoMaganeli/human-readable-wait-time

Adding human readable waiting time when queued for a xCloud stream
unknownskl · Feb 12, 2024 · c4b2248 · c4b2248
2 parents 3a379fc + f155e74
commit c4b2248
Showing 1 changed file with 32 additions and 10 deletions.
diff --git 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 = '<div>Estimated waiting time in queue: <span id="component_streamcomponent_waitingtimes_seconds">'+seconds+'</span> seconds</div>'
 
-
+      const formattedWaitingTime = formatWaitingTime(seconds);
+      const html = '<div>Estimated waiting time in queue: <span id="component_streamcomponent_waitingtimes_seconds">'+formattedWaitingTime+'</span></div>'
+
       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 (
     <React.Fragment>
       <div>