Adding better support for auto connect to first available streamer.

Author: mcottontensor

Frontend/implementations/react/src/components/App.tsx

@@ -17,7 +17,8 @@ export const App = () => {
                     AutoConnect: true,
                     ss: 'ws://localhost:80',
                     StartVideoMuted: true,
-                    HoveringMouse: true
+                    HoveringMouse: true,
+                    WaitForStreamer: true
                 }}
             />
         </div>

Frontend/implementations/typescript/src/uiless.ts

@@ -13,6 +13,7 @@ document.body.onload = function() {
 			AutoConnect: true,
 			ss: "ws://localhost:80",
 			StartVideoMuted: true,
+			WaitForStreamer: true,
 		}
 	});
 

Frontend/library/src/Config/Config.ts

@@ -32,6 +32,7 @@ export class Flags {
     static TouchInput = 'TouchInput' as const;
     static GamepadInput = 'GamepadInput' as const;
     static XRControllerInput = 'XRControllerInput' as const;
+    static WaitForStreamer = "WaitForStreamer" as const;
 }
 
 export type FlagsKeys = Exclude<keyof typeof Flags, 'prototype'>;
@@ -459,6 +460,17 @@ export class Config {
             )
         );
 
+        this.flags.set(
+            Flags.WaitForStreamer,
+            new SettingFlag(
+                Flags.WaitForStreamer,
+                'Wait for streamer',
+                'Will continue trying to connect to the first streamer available.',
+                true,
+                useUrlParams
+            )
+        );
+
         /**
          * Numeric parameters
          */

Frontend/library/src/WebRtcPlayer/WebRtcPlayerController.ts

@@ -110,6 +110,8 @@ export class WebRtcPlayerController {
     // it will use this property to store the override message string
     disconnectMessageOverride: string;
 
+    autoJoinTimer: ReturnType<typeof setTimeout> = undefined;
+
     /**
      *
      * @param config - the frontend config object
@@ -1389,6 +1391,11 @@ export class WebRtcPlayerController {
                     OptionParameters.StreamerId,
                     autoSelectedStreamerId
                 );
+            } else {
+                // no auto selected streamer
+                if (this.config.isFlagEnabled(Flags.WaitForStreamer)) {
+                    this.startAutoJoinTimer()
+                }
             }
             this.pixelStreaming.dispatchEvent(
                 new StreamerListMessageEvent({
@@ -1399,6 +1406,15 @@ export class WebRtcPlayerController {
         }
     }
 
+    startAutoJoinTimer() {
+        clearTimeout(this.autoJoinTimer);
+        this.autoJoinTimer = setTimeout(() => this.tryAutoJoin(), 3000);
+    }
+
+    tryAutoJoin() {
+        this.connectToSignallingServer();
+    }
+
     /**
      * Handle the RTC Answer from the signaling server
      * @param Answer - Answer SDP from the peer.

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

@@ -674,9 +674,11 @@ export class Application {
     handleStreamerListMessage(messageStreamingList: MessageStreamerList, autoSelectedStreamerId: string | null) {
         if (autoSelectedStreamerId === null) {
             if(messageStreamingList.ids.length === 0) {
-                this.showDisconnectOverlay(
-                    'No streamers connected. <div class="clickableState">Click To Restart</div>'
-                );
+                var message = 'No streamers connected. ' +
+                (this.stream.config.isFlagEnabled(Flags.WaitForStreamer)
+                ? 'Waiting for streamer...'
+                : '<div style="clickableState">Click To Restart</div>');
+                this.showDisconnectOverlay(message);
             } else {
                 this.showTextOverlay(
                     'Multiple streamers detected. Use the dropdown in the settings menu to select the streamer'

Frontend/ui-library/src/Config/ConfigUI.ts

@@ -198,6 +198,10 @@ export class ConfigUI {
             psSettingsSection,
             this.flagsUi.get(Flags.AFKDetection)
         );
+        this.addSettingFlag(
+            psSettingsSection,
+            this.flagsUi.get(Flags.WaitForStreamer)
+        );
         this.addSettingNumeric(
             psSettingsSection,
             this.numericParametersUi.get(NumericParameters.AFKTimeoutSecs)