Show player count in stats panel

Frontend/library/src/PixelStreaming/PixelStreaming.ts

@@ -25,7 +25,8 @@ import {
     WebRtcConnectingEvent,
     WebRtcDisconnectedEvent,
     WebRtcFailedEvent,
-    WebRtcSdpEvent
+    WebRtcSdpEvent,
+    PlayerCountEvent
 } from '../Util/EventEmitter';
 import { MessageOnScreenKeyboard } from '../WebSockets/MessageReceive';
 import { WebXRController } from '../WebXR/WebXRController';
@@ -561,6 +562,12 @@ export class PixelStreaming {
         );
     }
 
+    _onPlayerCount(playerCount: number) {
+        this._eventEmitter.dispatchEvent(
+            new PlayerCountEvent({ count: playerCount })
+        );
+    }
+
     /**
      * Request a connection latency test.
      * NOTE: There are plans to refactor all request* functions. Expect changes if you use this!

Frontend/library/src/Util/EventEmitter.ts

@@ -470,6 +470,21 @@ export class XrFrameEvent extends Event {
     }
 }
 
+/**
+ * An event that is emitted when receiving a player count from the signalling server
+ */
+export class PlayerCountEvent extends Event {
+    readonly type: 'playerCount';
+    readonly data: {
+        /** count object */
+        count: number
+    };
+    constructor(data: PlayerCountEvent['data']) {
+        super('playerCount');
+        this.data = data;
+    }
+}
+
 export type PixelStreamingEvent =
     | AfkWarningActivateEvent
     | AfkWarningUpdateEvent
@@ -502,7 +517,8 @@ export type PixelStreamingEvent =
     | SettingsChangedEvent
     | XrSessionStartedEvent
     | XrSessionEndedEvent
-    | XrFrameEvent;
+    | XrFrameEvent
+    | PlayerCountEvent;
 
 export class EventEmitter extends EventTarget {
     /**

Frontend/library/src/WebRtcPlayer/WebRtcPlayerController.ts

@@ -204,6 +204,9 @@ export class WebRtcPlayerController {
             );
             this.setVideoEncoderAvgQP(0);
         };
+        this.webSocketController.onPlayerCount = (playerCount: MessageReceive.MessagePlayerCount) => { 
+            this.pixelStreaming._onPlayerCount(playerCount.count); 
+        };
         this.webSocketController.onOpen.addEventListener('open', () => {
             const BrowserSendsOffer = this.config.isFlagEnabled(
                 Flags.BrowserSendOffer

Frontend/library/src/WebSockets/SignallingProtocol.ts

@@ -108,6 +108,7 @@ export class SignallingProtocol {
                     'Player Count: ' + playerCount.count,
                     6
                 );
+                websocketController.onPlayerCount(playerCount)
             }
         );
 

Frontend/library/src/WebSockets/WebSocketController.ts

@@ -247,7 +247,12 @@ export class WebSocketController {
      * @param messageDataChannels - The data channels details
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-    onWebRtcPeerDataChannels(
-        messageDataChannels: MessageReceive.MessagePeerDataChannels
-    ) {}
+    onWebRtcPeerDataChannels(messageDataChannels: MessageReceive.MessagePeerDataChannels) {}
+
+    /**
+     * Event is fired when the websocket receives the an updated player count from cirrus
+     * @param MessagePlayerCount - The new player count
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    onPlayerCount(playerCount: MessageReceive.MessagePlayerCount) {}
 }

Frontend/ui-library/src/Application/Application.ts

@@ -365,6 +365,11 @@ export class Application {
             'settingsChanged',
             (event) => this.configUI.onSettingsChanged(event)
         );
+        this.stream.addEventListener(
+            'playerCount', 
+            ({ data: { count }}) => 
+                this.onPlayerCount(count)
+        );
     }
 
     /**
@@ -662,6 +667,10 @@ export class Application {
         this.statsPanel.latencyTest.handleTestResult(latencyTimings);
     }
 
+    onPlayerCount(playerCount: number) {
+        this.statsPanel.handlePlayerCount(playerCount);
+    }
+
     handleStreamerListMessage(messageStreamingList: MessageStreamerList, autoSelectedStreamerId: string | null) {
         if (autoSelectedStreamerId === null) {
             if(messageStreamingList.ids.length === 0) {

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

@@ -147,6 +147,14 @@ export class StatsPanel {
         }
     }
 
+    public handlePlayerCount(playerCount: number) {
+        this.addOrUpdateStat(
+            'PlayerCountStat',
+            'Players',
+            playerCount.toString()
+        );
+    }
+
     /**
      * Handle stats coming in from browser/UE
      * @param stats the stats structure