@3dsource/angular-unreal-module 0.0.101-dev.4 → 0.0.101-dev.6

package/fesm2022/3dsource-angular-unreal-module.mjs

@@ -979,7 +979,7 @@ const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unr
  * Returns Scene load progress as a float value in between 0-1
  */
 const selectTotalProgress = createSelector(unrealFeature.selectStatusPercentSignallingServer, selectCommandProgress, unrealFeature.selectAwsInstance, unrealFeature.selectDataChannelConnected, (statusPercentSignallingServer, commandProgress, awsInstance, dataChannelConnected) => {
-    //TODO make better mechanism to detect is new orchestration
+    // TODO make better mechanism to detect is new orchestration
     const isNewOrchestration = String(awsInstance?.wsUrl).match(/^wss:\/\/orchestration-websocket/i);
     const newOrchestrationProgressComplete = dataChannelConnected
         ? 100
@@ -1378,7 +1378,7 @@ class CommandsEffects {
         this.listenUnrealCallbackByInitSignalling$ = createEffect(() => {
             return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap(() => this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json
                 ? json.commandCallback?.correlationId
-                : json?.correlationId), filter(Truthy), tapLog('Unreal Command Callback'), map((id) => commandCompleted({ id })))));
+                : json?.correlationId), filter(Truthy), map((id) => commandCompleted({ id })))));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandsEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -2113,8 +2113,13 @@ function createWebSocket(wsUrl) {
     Logger.info('Creating socket', wsUrl);
     return defer(() => new Observable((observer) => {
         const ws = new WebSocket(wsUrl);
+        let opened = false;
+        let emitted = false;
         const onOpen = () => {
+            opened = true;
+            emitted = true;
             observer.next(ws); // connection established
+            observer.complete(); // single-value observable — done
         };
         const onError = (ev) => {
             const err = ev && 'error' in ev && ev?.error instanceof Error
@@ -2123,7 +2128,7 @@ function createWebSocket(wsUrl) {
             observer.error(err);
         };
         const onClose = (ev) => {
-            if (ws.readyState !== WebSocket.OPEN) {
+            if (!opened) {
                 observer.error(new Error(`WebSocket closed before open (code ${ev.code})`));
             }
         };
@@ -2134,6 +2139,14 @@ function createWebSocket(wsUrl) {
             ws.removeEventListener('open', onOpen);
             ws.removeEventListener('error', onError);
             ws.removeEventListener('close', onClose);
+            // Only close the socket if it was never delivered to the consumer.
+            // Once emitted, the consumer owns the socket (e.g. connectToCirrus
+            // attaches its own handlers). Closing here would break downstream.
+            if (!emitted &&
+                (ws.readyState === WebSocket.CONNECTING ||
+                    ws.readyState === WebSocket.OPEN)) {
+                ws.close();
+            }
         };
     })).pipe(timeout$1({
         first: WS_TIMEOUT, // fail if no 'open' event in this window
@@ -2231,7 +2244,7 @@ class SignallingService extends SubService {
         this.correlationId = generateUuid();
         this.commandTelemetryService.reset();
         this.startEstablishingConnection();
-        return defer(() => this.getRegion().pipe(tap((region) => this.region.set(region ?? '')), map$1((region) => this.adaptUrlsToRegion(urlList, region)), switchMap((urls) => this.getAwsInstance(urls).pipe(take(1))), tap((awsInstance) => this.store.dispatch(setAwsInstance(awsInstance))), switchMap(({ wsUrl }) => this.connectToCirrus(wsUrl ?? '')), filter(Truthy), take(1), takeUntil(this.abort$))).pipe(
+        return defer(() => this.getRegion().pipe(tap((region) => this.region.set(region ?? '')), map$1((region) => this.adaptUrlsToRegion(urlList, region)), switchMap((urls) => this.getAwsInstance(urls).pipe(take(1))), tap((awsInstance) => this.store.dispatch(setAwsInstance(awsInstance))), switchMap(({ wsUrl }) => this.connectToCirrus(wsUrl ?? '').pipe(filter(Truthy), take(1))), takeUntil(this.abort$))).pipe(
         // Retry the whole attempt on error, advancing to the next URL each time.
         retry({
             delay: (err, attempt) => {
@@ -4057,2091 +4070,2102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-class AfkPlaywrightService extends AFKService {
-    init() {
-        return;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class SignallingPlaywrightService extends SignallingService {
+/*
+ * Copyright (c) 2026.
+ * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
+ */
+class WebRtcPlayerService2 extends SubService {
     constructor() {
         super();
+        this.onDataChannelMessage$ = new Subject();
+        this.signallingSrv = inject(SignallingService);
+        this.videoService = inject(VideoService);
+        this.commandTelemetryService = inject(CommandTelemetryService);
+        this.cfg = {};
+        this.useMic = false;
+        this.forceTURN = false;
+        this.forceMonoAudio = false;
+        /** Whether the remote SDP has been applied to the current peer connection */
+        this.remoteDescriptionSet = false;
+        /** ICE candidates received before the remote description was set */
+        this.iceCandidateBuffer = [];
+        this.isReconnecting = this.store.selectSignal(unrealFeature.selectIsReconnecting);
+        this.init();
+        this.actions$.pipe(ofType(dropDC)).subscribe(() => this.dcClient?.close());
+        this.actions$.pipe(ofType(dropPC)).subscribe(() => this.pcClient?.close());
     }
     init() {
-        return;
-    }
-    connectToSignaling() {
-        this.store.dispatch(setUnrealPlaywrightConfig());
-        this.store.dispatch(dataChannelConnected({
-            statusMessage: 'Playwright set data channel connected',
-        }));
-        return EMPTY;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SignallingPlaywrightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SignallingPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SignallingPlaywrightService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class UnrealCommunicatorPlaywrightService extends UnrealCommunicatorService {
-    init() {
-        return;
-    }
-    sendCommandToUnreal() {
-        return;
+        this.signallingSrv.onConfig$.subscribe((config) => {
+            this.videoService.create();
+            this.setConfig(config);
+        });
+        // Server-initiated offer: set remote description and respond with answer
+        this.signallingSrv.onOffer$.pipe(filter(Truthy)).subscribe((offer) => {
+            void this.handleServerOffer(offer);
+        });
+        // Answer to a client-initiated offer
+        this.signallingSrv.onWebRtcAnswer$
+            .pipe(filter(Truthy))
+            .subscribe((answer) => {
+            void this.handleServerAnswer(answer);
+        });
+        // ICE candidates — buffered until remote description is set
+        this.signallingSrv.onWebRtcIce$.subscribe((candidate) => {
+            this.commandTelemetryService.trackStopCommand('EXT-iceCandidate', true, {
+                multi: true,
+            });
+            if (this.remoteDescriptionSet) {
+                this.handleCandidateFromServer(candidate);
+            }
+            else {
+                this.iceCandidateBuffer.push(candidate);
+            }
+        });
     }
-    sendInputData() {
-        return;
+    /**
+     * Handles an SDP offer received from the server.
+     * Creates a new peer connection, applies the remote offer,
+     * then responds with an SDP answer.
+     *
+     * The DataChannel is NOT created here — the server creates it
+     * and we receive it via the `datachannel` event on the peer connection.
+     */
+    async handleServerOffer(offer) {
+        Logger.info('Received offer from server, creating answer');
+        try {
+            this.remoteDescriptionSet = false;
+            this.iceCandidateBuffer.length = 0;
+            if (!this.pcClient) {
+                this.setupPeerConnection(this.cfg);
+            }
+            // Offer already defines media transceivers — don't add extras
+            await this.pcClient.setRemoteDescription(offer);
+            this.remoteDescriptionSet = true;
+            this.flushIceCandidateBuffer();
+            await this.createAnswer(this.pcClient);
+        }
+        catch (e) {
+            Logger.error('Failed to handle server offer', e);
+            this.store.dispatch(disconnectStream({
+                reason: DisconnectReason.WebRTCError,
+                message: 'WebRTCError: Failed to handle server offer',
+            }));
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCommunicatorPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCommunicatorPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCommunicatorPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class AggregatorPlaywrightService extends AggregatorService {
-    init() {
-        return;
+    /**
+     * Handles an SDP answer received from the server in response to our offer.
+     * Applies the remote description and flushes any buffered ICE candidates.
+     */
+    async handleServerAnswer(answer) {
+        Logger.info('Received answer from server');
+        try {
+            await this.pcClient?.setRemoteDescription(answer);
+            this.remoteDescriptionSet = true;
+            this.flushIceCandidateBuffer();
+        }
+        catch (e) {
+            Logger.error('Failed to set remote description from answer', e);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AggregatorPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AggregatorPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AggregatorPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class FreezeFramePlaywrightService extends FreezeFrameService {
-    init() {
-        return;
+    /** Drains buffered ICE candidates after the remote description has been set */
+    flushIceCandidateBuffer() {
+        for (const candidate of this.iceCandidateBuffer) {
+            this.handleCandidateFromServer(candidate);
+        }
+        this.iceCandidateBuffer.length = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFramePlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFramePlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFramePlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class CommandTelemetryPlaywrightService extends CommandTelemetryService {
-    init() {
-        return;
+    /**
+     * Creates a client-initiated WebRTC offer and sends it to the server.
+     * When the client offers, it also creates the DataChannel.
+     * Used for peer reconnection through the existing signaling connection.
+     */
+    async createWebRtcOffer() {
+        Logger.info('Creating client-initiated offer');
+        try {
+            this.remoteDescriptionSet = false;
+            this.iceCandidateBuffer.length = 0;
+            if (!this.pcClient) {
+                this.setupPeerConnection(this.cfg);
+            }
+            // Client offers: transceivers first, then DC, then offer
+            await this.setupTransceiversAsync(this.pcClient);
+            this.dcClient = this.createDataChannel(this.pcClient, 'UnrealDcConnection', { ordered: true });
+            await this.createOffer(this.pcClient);
+        }
+        catch (e) {
+            Logger.error('Failed to create WebRTC offer', e);
+            this.store.dispatch(disconnectStream({
+                reason: DisconnectReason.WebRTCError,
+                message: 'WebRTCError: Offer Error',
+            }));
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandTelemetryPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandTelemetryPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandTelemetryPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class StreamStatusTelemetryPlaywrightService extends StreamStatusTelemetryService {
-    init() {
-        return;
+    /**
+     * Initializes a new RTCPeerConnection with event handlers.
+     * Transceivers are NOT added here — the caller is responsible for adding
+     * them at the correct point depending on the negotiation flow.
+     */
+    setupPeerConnection(config) {
+        this.closePC();
+        Logger.log('Creating new RTCPeerConnection with config');
+        this.pcClient = new RTCPeerConnection(config);
+        this.commandTelemetryService.trackStartCommand('EXT-Browser ICE gathering');
+        this.commandTelemetryService.trackStartCommand('EXT-Browser ICE connection');
+        this.commandTelemetryService.trackStartCommand('EXT-Signaling state change');
+        this.handlePeerConnectionEvents(this.pcClient);
+        this.disconnect$.pipe(take(1)).subscribe(() => {
+            this.closePC();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StreamStatusTelemetryPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StreamStatusTelemetryPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StreamStatusTelemetryPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class ConsoleExtensionsPlaywrightService extends ConsoleExtensionsService {
-    init() {
-        return;
+    createDataChannel(pc, label, options) {
+        const datachannel = pc.createDataChannel(label, options);
+        return this.setupDataChannelCallbacks(datachannel);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConsoleExtensionsPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConsoleExtensionsPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConsoleExtensionsPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-class FileReceiverPlaywrightService extends FileReceiverService {
-    init() {
-        return;
-    }
-}
-
-class InputPlaywrightService extends InputService {
-    init() {
-        return;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPlaywrightService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPlaywrightService, decorators: [{
-            type: Injectable
-        }] });
-
-const ReceivedMimeTypes = {
-    ApplicationJson: 'application/json',
-};
-
-class FileHandlerService {
-    constructor() {
-        this.fileService = inject(FileReceiverService);
-        this.fileHandlers = {
-            [ReceivedMimeTypes.ApplicationJson]: this.handleJsonFile.bind(this),
-        };
-    }
-    handleJsonFile(data, correlationId) {
-        const { blob } = data;
-        return from(blob.text()).pipe(map$1((text) => JSON.parse(text)), filter(({ commandCallback }) => {
-            return commandCallback.correlationId === correlationId;
-        }));
-    }
-    observeFileResponse(mimetype, data, sender, timeOut = 60000) {
-        const correlationId = generateUuid();
-        const out = { ...data, correlationId };
-        const observable = this.fileService.fileComplete$.pipe(switchMap((data) => {
-            if (data.valid && this.fileHandlers[mimetype]) {
-                return this.fileHandlers[mimetype](data, correlationId).pipe(filter(Truthy));
-            }
-            return of(null);
-        }), timeout(timeOut), catchError((e) => {
-            Logger.error(e);
-            return of(null);
-        }), take(1));
-        setTimeout(() => sender(out), 0);
-        return observable;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileHandlerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileHandlerService, decorators: [{
-            type: Injectable
-        }] });
-
-class AnalyticsService {
-    #store = inject(Store);
-    #destroy$ = new Subject();
-    sendEventToMixPanel(name, params = {}) {
-        Logger.log('Analytics Event:', name, params);
-        this.#store.dispatch(saveAnalyticsEvent({ event: { name, params } }));
-    }
-    constructor() {
-        const abortSignal$ = this.#store
-            .select(unrealFeature.selectViewportReady)
-            .pipe(filter$1(Falsy), map(() => void 0));
-        this.#store
-            .select(unrealFeature.selectViewportReady)
-            .pipe(distinctUntilChanged(), filter$1(Truthy), tap(() => this.monitorMouse(abortSignal$)))
-            .subscribe();
-    }
-    monitorMouse(abortSignal$) {
-        this.#destroy$.next();
-        const stop$ = merge(this.#destroy$.asObservable(), abortSignal$);
-        const element = document.getElementById('streamingVideo');
-        if (!element) {
-            return;
-        }
-        // Monitor mousewheel events
-        const mousewheel$ = fromEvent(element, 'wheel').pipe(takeUntil$1(stop$), throttleTime(1000));
-        // Monitor mouse button states
-        const mousedown$ = fromEvent(element, 'mousedown').pipe(takeUntil$1(stop$));
-        const touchStart$ = fromEvent(element, 'touchstart').pipe(takeUntil$1(stop$));
-        const touchMove$ = fromEvent(element, 'touchmove').pipe(takeUntil$1(stop$), throttleTime(200));
-        // Track mouse movement while the left or right button is pressed
-        mousedown$
-            .pipe(filter$1((event) => event.button === 0 || event.button === 2), tap((downEvent) => {
-            this.sendEventToMixPanel('mouse_interaction', {
-                viewX: downEvent.clientX / element.clientWidth,
-                viewY: downEvent.clientY / element.clientHeight,
-                action: downEvent.button === 0 ? 'spinning' : 'panning',
-            });
-        }))
-            .subscribe();
-        // Track mouse movement while the left or right button is pressed
-        touchStart$
-            .pipe(tap((downEvent) => {
-            const totalTouches = downEvent.touches.length;
-            const touch = downEvent.touches[0];
-            this.sendEventToMixPanel('touch_interaction', {
-                viewX: touch.clientX / element.clientWidth,
-                viewY: touch.clientY / element.clientHeight,
-                action: totalTouches === 1 ? 'spinning' : 'panning',
-            });
-        }))
-            .subscribe();
-        let initialTouchDistance = 0;
-        // Subscribe to mousewheel events
-        touchMove$.subscribe((event) => {
-            const totalTouches = event.touches.length;
-            if (totalTouches < 2) {
-                return;
-            }
-            // Calculate the current distance between two touches
-            const touch1 = event.touches[0];
-            const touch2 = event.touches[1];
-            const currentDistance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) +
-                Math.pow(touch2.clientY - touch1.clientY, 2));
-            // Determine if zooming in or out based on distance change
-            const deltaDistance = currentDistance - initialTouchDistance;
-            const isZoomingIn = deltaDistance > 0;
-            // Only send event if there's a significant change (avoid noise)
-            if (Math.abs(deltaDistance) > 10) {
-                this.sendEventToMixPanel('touch_zoom_interaction', {
-                    delta: isZoomingIn ? 1 : -1,
-                    action: isZoomingIn ? 'zoomin' : 'zoomout',
-                });
-                // Update initial distance for next comparison
-                initialTouchDistance = currentDistance;
-            }
-        });
-        mousewheel$.subscribe((event) => {
-            this.sendEventToMixPanel('mouse_zoom_interaction', {
-                delta: -(event.deltaY / Math.abs(event.deltaY)),
-                action: event.deltaY < 0 ? 'zoomin' : 'zoomout',
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AnalyticsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AnalyticsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-/**
- * Adaptive FPS controller that monitors the incoming WebRTC video stream
- * quality and dynamically adjusts Unreal Engine's `t.MaxFPS` console variable.
- *
- * ## How it works
- *
- * The service subscribes to `VideoService.videoStats$` (emitted every 250 ms)
- * and collects samples of FPS, bitrate, and QP (Quantisation Parameter).
- * Every {@link SAMPLE_WINDOW} ticks (~2 s) it averages the collected samples
- * and feeds them into a set of **fuzzy-logic membership functions** that
- * classify each metric into overlapping quality bands.
- *
- * ### Input signals
- *
- * **1. FPS ratio** = `actualFPS / currentTargetFPS` (0..1+)
- *
- * | Band   | Range               | Meaning                                       |
- * |--------|---------------------|-----------------------------------------------|
- * | low    | ratio < 0.7 → 1.0, linear ramp 0.7..0.9 → 0   | Stream cannot keep up with the target         |
- * | ok     | triangle 0.8..1.0, peak at 0.95                 | Stream roughly matches the target             |
- * | high   | ratio 0.9..1.0 → ramp, >1.0 → 1.0              | Stream meets or exceeds the target            |
- *
- * **2. Bitrate load** = `currentBitrate / MAX_BITRATE` (0..1+)
- *
- * `MAX_BITRATE` = 20 Mbit/s — the reference ceiling for the encoder.
- *
- * | Band   | Range                                           | Meaning                                       |
- * |--------|-------------------------------------------------|-----------------------------------------------|
- * | high   | load 0.5..0.8 → ramp, >0.8 → 1.0               | Encoder is using most of the available bandwidth |
- * | not high | load < 0.5 → 0.0                              | Bandwidth headroom is available                |
- *
- * **3. Quality** — mapped from QP via `mapQpToQuality()` (see {@link Quality}):
- *
- * | Quality  | QP range  | Meaning                                         |
- * |----------|-----------|-------------------------------------------------|
- * | `lime`   | QP <= 26  | Good — encoder has enough headroom              |
- * | `orange` | QP 27..35 | Fair — encoder is under moderate pressure        |
- * | `red`    | QP > 35   | Poor — heavy compression, visible artefacts      |
- *
- * ### Decision rules (evaluated in priority order, first match wins)
- *
- * | # | Condition                                                  | Decision     |
- * |---|------------------------------------------------------------|--------------|
- * | 1 | FPS ratio is **low** (membership > 0.5)                    | **decrease** |
- * | 2 | FPS ratio is **ok** AND quality is `red`                   | **decrease** |
- * | 3 | FPS ratio is **ok** AND bitrate **high** AND quality is `orange` | **hold** |
- * | 4 | FPS ratio is **high** AND quality is `lime` AND bitrate **not high** | **increase** |
- * | — | Everything else                                            | **hold**     |
- *
- * ## Cooldown-based throttling
- *
- * The service continuously evaluates fuzzy rules every sample window.
- * After each FPS step change it enforces a cooldown before the next
- * change can be applied. The cooldown duration depends on the
- * (previous decision → next decision) pair:
- *
- * | Previous  | Next      | Cooldown                                            |
- * |-----------|-----------|-----------------------------------------------------|
- * | decrease  | decrease  | {@link COOLDOWN_DECREASE_AFTER_DECREASE_MS} (2 s)   |
- * | decrease  | increase  | {@link COOLDOWN_INCREASE_AFTER_DECREASE_MS} (10 s)  |
- * | increase  | decrease  | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s)            |
- * | increase  | increase  | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s)            |
- *
- * This means the system reacts quickly after an increase (2 s in any
- * direction) but is cautious about stepping back up after a decrease
- * (10 s), while still allowing consecutive decreases at 2 s intervals.
- *
- * ## FPS dispatch
- *
- * FPS changes are dispatched via the NgRx `setMaxFps` action, which triggers
- * the existing `CommandsEffects.setMaxFps$` effect that sends the
- * `t.MaxFPS <value>` console command to Unreal Engine.
- */
-class FpsMonitorService {
-    constructor() {
-        this.videoService = inject(VideoService);
-        this.store = inject(Store);
-        /** Discrete FPS targets the controller can switch between (ascending order). */
-        this.FPS_STEPS = [30, 40, 50, 60];
-        /** Reference ceiling for bitrate (bits/sec) used to normalise bitrate load to 0..1. */
-        this.MAX_BITRATE = 20_000_000;
-        /**
-         * Cooldown (ms) for any decision (increase or decrease) following an increase.
-         * After an increase the system should react faster.
-         */
-        this.COOLDOWN_AFTER_INCREASE_MS = 2_000;
-        /**
-         * Cooldown (ms) for a decrease following a previous decrease.
-         */
-        this.COOLDOWN_DECREASE_AFTER_DECREASE_MS = 2_000;
-        /**
-         * Cooldown (ms) for an increase following a previous decrease.
-         * The stream needs more time to stabilise before stepping back up.
-         */
-        this.COOLDOWN_INCREASE_AFTER_DECREASE_MS = 10_000;
-        /**
-         * Number of videoStats$ ticks to accumulate before evaluating.
-         * At 250 ms per tick this gives a ~2 s sliding evaluation window,
-         * long enough to smooth out single-frame jitter.
-         */
-        this.SAMPLE_WINDOW = 8;
-        /** Current FPS target; starts at max (60 FPS) and adapts downward/upward. */
-        this.currentFpsTarget = this.FPS_STEPS[this.FPS_STEPS.length - 1];
-        this.samples = [];
-        this.lastDecisionTime = Date.now();
-        this.lastUpgrade = 'hold';
-        this.init();
-    }
-    init() {
-        this.videoService.videoStats$
-            .pipe(withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady))
-            .subscribe(([stats]) => this.processTick(stats));
-    }
-    /**
-     * Called on every videoStats$ emission (~250 ms).
-     * Accumulates samples and evaluates once per SAMPLE_WINDOW.
-     */
-    processTick(stats) {
-        const { framesPerSecond, bitrate, VideoEncoderQP } = stats.aggregatedStats;
-        this.samples.push({
-            fps: framesPerSecond ?? 0,
-            bitrate: bitrate ?? 0,
-            qp: VideoEncoderQP ?? 0,
-        });
-        // Wait until we have enough samples for a reliable average.
-        if (this.samples.length < this.SAMPLE_WINDOW) {
-            return;
-        }
-        const avg = this.averageSamples();
-        this.samples = [];
-        this.handleMonitoring(avg, this.currentFpsTarget);
-    }
-    handleMonitoring(avg, currentTarget) {
-        const decision = this.evaluateDecision(avg, currentTarget);
-        this.upgradeFps(decision, avg.qp);
-    }
-    /**
-     * Combines fuzzy membership values into a single discrete decision.
-     * Rules are evaluated in priority order — first match wins.
-     *
-     * Inputs:
-     * - `fpsRatio`    = avgFPS / currentTargetFPS  (e.g. 45/60 = 0.75)
-     * - `bitrateLoad` = avgBitrate / 20 Mbit/s     (e.g. 12M/20M = 0.6)
-     * - `quality`     = mapQpToQuality(avgQP)       → 'lime' | 'orange' | 'red'
-     */
-    evaluateDecision(avg, currentTarget) {
-        const fpsRatio = currentTarget > 0 ? avg.fps / currentTarget : 1;
-        const bitrateLoad = avg.bitrate / this.MAX_BITRATE;
-        const fpsLow = this.membershipFpsLow(fpsRatio);
-        const fpsOk = this.membershipFpsOk(fpsRatio);
-        const fpsHigh = this.membershipFpsHigh(fpsRatio);
-        const bitrateHigh = this.membershipBitrateHigh(bitrateLoad);
-        // Quality is derived from QP: lime (QP <= 26), orange (QP 27..35), red (QP > 35).
-        const quality = qpToQuality(avg.qp);
-        // Rule 1: FPS clearly below target (ratio roughly < 0.8) → step down immediately.
-        if (fpsLow > 0.5) {
-            return 'decrease';
-        }
-        // Rule 2: FPS looks acceptable numerically, but encoder quality is 'red'
-        // (QP > 35 — heavy compression artefacts). Reducing target FPS frees
-        // encoder headroom and improves visual quality.
-        if (fpsOk > 0.4 && quality === 'red') {
-            return 'decrease';
-        }
-        // Rule 3: FPS is ok, but bitrate is above ~50-80% of 20 Mbit/s ceiling
-        // and quality is 'orange' (QP 27..35). Near capacity — don't push higher.
-        if (fpsOk > 0.4 && bitrateHigh > 0.5 && quality === 'orange') {
-            return 'hold';
-        }
-        // Rule 4: FPS meets/exceeds target (ratio >= ~0.95), quality is 'lime'
-        // (QP <= 26), and bitrate is below 50% of ceiling — safe to step up.
-        if (fpsHigh > 0.5 &&
-            quality === 'lime' &&
-            bitrateHigh < 0.5 &&
-            this.currentFpsTarget < this.FPS_STEPS[this.FPS_STEPS.length - 1]) {
-            return 'increase';
-        }
-        return 'hold';
-    }
-    // ---------------------------------------------------------------------------
-    // Fuzzy membership functions
-    //
-    // Each function maps a normalised input (0..1+) to a membership degree (0..1).
-    // Overlapping trapezoid/triangle shapes let multiple categories be partially
-    // active at the same time, which makes the rules less brittle than hard thresholds.
-    // ---------------------------------------------------------------------------
-    /**
-     * FPS ratio membership "low".
-     * Input: ratio = actualFPS / targetFPS (e.g. 42/60 = 0.70).
-     *
-     *   ratio < 0.7  → 1.0  (clearly failing, e.g. 40/60)
-     *   ratio 0.7..0.9 → linear ramp down (e.g. 0.8 → 0.5)
-     *   ratio > 0.9  → 0.0  (keeping up)
-     */
-    membershipFpsLow(ratio) {
-        if (ratio < 0.7)
-            return 1.0;
-        if (ratio > 0.9)
-            return 0.0;
-        return (0.9 - ratio) / 0.2;
+    handleCandidateFromServer(iceCandidate) {
+        try {
+            const candidate = new RTCIceCandidate(iceCandidate);
+            Logger.info('[Unreal ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|');
+            // If forcing TURN, reject any candidates not relay
+            if (this.forceTURN) {
+                if (candidate.candidate.indexOf('relay') < 0) {
+                    Logger.warn('Dropping candidate because it was not TURN relay.', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|');
+                    return;
+                }
+            }
+            this.pcClient?.addIceCandidate(candidate).catch((e) => {
+                Logger.warn('Failed to add ICE candidate', e);
+            });
+        }
+        catch (e) {
+            Logger.error('Error handleCandidateFromServer', e);
+        }
     }
     /**
-     * FPS ratio membership "ok" — triangle shape.
-     * Input: ratio = actualFPS / targetFPS.
-     *
-     *   ratio < 0.8  → 0.0
-     *   ratio 0.8..0.95 → ramp up, peak at 0.95 (e.g. 57/60)
-     *   ratio 0.95..1.0 → ramp down
-     *   ratio > 1.0  → 0.0
-     */
-    membershipFpsOk(ratio) {
-        if (ratio < 0.8)
-            return 0.0;
-        if (ratio < 0.95)
-            return (ratio - 0.8) / 0.15;
-        if (ratio <= 1.0)
-            return (1.0 - ratio) / 0.05;
-        return 0.0;
-    }
-    /**
-     * FPS ratio membership "high".
-     * Input: ratio = actualFPS / targetFPS.
-     *
-     *   ratio < 0.9  → 0.0
-     *   ratio 0.9..1.0 → linear ramp up (e.g. 0.95 → 0.5)
-     *   ratio >= 1.0 → 1.0  (meeting or exceeding target, e.g. 60/60)
-     */
-    membershipFpsHigh(ratio) {
-        if (ratio < 0.9)
-            return 0.0;
-        if (ratio > 1.0)
-            return 1.0;
-        return (ratio - 0.9) / 0.1;
-    }
-    /**
-     * Bitrate load membership "high".
-     * Input: load = currentBitrate / MAX_BITRATE (20 Mbit/s).
-     *
-     *   load < 0.5  → 0.0  (below 10 Mbit/s — plenty of headroom)
-     *   load 0.5..0.8 → linear ramp (e.g. 13M/20M = 0.65 → 0.5)
-     *   load > 0.8  → 1.0  (above 16 Mbit/s — near capacity)
-     */
-    membershipBitrateHigh(load) {
-        if (load < 0.5)
-            return 0.0;
-        if (load > 0.8)
-            return 1.0;
-        return (load - 0.5) / 0.3;
-    }
-    // ---------------------------------------------------------------------------
-    // Step actions
-    // ---------------------------------------------------------------------------
-    upgradeFps(decision, qp) {
-        if (decision === 'hold')
-            return;
-        const now = Date.now();
-        // Throttle: cooldown depends on (previous decision → current decision) pair.
-        const isStepUp = decision === 'increase';
-        const cooldown = this.lastUpgrade === 'decrease'
-            ? isStepUp
-                ? this.COOLDOWN_INCREASE_AFTER_DECREASE_MS
-                : this.COOLDOWN_DECREASE_AFTER_DECREASE_MS
-            : this.COOLDOWN_AFTER_INCREASE_MS;
-        if (now - this.lastDecisionTime < cooldown) {
-            return;
-        }
-        this.lastUpgrade = decision;
-        const quality = qpToQuality(qp);
-        const newTarget = this.getNextFpsTarget(this.currentFpsTarget, decision);
-        Logger.info(`[FpsMonitor] Decision: ${decision} → FPS: ${newTarget}, Quality: ${quality}`);
-        if (newTarget !== this.currentFpsTarget) {
-            this.currentFpsTarget = newTarget;
-            this.store.dispatch(setMaxFps({ maxFps: newTarget }));
-        }
-        this.lastDecisionTime = now;
-        this.samples = [];
-    }
-    /**
-     * Get the next FPS target based on current target and decision.
-     * Clamps to valid FPS_STEPS range.
-     */
-    getNextFpsTarget(currentTarget, decision) {
-        const currentIndex = this.FPS_STEPS.indexOf(currentTarget);
-        // If current target is not in FPS_STEPS, find closest one
-        const validIndex = currentIndex === -1
-            ? this.findClosestFpsIndex(currentTarget)
-            : currentIndex;
-        const delta = decision === 'increase' ? 1 : -1;
-        const newIndex = clampf(0, this.FPS_STEPS.length - 1, validIndex + delta);
-        return this.FPS_STEPS[newIndex];
-    }
-    /**
-     * Find the closest FPS step index for a given target value.
-     */
-    findClosestFpsIndex(target) {
-        let closestIndex = 0;
-        let closestDiff = Math.abs(this.FPS_STEPS[0] - target);
-        for (let i = 1; i < this.FPS_STEPS.length; i++) {
-            const diff = Math.abs(this.FPS_STEPS[i] - target);
-            if (diff < closestDiff) {
-                closestDiff = diff;
-                closestIndex = i;
-            }
-        }
-        return closestIndex;
-    }
-    /** Average all collected samples for the current evaluation window. */
-    averageSamples() {
-        const len = this.samples.length;
-        if (len === 0)
-            return { fps: 0, bitrate: 0, qp: 0 };
-        let fps = 0;
-        let bitrate = 0;
-        let qp = 0;
-        for (const s of this.samples) {
-            fps += s.fps;
-            bitrate += s.bitrate;
-            qp += s.qp;
-        }
-        return { fps: fps / len, bitrate: bitrate / len, qp: qp / len };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class UnrealCallbackService {
-    constructor() {
-        this.actions$ = inject(Actions);
-    }
-    /**
-     * Listens for unreal command callbacks matching a specific command or event type.
+     * Reorders the `m=video` line in the SDP so that payload types matching
+     * the given H.264 `profile-level-id` appear first, making the browser
+     * prefer that profile during codec negotiation.
      *
-     * Supports both MetaBoxCommand keys (e.g. `MetaBoxCommand.FLoadProductCommand`)
-     * and custom Unreal callback events (e.g. `'cameraChanged'`, `'onSceneState'`).
+     * A `profile-level-id` is a 3-byte hex string (`XXYYZZ`) defined in
+     * RFC 6184 that encodes three H.264 parameters:
+     * - **Profile IDC** (`XX`) — the H.264 profile.
+     * - **Profile IOP** (`YY`) — constraint flags that further narrow the profile.
+     * - **Level IDC** (`ZZ`) — the level, which caps resolution/framerate/bitrate.
      *
-     * @param command - The command or event key to filter callbacks by
-     * @returns Observable that emits matching callback payloads
+     * ### H.264 profiles relevant to Unreal Engine Pixel Streaming
      *
-     * @example
-     * ```ts
-     * // Listen for a MetaBox command callback
-     * this.unrealCallbackService
-     *   .fromUnrealCallback(MetaBoxCommand.FLoadProductCommand)
-     *   .subscribe(data => console.log(data));
+     * | profile-level-id | Profile                    | Level | Notes                                        |
+     * |------------------|----------------------------|-------|----------------------------------------------|
+     * | `42001f`         | Baseline                   | 3.1   | No B-frames, low latency; legacy devices     |
+     * | `42e01f`         | Constrained Baseline       | 3.1   | Widest HW decode support; **recommended**    |
+     * | `4d001f`         | Main                       | 3.1   | B-frames + CABAC; better compression          |
+     * | `4d4028`         | Main                       | 4.0   | Up to 1080p60; common desktop target          |
+     * | `640028`         | High                       | 4.0   | Best quality/compression; most GPUs support   |
+     * | `64002a`         | High                       | 4.2   | Up to 1080p120 or 4K30                        |
+     * | `640033`         | High                       | 5.1   | Up to 4K60; requires modern HW                |
+     * | `640034`         | High                       | 5.2   | Up to 4K120; high-end HW only                 |
+     * | `6e001f`         | High 10                    | 3.1   | 10-bit color; limited browser support          |
+     * | `f4001f`         | High 4:4:4 Predictive      | 3.1   | Lossless capable; rare in browsers             |
      *
-     * // Listen for a custom Unreal event
-     * this.unrealCallbackService
-     *   .fromUnrealCallback('cameraChanged')
-     *   .subscribe(data => console.log(data));
-     * ```
+     * UE Pixel Streaming defaults to Constrained Baseline (`42e01f`) or High (`6400xx`)
+     * depending on engine version and `WebRTC.H264Profile` CVar.
+     *
+     * We prioritize `42e01f` because it guarantees hardware decoding on
+     * virtually all client devices (desktop, mobile, embedded), avoiding
+     * fallback to software decoding or negotiation of a higher profile
+     * that the client GPU may not accelerate.
      */
-    fromUnrealCallback(command) {
-        return this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => {
-            if ('commandCallback' in json) {
-                return json.commandCallback;
+    prioritizeH264Profile(sdp, profileLevelId) {
+        const lines = sdp.split('\r\n');
+        const targetPts = [];
+        for (const line of lines) {
+            if (line.startsWith('a=fmtp:') &&
+                line.toLowerCase().includes(`profile-level-id=${profileLevelId}`)) {
+                const pt = line.split(':')[1]?.split(' ')[0];
+                if (pt)
+                    targetPts.push(pt);
             }
-            return json;
-        }), filter((json) => json.command === command), map$1((data) => ({
-            command: data.command,
-            payload: 'payload' in data ? data.payload : null,
-        })));
+        }
+        if (targetPts.length === 0)
+            return sdp;
+        return lines
+            .map((line) => {
+            if (!line.startsWith('m=video'))
+                return line;
+            const parts = line.split(' ');
+            // parts: m=video <port> <proto> <pt1> <pt2> ...
+            const header = parts.slice(0, 3);
+            const pts = parts.slice(3);
+            const prioritized = [
+                ...targetPts.filter((pt) => pts.includes(pt)),
+                ...pts.filter((pt) => !targetPts.includes(pt)),
+            ];
+            return [...header, ...prioritized].join(' ');
+        })
+            .join('\r\n');
+    }
+    mungeSDP(sdp) {
+        let mungedSDP = this.prioritizeH264Profile(sdp, '42e01f');
+        mungedSDP = mungedSDP.replace(/(a=fmtp:\d+ .*level-asymmetry-allowed=.*)\r\n/gm, '$1;x-google-start-bitrate=10000;x-google-max-bitrate=100000\r\n');
+        // Set max bitrate to highest bitrate Opus supports
+        let audioSDP = 'maxaveragebitrate=510000;';
+        if (this.useMic) {
+            // Set the max capture rate to 48khz (so we can send high-quality audio from mic)
+            audioSDP += 'sprop-maxcapturerate=48000;';
+        }
+        // Force mono or stereo based on whether ?forceMono was passed or not
+        audioSDP += this.forceMonoAudio ? 'stereo=0;' : 'stereo=1;';
+        // Enable in-band forward error correction for opus audio
+        audioSDP += 'useinbandfec=1';
+        // We use the line 'useinbandfec=1' (which Opus uses) to set our Opus specific audio parameters.
+        mungedSDP = mungedSDP?.replace('useinbandfec=1', audioSDP);
+        return mungedSDP;
     }
     /**
-     * Sends a command and observes the matching response by correlationId.
-     * Replaces the old `observeCommandResponse` standalone function.
-     *
-     * @param data - The command data to send
-     * @param sender - Function to send the command to Unreal
-     * @param timeOut - Timeout in ms (default 60000)
-     * @param dispatchOnTimeout - Whether to emit on timeout (default true)
-     *
-     * @example
-     * ```ts
-     * this.unrealCallbackService
-     *   .observeCommandResponse<FLoopBackCommand['command']>(
-     *     { command: MetaBoxCommand.FLoopBackCommand },
-     *     (data) => this.communicator.sendCommandToUnreal(data),
-     *   )
-     *   .subscribe();
-     * ```
+     * Closes existing PeerConnection and DataChannel, resets negotiation state.
      */
-    observeCommandResponse(data, sender, timeOut = 60000, dispatchOnTimeout = true) {
-        const correlationId = generateUuid();
-        const observable = this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.correlationId === correlationId), timeout(timeOut), catchError(() => dispatchOnTimeout
-            ? of({ command: 'timeout', correlationId: 'timeout' })
-            : of(null)), take(1), tapLog('Command Response Observer'), filter(Truthy), map$1((data) => ({
-            command: data.command,
-            payload: 'payload' in data ? data.payload : null,
-        })));
-        setTimeout(() => sender({ ...data, correlationId }), 0);
-        return observable;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCallbackService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCallbackService, decorators: [{
-            type: Injectable
-        }] });
-
-class AfkTimeoutModalComponent {
-    constructor() {
-        this.#store = inject(Store);
-        this.#afkService = inject(AFKService);
-        this.isAfkTimerVisible = this.#store.selectSignal(unrealFeature.selectIsAfkTimerVisible);
-        this.afkCountdown = this.#store.selectSignal(unrealFeature.selectAfkCountdown);
-    }
-    #store;
-    #afkService;
-    resetAfk() {
-        this.#afkService.reset();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
-        }] });
-
-class FreezeFrameComponent {
-    constructor() {
-        this.#store = inject(Store);
-        this.freezeFrameProgressMessageFromVideo = this.#store.selectSignal(selectFreezeFrameProgressMessageFromVideo);
-        this.combinedFreeze = this.#store.selectSignal(selectFreezeFrameCombinedDataUrl);
-    }
-    #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFrameComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"] }]
-        }] });
-
-class SafePipe {
-    constructor() {
-        this.sanitizer = inject(DomSanitizer);
-    }
-    transform(value, type) {
-        if (!value) {
-            return value;
+    closePC() {
+        if (this.pcClient) {
+            Logger.warn('Closing existing PeerConnection');
         }
-        switch (type) {
-            case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
-            case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
-            case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
-            case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
-            case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
-            default:
-                throw new Error(`Invalid safe type specified: ${type}`);
+        this.pcClient?.close();
+        this.pcClient = null;
+        if (this.dcClient) {
+            Logger.warn('Closing existing DataChannel');
         }
+        this.dcClient?.close();
+        this.dcClient = null;
+        this.remoteDescriptionSet = false;
+        this.iceCandidateBuffer.length = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SafePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'safe',
-                }]
-        }] });
-
-class LowBandwidthModalComponent {
-    constructor() {
-        this.dialogRef = inject(DialogRef);
-    }
-    close(value) {
-        this.dialogRef.close(value || false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-low-bandwidth-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SafePipe, SourceButtonComponent], template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"] }]
-        }] });
-
-class ImageLoadingSrcComponent {
-    constructor() {
-        this.#store = inject(Store);
-        this.isLoaderScreenVisible = this.#store.selectSignal(selectIsLoaderScreenVisible);
-        this.imageLoadingSrc = this.#store.selectSignal(unrealFeature.selectImageLoadingSrc);
-    }
-    #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"] }]
-        }] });
-
-class StatGraphComponent {
-    constructor() {
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.stat = input(...(ngDevMode ? [undefined, { debugName: "stat" }] : []));
-        this.color = input('#417bc9', ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.tickStep = input(3, ...(ngDevMode ? [{ debugName: "tickStep" }] : []));
-        this.el = inject(ElementRef);
-        this.graph = viewChild('graph', ...(ngDevMode ? [{ debugName: "graph" }] : []));
-        this.data = [];
-        this.max = signal(0, ...(ngDevMode ? [{ debugName: "max" }] : []));
-        this.min = signal(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-        this.current = signal(0, ...(ngDevMode ? [{ debugName: "current" }] : []));
-        effect(() => this.pushData(this.stat()?.value ?? null));
-        afterNextRender({
-            read: () => {
-                const graph = this.graph();
-                if (graph) {
-                    this.canvas = graph.nativeElement;
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    this.ctx = this.canvas.getContext('2d');
-                }
-            },
-        });
+    canSend() {
+        return this.dcClient && this.dcClient.readyState === 'open';
     }
-    resize() {
-        this.draw();
+    send(data) {
+        if (this.canSend()) {
+            this.dcClient?.send(data);
+        }
+        else {
+            Logger.colored('black', 'yellow', `DataChannel connection not prepared or in state: ${this.dcClient?.readyState}`);
+            // Trigger peer reconnection if DC is not open and we're not already reconnecting
+            this.tryReconnectOnSendFailure();
+        }
     }
-    draw() {
-        if (!this.canvas) {
+    /**
+     * Attempts to reconnect the peer when send fails due to DataChannel not being open.
+     * This handles cases where the DC connection is broken but no error events are fired.
+     */
+    tryReconnectOnSendFailure() {
+        // Skip if already reconnecting or signaling is not connected
+        if (this.isReconnecting()) {
+            Logger.info('[Reconnect] Already reconnecting, skipping duplicate attempt');
             return;
         }
-        const all = this.data.filter((r) => r !== null && !isNaN(r));
-        this.max.set(Math.max(...all));
-        this.min.set(Math.min(...all));
-        const scaleY = this.canvas.height / (this.max() || 1);
-        this.current.set(all[all.length - 1] || 0);
-        this.ctx.save();
-        const bounds = this.el.nativeElement.getBoundingClientRect();
-        this.canvas.width = bounds.width;
-        this.canvas.height = bounds.height - 30; // -p height
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        [...this.data].reverse().forEach((val, index) => {
-            const h = (val || 0) * scaleY;
-            this.ctx.fillStyle = this.getColor(this.color(), h);
-            this.ctx.fillRect(index * this.tickStep(), this.canvas.height - h, this.tickStep(), h);
-        });
-        this.ctx.restore();
+        if (!this.signallingSrv.isConnected()) {
+            Logger.warn('[Reconnect] Cannot reconnect: Signaling not connected');
+            return;
+        }
+        // Check if DC exists but is in a non-open state (closing, closed, or connecting stuck)
+        const dcState = this.dcClient?.readyState;
+        if (dcState && dcState !== 'open') {
+            Logger.warn(`[Reconnect] DataChannel in "${dcState}" state during send, initiating peer reconnection`);
+            this.store.dispatch(reconnectPeer({ attempt: 1, maxAttempts: 3, delay: 0 }));
+        }
     }
-    getColor(fillStyle, value = 0) {
-        const { r, g, b } = HEXtoRGB(fillStyle);
-        /* eslint-disable-next-line prefer-const */
-        let [h, s, v] = RGBtoHSV(r, g, b);
-        v = inverseLerp(0, this.canvas.height, value);
-        {
-            const [r, g, b] = HSVtoRGB(h, s, v);
-            return '#' + RGBtoHEX(r, g, b);
+    /**
+     * Reconnects only the WebRTC peer connection without re-establishing signaling.
+     * Closes the current PeerConnection and creates a new client-initiated offer
+     * through the existing WebSocket connection.
+     * @returns true if reconnection was initiated, false if signaling is not connected
+     */
+    reconnectPeer() {
+        if (!this.signallingSrv.isConnected()) {
+            Logger.error('[Reconnect] Cannot reconnect peer: Signaling not connected');
+            return false;
+        }
+        if (!this.cfg || Object.keys(this.cfg).length === 0) {
+            Logger.error('[Reconnect] Cannot reconnect peer: No config available');
+            return false;
         }
+        Logger.info('[Reconnect] Initiating peer reconnection');
+        // Close only the PeerConnection, keep WebSocket alive
+        this.closePC();
+        // Create a new WebRTC offer using the stored config
+        void this.createWebRtcOffer();
+        return true;
     }
-    pushData(stat) {
-        this.data.push(stat);
-        if (!this.canvas) {
-            return;
+    setConfig(parOptions = {}) {
+        const urlParams = new URLSearchParams(window.location.search);
+        //**********************
+        //Config setup
+        //**********************
+        this.cfg = { ...parOptions.peerConnectionOptions };
+        this.forceTURN = urlParams.has('ForceTURN');
+        if (this.forceTURN) {
+            Logger.info('Forcing TURN usage by setting ICE Transport Policy in peer connection config.');
+            this.cfg.iceTransportPolicy = 'relay';
         }
-        if (this.data.length > this.canvas.width / this.tickStep()) {
-            this.data.shift();
+        this.cfg.bundlePolicy = urlParams.has('ForceMaxBundle')
+            ? 'max-bundle'
+            : 'balanced';
+        this.cfg.iceCandidatePoolSize = 1;
+        // When ?useMic check for SSL or localhost
+        const isLocalhostConnection = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+        const isHttpsConnection = location.protocol === 'https:';
+        if (this.useMic && !isLocalhostConnection && !isHttpsConnection) {
+            this.useMic = false;
+            Logger.error('Microphone access in the browser will not work if you are not on HTTPS or localhost. Disabling mic access.');
+            Logger.error("For testing you can enable HTTP microphone access Chrome by visiting chrome://flags/ and enabling 'unsafely-treat-insecure-origin-as-secure'");
         }
-        this.draw();
+        this.setupPeerConnection(this.cfg);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StatGraphComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], resize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-class UnrealStatusComponent {
-    constructor() {
-        this.unrealInitialConfig = inject(UNREAL_CONFIG);
-        this.destroyRef = inject(DestroyRef);
-        this.store = inject(Store);
-        this.resetPercentageSignal$ = this.store
-            .select(selectShowLoader)
-            .pipe(filter(Falsy));
-        this.showLoader = this.store.selectSignal(selectShowLoader);
-        /**
-         * An observable that emits smoothed percentage values from 0 to 100.
-         */
-        this.messagePercents = toSignal(this.store.select(selectTotalProgress).pipe(keepMaxUntilReset(this.resetPercentageSignal$), floatToSmoothPercents(), distinctUntilChanged(), map$1((progress) => progress || 0)));
-        this.awsInstance = this.store.selectSignal(unrealFeature.selectAwsInstance);
+    handlePeerConnectionEvents(pcClient) {
+        fromEvent(pcClient, 'signalingstatechange')
+            .pipe(map$1(() => this.pcClient?.signalingState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[Signaling state change] |', state, '|');
+            this.commandTelemetryService.trackStopCommand('EXT-Signaling state change', true, { state, multi: true });
+        });
+        fromEvent(pcClient, 'iceconnectionstatechange')
+            .pipe(map$1(() => this.pcClient?.iceConnectionState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[Browser ICE connection] |', state, '|');
+            this.commandTelemetryService.trackStopCommand('EXT-Browser ICE connection', true, { state, multi: true });
+        });
+        fromEvent(pcClient, 'icegatheringstatechange')
+            .pipe(map$1(() => this.pcClient?.iceGatheringState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[Browser ICE gathering] |', state, '|');
+            this.commandTelemetryService.trackStopCommand('EXT-Browser ICE gathering', true, { state, multi: true });
+        });
+        fromEvent(pcClient, 'connectionstatechange')
+            .pipe(map$1(() => this.pcClient?.connectionState), takeUntil(this.disconnect$))
+            .subscribe((state) => {
+            Logger.info('[RTCPeerConnection state] |', state, '|');
+        });
+        fromEvent(pcClient, 'icecandidate')
+            .pipe(map$1((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(this.disconnect$))
+            .subscribe((candidate) => this.signallingSrv.send({ type: 'iceCandidate', candidate }));
+        // When the server creates the DataChannel (server-offer flow),
+        // we receive it here via the 'datachannel' event
+        fromEvent(pcClient, 'datachannel')
+            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map$1((e) => e.channel), takeUntil(this.disconnect$))
+            .subscribe((datachannel) => {
+            this.dcClient = this.setupDataChannelCallbacks(datachannel);
+        });
+        const onTrack$ = fromEvent(pcClient, 'track').pipe(takeUntil(this.disconnect$), filter((e) => !!e.track), tap$1((e) => Logger.info('Got track - ' +
+            e.track.kind +
+            ' id=' +
+            e.track.id +
+            ' readyState=' +
+            e.track.readyState)), share());
+        onTrack$
+            .pipe(filter((e) => e.track.kind === 'audio'), map$1((e) => e.streams[0]))
+            .subscribe((stream) => this.videoService.attachAudioStream(stream));
+        onTrack$
+            .pipe(filter((e) => e.track.kind === 'video'), map$1((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
+            .subscribe((stream) => {
+            if (this.pcClient) {
+                this.videoService.attachVideoStream(stream, this.pcClient);
+            }
+        });
+    }
+    async setupTransceiversAsync(pc) {
+        const hasTransceivers = pc.getTransceivers().length > 0;
+        // Set up a transceiver for getting UE video
+        pc.addTransceiver('video', { direction: 'recvonly' });
+        // Set up a transceiver for sending mic audio to UE and receiving audio from UE
+        if (!this.useMic) {
+            pc.addTransceiver('audio', { direction: 'recvonly' });
+        }
+        else {
+            const audioSendOptions = this.useMic
+                ? {
+                    autoGainControl: false,
+                    channelCount: 1,
+                    echoCancellation: false,
+                    latency: 0,
+                    noiseSuppression: false,
+                    sampleRate: 48000,
+                    sampleSize: 16,
+                    volume: 1.0,
+                }
+                : false;
+            // Note using mic on android chrome requires SSL or chrome://flags/ "unsafely-treat-insecure-origin-as-secure"
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: false,
+                audio: audioSendOptions,
+            });
+            if (stream) {
+                if (hasTransceivers) {
+                    for (const transceiver of pc.getTransceivers()) {
+                        if (transceiver &&
+                            transceiver.receiver &&
+                            transceiver.receiver.track &&
+                            transceiver.receiver.track.kind === 'audio') {
+                            for (const track of stream.getTracks()) {
+                                if (track.kind && track.kind === 'audio') {
+                                    await transceiver.sender.replaceTrack(track);
+                                    transceiver.direction = 'sendrecv';
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    for (const track of stream.getTracks()) {
+                        if (track.kind && track.kind === 'audio') {
+                            pc.addTransceiver(track, { direction: 'sendrecv' });
+                        }
+                    }
+                }
+            }
+            else {
+                pc.addTransceiver('audio', { direction: 'recvonly' });
+            }
+        }
+    }
+    setupDataChannelCallbacks(datachannel) {
+        try {
+            Logger.log(`[DATACHANNEL] Setting up datachannel "${datachannel.label}" callbacks...`);
+            this.commandTelemetryService.trackStartCommand('EXT-DataChannel Connection');
+            // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
+            datachannel.binaryType = 'arraybuffer';
+            fromEvent(datachannel, 'close')
+                .pipe(
+            // Only dispatch disconnect if not already reconnecting to avoid infinite loops
+            filter(() => !this.isReconnecting()), take(1))
+                .subscribe((e) => {
+                Logger.warn(`[DATACHANNEL] Data channel disconnected: ${datachannel.label}(${datachannel.id})`, e);
+                this.store.dispatch(disconnectStream({
+                    reason: DisconnectReason.DataChannelClosed,
+                    message: 'DataChannelClosed',
+                }));
+            });
+            fromEvent(datachannel, 'error')
+                .pipe(takeUntil(this.disconnect$))
+                .subscribe((e) => {
+                const message = `[DATACHANNEL] Data channel "${datachannel.label}" error. id:${datachannel.id}`;
+                Logger.error(message, e);
+            });
+            fromEvent(datachannel, 'open')
+                .pipe(tap$1(() => {
+                Logger.info(`[DATACHANNEL] Data channel "${datachannel.label}" connected. id:${datachannel.id}`);
+            }), takeUntil(this.disconnect$))
+                .subscribe(() => {
+                this.commandTelemetryService.trackStopCommand('EXT-DataChannel Connection');
+                this.onDataChannelConnected();
+            });
+            fromEvent(datachannel, 'message')
+                .pipe(
+            /* tap((e: MessageEvent) => {
+              const view = new Uint8Array(e.data);
+              Logger.info(
+                `[DATACHANNEL] Message received on "${datachannel.label}" id=${datachannel.id}, byteCode=${view[0]}, size=${view.byteLength}`,
+              );
+            }),*/
+            map$1((e) => e.data), takeUntil(this.disconnect$))
+                .subscribe((data) => this.onDataChannelMessage$.next(data));
+            return datachannel;
+        }
+        catch (e) {
+            Logger.warn('[DATACHANNEL] Datachannel setup caused an exception: ', e);
+            return null;
+        }
     }
-    ngOnInit() {
-        /**
-         * A subject that emits null values to trigger nullification.
-         */
-        const nullify$ = new Subject();
-        /**
-         * An observable that emits null values with a delay of 2000 milliseconds.
-         */
-        const nullifyObs$ = nullify$
-            .asObservable()
-            .pipe(delay(2000));
-        /**
-         * An observable that emits the status message from the Unreal feature store.
-         */
-        const signalingStatus$ = this.store.select(unrealFeature.selectStatusMessage);
-        /**
-         * An observable that emits connection status messages based on the Cirrus connection state.
-         * Then call side effect to nullify the message.
-         */
-        const cirrusConnected$ = this.store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(skip(1), switchMap((connected) => connected
-            ? of('Creating Socket...')
-            : of('Connection closed.').pipe(tap(() => nullify$.next(null)))));
-        /**
-         * An observable that emits the viewport visibility state.
-         */
-        const viewportTrigger$ = this.store.select(unrealFeature.selectViewportReady);
-        /**
-         * An observable that will nullify any message displayed after 500 mSec, when viewport changes its state.
-         */
-        const streamToggle$ = merge(viewportTrigger$.pipe(filter(Falsy), skip(1)), viewportTrigger$.pipe(filter(Truthy))).pipe(delay(500), map$1(() => null));
-        /**
-         * A subscription that merges various status observables and emits debounced status via postMessage.
-         */
-        merge(nullifyObs$, cirrusConnected$, signalingStatus$, streamToggle$)
-            .pipe(debounceTime$1(0), tapLog('STATUS=>'), takeUntilDestroyed(this.destroyRef))
-            .subscribe((status) => this.sendMessageToIndex(status));
+    onDataChannelConnected() {
+        let statusMessage = 'Session connected, video stream starting.';
+        if (navigator.userAgent.includes('Firefox')) {
+            statusMessage +=
+                '\n If you are experiencing connection problems please try Google Chrome';
+        }
+        this.store.dispatch(dataChannelConnected({ statusMessage }));
     }
     /**
-     * Sends a message to the embedded iframe identified by the default value '3dsource_start_screen' ID.
-     * This function tries to post a message to the iframe's content window. If the content
-     * window is not accessible (e.g., due to cross-origin policies), the function fails silently.
-     *
-     * @param {string} text The message to be sent to the iframe. This could be a status update
-     * or any other relevant information that the iframe needs to process.
+     * Creates an SDP offer, applies SDP munging, sets it as local description,
+     * and sends it to the server via signaling.
+     * Transceivers already configure media directions, so deprecated
+     * offerToReceive* options are not used.
      */
-    sendMessageToIndex(text) {
-        const objectElement = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ||
-            SCREEN_LOCKER_CONTAINER_ID);
+    async createOffer(pcClient) {
         try {
-            const objectDocument = objectElement.contentWindow;
-            objectDocument?.postMessage(text, '*');
+            const offer = await pcClient.createOffer();
+            offer.sdp = this.mungeSDP(offer.sdp ?? '');
+            await pcClient.setLocalDescription(offer);
+            this.signallingSrv.send(offer);
         }
         catch {
-            // Fails silently if the iframe's content window cannot be accessed
+            Logger.error("Couldn't create offer");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /**
+     * Creates an SDP answer, applies SDP munging, sets it as local description,
+     * and sends it to the server via signaling.
+     */
+    async createAnswer(pcClient) {
+        try {
+            const answer = await pcClient.createAnswer();
+            answer.sdp = this.mungeSDP(answer.sdp ?? '');
+            await pcClient.setLocalDescription(answer);
+            this.signallingSrv.send(answer);
+        }
+        catch (e) {
+            Logger.error("Couldn't create answer", e);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceLoadingComponent], template: "@if (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AfkPlaywrightService extends AFKService {
+    init() {
+        return;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkPlaywrightService, decorators: [{
+            type: Injectable
         }] });
 
-class VideoStatsComponent {
+class SignallingPlaywrightService extends SignallingService {
     constructor() {
-        this.collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
-        this.store = inject(Store);
-        this.videoService = inject(VideoService);
-        this.isDevMode = inject(DevModeService).isDevMode;
-        this.obs$ = this.videoService.videoStats$;
-        this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
-        this.ssInfo = this.store.selectSignal(selectSignalingParameters);
-        this.fpsTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.framesPerSecond || 0,
-        }))));
-        this.fpsAvgTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.avgFrameRate,
-        }))));
-        this.bitrateTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.bitrate,
-        }))));
-        this.videoQP = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.VideoEncoderQP,
-        }))));
-        this.bitrateAverageTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.avgBitrate,
-        }))));
-        this.videoStatus = toSignal(this.obs$.pipe(map$1((event) => this.isDevMode &&
-            {
-                ...event.aggregatedStats,
-                quality: event.quality,
-            }), filter(Boolean), map$1((data) => {
-            return this.fields
-                .map((key) => {
-                return {
-                    key,
-                    value: data[key],
-                };
-            })
-                .filter((r) => !this.elementsToShow.includes(r.key));
-        })));
-        this.graphList = [];
-        this.idKey = 'com.source3d.unreal.stat';
-        this.elementsToShow = [];
-        this.trigger$ = new BehaviorSubject(undefined);
-        this.getFields();
+        super();
     }
-    ngOnInit() {
-        this.fields = [
-            'kalmanBitrate',
-            'bitrateDrop',
-            'runTime',
-            'pixelRatio',
-            'frameHeight',
-            'frameWidth',
-            ':-------------',
-            'jitter',
-            'MBytesReceived',
-            'framesDecoded',
-            'framesDropped',
-            'framesReceived',
-            'keyFramesDecoded',
-            'currentRoundTripTime',
-            'packetsLost',
-            ':-------------',
-            'quality',
-            'videoCodec',
-            'kind',
-            'type',
-            'codecs',
-            'selectedPair',
-            //'pliCount',
-            //'sliCount',
-            //'transportId',
-            //'id',
-        ];
-        this.updateGraph();
+    init() {
+        return;
     }
-    updateGraph() {
-        this.graphList = this.fields.map((key) => {
-            const stat = this.obs$.pipe(map$1((val) => {
-                const value = val.aggregatedStats[key];
-                return { value };
-            }));
-            return {
-                key,
-                color: Math.floor(Math.random() * 16777216).toString(),
-                stat,
-            };
-        });
-        this.graphList$ = of(this.graphList).pipe(combineLatestWith(this.trigger$), map$1(([graphList]) => graphList.filter((r) => this.elementsToShow.includes(r.key))));
+    connectToSignaling() {
+        this.store.dispatch(setUnrealPlaywrightConfig());
+        this.store.dispatch(dataChannelConnected({
+            statusMessage: 'Playwright set data channel connected',
+        }));
+        return EMPTY;
     }
-    toggle() {
-        this.collapsed.update((collapsed) => !collapsed);
-        this.writeFields();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SignallingPlaywrightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SignallingPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SignallingPlaywrightService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class UnrealCommunicatorPlaywrightService extends UnrealCommunicatorService {
+    init() {
+        return;
     }
-    toggleGraph($event, el, value) {
-        $event.stopPropagation();
-        if ((value && typeof value !== 'number') ||
-            (typeof value === 'number' && isNaN(value))) {
-            return;
-        }
-        if (this.elementsToShow.includes(el)) {
-            this.elementsToShow = this.elementsToShow.filter((item) => item !== el);
-        }
-        else {
-            this.elementsToShow.push(el);
-        }
-        this.writeFields();
-        this.trigger$.next();
+    sendCommandToUnreal() {
+        return;
     }
-    getFields() {
-        try {
-            const { elements, collapsed } = JSON.parse(localStorage.getItem(this.idKey)) || [];
-            this.elementsToShow = elements || [];
-            this.collapsed.set(collapsed);
-        }
-        catch {
-            this.elementsToShow = [];
-        }
+    sendInputData() {
+        return;
     }
-    writeFields() {
-        localStorage.setItem(this.idKey, JSON.stringify({
-            collapsed: this.collapsed(),
-            elements: this.elementsToShow,
-        }));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCommunicatorPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCommunicatorPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCommunicatorPlaywrightService, decorators: [{
+            type: Injectable
+        }] });
+
+class AggregatorPlaywrightService extends AggregatorService {
+    init() {
+        return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats 2</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AggregatorPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AggregatorPlaywrightService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VideoStatsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, AsyncPipe, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats 2</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AggregatorPlaywrightService, decorators: [{
+            type: Injectable
+        }] });
 
-class ResumeStreamButtonComponent {
-    constructor() {
-        this.actions$ = inject(Actions);
-        this.store = inject(Store);
-        this.videoService = inject(VideoService);
-        this.destroyRef = inject(DestroyRef);
-        this.showReconnectPopup = this.store.selectSignal(selectShowReconnectPopup);
-        this.isLoaderScreenVisible = this.store.selectSignal(selectIsLoaderScreenVisible);
-        this.streamConfig = this.store.selectSignal(selectStreamConfig);
-        this.isExistMatchUrls = this.store.selectSignal(selectIsExistMatchUrls);
-        this.isSecondStart = signal(!!(this.streamConfig()?.autoStart && location.href.match(/^https/gi)), ...(ngDevMode ? [{ debugName: "isSecondStart" }] : []));
-        this.isShowResumeButton = computed(() => this.isLoaderScreenVisible() &&
-            this.showReconnectPopup() &&
-            this.isExistMatchUrls(), ...(ngDevMode ? [{ debugName: "isShowResumeButton" }] : []));
-    }
-    ngOnInit() {
-        this.store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(skip$1(1), filter(Falsy), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.onDisconnect());
+class FreezeFramePlaywrightService extends FreezeFrameService {
+    init() {
+        return;
     }
-    ngAfterViewInit() {
-        this.actions$
-            .pipe(ofType(videoStreamInitialized), takeUntilDestroyed(this.destroyRef), filter(() => !!this.videoService.video?.paused))
-            .subscribe(() => {
-            Logger.info('Simulate Press Play');
-            this.videoService.play();
-            this.store.dispatch(resetAfk());
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFramePlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFramePlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFramePlaywrightService, decorators: [{
+            type: Injectable
+        }] });
+
+class CommandTelemetryPlaywrightService extends CommandTelemetryService {
+    init() {
+        return;
     }
-    connect() {
-        this.store.dispatch(startStream({ config: { autoStart: true } }));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandTelemetryPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandTelemetryPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandTelemetryPlaywrightService, decorators: [{
+            type: Injectable
+        }] });
+
+class StreamStatusTelemetryPlaywrightService extends StreamStatusTelemetryService {
+    init() {
+        return;
     }
-    onDisconnect() {
-        this.isSecondStart.set(true);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StreamStatusTelemetryPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StreamStatusTelemetryPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StreamStatusTelemetryPlaywrightService, decorators: [{
+            type: Injectable
+        }] });
+
+class ConsoleExtensionsPlaywrightService extends ConsoleExtensionsService {
+    init() {
+        return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConsoleExtensionsPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConsoleExtensionsPlaywrightService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConsoleExtensionsPlaywrightService, decorators: [{
+            type: Injectable
         }] });
 
-class IntroSrcComponent {
+class FileReceiverPlaywrightService extends FileReceiverService {
+    init() {
+        return;
+    }
+}
+
+/**
+ * Adaptive FPS controller that monitors the incoming WebRTC video stream
+ * quality and dynamically adjusts Unreal Engine's `t.MaxFPS` console variable.
+ *
+ * ## How it works
+ *
+ * The service subscribes to `VideoService.videoStats$` (emitted every 250 ms)
+ * and collects samples of FPS, bitrate, and QP (Quantisation Parameter).
+ * Every {@link SAMPLE_WINDOW} ticks (~2 s) it averages the collected samples
+ * and feeds them into a set of **fuzzy-logic membership functions** that
+ * classify each metric into overlapping quality bands.
+ *
+ * ### Input signals
+ *
+ * **1. FPS ratio** = `actualFPS / currentTargetFPS` (0..1+)
+ *
+ * | Band   | Range               | Meaning                                       |
+ * |--------|---------------------|-----------------------------------------------|
+ * | low    | ratio < 0.7 → 1.0, linear ramp 0.7..0.9 → 0   | Stream cannot keep up with the target         |
+ * | ok     | triangle 0.8..1.0, peak at 0.95                 | Stream roughly matches the target             |
+ * | high   | ratio 0.9..1.0 → ramp, >1.0 → 1.0              | Stream meets or exceeds the target            |
+ *
+ * **2. Bitrate load** = `currentBitrate / MAX_BITRATE` (0..1+)
+ *
+ * `MAX_BITRATE` = 20 Mbit/s — the reference ceiling for the encoder.
+ *
+ * | Band   | Range                                           | Meaning                                       |
+ * |--------|-------------------------------------------------|-----------------------------------------------|
+ * | high   | load 0.5..0.8 → ramp, >0.8 → 1.0               | Encoder is using most of the available bandwidth |
+ * | not high | load < 0.5 → 0.0                              | Bandwidth headroom is available                |
+ *
+ * **3. Quality** — mapped from QP via `mapQpToQuality()` (see {@link Quality}):
+ *
+ * | Quality  | QP range  | Meaning                                         |
+ * |----------|-----------|-------------------------------------------------|
+ * | `lime`   | QP <= 26  | Good — encoder has enough headroom              |
+ * | `orange` | QP 27..35 | Fair — encoder is under moderate pressure        |
+ * | `red`    | QP > 35   | Poor — heavy compression, visible artefacts      |
+ *
+ * ### Decision rules (evaluated in priority order, first match wins)
+ *
+ * | # | Condition                                                  | Decision     |
+ * |---|------------------------------------------------------------|--------------|
+ * | 1 | FPS ratio is **low** (membership > 0.5)                    | **decrease** |
+ * | 2 | FPS ratio is **ok** AND quality is `red`                   | **decrease** |
+ * | 3 | FPS ratio is **ok** AND bitrate **high** AND quality is `orange` | **hold** |
+ * | 4 | FPS ratio is **high** AND quality is `lime` AND bitrate **not high** | **increase** |
+ * | — | Everything else                                            | **hold**     |
+ *
+ * ## Cooldown-based throttling
+ *
+ * The service continuously evaluates fuzzy rules every sample window.
+ * After each FPS step change it enforces a cooldown before the next
+ * change can be applied. The cooldown duration depends on the
+ * (previous decision → next decision) pair:
+ *
+ * | Previous  | Next      | Cooldown                                            |
+ * |-----------|-----------|-----------------------------------------------------|
+ * | decrease  | decrease  | {@link COOLDOWN_DECREASE_AFTER_DECREASE_MS} (2 s)   |
+ * | decrease  | increase  | {@link COOLDOWN_INCREASE_AFTER_DECREASE_MS} (10 s)  |
+ * | increase  | decrease  | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s)            |
+ * | increase  | increase  | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s)            |
+ *
+ * This means the system reacts quickly after an increase (2 s in any
+ * direction) but is cautious about stepping back up after a decrease
+ * (10 s), while still allowing consecutive decreases at 2 s intervals.
+ *
+ * ## FPS dispatch
+ *
+ * FPS changes are dispatched via the NgRx `setMaxFps` action, which triggers
+ * the existing `CommandsEffects.setMaxFps$` effect that sends the
+ * `t.MaxFPS <value>` console command to Unreal Engine.
+ */
+class FpsMonitorService {
     constructor() {
-        this.videoElement = viewChild('videoPlayerCover', ...(ngDevMode ? [{ debugName: "videoElement" }] : []));
+        this.videoService = inject(VideoService);
         this.store = inject(Store);
-        this.imageIntroSrc = this.store.selectSignal(unrealFeature.selectImageIntroSrc);
-        this.videoIntroSrc = this.store.selectSignal(unrealFeature.selectVideoIntroSrc);
-        this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
-        effect(() => {
-            const viewportReady = this.viewportReady();
-            const videoIntroSrc = this.videoIntroSrc();
-            const imageIntroSrc = this.imageIntroSrc();
-            untracked(() => {
-                if (viewportReady && (videoIntroSrc || imageIntroSrc)) {
-                    this.store.dispatch(resetIntroSrc());
-                }
-            });
-        });
-        effect(() => {
-            const videoIntroSrc = this.videoIntroSrc();
-            const videoElement = this.videoElement();
-            if (!videoIntroSrc || !videoElement) {
-                return;
-            }
-            untracked(() => this.createVideo(videoIntroSrc, videoElement.nativeElement));
+        /** Discrete FPS targets the controller can switch between (ascending order). */
+        this.FPS_STEPS = [30, 40, 50, 60];
+        /** Reference ceiling for bitrate (bits/sec) used to normalise bitrate load to 0..1. */
+        this.MAX_BITRATE = 20_000_000;
+        /**
+         * Cooldown (ms) for any decision (increase or decrease) following an increase.
+         * After an increase the system should react faster.
+         */
+        this.COOLDOWN_AFTER_INCREASE_MS = 2_000;
+        /**
+         * Cooldown (ms) for a decrease following a previous decrease.
+         */
+        this.COOLDOWN_DECREASE_AFTER_DECREASE_MS = 2_000;
+        /**
+         * Cooldown (ms) for an increase following a previous decrease.
+         * The stream needs more time to stabilise before stepping back up.
+         */
+        this.COOLDOWN_INCREASE_AFTER_DECREASE_MS = 10_000;
+        /**
+         * Number of videoStats$ ticks to accumulate before evaluating.
+         * At 250 ms per tick this gives a ~2 s sliding evaluation window,
+         * long enough to smooth out single-frame jitter.
+         */
+        this.SAMPLE_WINDOW = 8;
+        /** Current FPS target; starts at max (60 FPS) and adapts downward/upward. */
+        this.currentFpsTarget = this.FPS_STEPS[this.FPS_STEPS.length - 1];
+        this.samples = [];
+        this.lastDecisionTime = Date.now();
+        this.lastUpgrade = 'hold';
+        this.init();
+    }
+    init() {
+        this.videoService.videoStats$
+            .pipe(withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady))
+            .subscribe(([stats]) => this.processTick(stats));
+    }
+    /**
+     * Called on every videoStats$ emission (~250 ms).
+     * Accumulates samples and evaluates once per SAMPLE_WINDOW.
+     */
+    processTick(stats) {
+        const { framesPerSecond, bitrate, VideoEncoderQP } = stats.aggregatedStats;
+        this.samples.push({
+            fps: framesPerSecond ?? 0,
+            bitrate: bitrate ?? 0,
+            qp: VideoEncoderQP ?? 0,
         });
+        // Wait until we have enough samples for a reliable average.
+        if (this.samples.length < this.SAMPLE_WINDOW) {
+            return;
+        }
+        const avg = this.averageSamples();
+        this.samples = [];
+        this.handleMonitoring(avg, this.currentFpsTarget);
     }
-    createVideo(src, videoContainer) {
-        const matchAbsolutePath = !!src.match(/.*\.(mp4|WebM)(\?.*)?$/i);
-        videoContainer.innerHTML = ''; // This will remove all existing content within the layout
-        const videoElement = document.createElement('video');
-        videoElement.autoplay = true;
-        videoElement.muted = true;
-        videoElement.loop = true;
-        if (!matchAbsolutePath) {
-            videoElement.poster = `${src}/cover.webp`;
+    handleMonitoring(avg, currentTarget) {
+        const decision = this.evaluateDecision(avg, currentTarget);
+        this.upgradeFps(decision, avg.qp);
+    }
+    /**
+     * Combines fuzzy membership values into a single discrete decision.
+     * Rules are evaluated in priority order — first match wins.
+     *
+     * Inputs:
+     * - `fpsRatio`    = avgFPS / currentTargetFPS  (e.g. 45/60 = 0.75)
+     * - `bitrateLoad` = avgBitrate / 20 Mbit/s     (e.g. 12M/20M = 0.6)
+     * - `quality`     = mapQpToQuality(avgQP)       → 'lime' | 'orange' | 'red'
+     */
+    evaluateDecision(avg, currentTarget) {
+        const fpsRatio = currentTarget > 0 ? avg.fps / currentTarget : 1;
+        const bitrateLoad = avg.bitrate / this.MAX_BITRATE;
+        const fpsLow = this.membershipFpsLow(fpsRatio);
+        const fpsOk = this.membershipFpsOk(fpsRatio);
+        const fpsHigh = this.membershipFpsHigh(fpsRatio);
+        const bitrateHigh = this.membershipBitrateHigh(bitrateLoad);
+        // Quality is derived from QP: lime (QP <= 26), orange (QP 27..35), red (QP > 35).
+        const quality = qpToQuality(avg.qp);
+        // Rule 1: FPS clearly below target (ratio roughly < 0.8) → step down immediately.
+        if (fpsLow > 0.5) {
+            return 'decrease';
         }
-        videoElement.style.position = 'absolute';
-        videoElement.style.width = '100%';
-        videoElement.style.height = '100%';
-        videoElement.style.objectFit = 'cover';
-        const sourceElement = document.createElement('source');
-        if (matchAbsolutePath) {
-            sourceElement.src = src;
+        // Rule 2: FPS looks acceptable numerically, but encoder quality is 'red'
+        // (QP > 35 — heavy compression artefacts). Reducing target FPS frees
+        // encoder headroom and improves visual quality.
+        if (fpsOk > 0.4 && quality === 'red') {
+            return 'decrease';
         }
-        else {
-            sourceElement.src = `${src}/video.mp4`;
+        // Rule 3: FPS is ok, but bitrate is above ~50-80% of 20 Mbit/s ceiling
+        // and quality is 'orange' (QP 27..35). Near capacity — don't push higher.
+        if (fpsOk > 0.4 && bitrateHigh > 0.5 && quality === 'orange') {
+            return 'hold';
         }
-        sourceElement.type = 'video/mp4';
-        videoElement.appendChild(sourceElement);
-        videoElement.innerHTML += 'Browser not supported';
-        videoContainer.appendChild(videoElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IntroSrcComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { videoElement: [{ type: i0.ViewChild, args: ['videoPlayerCover', { isSignal: true }] }] } });
-
-class UnrealSceneComponent {
-    get resizeValues() {
-        if (!this.isStudio()) {
-            return this.getResizeValuesUniversal();
+        // Rule 4: FPS meets/exceeds target (ratio >= ~0.95), quality is 'lime'
+        // (QP <= 26), and bitrate is below 50% of ceiling — safe to step up.
+        if (fpsHigh > 0.5 &&
+            quality === 'lime' &&
+            bitrateHigh < 0.5 &&
+            this.currentFpsTarget < this.FPS_STEPS[this.FPS_STEPS.length - 1]) {
+            return 'increase';
         }
-        return this.getResizeValues();
-    }
-    get pixelRatio() {
-        return window.devicePixelRatio;
+        return 'hold';
     }
-    onMouseOver() {
-        this.changeMouseOverScene.emit(true);
+    // ---------------------------------------------------------------------------
+    // Fuzzy membership functions
+    //
+    // Each function maps a normalised input (0..1+) to a membership degree (0..1).
+    // Overlapping trapezoid/triangle shapes let multiple categories be partially
+    // active at the same time, which makes the rules less brittle than hard thresholds.
+    // ---------------------------------------------------------------------------
+    /**
+     * FPS ratio membership "low".
+     * Input: ratio = actualFPS / targetFPS (e.g. 42/60 = 0.70).
+     *
+     *   ratio < 0.7  → 1.0  (clearly failing, e.g. 40/60)
+     *   ratio 0.7..0.9 → linear ramp down (e.g. 0.8 → 0.5)
+     *   ratio > 0.9  → 0.0  (keeping up)
+     */
+    membershipFpsLow(ratio) {
+        if (ratio < 0.7)
+            return 1.0;
+        if (ratio > 0.9)
+            return 0.0;
+        return (0.9 - ratio) / 0.2;
     }
-    onMouseOut() {
-        this.changeMouseOverScene.emit(false);
+    /**
+     * FPS ratio membership "ok" — triangle shape.
+     * Input: ratio = actualFPS / targetFPS.
+     *
+     *   ratio < 0.8  → 0.0
+     *   ratio 0.8..0.95 → ramp up, peak at 0.95 (e.g. 57/60)
+     *   ratio 0.95..1.0 → ramp down
+     *   ratio > 1.0  → 0.0
+     */
+    membershipFpsOk(ratio) {
+        if (ratio < 0.8)
+            return 0.0;
+        if (ratio < 0.95)
+            return (ratio - 0.8) / 0.15;
+        if (ratio <= 1.0)
+            return (1.0 - ratio) / 0.05;
+        return 0.0;
     }
-    constructor() {
-        this.isStudio = input(false, ...(ngDevMode ? [{ debugName: "isStudio" }] : []));
-        this.useContainerAsSizeProvider = input(true, ...(ngDevMode ? [{ debugName: "useContainerAsSizeProvider" }] : []));
-        this.studioResolutionSize = input({
-            width: FULL_HD_WIDTH,
-            height: FULL_HD_HEIGHT,
-        }, ...(ngDevMode ? [{ debugName: "studioResolutionSize" }] : []));
-        this.studioResolutionValues = toObservable(computed(() => {
-            const values = this.studioResolutionSize();
-            return { width: values.width, height: values.height };
-        }));
-        this.videoElement = viewChild('videoContainer', ...(ngDevMode ? [{ debugName: "videoElement" }] : []));
-        this.changeMouseOverScene = output();
-        this.width = FULL_HD_WIDTH;
-        this.height = FULL_HD_HEIGHT;
-        this.actions$ = inject(Actions);
-        this.store = inject(Store);
-        this.isExistMatchUrls = this.store.selectSignal(selectIsExistMatchUrls);
-        this.isDevMode = inject(DevModeService).isDevMode;
-        this.lightMode = this.store.selectSignal(unrealFeature.selectLowBandwidth);
-        this.isFreezeFrameLoading = this.store.selectSignal(selectIsFreezeFrameLoading);
-        this.commandsSender = inject(UnrealCommunicatorService);
-        this.videoService = inject(VideoService);
-        this.element = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
-        this.destroyRef.onDestroy(() => this.store.dispatch(destroyUnrealScene()));
-        effect(() => {
-            const videoElement = this.videoElement();
-            const isExistMatchUrls = this.isExistMatchUrls();
-            if (videoElement && isExistMatchUrls) {
-                this.store.dispatch(initSignalling());
-            }
-        });
-        afterNextRender({
-            read: () => {
-                const videoElement = this.videoElement();
-                if (videoElement) {
-                    this.videoService.setContainer(videoElement.nativeElement);
-                    if (this.element?.nativeElement) {
-                        fromEvent(this.element?.nativeElement, 'contextmenu')
-                            .pipe(takeUntilDestroyed(this.destroyRef))
-                            .subscribe((event) => event.preventDefault());
-                    }
-                    this.listenResizeValues();
-                }
-            },
-        });
+    /**
+     * FPS ratio membership "high".
+     * Input: ratio = actualFPS / targetFPS.
+     *
+     *   ratio < 0.9  → 0.0
+     *   ratio 0.9..1.0 → linear ramp up (e.g. 0.95 → 0.5)
+     *   ratio >= 1.0 → 1.0  (meeting or exceeding target, e.g. 60/60)
+     */
+    membershipFpsHigh(ratio) {
+        if (ratio < 0.9)
+            return 0.0;
+        if (ratio > 1.0)
+            return 1.0;
+        return (ratio - 0.9) / 0.1;
     }
-    listenResizeValues() {
-        const customSizeInputChanged$ = this.studioResolutionValues.pipe(filter(Truthy), distinctUntilChanged(), filter(({ width, height }) => this.width !== width || this.height !== height), map$1(({ width, height }) => ({ width, height })), tap(({ width, height }) => {
-            this.width = width;
-            this.height = height;
-        }));
-        const resizeRequired$ = merge(this.actions$.pipe(ofType(videoStreamInitialized)), fromEvent(window, 'resize'));
-        const videoStreamSizeChanged$ = this.videoService?.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
-            w: stats.aggregatedStats.frameWidth || 0,
-            h: stats.aggregatedStats.frameHeight || 0,
-        })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
-            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD)));
-        merge(customSizeInputChanged$, resizeRequired$, videoStreamSizeChanged$)
-            .pipe(debounceTime(DEBOUNCE_TO_MANY_RESIZE_CALLS), switchMap(() => {
-            const key = Math.random();
-            // Monitoring the size of the video stream
-            return timer(0, 300).pipe(take(3), map$1(() => key));
-        }), map$1((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
-            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD) &&
-            previous.key === current.key), tap((size) => this.adaptVideo(size)), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
-            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD)), combineLatestWith(this.store
-            .select(unrealFeature.selectDataChannelConnected)
-            .pipe(filter(Truthy))), takeUntilDestroyed(this.destroyRef))
-            .subscribe(([size]) => {
-            this.store.dispatch(changeStreamResolutionAction({ width: size.w, height: size.h }));
-            this.sendResize(size);
-        });
-        this.actions$
-            .pipe(ofType(forceResizeViewport), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.sendResize(this.resizeValues));
+    /**
+     * Bitrate load membership "high".
+     * Input: load = currentBitrate / MAX_BITRATE (20 Mbit/s).
+     *
+     *   load < 0.5  → 0.0  (below 10 Mbit/s — plenty of headroom)
+     *   load 0.5..0.8 → linear ramp (e.g. 13M/20M = 0.65 → 0.5)
+     *   load > 0.8  → 1.0  (above 16 Mbit/s — near capacity)
+     */
+    membershipBitrateHigh(load) {
+        if (load < 0.5)
+            return 0.0;
+        if (load > 0.8)
+            return 1.0;
+        return (load - 0.5) / 0.3;
     }
-    adaptVideo(size) {
-        const video = this.videoService.video;
-        const areaSize = this.resizeValues;
-        if (video?.style) {
-            const pR = this.pixelRatio;
-            video.width = this.makeEven(size.w / pR / areaSize.scale);
-            video.height = this.makeEven(size.h / pR / areaSize.scale);
-            if (!this.isStudio()) {
-                video.style.overflow = 'hidden';
-                video.style.objectFit = 'cover';
-                video.style.width = `${video.width}px`;
-                video.style.height = `${video.height}px`;
-            }
+    // ---------------------------------------------------------------------------
+    // Step actions
+    // ---------------------------------------------------------------------------
+    upgradeFps(decision, qp) {
+        if (decision === 'hold')
+            return;
+        const now = Date.now();
+        // Throttle: cooldown depends on (previous decision → current decision) pair.
+        const isStepUp = decision === 'increase';
+        const cooldown = this.lastUpgrade === 'decrease'
+            ? isStepUp
+                ? this.COOLDOWN_INCREASE_AFTER_DECREASE_MS
+                : this.COOLDOWN_DECREASE_AFTER_DECREASE_MS
+            : this.COOLDOWN_AFTER_INCREASE_MS;
+        if (now - this.lastDecisionTime < cooldown) {
+            return;
         }
-        this.store.dispatch(videoAdaptedToContainer());
+        this.lastUpgrade = decision;
+        const quality = qpToQuality(qp);
+        const newTarget = this.getNextFpsTarget(this.currentFpsTarget, decision);
+        Logger.info(`[FpsMonitor] Decision: ${decision} → FPS: ${newTarget}, Quality: ${quality}`);
+        if (newTarget !== this.currentFpsTarget) {
+            this.currentFpsTarget = newTarget;
+            this.store.dispatch(setMaxFps({ maxFps: newTarget }));
+        }
+        this.lastDecisionTime = now;
+        this.samples = [];
+    }
+    /**
+     * Get the next FPS target based on current target and decision.
+     * Clamps to valid FPS_STEPS range.
+     */
+    getNextFpsTarget(currentTarget, decision) {
+        const currentIndex = this.FPS_STEPS.indexOf(currentTarget);
+        // If current target is not in FPS_STEPS, find closest one
+        const validIndex = currentIndex === -1
+            ? this.findClosestFpsIndex(currentTarget)
+            : currentIndex;
+        const delta = decision === 'increase' ? 1 : -1;
+        const newIndex = clampf(0, this.FPS_STEPS.length - 1, validIndex + delta);
+        return this.FPS_STEPS[newIndex];
     }
     /**
-     * This method calculates the dimensions for resizing a layout in a configurator stream.
-     * It takes into account the pixel ratio of the device's screen and the orientation of the layout.
-     * The method uses the `fitIntoRectangle` function to calculate the dimensions that would allow the layout to fit into the maximum space while maintaining its aspect ratio.
-     * It also sets the maximum limits for the width and height based on the layout's orientation.
-     * If the scale of the fitted dimensions is less than 1, it assigns the fitted dimensions to the output. Otherwise, it sets the scale of the output to 1.
-     * @returns {Area} An object of type `Area` that contains the calculated dimensions for resizing the layout.
+     * Find the closest FPS step index for a given target value.
      */
-    getResizeValuesUniversal() {
-        const pR = this.pixelRatio;
-        let containerW = window.innerWidth || 2;
-        let containerH = window.innerHeight || 2;
-        if (this.useContainerAsSizeProvider()) {
-            containerW = this.videoElement()?.nativeElement.offsetWidth || 2;
-            containerH = this.videoElement()?.nativeElement.offsetHeight || 2;
-        }
-        const maxSpace = { w: containerW * pR, h: containerH * pR };
-        const isVertical = containerW < containerH;
-        let maxH = FULL_HD_HEIGHT;
-        let maxW = FULL_HD_WIDTH;
-        const params = new URLSearchParams(location.search);
-        const maxRes = params.get('maxresolution');
-        if (Truthy(maxRes)) {
-            maxH = FULL_HD_HEIGHT * 2;
-            maxW = FULL_HD_WIDTH * 2;
-        }
-        const maxLimits = isVertical
-            ? { w: maxH, h: maxW, x: 0, y: 0 }
-            : { w: maxW, h: maxH, x: 0, y: 0 };
-        const props = fitIntoRectangle({ x: 0, y: 0, w: containerW, h: containerH }, { x: 0, y: 0, ...maxSpace });
-        let out = { ...props };
-        const fitIntoMax = fitIntoRectangle(props, maxLimits);
-        if (fitIntoMax.scale < 1) {
-            // If reducing size to 1920x1080 is required, do it
-            out = fitIntoMax;
+    findClosestFpsIndex(target) {
+        let closestIndex = 0;
+        let closestDiff = Math.abs(this.FPS_STEPS[0] - target);
+        for (let i = 1; i < this.FPS_STEPS.length; i++) {
+            const diff = Math.abs(this.FPS_STEPS[i] - target);
+            if (diff < closestDiff) {
+                closestDiff = diff;
+                closestIndex = i;
+            }
         }
-        else {
-            // Otherwise, use the lowest resolution because the layout size is smaller than 1920x1080
-            out.scale = 1;
+        return closestIndex;
+    }
+    /** Average all collected samples for the current evaluation window. */
+    averageSamples() {
+        const len = this.samples.length;
+        if (len === 0)
+            return { fps: 0, bitrate: 0, qp: 0 };
+        let fps = 0;
+        let bitrate = 0;
+        let qp = 0;
+        for (const s of this.samples) {
+            fps += s.fps;
+            bitrate += s.bitrate;
+            qp += s.qp;
         }
-        /**
-         * Ensure that the size is always even.
-         */
-        out.w = this.makeEven(out.w);
-        out.h = this.makeEven(out.h);
-        return { ...out };
+        return { fps: fps / len, bitrate: bitrate / len, qp: qp / len };
     }
-    getResizeValues() {
-        const pR = this.pixelRatio;
-        const containerW = pR * (this.videoElement()?.nativeElement.offsetWidth || 2);
-        const containerH = pR * (this.videoElement()?.nativeElement.offsetHeight || 2);
-        const maxSpace = { w: containerW, h: containerH };
-        const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: this.width, h: this.height }, { x: 0, y: 0, ...maxSpace });
-        const out = fitIntoRectangle(videoSizePixelPerfect, {
-            x: 0,
-            y: 0,
-            w: Math.min(containerW, FULL_HD_WIDTH),
-            h: Math.min(containerH, FULL_HD_HEIGHT),
-        });
-        /**
-         * Ensure that the size is always even.
-         */
-        out.w = this.makeEven(out.w);
-        out.h = this.makeEven(out.h);
-        return out;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class FpsMonitorPlaywrightService extends FpsMonitorService {
+    init() {
+        return;
     }
-    sendResize(size) {
-        this.commandsSender.sendCommandToUnreal({
-            command: MetaBoxCommand.FChangeResolutionCommand,
-            payload: { resolution: { x: size.w, y: size.h } },
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FpsMonitorPlaywrightService, decorators: [{
+            type: Injectable
+        }] });
+
+class InputPlaywrightService extends InputService {
+    init() {
+        return;
     }
-    makeEven(value) {
-        return Math.floor((value + 1) / 2) * 2;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPlaywrightService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPlaywrightService, decorators: [{
+            type: Injectable
+        }] });
+
+const ReceivedMimeTypes = {
+    ApplicationJson: 'application/json',
+};
+
+class FileHandlerService {
+    constructor() {
+        this.fileService = inject(FileReceiverService);
+        this.fileHandlers = {
+            [ReceivedMimeTypes.ApplicationJson]: this.handleJsonFile.bind(this),
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, studioResolutionSize: { classPropertyName: "studioResolutionSize", publicName: "studioResolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    handleJsonFile(data, correlationId) {
+        const { blob } = data;
+        return from(blob.text()).pipe(map$1((text) => JSON.parse(text)), filter(({ commandCallback }) => {
+            return commandCallback.correlationId === correlationId;
+        }));
+    }
+    observeFileResponse(mimetype, data, sender, timeOut = 60000) {
+        const correlationId = generateUuid();
+        const out = { ...data, correlationId };
+        const observable = this.fileService.fileComplete$.pipe(switchMap((data) => {
+            if (data.valid && this.fileHandlers[mimetype]) {
+                return this.fileHandlers[mimetype](data, correlationId).pipe(filter(Truthy));
+            }
+            return of(null);
+        }), timeout(timeOut), catchError((e) => {
+            Logger.error(e);
+            return of(null);
+        }), take(1));
+        setTimeout(() => sender(out), 0);
+        return observable;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileHandlerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealSceneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-unreal-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AfkTimeoutModalComponent,
-                        UnrealStatusComponent,
-                        FreezeFrameComponent,
-                        VideoStatsComponent,
-                        ResumeStreamButtonComponent,
-                        ImageLoadingSrcComponent,
-                        IntroSrcComponent,
-                    ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], studioResolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "studioResolutionSize", required: false }] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], onMouseOver: [{
-                type: HostListener,
-                args: ['mouseover']
-            }], onMouseOut: [{
-                type: HostListener,
-                args: ['mouseout']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileHandlerService, decorators: [{
+            type: Injectable
+        }] });
 
-class WebrtcErrorModalComponent {
-    #dialogRef = inject(DialogRef);
+class AnalyticsService {
     #store = inject(Store);
-    close() {
-        this.#dialogRef.close();
+    #destroy$ = new Subject();
+    sendEventToMixPanel(name, params = {}) {
+        Logger.log('Analytics Event:', name, params);
+        this.#store.dispatch(saveAnalyticsEvent({ event: { name, params } }));
     }
-    closeModalWithCirrusDisconnect() {
+    constructor() {
+        const abortSignal$ = this.#store
+            .select(unrealFeature.selectViewportReady)
+            .pipe(filter$1(Falsy), map(() => void 0));
         this.#store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(take(1))
-            .subscribe((isConnected) => {
-            if (!isConnected) {
-                this.#store.dispatch(disconnectStream({
-                    reason: DisconnectReason.DropConnection,
-                    message: 'Modal Drop Connection',
-                }));
+            .select(unrealFeature.selectViewportReady)
+            .pipe(distinctUntilChanged(), filter$1(Truthy), tap(() => this.monitorMouse(abortSignal$)))
+            .subscribe();
+    }
+    monitorMouse(abortSignal$) {
+        this.#destroy$.next();
+        const stop$ = merge(this.#destroy$.asObservable(), abortSignal$);
+        const element = document.getElementById('streamingVideo');
+        if (!element) {
+            return;
+        }
+        // Monitor mousewheel events
+        const mousewheel$ = fromEvent(element, 'wheel').pipe(takeUntil$1(stop$), throttleTime(1000));
+        // Monitor mouse button states
+        const mousedown$ = fromEvent(element, 'mousedown').pipe(takeUntil$1(stop$));
+        const touchStart$ = fromEvent(element, 'touchstart').pipe(takeUntil$1(stop$));
+        const touchMove$ = fromEvent(element, 'touchmove').pipe(takeUntil$1(stop$), throttleTime(200));
+        // Track mouse movement while the left or right button is pressed
+        mousedown$
+            .pipe(filter$1((event) => event.button === 0 || event.button === 2), tap((downEvent) => {
+            this.sendEventToMixPanel('mouse_interaction', {
+                viewX: downEvent.clientX / element.clientWidth,
+                viewY: downEvent.clientY / element.clientHeight,
+                action: downEvent.button === 0 ? 'spinning' : 'panning',
+            });
+        }))
+            .subscribe();
+        // Track mouse movement while the left or right button is pressed
+        touchStart$
+            .pipe(tap((downEvent) => {
+            const totalTouches = downEvent.touches.length;
+            const touch = downEvent.touches[0];
+            this.sendEventToMixPanel('touch_interaction', {
+                viewX: touch.clientX / element.clientWidth,
+                viewY: touch.clientY / element.clientHeight,
+                action: totalTouches === 1 ? 'spinning' : 'panning',
+            });
+        }))
+            .subscribe();
+        let initialTouchDistance = 0;
+        // Subscribe to mousewheel events
+        touchMove$.subscribe((event) => {
+            const totalTouches = event.touches.length;
+            if (totalTouches < 2) {
+                return;
+            }
+            // Calculate the current distance between two touches
+            const touch1 = event.touches[0];
+            const touch2 = event.touches[1];
+            const currentDistance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) +
+                Math.pow(touch2.clientY - touch1.clientY, 2));
+            // Determine if zooming in or out based on distance change
+            const deltaDistance = currentDistance - initialTouchDistance;
+            const isZoomingIn = deltaDistance > 0;
+            // Only send event if there's a significant change (avoid noise)
+            if (Math.abs(deltaDistance) > 10) {
+                this.sendEventToMixPanel('touch_zoom_interaction', {
+                    delta: isZoomingIn ? 1 : -1,
+                    action: isZoomingIn ? 'zoomin' : 'zoomout',
+                });
+                // Update initial distance for next comparison
+                initialTouchDistance = currentDistance;
             }
-            this.close();
+        });
+        mousewheel$.subscribe((event) => {
+            this.sendEventToMixPanel('mouse_zoom_interaction', {
+                delta: -(event.deltaY / Math.abs(event.deltaY)),
+                action: event.deltaY < 0 ? 'zoomin' : 'zoomout',
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AnalyticsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AnalyticsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
-class FilterSettingsComponent {
+class UnrealCallbackService {
     constructor() {
-        this.store = inject(Store);
-        this.storageKey = 'LBMFilterSettings';
-        this.defaultFilterModel = { ...DefaultFilterModel };
-        this.settings = { ...DefaultFilterModel };
-    }
-    ngOnInit() {
-        const savedSettings = localStorage.getItem(this.storageKey);
-        if (savedSettings) {
-            this.dispatch(JSON.parse(savedSettings));
-        }
+        this.actions$ = inject(Actions);
     }
-    togglePanel() {
-        this.settings.panelOpen = !this.settings.panelOpen;
-        this.saveSettings();
+    /**
+     * Listens for unreal command callbacks matching a specific command or event type.
+     *
+     * Supports both MetaBoxCommand keys (e.g. `MetaBoxCommand.FLoadProductCommand`)
+     * and custom Unreal callback events (e.g. `'cameraChanged'`, `'onSceneState'`).
+     *
+     * @param command - The command or event key to filter callbacks by
+     * @returns Observable that emits matching callback payloads
+     *
+     * @example
+     * ```ts
+     * // Listen for a MetaBox command callback
+     * this.unrealCallbackService
+     *   .fromUnrealCallback(MetaBoxCommand.FLoadProductCommand)
+     *   .subscribe(data => console.log(data));
+     *
+     * // Listen for a custom Unreal event
+     * this.unrealCallbackService
+     *   .fromUnrealCallback('cameraChanged')
+     *   .subscribe(data => console.log(data));
+     * ```
+     */
+    fromUnrealCallback(command) {
+        return this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => {
+            if ('commandCallback' in json) {
+                return json.commandCallback;
+            }
+            return json;
+        }), filter((json) => json.command === command), map$1((data) => ({
+            command: data.command,
+            payload: 'payload' in data ? data.payload : null,
+        })));
     }
-    saveSettings() {
-        const valid = Object.entries(this.settings).reduce((acc, [key, value]) => {
-            return Truthy(value) ? { ...acc, [key]: value } : acc;
-        }, {});
-        this.dispatch({ ...DefaultFilterModel, ...valid });
+    /**
+     * Sends a command and observes the matching response by correlationId.
+     * Replaces the old `observeCommandResponse` standalone function.
+     *
+     * @param data - The command data to send
+     * @param sender - Function to send the command to Unreal
+     * @param timeOut - Timeout in ms (default 60000)
+     * @param dispatchOnTimeout - Whether to emit on timeout (default true)
+     *
+     * @example
+     * ```ts
+     * this.unrealCallbackService
+     *   .observeCommandResponse<FLoopBackCommand['command']>(
+     *     { command: MetaBoxCommand.FLoopBackCommand },
+     *     (data) => this.communicator.sendCommandToUnreal(data),
+     *   )
+     *   .subscribe();
+     * ```
+     */
+    observeCommandResponse(data, sender, timeOut = 60000, dispatchOnTimeout = true) {
+        const correlationId = generateUuid();
+        const observable = this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.correlationId === correlationId), timeout(timeOut), catchError(() => dispatchOnTimeout
+            ? of({ command: 'timeout', correlationId: 'timeout' })
+            : of(null)), take(1), tapLog('Command Response Observer'), filter(Truthy), map$1((data) => ({
+            command: data.command,
+            payload: 'payload' in data ? data.payload : null,
+        })));
+        setTimeout(() => sender({ ...data, correlationId }), 0);
+        return observable;
     }
-    dispatch(settings) {
-        try {
-            localStorage.setItem(this.storageKey, JSON.stringify(settings));
-        }
-        catch (e) {
-            Logger.error('Storage not available, Error saving filter settings:', e);
-        }
-        Object.assign(this.settings, settings);
-        Object.assign(FilterModel, settings);
-        this.store.dispatch(setKalmanSettings({ settings }));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCallbackService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealCallbackService, decorators: [{
+            type: Injectable
+        }] });
+
+class AfkTimeoutModalComponent {
+    constructor() {
+        this.#store = inject(Store);
+        this.#afkService = inject(AFKService);
+        this.isAfkTimerVisible = this.#store.selectSignal(unrealFeature.selectIsAfkTimerVisible);
+        this.afkCountdown = this.#store.selectSignal(unrealFeature.selectAfkCountdown);
     }
-    reset() {
-        this.dispatch({
-            ...DefaultFilterModel,
-            panelOpen: this.settings.panelOpen,
-        });
+    #store;
+    #afkService;
+    resetAfk() {
+        this.#afkService.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"] }]
+            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
         }] });
 
-class LowBandwidthDetectorComponent {
+class FreezeFrameComponent {
     constructor() {
-        this.store = inject(Store);
-        this.dialog = inject(Dialog);
-        this.destroyRef = inject(DestroyRef);
-        this.videoService = inject(VideoService);
-        this.isDevMode = inject(DevModeService).isDevMode;
-        this.viewportReady$ = this.store.select(unrealFeature.selectViewportReady);
-        this.isLowBandwidth$ = this.store.select(unrealFeature.selectLowBandwidth);
-        this.lowBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Truthy));
-        this.highBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Falsy));
-        this.viewPortDestroyedTrigger$ = this.viewportReady$.pipe(distinctUntilChanged$1(), filter(Falsy));
-        this.aggregatedStats$ = this.videoService.videoStats$.pipe(map((data) => data.aggregatedStats), share());
-        this.nativeQuality$ = this.videoService.videoStats$.pipe(map((data) => data.quality));
-        this.monitoringTrigger$ = this.viewportReady$
-            .pipe(combineLatestWith(this.isLowBandwidth$), map(([viewPortReady, isLowBandwidth]) => viewPortReady && !isLowBandwidth))
-            .pipe(share());
-        this.reTrigger$ = this.monitoringTrigger$.pipe(map(() => ({ quality: 'lime' })));
-        this.canSwitchToLowBand$ = this.monitoringTrigger$.pipe(debounceTime(100), switchMap((canSwitch) => concat(of(false), timer(FilterModel.monitoringDelayTime).pipe(map(() => canSwitch))).pipe(take(2), takeUntil$1(this.monitoringTrigger$))), distinctUntilChanged$1(), share());
-        this.videoQuality$ = merge(this.nativeQuality$, this.reTrigger$).pipe(share(), takeUntil$1(this.viewPortDestroyedTrigger$));
-        this.fps$ = this.aggregatedStats$.pipe(map((data) => data.framesPerSecond || 0));
-        this.bitrateDrop$ = this.aggregatedStats$.pipe(map((data) => data.dataFlowCheckResult), filter((br) => br.isDropDetected), takeUntil$1(merge(this.viewPortDestroyedTrigger$, this.reTrigger$)));
-        this.fps = toSignal(this.fps$, { initialValue: 0 });
-        this.nativeQuality = toSignal(this.nativeQuality$);
-        this.isLowBandwidth = toSignal(this.isLowBandwidth$);
-        this.aggregatedStats = toSignal(this.aggregatedStats$);
-        this.isReducedQuality = signal(false, ...(ngDevMode ? [{ debugName: "isReducedQuality" }] : []));
-        this.isIndicatorExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isIndicatorExpanded" }] : []));
-        this.isIndicatorExpandedTrigger$ = toObservable(this.isIndicatorExpanded).pipe(skip(1), distinctUntilChanged$1(), filter(Falsy));
+        this.#store = inject(Store);
+        this.freezeFrameProgressMessageFromVideo = this.#store.selectSignal(selectFreezeFrameProgressMessageFromVideo);
+        this.combinedFreeze = this.#store.selectSignal(selectFreezeFrameCombinedDataUrl);
     }
-    ngOnInit() {
-        this.lowBandwidthTrigger$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.toggleIndicator(true));
-        merge(this.viewPortDestroyedTrigger$, this.highBandwidthTrigger$)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.isReducedQuality.set(false));
-        this.canSwitchToLowBand$
-            .pipe(filter(Truthy), tap(() => {
-            BITRATE_MONITOR.reset();
-            this.isReducedQuality.set(false);
-        }), switchMap(() => this.bitrateDrop$), tap(this.trySetLowBandwidth.bind(this)), map((dataFlowResult) => dataFlowResult?.isDropDetected), distinctUntilChanged$1(), tap(() => {
-            this.isReducedQuality.set(true);
-        }), switchMap(() => this.videoQuality$), filter((quality) => quality === 'lime'), tap(() => this.isReducedQuality.set(false)), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+    #store;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FreezeFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"] }]
+        }] });
+
+class SafePipe {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
     }
-    trySetLowBandwidth(dataFlowResult) {
-        // Evaluate FPS and native quality
-        const isFpsLow = this.fps() < FilterModel.minimumFps;
-        const isNativeQualityRed = this.nativeQuality() === 'red';
-        const shouldSwitch = isNativeQualityRed || isFpsLow;
-        // Exit if conditions are not met or already in low bandwidth
-        if (!shouldSwitch || this.isLowBandwidth())
-            return;
-        const { quality, activeMedian } = dataFlowResult;
-        const isQualityRed = quality === 'red';
-        const isLowBitrate = activeMedian < FilterModel.minimumBitrate;
-        // Final check for a red drop or low bitrate, or low FPS
-        if (isQualityRed || isLowBitrate || isFpsLow) {
-            let reason;
-            if (isFpsLow) {
-                reason = `FPS < ${FilterModel.minimumFps}`;
-            }
-            else if (quality === 'red') {
-                reason = `Drop > ${FilterModel.redFlag}%`;
-            }
-            else {
-                reason = `Speed < ${FilterModel.minimumBitrate}`;
-            }
-            Logger.info(`LBM DETECTED: ${reason}, switching to low bandwidth; `, dataFlowResult.message);
-            this.store.dispatch(changeLowBandwidth({
-                lowBandwidth: true,
-                stats: {
-                    dataFlowResult,
-                    reason,
-                    triggerTime: this.aggregatedStats()?.runTime ?? 0,
-                },
-            }));
+    transform(value, type) {
+        if (!value) {
+            return value;
         }
-    }
-    toggleIndicator(value) {
-        this.isIndicatorExpanded.set(value);
-        if (value) {
-            this.hideIndicatorAfterDelay();
+        switch (type) {
+            case 'html':
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                throw new Error(`Invalid safe type specified: ${type}`);
         }
     }
-    hideIndicatorAfterDelay() {
-        timer(3000)
-            .pipe(take(1), takeUntil$1(this.isIndicatorExpandedTrigger$))
-            .subscribe(() => this.toggleIndicator(false));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SafePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safe',
+                }]
+        }] });
+
+class LowBandwidthModalComponent {
+    constructor() {
+        this.dialogRef = inject(DialogRef);
     }
-    openLBMDialog() {
-        this.dialog
-            .open(LowBandwidthModalComponent)
-            .closed.pipe(filter(Truthy))
-            .subscribe(() => {
-            this.toggleIndicator(false);
-            this.store.dispatch(changeLowBandwidth({ lowBandwidth: false }));
-        });
+    close(value) {
+        this.dialogRef.close(value || false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"], dependencies: [{ kind: "component", type: FilterSettingsComponent, selector: "app-filter-settings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"] }]
+            args: [{ selector: 'app-low-bandwidth-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SafePipe, SourceButtonComponent], template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"] }]
         }] });
 
-/*
- * Copyright (c) 2026.
- * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
- */
-class WebRtcPlayerService2 extends SubService {
+class ImageLoadingSrcComponent {
     constructor() {
-        super();
-        this.onDataChannelMessage$ = new Subject();
-        this.signallingSrv = inject(SignallingService);
-        this.videoService = inject(VideoService);
-        this.commandTelemetryService = inject(CommandTelemetryService);
-        this.cfg = {};
-        this.useMic = false;
-        this.forceTURN = false;
-        this.forceMonoAudio = false;
-        /** Whether the remote SDP has been applied to the current peer connection */
-        this.remoteDescriptionSet = false;
-        /** ICE candidates received before the remote description was set */
-        this.iceCandidateBuffer = [];
-        this.isReconnecting = this.store.selectSignal(unrealFeature.selectIsReconnecting);
-        this.init();
-        this.actions$.pipe(ofType(dropDC)).subscribe(() => this.dcClient?.close());
-        this.actions$.pipe(ofType(dropPC)).subscribe(() => this.pcClient?.close());
+        this.#store = inject(Store);
+        this.isLoaderScreenVisible = this.#store.selectSignal(selectIsLoaderScreenVisible);
+        this.imageLoadingSrc = this.#store.selectSignal(unrealFeature.selectImageLoadingSrc);
     }
-    init() {
-        this.signallingSrv.onConfig$.subscribe((config) => {
-            this.videoService.create();
-            this.setConfig(config);
-        });
-        // Server-initiated offer: set remote description and respond with answer
-        this.signallingSrv.onOffer$.pipe(filter(Truthy)).subscribe((offer) => {
-            void this.handleServerOffer(offer);
-        });
-        // Answer to a client-initiated offer
-        this.signallingSrv.onWebRtcAnswer$
-            .pipe(filter(Truthy))
-            .subscribe((answer) => {
-            void this.handleServerAnswer(answer);
-        });
-        // ICE candidates — buffered until remote description is set
-        this.signallingSrv.onWebRtcIce$.subscribe((candidate) => {
-            this.commandTelemetryService.trackStopCommand('EXT-iceCandidate', true, {
-                multi: true,
-            });
-            if (this.remoteDescriptionSet) {
-                this.handleCandidateFromServer(candidate);
-            }
-            else {
-                this.iceCandidateBuffer.push(candidate);
-            }
+    #store;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"] }]
+        }] });
+
+class StatGraphComponent {
+    constructor() {
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.stat = input(...(ngDevMode ? [undefined, { debugName: "stat" }] : []));
+        this.color = input('#417bc9', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.tickStep = input(3, ...(ngDevMode ? [{ debugName: "tickStep" }] : []));
+        this.el = inject(ElementRef);
+        this.graph = viewChild('graph', ...(ngDevMode ? [{ debugName: "graph" }] : []));
+        this.data = [];
+        this.max = signal(0, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.min = signal(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+        this.current = signal(0, ...(ngDevMode ? [{ debugName: "current" }] : []));
+        effect(() => this.pushData(this.stat()?.value ?? null));
+        afterNextRender({
+            read: () => {
+                const graph = this.graph();
+                if (graph) {
+                    this.canvas = graph.nativeElement;
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    this.ctx = this.canvas.getContext('2d');
+                }
+            },
         });
     }
-    /**
-     * Handles an SDP offer received from the server.
-     * Creates a new peer connection, applies the remote offer,
-     * then responds with an SDP answer.
-     *
-     * The DataChannel is NOT created here — the server creates it
-     * and we receive it via the `datachannel` event on the peer connection.
-     */
-    async handleServerOffer(offer) {
-        Logger.info('Received offer from server, creating answer');
-        try {
-            this.remoteDescriptionSet = false;
-            this.iceCandidateBuffer.length = 0;
-            if (!this.pcClient) {
-                this.setupPeerConnection(this.cfg);
-            }
-            // Offer already defines media transceivers — don't add extras
-            await this.pcClient.setRemoteDescription(offer);
-            this.remoteDescriptionSet = true;
-            this.flushIceCandidateBuffer();
-            await this.createAnswer(this.pcClient);
+    resize() {
+        this.draw();
+    }
+    draw() {
+        if (!this.canvas) {
+            return;
         }
-        catch (e) {
-            Logger.error('Failed to handle server offer', e);
-            this.store.dispatch(disconnectStream({
-                reason: DisconnectReason.WebRTCError,
-                message: 'WebRTCError: Failed to handle server offer',
-            }));
+        const all = this.data.filter((r) => r !== null && !isNaN(r));
+        this.max.set(Math.max(...all));
+        this.min.set(Math.min(...all));
+        const scaleY = this.canvas.height / (this.max() || 1);
+        this.current.set(all[all.length - 1] || 0);
+        this.ctx.save();
+        const bounds = this.el.nativeElement.getBoundingClientRect();
+        this.canvas.width = bounds.width;
+        this.canvas.height = bounds.height - 30; // -p height
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        [...this.data].reverse().forEach((val, index) => {
+            const h = (val || 0) * scaleY;
+            this.ctx.fillStyle = this.getColor(this.color(), h);
+            this.ctx.fillRect(index * this.tickStep(), this.canvas.height - h, this.tickStep(), h);
+        });
+        this.ctx.restore();
+    }
+    getColor(fillStyle, value = 0) {
+        const { r, g, b } = HEXtoRGB(fillStyle);
+        /* eslint-disable-next-line prefer-const */
+        let [h, s, v] = RGBtoHSV(r, g, b);
+        v = inverseLerp(0, this.canvas.height, value);
+        {
+            const [r, g, b] = HSVtoRGB(h, s, v);
+            return '#' + RGBtoHEX(r, g, b);
         }
     }
-    /**
-     * Handles an SDP answer received from the server in response to our offer.
-     * Applies the remote description and flushes any buffered ICE candidates.
-     */
-    async handleServerAnswer(answer) {
-        Logger.info('Received answer from server');
-        try {
-            await this.pcClient?.setRemoteDescription(answer);
-            this.remoteDescriptionSet = true;
-            this.flushIceCandidateBuffer();
+    pushData(stat) {
+        this.data.push(stat);
+        if (!this.canvas) {
+            return;
         }
-        catch (e) {
-            Logger.error('Failed to set remote description from answer', e);
+        if (this.data.length > this.canvas.width / this.tickStep()) {
+            this.data.shift();
         }
+        this.draw();
     }
-    /** Drains buffered ICE candidates after the remote description has been set */
-    flushIceCandidateBuffer() {
-        for (const candidate of this.iceCandidateBuffer) {
-            this.handleCandidateFromServer(candidate);
-        }
-        this.iceCandidateBuffer.length = 0;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StatGraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], resize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class UnrealStatusComponent {
+    constructor() {
+        this.unrealInitialConfig = inject(UNREAL_CONFIG);
+        this.destroyRef = inject(DestroyRef);
+        this.store = inject(Store);
+        this.resetPercentageSignal$ = this.store
+            .select(selectShowLoader)
+            .pipe(filter(Falsy));
+        this.showLoader = this.store.selectSignal(selectShowLoader);
+        /**
+         * An observable that emits smoothed percentage values from 0 to 100.
+         */
+        this.messagePercents = toSignal(this.store.select(selectTotalProgress).pipe(keepMaxUntilReset(this.resetPercentageSignal$), floatToSmoothPercents(), distinctUntilChanged(), map$1((progress) => progress || 0)));
+        this.awsInstance = this.store.selectSignal(unrealFeature.selectAwsInstance);
+    }
+    ngOnInit() {
+        /**
+         * A subject that emits null values to trigger nullification.
+         */
+        const nullify$ = new Subject();
+        /**
+         * An observable that emits null values with a delay of 2000 milliseconds.
+         */
+        const nullifyObs$ = nullify$
+            .asObservable()
+            .pipe(delay(2000));
+        /**
+         * An observable that emits the status message from the Unreal feature store.
+         */
+        const signalingStatus$ = this.store.select(unrealFeature.selectStatusMessage);
+        /**
+         * An observable that emits connection status messages based on the Cirrus connection state.
+         * Then call side effect to nullify the message.
+         */
+        const cirrusConnected$ = this.store
+            .select(unrealFeature.selectCirrusConnected)
+            .pipe(skip(1), switchMap((connected) => connected
+            ? of('Creating Socket...')
+            : of('Connection closed.').pipe(tap(() => nullify$.next(null)))));
+        /**
+         * An observable that emits the viewport visibility state.
+         */
+        const viewportTrigger$ = this.store.select(unrealFeature.selectViewportReady);
+        /**
+         * An observable that will nullify any message displayed after 500 mSec, when viewport changes its state.
+         */
+        const streamToggle$ = merge(viewportTrigger$.pipe(filter(Falsy), skip(1)), viewportTrigger$.pipe(filter(Truthy))).pipe(delay(500), map$1(() => null));
+        /**
+         * A subscription that merges various status observables and emits debounced status via postMessage.
+         */
+        merge(nullifyObs$, cirrusConnected$, signalingStatus$, streamToggle$)
+            .pipe(tapLog('STATUS=>'), debounceTime$1(0), takeUntilDestroyed(this.destroyRef))
+            .subscribe((status) => this.sendMessageToIndex(status));
     }
     /**
-     * Creates a client-initiated WebRTC offer and sends it to the server.
-     * When the client offers, it also creates the DataChannel.
-     * Used for peer reconnection through the existing signaling connection.
+     * Sends a message to the embedded iframe identified by the default value '3dsource_start_screen' ID.
+     * This function tries to post a message to the iframe's content window. If the content
+     * window is not accessible (e.g., due to cross-origin policies), the function fails silently.
+     *
+     * @param {string} text The message to be sent to the iframe. This could be a status update
+     * or any other relevant information that the iframe needs to process.
      */
-    async createWebRtcOffer() {
-        Logger.info('Creating client-initiated offer');
+    sendMessageToIndex(text) {
+        const objectElement = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ||
+            SCREEN_LOCKER_CONTAINER_ID);
         try {
-            this.remoteDescriptionSet = false;
-            this.iceCandidateBuffer.length = 0;
-            if (!this.pcClient) {
-                this.setupPeerConnection(this.cfg);
-            }
-            // Client offers: transceivers first, then DC, then offer
-            await this.setupTransceiversAsync(this.pcClient);
-            this.dcClient = this.createDataChannel(this.pcClient, 'UnrealDcConnection', { ordered: true });
-            await this.createOffer(this.pcClient);
+            const objectDocument = objectElement.contentWindow;
+            objectDocument?.postMessage(text, '*');
         }
-        catch (e) {
-            Logger.error('Failed to create WebRTC offer', e);
-            this.store.dispatch(disconnectStream({
-                reason: DisconnectReason.WebRTCError,
-                message: 'WebRTCError: Offer Error',
-            }));
+        catch {
+            // Fails silently if the iframe's content window cannot be accessed
         }
     }
-    /**
-     * Initializes a new RTCPeerConnection with event handlers.
-     * Transceivers are NOT added here — the caller is responsible for adding
-     * them at the correct point depending on the negotiation flow.
-     */
-    setupPeerConnection(config) {
-        this.closePC();
-        Logger.log('Creating new RTCPeerConnection with config');
-        this.pcClient = new RTCPeerConnection(config);
-        this.commandTelemetryService.trackStartCommand('EXT-Browser ICE gathering');
-        this.commandTelemetryService.trackStartCommand('EXT-Browser ICE connection');
-        this.commandTelemetryService.trackStartCommand('EXT-Signaling state change');
-        this.handlePeerConnectionEvents(this.pcClient);
-        this.disconnect$.pipe(take(1)).subscribe(() => {
-            this.closePC();
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceLoadingComponent], template: "@if (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"] }]
+        }] });
+
+class VideoStatsComponent {
+    constructor() {
+        this.collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        this.store = inject(Store);
+        this.videoService = inject(VideoService);
+        this.isDevMode = inject(DevModeService).isDevMode;
+        this.obs$ = this.videoService.videoStats$;
+        this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
+        this.ssInfo = this.store.selectSignal(selectSignalingParameters);
+        this.fpsTick = toSignal(this.obs$.pipe(map$1((stat) => ({
+            value: stat.aggregatedStats.framesPerSecond || 0,
+        }))));
+        this.fpsAvgTick = toSignal(this.obs$.pipe(map$1((stat) => ({
+            value: stat.aggregatedStats.avgFrameRate,
+        }))));
+        this.bitrateTick = toSignal(this.obs$.pipe(map$1((stat) => ({
+            value: stat.aggregatedStats.bitrate,
+        }))));
+        this.videoQP = toSignal(this.obs$.pipe(map$1((stat) => ({
+            value: stat.aggregatedStats.VideoEncoderQP,
+        }))));
+        this.bitrateAverageTick = toSignal(this.obs$.pipe(map$1((stat) => ({
+            value: stat.aggregatedStats.avgBitrate,
+        }))));
+        this.videoStatus = toSignal(this.obs$.pipe(map$1((event) => this.isDevMode &&
+            {
+                ...event.aggregatedStats,
+                quality: event.quality,
+            }), filter(Boolean), map$1((data) => {
+            return this.fields
+                .map((key) => {
+                return {
+                    key,
+                    value: data[key],
+                };
+            })
+                .filter((r) => !this.elementsToShow.includes(r.key));
+        })));
+        this.graphList = [];
+        this.idKey = 'com.source3d.unreal.stat';
+        this.elementsToShow = [];
+        this.trigger$ = new BehaviorSubject(undefined);
+        this.getFields();
     }
-    createDataChannel(pc, label, options) {
-        const datachannel = pc.createDataChannel(label, options);
-        return this.setupDataChannelCallbacks(datachannel);
+    ngOnInit() {
+        this.fields = [
+            'kalmanBitrate',
+            'bitrateDrop',
+            'runTime',
+            'pixelRatio',
+            'frameHeight',
+            'frameWidth',
+            ':-------------',
+            'jitter',
+            'MBytesReceived',
+            'framesDecoded',
+            'framesDropped',
+            'framesReceived',
+            'keyFramesDecoded',
+            'currentRoundTripTime',
+            'packetsLost',
+            ':-------------',
+            'quality',
+            'videoCodec',
+            'kind',
+            'type',
+            'codecs',
+            'selectedPair',
+            //'pliCount',
+            //'sliCount',
+            //'transportId',
+            //'id',
+        ];
+        this.updateGraph();
     }
-    handleCandidateFromServer(iceCandidate) {
-        try {
-            const candidate = new RTCIceCandidate(iceCandidate);
-            Logger.info('[Unreal ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|');
-            // If forcing TURN, reject any candidates not relay
-            if (this.forceTURN) {
-                if (candidate.candidate.indexOf('relay') < 0) {
-                    Logger.warn('Dropping candidate because it was not TURN relay.', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|');
-                    return;
-                }
-            }
-            this.pcClient?.addIceCandidate(candidate).catch((e) => {
-                Logger.warn('Failed to add ICE candidate', e);
-            });
-        }
-        catch (e) {
-            Logger.error('Error handleCandidateFromServer', e);
-        }
+    updateGraph() {
+        this.graphList = this.fields.map((key) => {
+            const stat = this.obs$.pipe(map$1((val) => {
+                const value = val.aggregatedStats[key];
+                return { value };
+            }));
+            return {
+                key,
+                color: Math.floor(Math.random() * 16777216).toString(),
+                stat,
+            };
+        });
+        this.graphList$ = of(this.graphList).pipe(combineLatestWith(this.trigger$), map$1(([graphList]) => graphList.filter((r) => this.elementsToShow.includes(r.key))));
     }
-    /**
-     * Reorders the `m=video` line in the SDP so that payload types matching
-     * the given H.264 `profile-level-id` appear first, making the browser
-     * prefer that profile during codec negotiation.
-     *
-     * A `profile-level-id` is a 3-byte hex string (`XXYYZZ`) defined in
-     * RFC 6184 that encodes three H.264 parameters:
-     * - **Profile IDC** (`XX`) — the H.264 profile.
-     * - **Profile IOP** (`YY`) — constraint flags that further narrow the profile.
-     * - **Level IDC** (`ZZ`) — the level, which caps resolution/framerate/bitrate.
-     *
-     * ### H.264 profiles relevant to Unreal Engine Pixel Streaming
-     *
-     * | profile-level-id | Profile                    | Level | Notes                                        |
-     * |------------------|----------------------------|-------|----------------------------------------------|
-     * | `42001f`         | Baseline                   | 3.1   | No B-frames, low latency; legacy devices     |
-     * | `42e01f`         | Constrained Baseline       | 3.1   | Widest HW decode support; **recommended**    |
-     * | `4d001f`         | Main                       | 3.1   | B-frames + CABAC; better compression          |
-     * | `4d4028`         | Main                       | 4.0   | Up to 1080p60; common desktop target          |
-     * | `640028`         | High                       | 4.0   | Best quality/compression; most GPUs support   |
-     * | `64002a`         | High                       | 4.2   | Up to 1080p120 or 4K30                        |
-     * | `640033`         | High                       | 5.1   | Up to 4K60; requires modern HW                |
-     * | `640034`         | High                       | 5.2   | Up to 4K120; high-end HW only                 |
-     * | `6e001f`         | High 10                    | 3.1   | 10-bit color; limited browser support          |
-     * | `f4001f`         | High 4:4:4 Predictive      | 3.1   | Lossless capable; rare in browsers             |
-     *
-     * UE Pixel Streaming defaults to Constrained Baseline (`42e01f`) or High (`6400xx`)
-     * depending on engine version and `WebRTC.H264Profile` CVar.
-     *
-     * We prioritize `42e01f` because it guarantees hardware decoding on
-     * virtually all client devices (desktop, mobile, embedded), avoiding
-     * fallback to software decoding or negotiation of a higher profile
-     * that the client GPU may not accelerate.
-     */
-    prioritizeH264Profile(sdp, profileLevelId) {
-        const lines = sdp.split('\r\n');
-        const targetPts = [];
-        for (const line of lines) {
-            if (line.startsWith('a=fmtp:') &&
-                line.toLowerCase().includes(`profile-level-id=${profileLevelId}`)) {
-                const pt = line.split(':')[1]?.split(' ')[0];
-                if (pt)
-                    targetPts.push(pt);
-            }
-        }
-        if (targetPts.length === 0)
-            return sdp;
-        return lines
-            .map((line) => {
-            if (!line.startsWith('m=video'))
-                return line;
-            const parts = line.split(' ');
-            // parts: m=video <port> <proto> <pt1> <pt2> ...
-            const header = parts.slice(0, 3);
-            const pts = parts.slice(3);
-            const prioritized = [
-                ...targetPts.filter((pt) => pts.includes(pt)),
-                ...pts.filter((pt) => !targetPts.includes(pt)),
-            ];
-            return [...header, ...prioritized].join(' ');
-        })
-            .join('\r\n');
+    toggle() {
+        this.collapsed.update((collapsed) => !collapsed);
+        this.writeFields();
     }
-    mungeSDP(sdp) {
-        let mungedSDP = this.prioritizeH264Profile(sdp, '42e01f');
-        mungedSDP = mungedSDP.replace(/(a=fmtp:\d+ .*level-asymmetry-allowed=.*)\r\n/gm, '$1;x-google-start-bitrate=10000;x-google-max-bitrate=100000\r\n');
-        // Set max bitrate to highest bitrate Opus supports
-        let audioSDP = 'maxaveragebitrate=510000;';
-        if (this.useMic) {
-            // Set the max capture rate to 48khz (so we can send high-quality audio from mic)
-            audioSDP += 'sprop-maxcapturerate=48000;';
+    toggleGraph($event, el, value) {
+        $event.stopPropagation();
+        if ((value && typeof value !== 'number') ||
+            (typeof value === 'number' && isNaN(value))) {
+            return;
+        }
+        if (this.elementsToShow.includes(el)) {
+            this.elementsToShow = this.elementsToShow.filter((item) => item !== el);
         }
-        // Force mono or stereo based on whether ?forceMono was passed or not
-        audioSDP += this.forceMonoAudio ? 'stereo=0;' : 'stereo=1;';
-        // Enable in-band forward error correction for opus audio
-        audioSDP += 'useinbandfec=1';
-        // We use the line 'useinbandfec=1' (which Opus uses) to set our Opus specific audio parameters.
-        mungedSDP = mungedSDP?.replace('useinbandfec=1', audioSDP);
-        return mungedSDP;
+        else {
+            this.elementsToShow.push(el);
+        }
+        this.writeFields();
+        this.trigger$.next();
     }
-    /**
-     * Closes existing PeerConnection and DataChannel, resets negotiation state.
-     */
-    closePC() {
-        if (this.pcClient) {
-            Logger.warn('Closing existing PeerConnection');
+    getFields() {
+        try {
+            const { elements, collapsed } = JSON.parse(localStorage.getItem(this.idKey)) || [];
+            this.elementsToShow = elements || [];
+            this.collapsed.set(collapsed);
         }
-        this.pcClient?.close();
-        this.pcClient = null;
-        if (this.dcClient) {
-            Logger.warn('Closing existing DataChannel');
+        catch {
+            this.elementsToShow = [];
         }
-        this.dcClient?.close();
-        this.dcClient = null;
-        this.remoteDescriptionSet = false;
-        this.iceCandidateBuffer.length = 0;
     }
-    canSend() {
-        return this.dcClient && this.dcClient.readyState === 'open';
+    writeFields() {
+        localStorage.setItem(this.idKey, JSON.stringify({
+            collapsed: this.collapsed(),
+            elements: this.elementsToShow,
+        }));
     }
-    send(data) {
-        if (this.canSend()) {
-            this.dcClient?.send(data);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VideoStatsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, AsyncPipe, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ResumeStreamButtonComponent {
+    constructor() {
+        this.actions$ = inject(Actions);
+        this.store = inject(Store);
+        this.videoService = inject(VideoService);
+        this.destroyRef = inject(DestroyRef);
+        this.showReconnectPopup = this.store.selectSignal(selectShowReconnectPopup);
+        this.isLoaderScreenVisible = this.store.selectSignal(selectIsLoaderScreenVisible);
+        this.streamConfig = this.store.selectSignal(selectStreamConfig);
+        this.isExistMatchUrls = this.store.selectSignal(selectIsExistMatchUrls);
+        this.isSecondStart = signal(!!(this.streamConfig()?.autoStart && location.href.match(/^https/gi)), ...(ngDevMode ? [{ debugName: "isSecondStart" }] : []));
+        this.isShowResumeButton = computed(() => this.isLoaderScreenVisible() &&
+            this.showReconnectPopup() &&
+            this.isExistMatchUrls(), ...(ngDevMode ? [{ debugName: "isShowResumeButton" }] : []));
+    }
+    ngOnInit() {
+        this.store
+            .select(unrealFeature.selectCirrusConnected)
+            .pipe(skip$1(1), filter(Falsy), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.onDisconnect());
+    }
+    ngAfterViewInit() {
+        this.actions$
+            .pipe(ofType(videoStreamInitialized), takeUntilDestroyed(this.destroyRef), filter(() => !!this.videoService.video?.paused))
+            .subscribe(() => {
+            Logger.info('Simulate Press Play');
+            this.videoService.play();
+            this.store.dispatch(resetAfk());
+        });
+    }
+    connect() {
+        this.store.dispatch(startStream({ config: { autoStart: true } }));
+    }
+    onDisconnect() {
+        this.isSecondStart.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+        }] });
+
+class IntroSrcComponent {
+    constructor() {
+        this.videoElement = viewChild('videoPlayerCover', ...(ngDevMode ? [{ debugName: "videoElement" }] : []));
+        this.store = inject(Store);
+        this.imageIntroSrc = this.store.selectSignal(unrealFeature.selectImageIntroSrc);
+        this.videoIntroSrc = this.store.selectSignal(unrealFeature.selectVideoIntroSrc);
+        this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
+        effect(() => {
+            const viewportReady = this.viewportReady();
+            const videoIntroSrc = this.videoIntroSrc();
+            const imageIntroSrc = this.imageIntroSrc();
+            untracked(() => {
+                if (viewportReady && (videoIntroSrc || imageIntroSrc)) {
+                    this.store.dispatch(resetIntroSrc());
+                }
+            });
+        });
+        effect(() => {
+            const videoIntroSrc = this.videoIntroSrc();
+            const videoElement = this.videoElement();
+            if (!videoIntroSrc || !videoElement) {
+                return;
+            }
+            untracked(() => this.createVideo(videoIntroSrc, videoElement.nativeElement));
+        });
+    }
+    createVideo(src, videoContainer) {
+        const matchAbsolutePath = !!src.match(/.*\.(mp4|WebM)(\?.*)?$/i);
+        videoContainer.innerHTML = ''; // This will remove all existing content within the layout
+        const videoElement = document.createElement('video');
+        videoElement.autoplay = true;
+        videoElement.muted = true;
+        videoElement.loop = true;
+        if (!matchAbsolutePath) {
+            videoElement.poster = `${src}/cover.webp`;
+        }
+        videoElement.style.position = 'absolute';
+        videoElement.style.width = '100%';
+        videoElement.style.height = '100%';
+        videoElement.style.objectFit = 'cover';
+        const sourceElement = document.createElement('source');
+        if (matchAbsolutePath) {
+            sourceElement.src = src;
         }
         else {
-            Logger.colored('black', 'yellow', `DataChannel connection not prepared or in state: ${this.dcClient?.readyState}`);
-            // Trigger peer reconnection if DC is not open and we're not already reconnecting
-            this.tryReconnectOnSendFailure();
+            sourceElement.src = `${src}/video.mp4`;
         }
+        sourceElement.type = 'video/mp4';
+        videoElement.appendChild(sourceElement);
+        videoElement.innerHTML += 'Browser not supported';
+        videoContainer.appendChild(videoElement);
     }
-    /**
-     * Attempts to reconnect the peer when send fails due to DataChannel not being open.
-     * This handles cases where the DC connection is broken but no error events are fired.
-     */
-    tryReconnectOnSendFailure() {
-        // Skip if already reconnecting or signaling is not connected
-        if (this.isReconnecting()) {
-            Logger.info('[Reconnect] Already reconnecting, skipping duplicate attempt');
-            return;
-        }
-        if (!this.signallingSrv.isConnected()) {
-            Logger.warn('[Reconnect] Cannot reconnect: Signaling not connected');
-            return;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IntroSrcComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { videoElement: [{ type: i0.ViewChild, args: ['videoPlayerCover', { isSignal: true }] }] } });
+
+class UnrealSceneComponent {
+    get resizeValues() {
+        if (!this.isStudio()) {
+            return this.getResizeValuesUniversal();
         }
-        // Check if DC exists but is in a non-open state (closing, closed, or connecting stuck)
-        const dcState = this.dcClient?.readyState;
-        if (dcState && dcState !== 'open') {
-            Logger.warn(`[Reconnect] DataChannel in "${dcState}" state during send, initiating peer reconnection`);
-            this.store.dispatch(reconnectPeer({ attempt: 1, maxAttempts: 3, delay: 0 }));
+        return this.getResizeValues();
+    }
+    get pixelRatio() {
+        return window.devicePixelRatio;
+    }
+    onMouseOver() {
+        this.changeMouseOverScene.emit(true);
+    }
+    onMouseOut() {
+        this.changeMouseOverScene.emit(false);
+    }
+    constructor() {
+        this.isStudio = input(false, ...(ngDevMode ? [{ debugName: "isStudio" }] : []));
+        this.useContainerAsSizeProvider = input(true, ...(ngDevMode ? [{ debugName: "useContainerAsSizeProvider" }] : []));
+        this.studioResolutionSize = input({
+            width: FULL_HD_WIDTH,
+            height: FULL_HD_HEIGHT,
+        }, ...(ngDevMode ? [{ debugName: "studioResolutionSize" }] : []));
+        this.studioResolutionValues = toObservable(computed(() => {
+            const values = this.studioResolutionSize();
+            return { width: values.width, height: values.height };
+        }));
+        this.videoElement = viewChild('videoContainer', ...(ngDevMode ? [{ debugName: "videoElement" }] : []));
+        this.changeMouseOverScene = output();
+        this.width = FULL_HD_WIDTH;
+        this.height = FULL_HD_HEIGHT;
+        this.actions$ = inject(Actions);
+        this.store = inject(Store);
+        this.isExistMatchUrls = this.store.selectSignal(selectIsExistMatchUrls);
+        this.isDevMode = inject(DevModeService).isDevMode;
+        this.lightMode = this.store.selectSignal(unrealFeature.selectLowBandwidth);
+        this.isFreezeFrameLoading = this.store.selectSignal(selectIsFreezeFrameLoading);
+        this.commandsSender = inject(UnrealCommunicatorService);
+        this.videoService = inject(VideoService);
+        this.element = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.destroyRef.onDestroy(() => this.store.dispatch(destroyUnrealScene()));
+        effect(() => {
+            const videoElement = this.videoElement();
+            const isExistMatchUrls = this.isExistMatchUrls();
+            if (videoElement && isExistMatchUrls) {
+                this.store.dispatch(initSignalling());
+            }
+        });
+        afterNextRender({
+            read: () => {
+                const videoElement = this.videoElement();
+                if (videoElement) {
+                    this.videoService.setContainer(videoElement.nativeElement);
+                    if (this.element?.nativeElement) {
+                        fromEvent(this.element?.nativeElement, 'contextmenu')
+                            .pipe(takeUntilDestroyed(this.destroyRef))
+                            .subscribe((event) => event.preventDefault());
+                    }
+                    this.listenResizeValues();
+                }
+            },
+        });
+    }
+    listenResizeValues() {
+        const customSizeInputChanged$ = this.studioResolutionValues.pipe(filter(Truthy), distinctUntilChanged(), filter(({ width, height }) => this.width !== width || this.height !== height), map$1(({ width, height }) => ({ width, height })), tap(({ width, height }) => {
+            this.width = width;
+            this.height = height;
+        }));
+        const resizeRequired$ = merge(this.actions$.pipe(ofType(videoStreamInitialized)), fromEvent(window, 'resize'));
+        const videoStreamSizeChanged$ = this.videoService?.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
+            w: stats.aggregatedStats.frameWidth || 0,
+            h: stats.aggregatedStats.frameHeight || 0,
+        })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
+            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD)));
+        merge(customSizeInputChanged$, resizeRequired$, videoStreamSizeChanged$)
+            .pipe(debounceTime(DEBOUNCE_TO_MANY_RESIZE_CALLS), switchMap(() => {
+            const key = Math.random();
+            // Monitoring the size of the video stream
+            return timer(0, 300).pipe(take(3), map$1(() => key));
+        }), map$1((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
+            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD) &&
+            previous.key === current.key), tap((size) => this.adaptVideo(size)), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
+            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD)), combineLatestWith(this.store
+            .select(unrealFeature.selectDataChannelConnected)
+            .pipe(filter(Truthy))), takeUntilDestroyed(this.destroyRef))
+            .subscribe(([size]) => {
+            this.store.dispatch(changeStreamResolutionAction({ width: size.w, height: size.h }));
+            this.sendResize(size);
+        });
+        this.actions$
+            .pipe(ofType(forceResizeViewport), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.sendResize(this.resizeValues));
+    }
+    adaptVideo(size) {
+        const video = this.videoService.video;
+        const areaSize = this.resizeValues;
+        if (video?.style) {
+            const pR = this.pixelRatio;
+            video.width = this.makeEven(size.w / pR / areaSize.scale);
+            video.height = this.makeEven(size.h / pR / areaSize.scale);
+            if (!this.isStudio()) {
+                video.style.overflow = 'hidden';
+                video.style.objectFit = 'cover';
+                video.style.width = `${video.width}px`;
+                video.style.height = `${video.height}px`;
+            }
         }
+        this.store.dispatch(videoAdaptedToContainer());
     }
     /**
-     * Reconnects only the WebRTC peer connection without re-establishing signaling.
-     * Closes the current PeerConnection and creates a new client-initiated offer
-     * through the existing WebSocket connection.
-     * @returns true if reconnection was initiated, false if signaling is not connected
+     * This method calculates the dimensions for resizing a layout in a configurator stream.
+     * It takes into account the pixel ratio of the device's screen and the orientation of the layout.
+     * The method uses the `fitIntoRectangle` function to calculate the dimensions that would allow the layout to fit into the maximum space while maintaining its aspect ratio.
+     * It also sets the maximum limits for the width and height based on the layout's orientation.
+     * If the scale of the fitted dimensions is less than 1, it assigns the fitted dimensions to the output. Otherwise, it sets the scale of the output to 1.
+     * @returns {Area} An object of type `Area` that contains the calculated dimensions for resizing the layout.
      */
-    reconnectPeer() {
-        if (!this.signallingSrv.isConnected()) {
-            Logger.error('[Reconnect] Cannot reconnect peer: Signaling not connected');
-            return false;
+    getResizeValuesUniversal() {
+        const pR = this.pixelRatio;
+        let containerW = window.innerWidth || 2;
+        let containerH = window.innerHeight || 2;
+        if (this.useContainerAsSizeProvider()) {
+            containerW = this.videoElement()?.nativeElement.offsetWidth || 2;
+            containerH = this.videoElement()?.nativeElement.offsetHeight || 2;
         }
-        if (!this.cfg || Object.keys(this.cfg).length === 0) {
-            Logger.error('[Reconnect] Cannot reconnect peer: No config available');
-            return false;
+        const maxSpace = { w: containerW * pR, h: containerH * pR };
+        const isVertical = containerW < containerH;
+        let maxH = FULL_HD_HEIGHT;
+        let maxW = FULL_HD_WIDTH;
+        const params = new URLSearchParams(location.search);
+        const maxRes = params.get('maxresolution');
+        if (Truthy(maxRes)) {
+            maxH = FULL_HD_HEIGHT * 2;
+            maxW = FULL_HD_WIDTH * 2;
         }
-        Logger.info('[Reconnect] Initiating peer reconnection');
-        // Close only the PeerConnection, keep WebSocket alive
-        this.closePC();
-        // Create a new WebRTC offer using the stored config
-        void this.createWebRtcOffer();
-        return true;
-    }
-    setConfig(parOptions = {}) {
-        const urlParams = new URLSearchParams(window.location.search);
-        //**********************
-        //Config setup
-        //**********************
-        this.cfg = { ...parOptions.peerConnectionOptions };
-        this.forceTURN = urlParams.has('ForceTURN');
-        if (this.forceTURN) {
-            Logger.info('Forcing TURN usage by setting ICE Transport Policy in peer connection config.');
-            this.cfg.iceTransportPolicy = 'relay';
+        const maxLimits = isVertical
+            ? { w: maxH, h: maxW, x: 0, y: 0 }
+            : { w: maxW, h: maxH, x: 0, y: 0 };
+        const props = fitIntoRectangle({ x: 0, y: 0, w: containerW, h: containerH }, { x: 0, y: 0, ...maxSpace });
+        let out = { ...props };
+        const fitIntoMax = fitIntoRectangle(props, maxLimits);
+        if (fitIntoMax.scale < 1) {
+            // If reducing size to 1920x1080 is required, do it
+            out = fitIntoMax;
         }
-        this.cfg.bundlePolicy = urlParams.has('ForceMaxBundle')
-            ? 'max-bundle'
-            : 'balanced';
-        this.cfg.iceCandidatePoolSize = 1;
-        // When ?useMic check for SSL or localhost
-        const isLocalhostConnection = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
-        const isHttpsConnection = location.protocol === 'https:';
-        if (this.useMic && !isLocalhostConnection && !isHttpsConnection) {
-            this.useMic = false;
-            Logger.error('Microphone access in the browser will not work if you are not on HTTPS or localhost. Disabling mic access.');
-            Logger.error("For testing you can enable HTTP microphone access Chrome by visiting chrome://flags/ and enabling 'unsafely-treat-insecure-origin-as-secure'");
+        else {
+            // Otherwise, use the lowest resolution because the layout size is smaller than 1920x1080
+            out.scale = 1;
         }
-        this.setupPeerConnection(this.cfg);
+        /**
+         * Ensure that the size is always even.
+         */
+        out.w = this.makeEven(out.w);
+        out.h = this.makeEven(out.h);
+        return { ...out };
     }
-    handlePeerConnectionEvents(pcClient) {
-        fromEvent(pcClient, 'signalingstatechange')
-            .pipe(map$1(() => this.pcClient?.signalingState), takeUntil(this.disconnect$))
-            .subscribe((state) => {
-            Logger.info('[Signaling state change] |', state, '|');
-            this.commandTelemetryService.trackStopCommand('EXT-Signaling state change', true, { state, multi: true });
-        });
-        fromEvent(pcClient, 'iceconnectionstatechange')
-            .pipe(map$1(() => this.pcClient?.iceConnectionState), takeUntil(this.disconnect$))
-            .subscribe((state) => {
-            Logger.info('[Browser ICE connection] |', state, '|');
-            this.commandTelemetryService.trackStopCommand('EXT-Browser ICE connection', true, { state, multi: true });
-        });
-        fromEvent(pcClient, 'icegatheringstatechange')
-            .pipe(map$1(() => this.pcClient?.iceGatheringState), takeUntil(this.disconnect$))
-            .subscribe((state) => {
-            Logger.info('[Browser ICE gathering] |', state, '|');
-            this.commandTelemetryService.trackStopCommand('EXT-Browser ICE gathering', true, { state, multi: true });
-        });
-        fromEvent(pcClient, 'connectionstatechange')
-            .pipe(map$1(() => this.pcClient?.connectionState), takeUntil(this.disconnect$))
-            .subscribe((state) => {
-            Logger.info('[RTCPeerConnection state] |', state, '|');
-        });
-        fromEvent(pcClient, 'icecandidate')
-            .pipe(map$1((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(this.disconnect$))
-            .subscribe((candidate) => this.signallingSrv.send({ type: 'iceCandidate', candidate }));
-        // When the server creates the DataChannel (server-offer flow),
-        // we receive it here via the 'datachannel' event
-        fromEvent(pcClient, 'datachannel')
-            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map$1((e) => e.channel), takeUntil(this.disconnect$))
-            .subscribe((datachannel) => {
-            this.dcClient = this.setupDataChannelCallbacks(datachannel);
+    getResizeValues() {
+        const pR = this.pixelRatio;
+        const containerW = pR * (this.videoElement()?.nativeElement.offsetWidth || 2);
+        const containerH = pR * (this.videoElement()?.nativeElement.offsetHeight || 2);
+        const maxSpace = { w: containerW, h: containerH };
+        const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: this.width, h: this.height }, { x: 0, y: 0, ...maxSpace });
+        const out = fitIntoRectangle(videoSizePixelPerfect, {
+            x: 0,
+            y: 0,
+            w: Math.min(containerW, FULL_HD_WIDTH),
+            h: Math.min(containerH, FULL_HD_HEIGHT),
         });
-        const onTrack$ = fromEvent(pcClient, 'track').pipe(takeUntil(this.disconnect$), filter((e) => !!e.track), tap$1((e) => Logger.info('Got track - ' +
-            e.track.kind +
-            ' id=' +
-            e.track.id +
-            ' readyState=' +
-            e.track.readyState)), share());
-        onTrack$
-            .pipe(filter((e) => e.track.kind === 'audio'), map$1((e) => e.streams[0]))
-            .subscribe((stream) => this.videoService.attachAudioStream(stream));
-        onTrack$
-            .pipe(filter((e) => e.track.kind === 'video'), map$1((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
-            .subscribe((stream) => {
-            if (this.pcClient) {
-                this.videoService.attachVideoStream(stream, this.pcClient);
-            }
+        /**
+         * Ensure that the size is always even.
+         */
+        out.w = this.makeEven(out.w);
+        out.h = this.makeEven(out.h);
+        return out;
+    }
+    sendResize(size) {
+        this.commandsSender.sendCommandToUnreal({
+            command: MetaBoxCommand.FChangeResolutionCommand,
+            payload: { resolution: { x: size.w, y: size.h } },
         });
     }
-    async setupTransceiversAsync(pc) {
-        const hasTransceivers = pc.getTransceivers().length > 0;
-        // Set up a transceiver for getting UE video
-        pc.addTransceiver('video', { direction: 'recvonly' });
-        // Set up a transceiver for sending mic audio to UE and receiving audio from UE
-        if (!this.useMic) {
-            pc.addTransceiver('audio', { direction: 'recvonly' });
-        }
-        else {
-            const audioSendOptions = this.useMic
-                ? {
-                    autoGainControl: false,
-                    channelCount: 1,
-                    echoCancellation: false,
-                    latency: 0,
-                    noiseSuppression: false,
-                    sampleRate: 48000,
-                    sampleSize: 16,
-                    volume: 1.0,
-                }
-                : false;
-            // Note using mic on android chrome requires SSL or chrome://flags/ "unsafely-treat-insecure-origin-as-secure"
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: false,
-                audio: audioSendOptions,
-            });
-            if (stream) {
-                if (hasTransceivers) {
-                    for (const transceiver of pc.getTransceivers()) {
-                        if (transceiver &&
-                            transceiver.receiver &&
-                            transceiver.receiver.track &&
-                            transceiver.receiver.track.kind === 'audio') {
-                            for (const track of stream.getTracks()) {
-                                if (track.kind && track.kind === 'audio') {
-                                    await transceiver.sender.replaceTrack(track);
-                                    transceiver.direction = 'sendrecv';
-                                }
-                            }
-                        }
-                    }
-                }
-                else {
-                    for (const track of stream.getTracks()) {
-                        if (track.kind && track.kind === 'audio') {
-                            pc.addTransceiver(track, { direction: 'sendrecv' });
-                        }
-                    }
-                }
-            }
-            else {
-                pc.addTransceiver('audio', { direction: 'recvonly' });
+    makeEven(value) {
+        return Math.floor((value + 1) / 2) * 2;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, studioResolutionSize: { classPropertyName: "studioResolutionSize", publicName: "studioResolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnrealSceneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-unreal-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AfkTimeoutModalComponent,
+                        UnrealStatusComponent,
+                        FreezeFrameComponent,
+                        VideoStatsComponent,
+                        ResumeStreamButtonComponent,
+                        ImageLoadingSrcComponent,
+                        IntroSrcComponent,
+                    ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], studioResolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "studioResolutionSize", required: false }] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }] } });
+
+class WebrtcErrorModalComponent {
+    #dialogRef = inject(DialogRef);
+    #store = inject(Store);
+    close() {
+        this.#dialogRef.close();
+    }
+    closeModalWithCirrusDisconnect() {
+        this.#store
+            .select(unrealFeature.selectCirrusConnected)
+            .pipe(take(1))
+            .subscribe((isConnected) => {
+            if (!isConnected) {
+                this.#store.dispatch(disconnectStream({
+                    reason: DisconnectReason.DropConnection,
+                    message: 'Modal Drop Connection',
+                }));
             }
+            this.close();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
+        }] });
+
+class FilterSettingsComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.storageKey = 'LBMFilterSettings';
+        this.defaultFilterModel = { ...DefaultFilterModel };
+        this.settings = { ...DefaultFilterModel };
+    }
+    ngOnInit() {
+        const savedSettings = localStorage.getItem(this.storageKey);
+        if (savedSettings) {
+            this.dispatch(JSON.parse(savedSettings));
         }
     }
-    setupDataChannelCallbacks(datachannel) {
+    togglePanel() {
+        this.settings.panelOpen = !this.settings.panelOpen;
+        this.saveSettings();
+    }
+    saveSettings() {
+        const valid = Object.entries(this.settings).reduce((acc, [key, value]) => {
+            return Truthy(value) ? { ...acc, [key]: value } : acc;
+        }, {});
+        this.dispatch({ ...DefaultFilterModel, ...valid });
+    }
+    dispatch(settings) {
         try {
-            Logger.log(`[DATACHANNEL] Setting up datachannel "${datachannel.label}" callbacks...`);
-            this.commandTelemetryService.trackStartCommand('EXT-DataChannel Connection');
-            // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
-            datachannel.binaryType = 'arraybuffer';
-            fromEvent(datachannel, 'close')
-                .pipe(
-            // Only dispatch disconnect if not already reconnecting to avoid infinite loops
-            filter(() => !this.isReconnecting()), take(1))
-                .subscribe((e) => {
-                Logger.warn(`[DATACHANNEL] Data channel disconnected: ${datachannel.label}(${datachannel.id})`, e);
-                this.store.dispatch(disconnectStream({
-                    reason: DisconnectReason.DataChannelClosed,
-                    message: 'DataChannelClosed',
-                }));
-            });
-            fromEvent(datachannel, 'error')
-                .pipe(takeUntil(this.disconnect$))
-                .subscribe((e) => {
-                const message = `[DATACHANNEL] Data channel "${datachannel.label}" error. id:${datachannel.id}`;
-                Logger.error(message, e);
-            });
-            fromEvent(datachannel, 'open')
-                .pipe(tap$1(() => {
-                Logger.info(`[DATACHANNEL] Data channel "${datachannel.label}" connected. id:${datachannel.id}`);
-            }), takeUntil(this.disconnect$))
-                .subscribe(() => {
-                this.commandTelemetryService.trackStopCommand('EXT-DataChannel Connection');
-                this.onDataChannelConnected();
-            });
-            fromEvent(datachannel, 'message')
-                .pipe(
-            /* tap((e: MessageEvent) => {
-              const view = new Uint8Array(e.data);
-              Logger.info(
-                `[DATACHANNEL] Message received on "${datachannel.label}" id=${datachannel.id}, byteCode=${view[0]}, size=${view.byteLength}`,
-              );
-            }),*/
-            map$1((e) => e.data), takeUntil(this.disconnect$))
-                .subscribe((data) => this.onDataChannelMessage$.next(data));
-            return datachannel;
+            localStorage.setItem(this.storageKey, JSON.stringify(settings));
         }
         catch (e) {
-            Logger.warn('[DATACHANNEL] Datachannel setup caused an exception: ', e);
-            return null;
+            Logger.error('Storage not available, Error saving filter settings:', e);
         }
+        Object.assign(this.settings, settings);
+        Object.assign(FilterModel, settings);
+        this.store.dispatch(setKalmanSettings({ settings }));
     }
-    onDataChannelConnected() {
-        let statusMessage = 'Session connected, video stream starting.';
-        if (navigator.userAgent.includes('Firefox')) {
-            statusMessage +=
-                '\n If you are experiencing connection problems please try Google Chrome';
-        }
-        this.store.dispatch(dataChannelConnected({ statusMessage }));
+    reset() {
+        this.dispatch({
+            ...DefaultFilterModel,
+            panelOpen: this.settings.panelOpen,
+        });
     }
-    /**
-     * Creates an SDP offer, applies SDP munging, sets it as local description,
-     * and sends it to the server via signaling.
-     * Transceivers already configure media directions, so deprecated
-     * offerToReceive* options are not used.
-     */
-    async createOffer(pcClient) {
-        try {
-            const offer = await pcClient.createOffer();
-            offer.sdp = this.mungeSDP(offer.sdp ?? '');
-            await pcClient.setLocalDescription(offer);
-            this.signallingSrv.send(offer);
-        }
-        catch {
-            Logger.error("Couldn't create offer");
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-filter-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"] }]
+        }] });
+
+class LowBandwidthDetectorComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.dialog = inject(Dialog);
+        this.destroyRef = inject(DestroyRef);
+        this.videoService = inject(VideoService);
+        this.isDevMode = inject(DevModeService).isDevMode;
+        this.viewportReady$ = this.store.select(unrealFeature.selectViewportReady);
+        this.isLowBandwidth$ = this.store.select(unrealFeature.selectLowBandwidth);
+        this.lowBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Truthy));
+        this.highBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Falsy));
+        this.viewPortDestroyedTrigger$ = this.viewportReady$.pipe(distinctUntilChanged$1(), filter(Falsy));
+        this.aggregatedStats$ = this.videoService.videoStats$.pipe(map((data) => data.aggregatedStats), share());
+        this.nativeQuality$ = this.videoService.videoStats$.pipe(map((data) => data.quality));
+        this.monitoringTrigger$ = this.viewportReady$
+            .pipe(combineLatestWith(this.isLowBandwidth$), map(([viewPortReady, isLowBandwidth]) => viewPortReady && !isLowBandwidth))
+            .pipe(share());
+        this.reTrigger$ = this.monitoringTrigger$.pipe(map(() => ({ quality: 'lime' })));
+        this.canSwitchToLowBand$ = this.monitoringTrigger$.pipe(debounceTime(100), switchMap((canSwitch) => concat(of(false), timer(FilterModel.monitoringDelayTime).pipe(map(() => canSwitch))).pipe(take(2), takeUntil$1(this.monitoringTrigger$))), distinctUntilChanged$1(), share());
+        this.videoQuality$ = merge(this.nativeQuality$, this.reTrigger$).pipe(share(), takeUntil$1(this.viewPortDestroyedTrigger$));
+        this.fps$ = this.aggregatedStats$.pipe(map((data) => data.framesPerSecond || 0));
+        this.bitrateDrop$ = this.aggregatedStats$.pipe(map((data) => data.dataFlowCheckResult), filter((br) => br.isDropDetected), takeUntil$1(merge(this.viewPortDestroyedTrigger$, this.reTrigger$)));
+        this.fps = toSignal(this.fps$, { initialValue: 0 });
+        this.nativeQuality = toSignal(this.nativeQuality$);
+        this.isLowBandwidth = toSignal(this.isLowBandwidth$);
+        this.aggregatedStats = toSignal(this.aggregatedStats$);
+        this.isReducedQuality = signal(false, ...(ngDevMode ? [{ debugName: "isReducedQuality" }] : []));
+        this.isIndicatorExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isIndicatorExpanded" }] : []));
+        this.isIndicatorExpandedTrigger$ = toObservable(this.isIndicatorExpanded).pipe(skip(1), distinctUntilChanged$1(), filter(Falsy));
     }
-    /**
-     * Creates an SDP answer, applies SDP munging, sets it as local description,
-     * and sends it to the server via signaling.
-     */
-    async createAnswer(pcClient) {
-        try {
-            const answer = await pcClient.createAnswer();
-            answer.sdp = this.mungeSDP(answer.sdp ?? '');
-            await pcClient.setLocalDescription(answer);
-            this.signallingSrv.send(answer);
+    ngOnInit() {
+        this.lowBandwidthTrigger$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.toggleIndicator(true));
+        merge(this.viewPortDestroyedTrigger$, this.highBandwidthTrigger$)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.isReducedQuality.set(false));
+        this.canSwitchToLowBand$
+            .pipe(filter(Truthy), tap(() => {
+            BITRATE_MONITOR.reset();
+            this.isReducedQuality.set(false);
+        }), switchMap(() => this.bitrateDrop$), tap(this.trySetLowBandwidth.bind(this)), map((dataFlowResult) => dataFlowResult?.isDropDetected), distinctUntilChanged$1(), tap(() => {
+            this.isReducedQuality.set(true);
+        }), switchMap(() => this.videoQuality$), filter((quality) => quality === 'lime'), tap(() => this.isReducedQuality.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    trySetLowBandwidth(dataFlowResult) {
+        // Evaluate FPS and native quality
+        const isFpsLow = this.fps() < FilterModel.minimumFps;
+        const isNativeQualityRed = this.nativeQuality() === 'red';
+        const shouldSwitch = isNativeQualityRed || isFpsLow;
+        // Exit if conditions are not met or already in low bandwidth
+        if (!shouldSwitch || this.isLowBandwidth())
+            return;
+        const { quality, activeMedian } = dataFlowResult;
+        const isQualityRed = quality === 'red';
+        const isLowBitrate = activeMedian < FilterModel.minimumBitrate;
+        // Final check for a red drop or low bitrate, or low FPS
+        if (isQualityRed || isLowBitrate || isFpsLow) {
+            let reason;
+            if (isFpsLow) {
+                reason = `FPS < ${FilterModel.minimumFps}`;
+            }
+            else if (quality === 'red') {
+                reason = `Drop > ${FilterModel.redFlag}%`;
+            }
+            else {
+                reason = `Speed < ${FilterModel.minimumBitrate}`;
+            }
+            Logger.info(`LBM DETECTED: ${reason}, switching to low bandwidth; `, dataFlowResult.message);
+            this.store.dispatch(changeLowBandwidth({
+                lowBandwidth: true,
+                stats: {
+                    dataFlowResult,
+                    reason,
+                    triggerTime: this.aggregatedStats()?.runTime ?? 0,
+                },
+            }));
         }
-        catch (e) {
-            Logger.error("Couldn't create answer", e);
+    }
+    toggleIndicator(value) {
+        this.isIndicatorExpanded.set(value);
+        if (value) {
+            this.hideIndicatorAfterDelay();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2 }); }
+    hideIndicatorAfterDelay() {
+        timer(3000)
+            .pipe(take(1), takeUntil$1(this.isIndicatorExpandedTrigger$))
+            .subscribe(() => this.toggleIndicator(false));
+    }
+    openLBMDialog() {
+        this.dialog
+            .open(LowBandwidthModalComponent)
+            .closed.pipe(filter(Truthy))
+            .subscribe(() => {
+            this.toggleIndicator(false);
+            this.store.dispatch(changeLowBandwidth({ lowBandwidth: false }));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"], dependencies: [{ kind: "component", type: FilterSettingsComponent, selector: "app-filter-settings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WebRtcPlayerService2, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"] }]
+        }] });
 
 function provideAngularUnrealModule(config) {
     return makeEnvironmentProviders([
@@ -6151,18 +6175,23 @@ function provideAngularUnrealModule(config) {
         ConsoleExtensionsService,
         InputService,
         VideoService,
+        RegionsPingService,
+        FileReceiverService,
+        FileHandlerService,
+        AnalyticsService,
+        UnrealCallbackService,
         {
             provide: WebRtcPlayerService,
             useClass: config?.newWebRtcConnector
                 ? WebRtcPlayerService2
                 : WebRtcPlayerService,
         },
-        RegionsPingService,
-        FileReceiverService,
-        FileHandlerService,
-        FpsMonitorService,
-        AnalyticsService,
-        UnrealCallbackService,
+        {
+            provide: FpsMonitorService,
+            useClass: config?.playwright || config?.fpsMonitor
+                ? FpsMonitorPlaywrightService
+                : FpsMonitorService,
+        },
         {
             provide: StreamStatusTelemetryService,
             useClass: config?.playwright
@@ -6232,5 +6261,5 @@ function provideAngularUnrealModule(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AFKService, AfkPlaywrightService, AfkTimeoutModalComponent, AggregatorPlaywrightService, AggregatorService, AnalyticsService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, CommandTelemetryPlaywrightService, CommandTelemetryService, CommandsEffects, ConfigHandler, ConsoleExtensionsPlaywrightService, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DEFAULT_RECONNECT_DELAY_MS, DEFAULT_RECONNECT_ENABLED, DEFAULT_RECONNECT_MAX_ATTEMPTS, DEFAULT_RECONNECT_ON_DATACHANNEL_CLOSE, DEFAULT_RECONNECT_ON_ICE_FAILURE, DataFlowMonitor, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverPlaywrightService, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFramePlaywrightService, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputPlaywrightService, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MessageType, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PingHandler, PlayerCountHandler, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingPlaywrightService, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryPlaywrightService, StreamStatusTelemetryService, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, UnrealCommunicatorPlaywrightService, UnrealCommunicatorService, UnrealEffects, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, commandsFeature, commandsReducer, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getRtcErrorMessage, iceConnectionFailed, initSignalling, keepMaxUntilReset, provideAngularUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsShowPopupWithoutAutoStart, selectIsVideoPlayingAndDataChannelConnected, selectLastCommandInProgress, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setKalmanSettings, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setViewportNotReady, setViewportReady, showUnrealErrorMessage, smoothTransition, startStream, trackMixpanelEvent, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
+export { AFKService, AfkPlaywrightService, AfkTimeoutModalComponent, AggregatorPlaywrightService, AggregatorService, AnalyticsService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, CommandTelemetryPlaywrightService, CommandTelemetryService, CommandsEffects, ConfigHandler, ConsoleExtensionsPlaywrightService, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DEFAULT_RECONNECT_DELAY_MS, DEFAULT_RECONNECT_ENABLED, DEFAULT_RECONNECT_MAX_ATTEMPTS, DEFAULT_RECONNECT_ON_DATACHANNEL_CLOSE, DEFAULT_RECONNECT_ON_ICE_FAILURE, DataFlowMonitor, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverPlaywrightService, FileReceiverService, FilterSettingsComponent, FpsMonitorPlaywrightService, FpsMonitorService, FreezeFrameComponent, FreezeFramePlaywrightService, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputPlaywrightService, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MessageType, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PingHandler, PlayerCountHandler, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingPlaywrightService, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryPlaywrightService, StreamStatusTelemetryService, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, UnrealCommunicatorPlaywrightService, UnrealCommunicatorService, UnrealEffects, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebRtcPlayerService2, WebrtcErrorModalComponent, abortEstablishingConnection, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, commandsFeature, commandsReducer, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getRtcErrorMessage, iceConnectionFailed, initSignalling, keepMaxUntilReset, provideAngularUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsShowPopupWithoutAutoStart, selectIsVideoPlayingAndDataChannelConnected, selectLastCommandInProgress, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setKalmanSettings, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setViewportNotReady, setViewportReady, showUnrealErrorMessage, smoothTransition, startStream, trackMixpanelEvent, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map