feat: refactor countdown update in AFKOverlay

Frontend/ui-library/src/Overlay/AFKOverlay.ts

@@ -44,6 +44,9 @@ export class AFKOverlay extends ActionOverlay {
      * @param countdown - the count down number to be inserted into the span for updating
      */
     public updateCountdown(countdown: number): void {
-        this.textElement.innerHTML = `<center>No activity detected<br>Disconnecting in <span id="afkCountDownNumber">${countdown}</span> seconds<br>Click to continue<br></center>`;
+        const countDownSpan = this.textElement.querySelector('#afkCountDownNumber') as HTMLSpanElement | null;
+        if (countDownSpan) {
+            countDownSpan.textContent = String(countdown);
+        }
     }
 }

Frontend/ui-library/src/UI/DataChannelLatencyTest.ts

@@ -73,21 +73,34 @@
          * Check we have results, NaN would mean that UE version we talk to doesn't support our test
          */
         if (isNaN(result.dataChannelRtt)) {
-            this.latencyTestResultsElement.innerHTML = '<div>Not supported</div>';
+            // Clear any previous content and show a simple "Not supported" message.
+            this.latencyTestResultsElement.textContent = '';
+            const notSupportedDiv = document.createElement('div');
+            notSupportedDiv.textContent = 'Not supported';
+            this.latencyTestResultsElement.appendChild(notSupportedDiv);
             return;
         }
-        let latencyStatsInnerHTML = '';
-        latencyStatsInnerHTML += '<div>Data channel RTT (ms): ' + result.dataChannelRtt + '</div>';
+
+        // Clear previous results before showing new ones.
+        this.latencyTestResultsElement.textContent = '';
+
+        const rttDiv = document.createElement('div');
+        rttDiv.textContent = 'Data channel RTT (ms): ' + result.dataChannelRtt;
+        this.latencyTestResultsElement.appendChild(rttDiv);
         /**
          * Separate path time discovery works only when UE and Player clocks have been synchronized.
          */
         if (result.playerToStreamerTime >= 0 && result.streamerToPlayerTime >= 0) {
-            latencyStatsInnerHTML +=
-                '<div>Player to Streamer path (ms): ' + result.playerToStreamerTime + '</div>';
-            latencyStatsInnerHTML +=
-                '<div>Streamer to Player path (ms): ' + result.streamerToPlayerTime + '</div>';
+            const playerToStreamerDiv = document.createElement('div');
+            playerToStreamerDiv.textContent =
+                'Player to Streamer path (ms): ' + result.playerToStreamerTime;
+            this.latencyTestResultsElement.appendChild(playerToStreamerDiv);
+
+            const streamerToPlayerDiv = document.createElement('div');
+            streamerToPlayerDiv.textContent =
+                'Streamer to Player path (ms): ' + result.streamerToPlayerTime;
+            this.latencyTestResultsElement.appendChild(streamerToPlayerDiv);
         }
-        this.latencyTestResultsElement.innerHTML = latencyStatsInnerHTML;
         //setup button to download the detailed results
         const downloadButton: HTMLInputElement = document.createElement('input');
         downloadButton.type = 'button';
@@ -111,6 +124,10 @@
     }
 
     public handleTestStart() {
-        this.latencyTestResultsElement.innerHTML = '<div>Test in progress</div>';
+        // Clear any previous results and show a "Test in progress" message.
+        this.latencyTestResultsElement.textContent = '';
+        const inProgressDiv = document.createElement('div');
+        inProgressDiv.textContent = 'Test in progress';
+        this.latencyTestResultsElement.appendChild(inProgressDiv);
     }
 }

Frontend/ui-library/src/UI/LatencyTest.ts

@@ -70,50 +70,60 @@
      */
     public handleTestResult(latencyTimings: LatencyTestResults) {
         Logger.Info(JSON.stringify(latencyTimings));
-        let latencyStatsInnerHTML = '';
+
+        // Clear any previous results
+        const resultsElement = this.latencyTestResultsElement;
+        resultsElement.innerHTML = '';
 
         if (latencyTimings.networkLatency !== undefined && latencyTimings.networkLatency > 0) {
-            latencyStatsInnerHTML += '<div>Net latency RTT (ms): ' + latencyTimings.networkLatency + '</div>';
+            const div = document.createElement('div');
+            div.textContent = 'Net latency RTT (ms): ' + latencyTimings.networkLatency;
+            resultsElement.appendChild(div);
         }
 
         if (latencyTimings.EncodeMs !== undefined && latencyTimings.EncodeMs > 0) {
-            latencyStatsInnerHTML += '<div>UE Encode (ms): ' + latencyTimings.EncodeMs + '</div>';
+            const div = document.createElement('div');
+            div.textContent = 'UE Encode (ms): ' + latencyTimings.EncodeMs;
+            resultsElement.appendChild(div);
         }
 
         if (latencyTimings.CaptureToSendMs !== undefined && latencyTimings.CaptureToSendMs > 0) {
-            latencyStatsInnerHTML += '<div>UE Capture (ms): ' + latencyTimings.CaptureToSendMs + '</div>';
+            const div = document.createElement('div');
+            div.textContent = 'UE Capture (ms): ' + latencyTimings.CaptureToSendMs;
+            resultsElement.appendChild(div);
         }
 
         if (latencyTimings.browserSendLatency !== undefined && latencyTimings.browserSendLatency > 0) {
-            latencyStatsInnerHTML +=
-                '<div>Browser send latency (ms): ' + latencyTimings.browserSendLatency + '</div>';
+            const div = document.createElement('div');
+            div.textContent = 'Browser send latency (ms): ' + latencyTimings.browserSendLatency;
+            resultsElement.appendChild(div);
         }
 
         if (
             latencyTimings.frameDisplayDeltaTimeMs !== undefined &&
             latencyTimings.browserReceiptTimeMs !== undefined
         ) {
-            latencyStatsInnerHTML +=
-                latencyTimings.frameDisplayDeltaTimeMs && latencyTimings.browserReceiptTimeMs
-                    ? '<div>Browser receive latency (ms): ' +
-                      latencyTimings.frameDisplayDeltaTimeMs +
-                      '</div>'
-                    : '';
+            if (latencyTimings.frameDisplayDeltaTimeMs && latencyTimings.browserReceiptTimeMs) {
+                const div = document.createElement('div');
+                div.textContent =
+                    'Browser receive latency (ms): ' + latencyTimings.frameDisplayDeltaTimeMs;
+                resultsElement.appendChild(div);
+            }
         }
 
         if (latencyTimings.latencyExcludingDecode !== undefined) {
-            latencyStatsInnerHTML +=
-                '<div>Total latency (excluding browser) (ms): ' +
-                latencyTimings.latencyExcludingDecode +
-                '</div>';
+            const div = document.createElement('div');
+            div.textContent =
+                'Total latency (excluding browser) (ms): ' + latencyTimings.latencyExcludingDecode;
+            resultsElement.appendChild(div);
         }
 
         if (latencyTimings.endToEndLatency !== undefined) {
-            latencyStatsInnerHTML += latencyTimings.endToEndLatency
-                ? '<div>Total latency (ms): ' + latencyTimings.endToEndLatency + '</div>'
-                : '';
+            if (latencyTimings.endToEndLatency) {
+                const div = document.createElement('div');
+                div.textContent = 'Total latency (ms): ' + latencyTimings.endToEndLatency;
+                resultsElement.appendChild(div);
+            }
         }
-
-        this.latencyTestResultsElement.innerHTML = latencyStatsInnerHTML;
     }
 }