@3dsource/angular-unreal-module 0.0.108 → 0.0.110-dev.0

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

@@ -1,16 +1,17 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectionStrategy, Component, Injectable, DestroyRef, signal, Pipe, input, ElementRef, viewChild, effect, untracked, afterNextRender, HostListener, computed, output, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
 import { SourceButtonComponent, SourceLoadingComponent } from '@3dsource/source-ui-native';
-import { map as map$1, distinctUntilChanged, takeWhile, filter, tap, withLatestFrom, exhaustMap, catchError, takeUntil, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, delay, skip as skip$1 } from 'rxjs/operators';
+import { map as map$1, distinctUntilChanged, takeWhile, filter, tap, withLatestFrom, exhaustMap, catchError, takeUntil, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1, delay, skip as skip$1 } from 'rxjs/operators';
 import { Logger, calculateMedian, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, whereNot, Truthy, Falsy, tapLog, generateUuid, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
-import { merge, map, scan, concatMap, of, animationFrameScheduler, interval, Observable, debounceTime, switchMap, take, fromEvent, EMPTY, timer, timeout, mergeMap, Subject, skip, share, from, throwError, defer, retry, tap as tap$1, startWith, takeUntil as takeUntil$1, auditTime, filter as filter$1, throttleTime, BehaviorSubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
+import { merge, map, scan, concatMap, of, animationFrameScheduler, interval, Observable, debounceTime, switchMap, take, fromEvent, EMPTY, timer, timeout, mergeMap, Subject, skip, share, from, throwError, defer, retry, tap as tap$1, startWith, takeUntil as takeUntil$1, throttleTime, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, pairwise, Subscription, bufferTime, BehaviorSubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
 import { createAction, props, createReducer, on, createFeature, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, createEffect, ofType, provideEffects } from '@ngrx/effects';
 import { concatLatestFrom } from '@ngrx/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { MetaBoxCommand } from '@3dsource/types-unreal';
+import { MetaBoxCommand, EPayloadVersion } from '@3dsource/types-unreal';
+import { v4 } from 'uuid';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgOptimizedImage, AsyncPipe, JsonPipe } from '@angular/common';
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -150,6 +151,7 @@ const commandCompleted = createAction(scoped$1 `command completed`, props());
 
 const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
 const trackMixpanelEvent = createAction(scoped `track mixpanel event`, props());
+const trackTelemetryData = createAction(scoped `track telemetry data`, props());
 const changeLowBandwidth = createAction(scoped `change low bandwidth`, props());
 const setMaxFps = createAction(scoped `change fps`, props());
 const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
@@ -184,6 +186,47 @@ const changeStreamResolutionAction = createAction(scoped `change stream resoluti
 const changeStreamResolutionSuccessAction = createAction(scoped `change stream resolution success action`, props());
 const setSignalingName = createAction(scoped `set aws instanceName`, props());
 const setOrchestrationParameters = createAction(scoped `set orchestration parameters`, props());
+/**
+ * Dispatched when the orchestration server signals that the reserved
+ * instance is ready to serve the stream (`instanceReady` WS message).
+ * Emitted for observability only — no reducer state change.
+ */
+const instanceReady = createAction(scoped `instance ready`);
+/**
+ * Dispatched when `RegionsPingService.getFastest()` begins — right
+ * before the region-list HTTP request goes out. Bookends the entire
+ * region-discovery flow together with {@link regionResolved}.
+ * Observability-only — no state change.
+ */
+const regionPingFetchStart = createAction(scoped `region ping fetch start`);
+/**
+ * Dispatched once `RegionsPingService.getProviders()` returns the region
+ * list — i.e. the fetch step is done and the actual per-region ping
+ * sweep is about to start. Splits the region-discovery waterfall into
+ * two legs: config fetch vs ping sweep. Observability-only.
+ */
+const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
+/**
+ * Dispatched once the closest region has been resolved by the
+ * regions-ping service. Carries every sampled ping RTT to the winning
+ * region (one entry per probe — `checkLatency` issues `ping_count`
+ * sequential pings per region) so consumers can inspect variance /
+ * jitter, not just the mean. Observability-only — no state change.
+ */
+const regionResolved = createAction(scoped `region resolved`, props());
+/**
+ * Dispatched around the HTTP polling roundtrip inside `getAwsInstance`
+ * (old orchestration flow). Only fires when polling is actually used
+ * (i.e. signaling URL is not a direct `ws://` / `wss://` endpoint).
+ * Observability-only — no state change.
+ */
+const pollingStarted = createAction(scoped `polling started`);
+const pollingEnded = createAction(scoped `polling ended`);
+/**
+ * Dispatched when the client has just sent an SDP answer back to Cirrus
+ * after receiving the server-initiated offer. Observability-only.
+ */
+const answerSent = createAction(scoped `answer sent`);
 const setOrchestrationMessage = createAction(scoped `set orchestration message`, props());
 const setOrchestrationProgress = createAction(scoped `set orchestration progress`, props());
 const setOrchestrationContext = createAction(scoped `set orchestration params`, props());
@@ -541,7 +584,9 @@ function IceCandidateHandler(msg) {
 }
 
 function InstanceReadyHandler() {
-    //Do nothing here
+    // No state change — emit the action purely so services that want to
+    // observe orchestration progress (e.g. telemetry) have a hook.
+    this.store.dispatch(instanceReady());
 }
 
 function InstanceReservedHandler(msg) {
@@ -1169,6 +1214,7 @@ const selectTotalProgress = createSelector(unrealFeature.selectStatusPercentSign
 });
 const selectClientAndViewIds = createSelector(unrealFeature.selectStreamClientCompanyId, unrealFeature.selectStreamViewId, (clientId, viewId) => ({ clientId, viewId }));
 const selectIsLoaderScreenVisible = createSelector(unrealFeature.selectViewportReady, unrealFeature.selectDataChannelConnected, unrealFeature.selectCirrusConnected, (viewReady, cirrusConnected, dataChannelConnected) => !viewReady || !cirrusConnected || !dataChannelConnected);
+const selectCirrusConnectionId = createSelector(unrealFeature.selectSsData, (data) => data?.connectionId);
 
 class UnrealErrorModalComponent {
     constructor() {
@@ -1179,10 +1225,10 @@ class UnrealErrorModalComponent {
     close() {
         this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\r\n  <header class=\"src-modal__header\">\r\n    <div\r\n      [attr.data-testid]=\"'unreal-error-header-title'\"\r\n      class=\"src-modal__title\"\r\n    >\r\n      Warning\r\n    </div>\r\n  </header>\r\n  <div class=\"src-modal__body\">\r\n    <div>{{ dialogData.content }}</div>\r\n  </div>\r\n  <div class=\"src-modal__footer\">\r\n    <src-button (onClick)=\"close()\">Ok</src-button>\r\n  </div>\r\n</div>\r\n", styles: [".src-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\r\n  <header class=\"src-modal__header\">\r\n    <div\r\n      [attr.data-testid]=\"'unreal-error-header-title'\"\r\n      class=\"src-modal__title\"\r\n    >\r\n      Warning\r\n    </div>\r\n  </header>\r\n  <div class=\"src-modal__body\">\r\n    <div>{{ dialogData.content }}</div>\r\n  </div>\r\n  <div class=\"src-modal__footer\">\r\n    <src-button (onClick)=\"close()\">Ok</src-button>\r\n  </div>\r\n</div>\r\n", styles: [".src-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div class=\"src-modal src-modal--small\">\r\n  <header class=\"src-modal__header\">\r\n    <div\r\n      [attr.data-testid]=\"'unreal-error-header-title'\"\r\n      class=\"src-modal__title\"\r\n    >\r\n      Warning\r\n    </div>\r\n  </header>\r\n  <div class=\"src-modal__body\">\r\n    <div>{{ dialogData.content }}</div>\r\n  </div>\r\n  <div class=\"src-modal__footer\">\r\n    <src-button (onClick)=\"close()\">Ok</src-button>\r\n  </div>\r\n</div>\r\n", styles: [".src-modal__header{padding:16px 24px 0}\n"] }]
         }] });
@@ -1568,10 +1614,10 @@ class UnrealEffects {
             }));
         }, { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealEffects }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -1585,10 +1631,10 @@ class CommandsEffects {
                 : json?.correlationId), filter(Truthy), map((id) => commandCompleted({ id })))));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CommandsEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CommandsEffects }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandsEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandsEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CommandsEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandsEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -1704,10 +1750,10 @@ class AFKService extends SubService {
             }
         }, 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AFKService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AFKService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AFKService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AFKService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1795,10 +1841,10 @@ class FreezeFrameService extends SubService {
             progress: 1,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FreezeFrameService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FreezeFrameService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FreezeFrameService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FreezeFrameService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2074,10 +2120,10 @@ class VideoService extends SubService {
             error: () => ({}),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VideoService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VideoService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VideoService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VideoService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VideoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VideoService, decorators: [{
             type: Injectable
         }] });
 
@@ -2283,10 +2329,10 @@ class CommandTelemetryService {
         this.trackTime(out);
         funcToDecorate(out);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CommandTelemetryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandTelemetryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CommandTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommandTelemetryService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2567,7 +2613,9 @@ 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 ?? '').pipe(filter(Truthy), take(1))), takeUntil(this.abort$))).pipe(
+        return defer(() => {
+            return 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) => {
@@ -2701,6 +2749,9 @@ class SignallingService extends SubService {
                     };
                 }));
             }
+            // Old (HTTP-polling) orchestration flow — mark the roundtrip so
+            // the signaling-phase timeline can show it as a distinct segment.
+            this.store.dispatch(pollingStarted());
             return this.store.select(selectClientAndViewIds).pipe(
             // Log missing IDs without altering the stream.
             tap(({ clientId, viewId }) => {
@@ -2733,6 +2784,7 @@ class SignallingService extends SubService {
             }), 
             // Map a valid orchestration payload into the final AwsInstance.
             map$1((data) => {
+                this.store.dispatch(pollingEnded());
                 const wsUrl = httpUrlToWs(`${location.protocol}//${data.signallingServer}`);
                 return {
                     wsUrl,
@@ -2860,10 +2912,10 @@ class SignallingService extends SubService {
         Logger.log('Start Getting Region');
         return this.regionsPingService.getFastest().pipe(take(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SignallingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SignallingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SignallingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SignallingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2878,103 +2930,243 @@ class WebRtcPlayerService extends SubService {
         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() {
-        const iceCandidateBuffer = [];
-        const processBuffer = () => {
-            iceCandidateBuffer.forEach((cnd) => {
-                this.handleCandidateFromServer(cnd);
-            });
-            iceCandidateBuffer.length = 0;
-        };
         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) => {
-            this.receiveAnswer(answer);
-            processBuffer();
-        });
-        this.signallingSrv.onOffer$.pipe(filter(Truthy)).subscribe(() => {
-            void this.createWebRtcOffer();
+            void this.handleServerAnswer(answer);
         });
-        this.signallingSrv.onWebRtcIce$
-            .pipe(withLatestFrom(this.signallingSrv.onWebRtcAnswer$))
-            .subscribe(([candidate, answerEstablished]) => {
-            this.commandTelemetryService.trackStopCommand('EXT-iceCandidate', true, { multi: true });
-            iceCandidateBuffer.push(candidate);
-            if (answerEstablished) {
-                processBuffer();
+        // 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);
             }
         });
     }
+    /**
+     * 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',
+            }));
+        }
+    }
+    /**
+     * 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);
+        }
+    }
+    /** 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;
+    }
+    /**
+     * 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 offer');
-        let offer;
+        Logger.info('Creating client-initiated offer');
         try {
-            offer = await this.createPeerConnection(this.cfg);
+            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 {
+        catch (e) {
+            Logger.error('Failed to create WebRTC offer', e);
             this.store.dispatch(disconnectStream({
                 reason: DisconnectReason.WebRTCError,
                 message: 'WebRTCError: Offer Error',
             }));
         }
-        return offer;
+    }
+    /**
+     * 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();
+        });
     }
     createDataChannel(pc, label, options) {
-        // This is the primary data channel code path when we are "offering"
         const datachannel = pc.createDataChannel(label, options);
         return this.setupDataChannelCallbacks(datachannel);
     }
-    receiveAnswer(answer) {
-        this.pcClient?.setRemoteDescription(answer);
-    }
     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 forcing TURN, reject any candidates not relay
             if (this.forceTURN) {
-                // check if no relay address is found, if so, we are assuming it means no TURN server
                 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(function () {
-                //  Logger.error('Failed to add ICE candidate', e);
+            this.pcClient?.addIceCandidate(candidate).catch((e) => {
+                Logger.warn('Failed to add ICE candidate', e);
             });
         }
         catch (e) {
             Logger.error('Error handleCandidateFromServer', e);
         }
     }
-    mungeSDP(offer) {
-        let audioSDP = '';
-        // set max bitrate to the highest bitrate Opus supports
-        audioSDP += 'maxaveragebitrate=510000;';
+    /**
+     * 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');
+    }
+    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)
+            // 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
-            ? 'sprop-stereo=0;stereo=0;'
-            : 'sprop-stereo=1;stereo=1;';
-        // enable in-band forward error correction for opus audio
+        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.
-        offer.sdp = offer.sdp?.replace('useinbandfec=1', audioSDP);
+        mungedSDP = mungedSDP?.replace('useinbandfec=1', audioSDP);
+        return mungedSDP;
     }
     /**
-     * Closes existing PeerConnection
+     * Closes existing PeerConnection and DataChannel, resets negotiation state.
      */
     closePC() {
         if (this.pcClient) {
@@ -2987,6 +3179,8 @@ class WebRtcPlayerService extends SubService {
         }
         this.dcClient?.close();
         this.dcClient = null;
+        this.remoteDescriptionSet = false;
+        this.iceCandidateBuffer.length = 0;
     }
     canSend() {
         return this.dcClient && this.dcClient.readyState === 'open';
@@ -3023,9 +3217,9 @@ class WebRtcPlayerService extends SubService {
         }
     }
     /**
-     * Reconnect only the WebRTC peer connection without re-establishing signaling.
-     * This closes the current PeerConnection and creates a new offer through
-     * the existing WebSocket connection.
+     * 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() {
@@ -3058,11 +3252,7 @@ class WebRtcPlayerService extends SubService {
         this.cfg.bundlePolicy = urlParams.has('ForceMaxBundle')
             ? 'max-bundle'
             : 'balanced';
-        //**********************
-        //Variables
-        //**********************
-        this.pcClient = null;
-        this.dcClient = null;
+        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:';
@@ -3071,23 +3261,7 @@ class WebRtcPlayerService extends SubService {
             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'");
         }
-    }
-    async createPeerConnection(config) {
-        this.closePC();
-        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);
-        await this.setupTransceiversAsync(this.pcClient);
-        this.dcClient = this.createDataChannel(this.pcClient, 'UnrealDcConnection', {
-            // See https://www.w3.org/TR/webrtc/#dom-rtcdatachannelinit for values (this is needed for Firefox to be consistent with Chrome.)
-            ordered: true,
-        });
-        this.disconnect$.pipe(take(1)).subscribe(() => {
-            this.closePC();
-        });
-        await this.createOffer(this.pcClient);
+        this.setupPeerConnection(this.cfg);
     }
     handlePeerConnectionEvents(pcClient) {
         fromEvent(pcClient, 'signalingstatechange')
@@ -3116,8 +3290,10 @@ class WebRtcPlayerService extends SubService {
         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(() => Logger.info('Data channel created for us by browser as we are a receiving peer.')), map$1((e) => e.channel), takeUntil(this.disconnect$))
+            .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);
         });
@@ -3225,7 +3401,14 @@ class WebRtcPlayerService extends SubService {
                 this.onDataChannelConnected();
             });
             fromEvent(datachannel, 'message')
-                .pipe(map$1((e) => e.data), takeUntil(this.disconnect$))
+                .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;
         }
@@ -3242,34 +3425,55 @@ class WebRtcPlayerService extends SubService {
         }
         this.store.dispatch(dataChannelConnected({ statusMessage }));
     }
+    /**
+     * Creates an SDP offer, applies SDP munging, sets it as a 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({
-                offerToReceiveAudio: false, //Note: if you don't need audio, you can get improved latency by turning this off.
-                offerToReceiveVideo: true,
-            });
-            this.mungeSDP(offer);
-            pcClient?.setLocalDescription(offer);
+            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.8", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebRtcPlayerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebRtcPlayerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const deepEqual = (a, b) => {
-    if (a === b)
-        return true;
-    // must both be objects (and not null)?
-    if (typeof a === 'object' &&
-        a !== null &&
+    /**
+     * Creates an SDP answer, applies SDP munging, sets it as a 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);
+            // Observability signal for the signaling waterfall — the handshake
+            // went "answer sent" between `offer received` and `datachannel_ready`.
+            this.store.dispatch(answerSent());
+        }
+        catch (e) {
+            Logger.error("Couldn't create answer", e);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WebRtcPlayerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WebRtcPlayerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const deepEqual = (a, b) => {
+    if (a === b)
+        return true;
+    // must both be objects (and not null)?
+    if (typeof a === 'object' &&
+        a !== null &&
         typeof b === 'object' &&
         b !== null) {
         // arrays?
@@ -3603,10 +3807,10 @@ class AggregatorService extends SubService {
                 Logger.warn(`unrecognized data received, packet ID ${view[0]}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AggregatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AggregatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AggregatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AggregatorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3694,10 +3898,10 @@ class ConsoleExtensionsService extends SubService {
         Logger.info('setWarnTime() => set time to appear the AFK window.');
         Logger.info('emitCommand(command) => send command to Unreal Engine.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ConsoleExtensionsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConsoleExtensionsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3713,10 +3917,10 @@ class DevModeService {
             localStorage.removeItem('devMode');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DevModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DevModeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3819,10 +4023,10 @@ class UnrealCommunicatorService {
     requestQualityControl() {
         this.sendInputData(new Uint8Array([MessageType.RequestQualityControl]).buffer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealCommunicatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealCommunicatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4315,6 +4519,7 @@ class InputService extends SubService {
 class RegionsPingService {
     constructor() {
         this.httpClient = inject(HttpClient);
+        this.store = inject(Store);
         this.unrealInitialConfig = inject(UNREAL_CONFIG, { optional: true });
         this.config = {
             ping_count: 2,
@@ -4324,7 +4529,15 @@ class RegionsPingService {
         };
     }
     getFastest(regionListUrl = this.unrealInitialConfig?.regionsPingUrl || '') {
-        return this.getProviders(regionListUrl).pipe(switchMap((providers) => this.getPingResult(providers)), catchError(() => of(null)), tapLog('PingResult'), map$1((data) => data?.region_code));
+        // Self-announce every lifecycle waypoint of the region-discovery
+        // flow (start / providers-fetched / resolved). The final
+        // `regionResolved` forwards the winner's full ping-sample array
+        // straight from `PingResult.result` — no aggregation.
+        this.store.dispatch(regionPingFetchStart());
+        return this.getProviders(regionListUrl).pipe(tap(() => this.store.dispatch(regionPingFetchEnd())), switchMap((providers) => this.getPingResult(providers)), catchError(() => of(null)), tapLog('PingResult'), tap((data) => this.store.dispatch(regionResolved({
+            region: data?.region_code ?? '',
+            pingsMs: data?.result ?? [],
+        }))), map$1((data) => data?.region_code));
     }
     getPingResult(providers) {
         const regions = providers.regions;
@@ -4405,19 +4618,18 @@ class RegionsPingService {
             throw error;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RegionsPingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RegionsPingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RegionsPingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RegionsPingService, decorators: [{
             type: Injectable
         }] });
 
 class StreamStatusTelemetryService {
-    #store;
-    #videoService;
     constructor() {
-        this.#store = inject(Store);
-        this.#videoService = inject(VideoService);
+        this.store = inject(Store);
+        this.actions$ = inject(Actions);
+        this.videoService = inject(VideoService);
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
         this.init();
     }
@@ -4425,13 +4637,47 @@ class StreamStatusTelemetryService {
         if (this.unrealConfig?.playwright) {
             return;
         }
-        this.#videoService.videoStats$
-            .pipe(withLatestFrom(this.#store.select(unrealFeature.selectAwsInstance), this.#store.select(unrealFeature.selectLowBandwidth), this.#store.select(unrealFeature.selectLowBandwidthStats), this.#store.select(unrealFeature.selectCirrusConnected)), auditTime(5000), filter(([, , , , cirrusConnected]) => cirrusConnected), map$1(([data, signalingServer, isLowBandwidth, lbmStats]) => this.mapEventData(data, signalingServer, isLowBandwidth, lbmStats)))
+        // Start a telemetry session on every `initSignalling` dispatch.
+        // switchMap cancels the previous session's inner pipeline on re-init.
+        // throttleTime leading+trailing emits the first event immediately and
+        // at most one event every 5s afterwards.
+        this.actions$
+            .pipe(ofType(initSignalling), switchMap$1(() => {
+            // Captured once per session — marks the UTC moment signalling started.
+            const startedAt = Date.now();
+            const startTimeUtc = new Date(startedAt).toISOString();
+            const signalingReadyTime$ = this.readyTimeSince(this.store.select(unrealFeature.selectCirrusConnected), startedAt);
+            const viewPortReadyTime$ = this.readyTimeSince(this.store.select(unrealFeature.selectViewportReady), startedAt);
+            return this.videoService.videoStats$.pipe(throttleTime(5000, asyncScheduler, {
+                leading: true,
+                trailing: true,
+            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), this.store.select(unrealFeature.selectLowBandwidth), this.store.select(unrealFeature.selectLowBandwidthStats), signalingReadyTime$, viewPortReadyTime$), map$1(([data, signalingServer, isLowBandwidth, lbmStats, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
+                data,
+                signalingServer,
+                isLowBandwidth,
+                lbmStats,
+                startTimeUtc,
+                signalingReadyTime,
+                viewPortReadyTime,
+            })));
+        }))
             .subscribe((data) => this.trackEventToMixPanel(data));
     }
-    mapEventData(data, signalingServer, isLowBandwidth, lbmStats) {
+    /**
+     * Emits `undefined` until `readyState$` first emits a truthy value,
+     * then emits the ms elapsed since `startedAt` and completes.
+     * Used with `withLatestFrom` so events carry a stable duration for the whole session.
+     */
+    readyTimeSince(readyState$, startedAt) {
+        return readyState$.pipe(filter(Boolean), take$1(1), map$1(() => Date.now() - startedAt), startWith$1(undefined));
+    }
+    mapEventData(params) {
+        const { data, signalingServer, isLowBandwidth, lbmStats, startTimeUtc, signalingReadyTime, viewPortReadyTime, } = params;
         const { bitrate, VideoEncoderQP, framesPerSecond, frameWidth, frameHeight, jitter, packetsLost, currentRoundTripTime, runTime, } = data.aggregatedStats;
         return {
+            startTimeUtc,
+            signalingReadyTime,
+            viewPortReadyTime,
             runTime,
             frameWidth,
             frameHeight,
@@ -4449,559 +4695,715 @@ class StreamStatusTelemetryService {
         };
     }
     trackEventToMixPanel(data) {
-        this.#store.dispatch(trackMixpanelEvent({ event: 'streamStatus', data }));
+        this.store.dispatch(trackMixpanelEvent({ event: 'streamStatus', data }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StreamStatusTelemetryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StreamStatusTelemetryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
-class WebRtcPlayerService2 extends SubService {
+const QP_RED_THRESHOLD = 35;
+const FPS_LOW_RATIO = 0.7; // p50 fps below 70% of target
+const UNLIMITED_REFERENCE_FPS = 60;
+const SAMPLE_WINDOW_MS = 5000;
+// Persistent per-browser identifier — survives page reloads. Used to group
+// multiple sessions of the same anonymous user for funnel / retention analysis.
+const USER_ID_STORAGE_KEY = 'sourceui.streamTelemetry.userId';
+class StreamStatusTelemetryService2 {
     constructor() {
-        super();
-        this.onDataChannelMessage$ = new Subject();
-        this.signallingSrv = inject(SignallingService);
+        this.store = inject(Store);
+        this.actions$ = inject(Actions);
         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() {
-        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);
-            }
-        });
-    }
-    /**
-     * 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',
-            }));
-        }
-    }
-    /**
-     * 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);
-        }
-    }
-    /** 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;
-    }
-    /**
-     * 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',
-            }));
-        }
-    }
-    /**
-     * 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();
-        });
-    }
-    createDataChannel(pc, label, options) {
-        const datachannel = pc.createDataChannel(label, options);
-        return this.setupDataChannelCallbacks(datachannel);
-    }
-    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);
-        }
-    }
-    /**
-     * 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');
-    }
-    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;
-    }
-    /**
-     * Closes existing PeerConnection and DataChannel, resets negotiation state.
-     */
-    closePC() {
-        if (this.pcClient) {
-            Logger.warn('Closing existing PeerConnection');
-        }
-        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;
-    }
-    canSend() {
-        return this.dcClient && this.dcClient.readyState === 'open';
-    }
-    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 yet reconnecting
-            this.tryReconnectOnSendFailure();
-        }
-    }
-    /**
-     * 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;
-        }
-        // 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 }));
-        }
-    }
-    /**
-     * 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;
-    }
-    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';
-        }
-        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.signallingService = inject(SignallingService);
+        this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
+        /**
+         * Per-browser anonymous user id. Read from `localStorage` on first access;
+         * if missing, a new UUID is generated and persisted. Included as
+         * `data.userId` on every emitted event — the server uses it to bucket
+         * per-session files under `data/<userId>/<sessionId>.jsonl`.
+         */
+        this.userId = this.getOrCreateUserId();
+        this.session = null;
+        /**
+         * Whether a session has already started during the current page lifetime.
+         * Used to distinguish a fresh page load (bootstrap measurement is
+         * meaningful) from a Resume/restart (the document is already loaded,
+         * so "bootstrap" is a no-op). Only the first session gets the bootstrap
+         * phase anchored at navigation start (perf.now() === 0).
+         */
+        this.hasStartedBefore = false;
+        /**
+         * Rolling snapshot of the currently selected WebRTC ICE candidate pair
+         * (local/remote type + url). Scanned over `videoStats$` so the stream
+         * *keeps* the first non-null pair even if later stats emit null — WebRTC
+         * doesn't un-select a pair mid-session, but the source is nullable. The
+         * `startWith(null)` seed makes `withLatestFrom` on this stream safe even
+         * before the first video stat arrives (common at data-channel-open).
+         */
+        this.selectedPair$ = this.videoService.videoStats$.pipe(map((s) => s.aggregatedStats.selectedPair ?? null), scan((acc, curr) => curr ?? acc, null), startWith(null));
+        /**
+         * Correlation-matched Observable: emits once when the first `loopBack`
+         * command's corresponding `command completed` action fires. Built from
+         * the two related actions — the command-started captures the correlation
+         * id, the command-completed with that id emits.
+         */
+        this.loopbackReceived$ = this.actions$.pipe(ofType(commandStarted), filter$1(({ command }) => command === 'loopBack'), take(1), switchMap(({ id }) => this.actions$.pipe(ofType(commandCompleted), filter$1((b) => b.id === id), take(1))));
+        // Overlay-referenced milestones — hoisted as fields so both
+        // `milestones: [...]` and `overlays: [...]` share the same object
+        // identity (the in-session Map keys milestones by that identity).
+        this.pollingStartedEntry = {
+            label: 'Polling started (HTTP orchestration)',
+            event: this.actions$.pipe(ofType(pollingStarted)),
+        };
+        this.awsInstanceResolvedEntry = {
+            label: 'Instance WS URL resolved',
+            event: this.actions$.pipe(ofType(setAwsInstance)),
+        };
+        this.loopbackReceivedEntry = {
+            label: 'LoopBack received',
+            event: this.loopbackReceived$,
+        };
+        this.signalingServerConnectedEntry = {
+            label: 'Websocket connected',
+            event: this.store
+                .select(unrealFeature.selectCirrusConnected)
+                .pipe(filter$1(Boolean), take(1)),
+        };
+        this.configReceivedEntry = {
+            label: 'Config received',
+            event: this.signallingService.onConfig$.pipe(filter$1(Boolean), take(1)),
+        };
+        /**
+         * Unified phase catalog — the single source of truth for everything
+         * this service tracks after `session_started`. Each entry is a phase;
+         * its `milestones` array is ordered chronologically and the *last*
+         * entry is the phase closer. When that closer's observable fires, the
+         * service emits one generic `stream.phase_ended` wire event with every
+         * display field the viewer needs.
+         *
+         * `phaseNo` is the array index; `startPhase` chains from the previous
+         * phase's `endPhase` — neither needs to be specified here.
+         */
+        this.phaseCatalog = [
+            {
+                label: 'Region resolving',
+                color: '#61afef',
+                milestones: [
+                    {
+                        label: 'Region ping fetch start',
+                        event: this.actions$.pipe(ofType(regionPingFetchStart)),
+                    },
+                    {
+                        label: 'Region ping fetch end',
+                        event: this.actions$.pipe(ofType(regionPingFetchEnd)),
+                    },
+                    // CLOSER — the `regionResolved` action carries the raw ping
+                    // samples (one per probe) from `RegionsPingService`; the
+                    // catalog flattens them to a comma-separated string since
+                    // `toPhaseParams` only accepts primitives.
+                    {
+                        label: 'Region resolved',
+                        event: this.actions$.pipe(ofType(regionResolved), take(1), map(({ region, pingsMs }) => ({
+                            region,
+                            pingsMs: pingsMs.length ? `${pingsMs.join(', ')} ms` : null,
+                        }))),
+                    },
+                ],
+            },
+            {
+                label: 'Signaling connection',
+                color: '#c678dd',
+                overlays: [
+                    {
+                        from: this.pollingStartedEntry,
+                        to: this.awsInstanceResolvedEntry,
+                        title: 'Polling → instance resolved (HTTP polling + AWS instance handle)',
+                    },
+                    {
+                        from: this.signalingServerConnectedEntry,
+                        to: this.configReceivedEntry,
+                        title: 'Signaling handshake (WS open → Cirrus config received)',
+                    },
+                ],
+                milestones: [
+                    this.pollingStartedEntry,
+                    {
+                        label: 'Polling ended (HTTP orchestration)',
+                        event: this.actions$.pipe(ofType(pollingEnded)),
+                    },
+                    this.awsInstanceResolvedEntry,
+                    this.signalingServerConnectedEntry,
+                    {
+                        label: 'Instance reserved (WS orchestration)',
+                        event: this.actions$.pipe(ofType(setOrchestrationParameters)),
+                    },
+                    {
+                        label: 'Instance ready (WS orchestration)',
+                        event: this.actions$.pipe(ofType(instanceReady)),
+                    },
+                    this.configReceivedEntry,
+                    {
+                        label: 'SSInfo received',
+                        event: this.store.select(unrealFeature.selectSsData).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.store.select(unrealFeature.selectAwsInstance)), map(([ssData, aws]) => ({
+                            client: aws.wsUrl,
+                            instanceName: aws.instanceName,
+                            ...ssData,
+                        }))),
+                    },
+                ],
+            },
+            {
+                label: 'WebRTC negotiation',
+                color: '#e5c07b',
+                milestones: [
+                    {
+                        label: 'Offer received',
+                        event: this.signallingService.onOffer$.pipe(filter$1(Boolean)),
+                    },
+                    {
+                        label: 'Answer sent (server-offer flow)',
+                        event: this.actions$.pipe(ofType(answerSent)),
+                    },
+                    {
+                        label: 'Answer received (client-offer flow)',
+                        event: this.signallingService.onWebRtcAnswer$.pipe(filter$1(Boolean)),
+                    },
+                    {
+                        label: 'First ICE candidate from server',
+                        event: this.signallingService.onWebRtcIce$.pipe(filter$1(Boolean)),
+                    },
+                    {
+                        label: 'Last ICE candidate from server',
+                        event: this.signallingService.onWebRtcIce$.pipe(filter$1(Boolean)),
+                        mode: 'last',
+                    },
+                    // CLOSER — snaps negotiation diagnostics and the Cirrus
+                    // streamer identity (`ssData`, reliably populated by DC-open
+                    // time) into phase-3 params:
+                    //  - `iceCandidateCount` (total ICE candidates from server — too
+                    //    few hints at a restrictive network)
+                    //  - `handshakeFlow` (server-offer vs client-offer; we only use
+                    //    server-offer today, but the detector stays in place)
+                    //  - `instanceType` / `branchInfo` / version / path / app /
+                    //    `connectionId` (streamer identity, from `ssInfo` message)
+                    {
+                        label: 'Data channel connected',
+                        event: this.store
+                            .select(unrealFeature.selectDataChannelConnected)
+                            .pipe(filter$1(Boolean), take(1), map(() => ({
+                            iceCandidateCount: this.session?.iceCandidateCount ?? 0,
+                            handshakeFlow: this.session?.handshakeFlow ?? null,
+                        }))),
+                    },
+                ],
+            },
+            {
+                label: 'Unreal communication',
+                color: '#98c379',
+                overlays: [
+                    {
+                        from: this.loopbackReceivedEntry,
+                        title: 'Stabilization (warm up)',
+                    },
+                ],
+                milestones: [
+                    {
+                        label: 'First command started',
+                        event: this.actions$.pipe(ofType(commandStarted)),
+                    },
+                    {
+                        label: 'LoopBack sent',
+                        event: this.actions$.pipe(ofType(commandStarted), filter$1(({ command }) => command === 'loopBack')),
+                    },
+                    this.loopbackReceivedEntry,
+                    // CLOSER — flattens the selected ICE candidate pair into two
+                    // string params (local / remote), and snapshots the running
+                    // command counter so phase 5 shows how many commands the client
+                    // fired at Unreal before the viewport was ready.
+                    {
+                        label: 'Viewport ready',
+                        event: this.store.select(unrealFeature.selectViewportReady).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.selectedPair$), map(([, selectedPair]) => ({
+                            localCandidate: fmtCandidate(selectedPair?.local),
+                            remoteCandidate: fmtCandidate(selectedPair?.remote),
+                            commandCount: this.session?.commandCount ?? 0,
+                        }))),
+                    },
+                ],
+            },
+        ];
+        if (this.unrealConfig?.playwright)
+            return;
+        if (!this.unrealConfig?.streamTelemetryV2)
+            return;
+        this.init();
+    }
+    getOrCreateUserId() {
+        try {
+            const existing = localStorage.getItem(USER_ID_STORAGE_KEY);
+            if (existing && existing.length > 0)
+                return existing;
+            const fresh = v4();
+            localStorage.setItem(USER_ID_STORAGE_KEY, fresh);
+            return fresh;
+        }
+        catch {
+            // localStorage disabled (private-mode restrictions, quota, etc.)
+            // Fall back to a per-tab ephemeral id so telemetry keeps working.
+            return v4();
         }
-        this.setupPeerConnection(this.cfg);
     }
-    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 });
+    init() {
+        // Start a new session on every initSignalling dispatch.
+        this.actions$
+            .pipe(ofType(initSignalling))
+            .subscribe(() => this.startSession());
+        // End the current session when Cirrus drops (true → false transition).
+        this.store
+            .select(unrealFeature.selectCirrusConnected)
+            .pipe(pairwise(), filter$1(([prev, curr]) => prev && !curr))
+            .subscribe(() => this.endSession('disconnected'));
+        // Close the session when the tab is hidden / being evicted from bfcache.
+        // `pagehide` fires in more cases than `beforeunload` (covers iOS Safari, bfcache).
+        fromEvent(window, 'pagehide').subscribe(() => this.endSession('pagehide'));
+    }
+    startSession() {
+        // If a previous session is still active, close it first.
+        this.endSession('restart');
+        const id = v4();
+        const startedAt = Date.now();
+        const startedAtPerf = performance.now();
+        const sub = new Subscription();
+        // Anchor selection:
+        //  - First session on this page → anchor at navigation start (0).
+        //    `performance.now()` is already "ms since navigation start", so
+        //    `session_started.duration` becomes the full page-load + idle-time
+        //    leading up to the first stream start (i.e. the real bootstrap).
+        //  - Resume/restart sessions → anchor at the session's own start.
+        //    The document is already loaded — a "bootstrap" phase would either
+        //    balloon (to include all prior idle time) or be misleading, so we
+        //    suppress it by making the anchor == session_started.
+        const isFirstSession = !this.hasStartedBefore;
+        this.hasStartedBefore = true;
+        const anchorPerf = isFirstSession ? 0 : startedAtPerf;
+        const times = new Map();
+        this.session = {
+            id,
+            startedAt,
+            startedAtPerf,
+            anchorPerf,
+            // Initial milestone anchor = anchorPerf. For the first session this is
+            // navigation start (0), so `session_started.duration` becomes the full
+            // page-load elapsed. For Resume sessions anchor == startedAtPerf, so
+            // `session_started.duration` is 0 (no bootstrap phase).
+            lastMilestonePerf: anchorPerf,
+            seq: 0,
+            sub,
+            qpBad: false,
+            fpsLow: false,
+            maxFpsTarget: UNLIMITED_REFERENCE_FPS,
+            iceCandidateCount: 0,
+            handshakeFlow: null,
+            commandCount: 0,
+            times,
+        };
+        // Side-channel counters for WebRTC negotiation diagnostics — shown
+        // as phase-3 params on the `datachannel_connected` closer. Kept
+        // imperative (session-scoped) so no RxJS hot-stream plumbing is
+        // needed to survive the subscribe-on-close timing.
+        sub.add(this.signallingService.onWebRtcIce$
+            .pipe(filter$1(Boolean))
+            .subscribe(() => {
+            if (this.session)
+                this.session.iceCandidateCount++;
+        }));
+        sub.add(this.actions$.pipe(ofType(answerSent), take(1)).subscribe(() => {
+            if (this.session)
+                this.session.handshakeFlow = 'server-offer';
+        }));
+        sub.add(this.signallingService.onWebRtcAnswer$
+            .pipe(filter$1(Boolean), take(1))
+            .subscribe(() => {
+            if (this.session)
+                this.session.handshakeFlow = 'client-offer';
+        }));
+        // Unreal-command counter — increments on every `commandStarted`
+        // action. Snapshotted into the `viewport_ready` closer payload as
+        // phase-5's `commandCount`.
+        sub.add(this.actions$.pipe(ofType(commandStarted)).subscribe(() => {
+            if (this.session)
+                this.session.commandCount++;
+        }));
+        // Unified catalog loop — one subscription per entry. Non-closers
+        // record their emission time into the session map. The *last* entry
+        // of each phase is the closer: its emission fires a single generic
+        // `stream.phase_ended` event carrying every display field the viewer
+        // needs. The viewer never inspects milestone names or phase kinds;
+        // adding a new phase to `phaseCatalog` is enough — zero viewer work.
+        this.phaseCatalog.forEach((bucket, bucketIdx) => {
+            bucket.milestones.forEach((entry, idx) => {
+                const isCloser = idx === bucket.milestones.length - 1;
+                sub.add(entry.event.subscribe((value) => {
+                    if (!this.session)
+                        return;
+                    if (isCloser) {
+                        this.emitPhaseEnded(bucket, bucketIdx, value);
+                        return;
+                    }
+                    const time = Math.round(performance.now() - this.session.anchorPerf);
+                    if (entry.mode !== 'last' && this.session.times.has(entry))
+                        return;
+                    this.session.times.set(entry, time);
+                }));
+            });
         });
-        fromEvent(pcClient, 'connectionstatechange')
-            .pipe(map$1(() => this.pcClient?.connectionState), takeUntil(this.disconnect$))
-            .subscribe((state) => {
-            Logger.info('[RTCPeerConnection state] |', state, '|');
+        const bootstrapInfo = this.collectBootstrapInfo();
+        this.emitLifecycle('stream.session_started', {
+            sessionId: id,
+            startTimeUtc: new Date(startedAt).toISOString(),
+            pixelRatio: window.devicePixelRatio,
+            // Browser viewport size at session start (`window.innerWidth` /
+            // `innerHeight`). Named `browserInnerSize` to distinguish from
+            // the physical screen — what gates the rendered video resolution
+            // is the container we started from, not the device hardware.
+            browserInnerSize: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            },
+            userAgent: navigator.userAgent,
+            sampleWindowMs: SAMPLE_WINDOW_MS,
+            // Full page URL — `location.href` is the only reliable way to get this.
+            // The server-observed `Referer` header is truncated to origin for
+            // cross-origin requests by default Referrer-Policy.
+            pageUrl: window.location.href,
+            // Navigation / page-load context for the "app bootstrap → session_started"
+            // waterfall phase. Only useful for the first session (`bootstrap` phase
+            // is suppressed on Resume), but `bootstrapInfo` describes the document,
+            // not the session — harmless and cheap to send either way.
+            ...(bootstrapInfo && { bootstrapInfo }),
+        }, 
+        // Pin the milestone to the captured `performance.now()` so `duration`
+        // equals "ms since navigation start" precisely (for first sessions),
+        // rather than being inflated by any synchronous setup done in between.
+        startedAtPerf);
+        // Track current maxFps target to evaluate FPS-ratio anomalies.
+        sub.add(this.actions$
+            .pipe(ofType(setMaxFps))
+            .subscribe(({ maxFps }) => this.updateMaxFpsTarget(maxFps)));
+        // Periodic aggregated sample — every 5s window.
+        sub.add(this.videoService.videoStats$
+            .pipe(bufferTime(SAMPLE_WINDOW_MS), filter$1((samples) => samples.length > 0))
+            .subscribe((samples) => this.handleWindow(samples)));
+    }
+    endSession(reason) {
+        if (!this.session)
+            return;
+        const { id, sub } = this.session;
+        this.emitLifecycle('stream.session_ended', {
+            sessionId: id,
+            reason,
+            timestamp: new Date().toISOString(),
         });
-        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);
+        sub.unsubscribe();
+        this.session = null;
+    }
+    /**
+     * Emit a lifecycle event with a `duration` field — ms between the
+     * previous lifecycle event and now (phase-local, NOT anchor-relative).
+     * For `session_started` this equals the full page-load elapsed on the
+     * first session, or 0 on Resume. Advances `lastMilestonePerf` so the
+     * next event's duration is correctly rooted.
+     */
+    emitLifecycle(event, extra, atPerf) {
+        if (!this.session)
+            return;
+        // `atPerf` lets callers pin the milestone to a specific `performance.now()`
+        // value — useful for `session_started` where the wall-clock and perf-clock
+        // anchors were already captured at the top of `startSession()`.
+        const now = atPerf ?? performance.now();
+        const duration = Math.round(now - this.session.lastMilestonePerf);
+        this.track(event, { duration, ...extra });
+        this.session.lastMilestonePerf = now;
+    }
+    /**
+     * Emit the unified `stream.phase_ended` wire event for a closer. Packs
+     * every display field the viewer consumes — phaseNo (derived from the
+     * catalog index), label, color, milestones, params, overlays. Boundary
+     * labels aren't on the wire — the viewer derives them from neighbour
+     * phases' `label` fields.
+     */
+    emitPhaseEnded(bucket, bucketIdx, extrasValue) {
+        if (!this.session)
+            return;
+        const now = performance.now();
+        const phaseStartMs = Math.round(this.session.lastMilestonePerf - this.session.anchorPerf);
+        const phaseEndMs = Math.round(now - this.session.anchorPerf);
+        const milestones = this.milestonesOfBucket(bucket);
+        const params = toPhaseParams(extrasValue);
+        const overlays = resolveOverlays(bucket.overlays, this.session.times, phaseStartMs, phaseEndMs);
+        this.emitLifecycle('stream.phase_ended', {
+            sessionId: this.session.id,
+            phaseNo: bucketIdx + 1,
+            label: bucket.label,
+            color: bucket.color,
+            milestones,
+            params,
+            overlays,
         });
-        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);
-            }
+    }
+    handleWindow(samples) {
+        if (!this.session)
+            return;
+        const s = this.session;
+        const bitrate = this.aggregate(samples.map((x) => x.aggregatedStats.bitrate ?? 0));
+        const fps = this.aggregate(samples.map((x) => x.aggregatedStats.framesPerSecond ?? 0));
+        const qp = this.aggregate(samples.map((x) => x.aggregatedStats.VideoEncoderQP ?? 0));
+        const jitter = this.aggregate(samples.map((x) => x.aggregatedStats.jitter ?? 0));
+        const rtt = this.aggregate(samples.map((x) => x.aggregatedStats.currentRoundTripTime ?? 0));
+        const latest = samples[samples.length - 1]?.aggregatedStats;
+        // Periodic sample event.
+        this.track('stream.sample', {
+            sessionId: s.id,
+            seq: s.seq++,
+            timestamp: new Date().toISOString(),
+            sampleCount: samples.length,
+            // Tab visibility state at emission time. Chrome does NOT throttle timers
+            // for WebRTC-active tabs, so the handler runs on time even when hidden —
+            // the point-in-time read is reliable in this specific context.
+            visibilityState: document.visibilityState,
+            bitrate,
+            fps,
+            qp,
+            jitter,
+            rtt,
+            packetsLost: latest?.packetsLost,
+            viewPort: {
+                width: latest?.frameWidth,
+                height: latest?.frameHeight,
+            },
         });
+        this.evaluateAnomalies(fps, qp);
     }
-    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,
+    evaluateAnomalies(fps, qp) {
+        if (!this.session)
+            return;
+        const s = this.session;
+        // Quality (QP red) entry/exit.
+        const qpBadNow = qp.p50 > QP_RED_THRESHOLD;
+        if (qpBadNow !== s.qpBad) {
+            s.qpBad = qpBadNow;
+            this.track(qpBadNow ? 'stream.quality_degraded' : 'stream.quality_recovered', {
+                sessionId: s.id,
+                seq: s.seq,
+                timestamp: new Date().toISOString(),
+                qpP50: qp.p50,
+                qpP95: qp.p95,
             });
-            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();
+        // FPS low vs current target.
+        const ref = s.maxFpsTarget > 0 ? s.maxFpsTarget : UNLIMITED_REFERENCE_FPS;
+        const fpsLowNow = fps.p50 < ref * FPS_LOW_RATIO;
+        if (fpsLowNow && !s.fpsLow) {
+            this.track('stream.fps_low', {
+                sessionId: s.id,
+                seq: s.seq,
+                timestamp: new Date().toISOString(),
+                target: s.maxFpsTarget,
+                referenceTarget: ref,
+                fpsP50: fps.p50,
+                fpsP95: fps.p95,
             });
-            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;
         }
+        s.fpsLow = fpsLowNow;
     }
-    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 }));
+    updateMaxFpsTarget(maxFps) {
+        if (this.session)
+            this.session.maxFpsTarget = maxFps;
     }
     /**
-     * Creates an SDP offer, applies SDP munging, sets it as a local description,
-     * and sends it to the server via signaling.
-     * Transceivers already configure media directions, so deprecated
-     * offerToReceive* options are not used.
+     * Snapshot every milestone recorded in this session that belongs to
+     * {@link phase}. Used to attach a phase's milestone array to the
+     * lifecycle event that closes that phase.
      */
-    async createOffer(pcClient) {
+    /**
+     * Collect wire-shape milestones that fired within a bucket. Walks the
+     * catalog's own milestone list (minus the closer) and pulls each
+     * entry's time from the in-session map via object identity.
+     */
+    milestonesOfBucket(bucket) {
+        if (!this.session)
+            return [];
+        const out = [];
+        const closerIdx = bucket.milestones.length - 1;
+        for (let i = 0; i < closerIdx; i++) {
+            const entry = bucket.milestones[i];
+            const time = this.session.times.get(entry);
+            if (time !== undefined)
+                out.push({ label: entry.label, time });
+        }
+        return out;
+    }
+    /**
+     * Capture browser navigation timings — useful to explain the
+     * "application bootstrap → session_started" waterfall phase.
+     * Values are ms from navigation start; null if the entry is unavailable
+     * (old browsers, cross-origin iframes with limited perf access, etc.).
+     */
+    collectBootstrapInfo() {
         try {
-            const offer = await pcClient.createOffer();
-            offer.sdp = this.mungeSDP(offer.sdp ?? '');
-            await pcClient.setLocalDescription(offer);
-            this.signallingSrv.send(offer);
+            const nav = performance.getEntriesByType('navigation')[0];
+            if (!nav)
+                return null;
+            return {
+                type: nav.type, // 'navigate' | 'reload' | 'back_forward' | 'prerender'
+                protocol: nav.nextHopProtocol || null, // 'h2' / 'h3' / 'http/1.1'
+                firstByteMs: Math.round(nav.responseStart),
+                domInteractiveMs: Math.round(nav.domInteractive),
+                domContentLoadedMs: Math.round(nav.domContentLoadedEventEnd),
+                loadEventMs: Math.round(nav.loadEventEnd),
+                // Navigation-only size — the HTML document itself. Usually small;
+                // the interesting number is `resources.transferSize` below.
+                navigationTransferSize: nav.transferSize || null,
+                navigationEncodedBodySize: nav.encodedBodySize || null,
+                navigationDecodedBodySize: nav.decodedBodySize || null,
+                resources: this.collectResourceTotals(),
+            };
         }
         catch {
-            Logger.error("Couldn't create offer");
+            return null;
         }
     }
     /**
-     * Creates an SDP answer, applies SDP munging, sets it as a local description,
-     * and sends it to the server via signaling.
+     * Aggregate all resources the browser has loaded so far
+     * (`performance.getEntriesByType('resource')`), grouped by `initiatorType`.
+     * Gives a real "bytes downloaded before session start" figure — unlike the
+     * navigation entry which only covers the HTML document.
+     *
+     * `transferSize === 0 && decodedBodySize > 0` means the resource came from
+     * the HTTP cache — counted separately so cached hits don't inflate
+     * the "bytes on the wire" metric.
      */
-    async createAnswer(pcClient) {
+    collectResourceTotals() {
         try {
-            const answer = await pcClient.createAnswer();
-            answer.sdp = this.mungeSDP(answer.sdp ?? '');
-            await pcClient.setLocalDescription(answer);
-            this.signallingSrv.send(answer);
+            const list = performance.getEntriesByType('resource');
+            if (!list.length)
+                return null;
+            const empty = () => ({
+                count: 0,
+                cachedCount: 0,
+                transferSize: 0,
+                encodedBodySize: 0,
+                decodedBodySize: 0,
+            });
+            const totals = empty();
+            const byType = {};
+            for (const r of list) {
+                const type = r.initiatorType || 'other';
+                const b = (byType[type] ||= empty());
+                const fromCache = r.transferSize === 0 && r.decodedBodySize > 0;
+                const t = r.transferSize || 0;
+                const enc = r.encodedBodySize || 0;
+                const dec = r.decodedBodySize || 0;
+                b.count++;
+                if (fromCache)
+                    b.cachedCount++;
+                b.transferSize += t;
+                b.encodedBodySize += enc;
+                b.decodedBodySize += dec;
+                totals.count++;
+                if (fromCache)
+                    totals.cachedCount++;
+                totals.transferSize += t;
+                totals.encodedBodySize += enc;
+                totals.decodedBodySize += dec;
+            }
+            return { ...totals, byType };
         }
-        catch (e) {
-            Logger.error("Couldn't create answer", e);
+        catch {
+            return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebRtcPlayerService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebRtcPlayerService2 }); }
+    aggregate(values) {
+        if (values.length === 0)
+            return { p50: 0, p95: 0, min: 0, max: 0 };
+        const sorted = [...values].sort((a, b) => a - b);
+        // Nearest-rank method: p-th percentile ≡ sorted[ceil(p/100 * n) - 1].
+        // Using `floor` would make p95 collapse to `max` for n=20
+        // (floor(0.95*20) = 19 = max index), hiding the max line behind p95
+        // in charts. `ceil - 1` keeps them distinct: p95 = sorted[18], max = sorted[19].
+        const pick = (p) => {
+            const idx = Math.ceil((p / 100) * sorted.length) - 1;
+            return sorted[Math.max(0, Math.min(sorted.length - 1, idx))];
+        };
+        return {
+            p50: pick(50),
+            p95: pick(95),
+            min: sorted[0],
+            max: sorted[sorted.length - 1],
+        };
+    }
+    track(event, data) {
+        // `userId` is attached to every event so the server can bucket files
+        // under `data/<userId>/<sessionId>.jsonl` without maintaining a
+        // session→user index.
+        this.store.dispatch(trackTelemetryData({
+            event,
+            data: { userId: this.userId, ...data },
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StreamStatusTelemetryService2 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebRtcPlayerService2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
+// ──────────────────────────────────────────────────────────────────
+// Module-scope helpers — keep the class body focused on RxJS wiring.
+// ──────────────────────────────────────────────────────────────────
+/** Compact one side of an ICE candidate pair to `"type (url)"` or just
+ *  `type` (host candidates have no URL). */
+function fmtCandidate(c) {
+    if (!c)
+        return null;
+    return c.url ? `${c.type} (${c.url})` : c.type;
+}
+/**
+ * Flatten the closer's emitted extras object into display key/value
+ * pairs. Null/undefined/empty are dropped; objects and arrays are
+ * skipped — they should be pre-formatted by the closer's `map(...)`.
+ */
+function toPhaseParams(value) {
+    if (!value || typeof value !== 'object')
+        return [];
+    const out = [];
+    for (const [key, v] of Object.entries(value)) {
+        if (v === null || v === undefined || v === '')
+            continue;
+        if (typeof v === 'object')
+            continue;
+        out.push({ key, value: String(v) });
+    }
+    return out;
+}
+/**
+ * Resolve declarative overlay recipes to absolute ms spans. Endpoints
+ * fall back to the phase's own start/end when unspecified; recipes
+ * whose referenced entry never fired are quietly skipped.
+ */
+function resolveOverlays(recipes, times, phaseStartMs, phaseEndMs) {
+    if (!recipes?.length)
+        return [];
+    const out = [];
+    for (const r of recipes) {
+        const fromMs = r.from ? (times.get(r.from) ?? null) : phaseStartMs;
+        const toMs = r.to ? (times.get(r.to) ?? null) : phaseEndMs;
+        if (fromMs === null || toMs === null || toMs <= fromMs)
+            continue;
+        out.push({ fromMs, toMs, title: r.title });
+    }
+    return out;
+}
 
 const ReceivedMimeTypes = {
     ApplicationJson: 'application/json',
@@ -5035,10 +5437,10 @@ class FileHandlerService {
         setTimeout(() => sender(out), 0);
         return observable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileHandlerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileHandlerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileHandlerService, decorators: [{
             type: Injectable
         }] });
 
@@ -5127,10 +5529,10 @@ class AnalyticsService extends SubService {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AnalyticsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnalyticsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AnalyticsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnalyticsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5497,10 +5899,10 @@ class FpsMonitorService {
         }
         return { fps: fps / len, bitrate: bitrate / len, qp: qp / len };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FpsMonitorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FpsMonitorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FpsMonitorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FpsMonitorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5571,10 +5973,10 @@ class UnrealCallbackService {
         setTimeout(() => sender({ ...data, correlationId }), 0);
         return observable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealCallbackService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealCallbackService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealCallbackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealCallbackService, decorators: [{
             type: Injectable
         }] });
 
@@ -5590,10 +5992,10 @@ class AfkTimeoutModalComponent {
     resetAfk() {
         this.#afkService.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isAfkTimerVisible()) {\r\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\r\n    <div class=\"resume-box\">\r\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\r\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\r\n      </div>\r\n      <div class=\"resume-box__text\">\r\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\r\n        <p>\r\n          No activity detected. Press 'Continue' if you wish to keep your\r\n          session active\r\n        </p>\r\n      </div>\r\n      <src-button\r\n        [isFullWidth]=\"true\"\r\n        [data-testid]=\"'continue-session'\"\r\n        weight=\"primary\"\r\n        size=\"lg\"\r\n      >\r\n        Continue\r\n      </src-button>\r\n    </div>\r\n  </div>\r\n}\r\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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isAfkTimerVisible()) {\r\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\r\n    <div class=\"resume-box\">\r\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\r\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\r\n      </div>\r\n      <div class=\"resume-box__text\">\r\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\r\n        <p>\r\n          No activity detected. Press 'Continue' if you wish to keep your\r\n          session active\r\n        </p>\r\n      </div>\r\n      <src-button\r\n        [isFullWidth]=\"true\"\r\n        [data-testid]=\"'continue-session'\"\r\n        weight=\"primary\"\r\n        size=\"lg\"\r\n      >\r\n        Continue\r\n      </src-button>\r\n    </div>\r\n  </div>\r\n}\r\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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isAfkTimerVisible()) {\r\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\r\n    <div class=\"resume-box\">\r\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\r\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\r\n      </div>\r\n      <div class=\"resume-box__text\">\r\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\r\n        <p>\r\n          No activity detected. Press 'Continue' if you wish to keep your\r\n          session active\r\n        </p>\r\n      </div>\r\n      <src-button\r\n        [isFullWidth]=\"true\"\r\n        [data-testid]=\"'continue-session'\"\r\n        weight=\"primary\"\r\n        size=\"lg\"\r\n      >\r\n        Continue\r\n      </src-button>\r\n    </div>\r\n  </div>\r\n}\r\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"] }]
         }] });
@@ -5605,10 +6007,10 @@ class FreezeFrameComponent {
         this.combinedFreeze = this.#store.selectSignal(selectFreezeFrameCombinedDataUrl);
     }
     #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\r\n@let progress = freezeFrameProgressMessageFromVideo();\r\n\r\n<div class=\"freeze-images\">\r\n  @if (image) {\r\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\r\n  }\r\n\r\n  @if (progress) {\r\n    <div class=\"progress-status\">\r\n      {{ progress }}\r\n    </div>\r\n  }\r\n</div>\r\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\r\n@let progress = freezeFrameProgressMessageFromVideo();\r\n\r\n<div class=\"freeze-images\">\r\n  @if (image) {\r\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\r\n  }\r\n\r\n  @if (progress) {\r\n    <div class=\"progress-status\">\r\n      {{ progress }}\r\n    </div>\r\n  }\r\n</div>\r\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.8", ngImport: i0, type: FreezeFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FreezeFrameComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\r\n@let progress = freezeFrameProgressMessageFromVideo();\r\n\r\n<div class=\"freeze-images\">\r\n  @if (image) {\r\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\r\n  }\r\n\r\n  @if (progress) {\r\n    <div class=\"progress-status\">\r\n      {{ progress }}\r\n    </div>\r\n  }\r\n</div>\r\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"] }]
         }] });
@@ -5636,10 +6038,10 @@ class SafePipe {
                 throw new Error(`Invalid safe type specified: ${type}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SafePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SafePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safe',
@@ -5651,10 +6053,10 @@ class LowBandwidthModalComponent {
     close(value) {
         this.#dialogRef.close(value || false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\r\n  <header class=\"src-modal__header\">\r\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\r\n      Unstable Connection\r\n    </h6>\r\n  </header>\r\n  <section class=\"src-modal__body\">\r\n    <div\r\n      [innerHtml]=\"\r\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\r\n          | safe: 'html'\r\n      \"\r\n      class=\"src-modal__scroll-box\"\r\n    ></div>\r\n  </section>\r\n  <footer class=\"src-modal__footer\">\r\n    <div class=\"src-modal__buttons\">\r\n      <src-button\r\n        (onClick)=\"close(true)\"\r\n        [data-testid]=\"'switch-to-interactive-mode'\"\r\n      >\r\n        Switch\r\n      </src-button>\r\n\r\n      <src-button\r\n        (onClick)=\"close()\"\r\n        [data-testid]=\"'close-lbm-modal'\"\r\n        weight=\"primary\"\r\n      >\r\n        Ok\r\n      </src-button>\r\n    </div>\r\n  </footer>\r\n</div>\r\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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\r\n  <header class=\"src-modal__header\">\r\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\r\n      Unstable Connection\r\n    </h6>\r\n  </header>\r\n  <section class=\"src-modal__body\">\r\n    <div\r\n      [innerHtml]=\"\r\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\r\n          | safe: 'html'\r\n      \"\r\n      class=\"src-modal__scroll-box\"\r\n    ></div>\r\n  </section>\r\n  <footer class=\"src-modal__footer\">\r\n    <div class=\"src-modal__buttons\">\r\n      <src-button\r\n        (onClick)=\"close(true)\"\r\n        [data-testid]=\"'switch-to-interactive-mode'\"\r\n      >\r\n        Switch\r\n      </src-button>\r\n\r\n      <src-button\r\n        (onClick)=\"close()\"\r\n        [data-testid]=\"'close-lbm-modal'\"\r\n        weight=\"primary\"\r\n      >\r\n        Ok\r\n      </src-button>\r\n    </div>\r\n  </footer>\r\n</div>\r\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", "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.8", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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\">\r\n  <header class=\"src-modal__header\">\r\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\r\n      Unstable Connection\r\n    </h6>\r\n  </header>\r\n  <section class=\"src-modal__body\">\r\n    <div\r\n      [innerHtml]=\"\r\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\r\n          | safe: 'html'\r\n      \"\r\n      class=\"src-modal__scroll-box\"\r\n    ></div>\r\n  </section>\r\n  <footer class=\"src-modal__footer\">\r\n    <div class=\"src-modal__buttons\">\r\n      <src-button\r\n        (onClick)=\"close(true)\"\r\n        [data-testid]=\"'switch-to-interactive-mode'\"\r\n      >\r\n        Switch\r\n      </src-button>\r\n\r\n      <src-button\r\n        (onClick)=\"close()\"\r\n        [data-testid]=\"'close-lbm-modal'\"\r\n        weight=\"primary\"\r\n      >\r\n        Ok\r\n      </src-button>\r\n    </div>\r\n  </footer>\r\n</div>\r\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"] }]
         }] });
@@ -5666,10 +6068,10 @@ class ImageLoadingSrcComponent {
         this.imageLoadingSrc = this.#store.selectSignal(unrealFeature.selectImageLoadingSrc);
     }
     #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\r\n@if (isLoaderScreenVisible()) {\r\n  <div class=\"preload\">\r\n    <div class=\"back\">\r\n      @if (image) {\r\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\r\n@if (isLoaderScreenVisible()) {\r\n  <div class=\"preload\">\r\n    <div class=\"back\">\r\n      @if (image) {\r\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\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.8", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\r\n@if (isLoaderScreenVisible()) {\r\n  <div class=\"preload\">\r\n    <div class=\"back\">\r\n      @if (image) {\r\n        <img [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\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"] }]
         }] });
@@ -5745,10 +6147,10 @@ class StatGraphComponent {
         }
         this.draw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", 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\">\r\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\r\n  <canvas #graph class=\"graph\"></canvas>\r\n</div>\r\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", 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\">\r\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\r\n  <canvas #graph class=\"graph\"></canvas>\r\n</div>\r\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.8", ngImport: i0, type: StatGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StatGraphComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\r\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\r\n  <canvas #graph class=\"graph\"></canvas>\r\n</div>\r\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: [{
@@ -5829,10 +6231,10 @@ class UnrealStatusComponent {
             // Fails silently if the iframe's content window cannot be accessed
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\r\n  <div class=\"status-box\">\r\n    @if (awsInstance()?.message) {\r\n      <p>{{ awsInstance()?.message }}</p>\r\n    } @else {\r\n      <div class=\"status-box__message\">\r\n        <src-loading\r\n          [size]=\"30\"\r\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\r\n          [progressStrokeColor]=\"'#1F2937'\"\r\n        />\r\n        {{ messagePercents() }}%\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\r\n  <div class=\"status-box\">\r\n    @if (awsInstance()?.message) {\r\n      <p>{{ awsInstance()?.message }}</p>\r\n    } @else {\r\n      <div class=\"status-box__message\">\r\n        <src-loading\r\n          [size]=\"30\"\r\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\r\n          [progressStrokeColor]=\"'#1F2937'\"\r\n        />\r\n        {{ messagePercents() }}%\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\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.8", ngImport: i0, type: UnrealStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceLoadingComponent], template: "@if (showLoader()) {\r\n  <div class=\"status-box\">\r\n    @if (awsInstance()?.message) {\r\n      <p>{{ awsInstance()?.message }}</p>\r\n    } @else {\r\n      <div class=\"status-box__message\">\r\n        <src-loading\r\n          [size]=\"30\"\r\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\r\n          [progressStrokeColor]=\"'#1F2937'\"\r\n        />\r\n        {{ messagePercents() }}%\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\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"] }]
         }] });
@@ -5961,10 +6363,10 @@ class VideoStatsComponent {
             elements: this.elementsToShow,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\r\n  <div class=\"settings-container\">\r\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\r\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\r\n      <div class=\"forNerds\">\r\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"fpsTick()!\"\r\n              label=\"FPS (higher is better)\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"videoQP()!\"\r\n              label=\"QP (lower is better)\"\r\n              color=\"#D5ff07\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"bitrateTick()!\"\r\n              label=\"Bitrate\"\r\n              color=\"#D57F07\"\r\n            />\r\n          </li>\r\n        </div>\r\n        <div>\r\n          @for (graph of graphList$ | async; track graph) {\r\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\r\n              <app-stat-graph\r\n                [label]=\"graph.key\"\r\n                [stat]=\"(graph.stat | async)!\"\r\n                [color]=\"graph.color\"\r\n              />\r\n            </li>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @for (el of videoStatus(); track el.key + $index) {\r\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\r\n          <span>{{ el.key }}: </span>{{ el.value | json }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (!collapsed()) {\r\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\r\n  }\r\n}\r\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.9", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\r\n  <div class=\"settings-container\">\r\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\r\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\r\n      <div class=\"forNerds\">\r\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"fpsTick()!\"\r\n              label=\"FPS (higher is better)\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"videoQP()!\"\r\n              label=\"QP (lower is better)\"\r\n              color=\"#D5ff07\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"bitrateTick()!\"\r\n              label=\"Bitrate\"\r\n              color=\"#D57F07\"\r\n            />\r\n          </li>\r\n        </div>\r\n        <div>\r\n          @for (graph of graphList$ | async; track graph) {\r\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\r\n              <app-stat-graph\r\n                [label]=\"graph.key\"\r\n                [stat]=\"(graph.stat | async)!\"\r\n                [color]=\"graph.color\"\r\n              />\r\n            </li>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @for (el of videoStatus(); track el.key + $index) {\r\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\r\n          <span>{{ el.key }}: </span>{{ el.value | json }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (!collapsed()) {\r\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\r\n  }\r\n}\r\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.8", ngImport: i0, type: VideoStatsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VideoStatsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, AsyncPipe, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\r\n  <div class=\"settings-container\">\r\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\r\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\r\n      <div class=\"forNerds\">\r\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"fpsTick()!\"\r\n              label=\"FPS (higher is better)\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"videoQP()!\"\r\n              label=\"QP (lower is better)\"\r\n              color=\"#D5ff07\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"bitrateTick()!\"\r\n              label=\"Bitrate\"\r\n              color=\"#D57F07\"\r\n            />\r\n          </li>\r\n        </div>\r\n        <div>\r\n          @for (graph of graphList$ | async; track graph) {\r\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\r\n              <app-stat-graph\r\n                [label]=\"graph.key\"\r\n                [stat]=\"(graph.stat | async)!\"\r\n                [color]=\"graph.color\"\r\n              />\r\n            </li>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @for (el of videoStatus(); track el.key + $index) {\r\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\r\n          <span>{{ el.key }}: </span>{{ el.value | json }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (!collapsed()) {\r\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\r\n  }\r\n}\r\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: () => [] });
@@ -6008,10 +6410,10 @@ class ResumeStreamButtonComponent {
     onDisconnect() {
         this.isSecondStart.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\r\n  <div class=\"resume-box\">\r\n    @if (isSecondStart()) {\r\n      <div class=\"resume-box__text\">\r\n        Your stream has been paused due to inactivity\r\n      </div>\r\n    }\r\n\r\n    <src-button\r\n      (onClick)=\"connect()\"\r\n      [isFullWidth]=\"true\"\r\n      [data-testid]=\"'connect-button'\"\r\n      size=\"lg\"\r\n      weight=\"primary\"\r\n      class=\"connect-button\"\r\n    >\r\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\r\n    </src-button>\r\n  </div>\r\n}\r\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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\r\n  <div class=\"resume-box\">\r\n    @if (isSecondStart()) {\r\n      <div class=\"resume-box__text\">\r\n        Your stream has been paused due to inactivity\r\n      </div>\r\n    }\r\n\r\n    <src-button\r\n      (onClick)=\"connect()\"\r\n      [isFullWidth]=\"true\"\r\n      [data-testid]=\"'connect-button'\"\r\n      size=\"lg\"\r\n      weight=\"primary\"\r\n      class=\"connect-button\"\r\n    >\r\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\r\n    </src-button>\r\n  </div>\r\n}\r\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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isShowResumeButton()) {\r\n  <div class=\"resume-box\">\r\n    @if (isSecondStart()) {\r\n      <div class=\"resume-box__text\">\r\n        Your stream has been paused due to inactivity\r\n      </div>\r\n    }\r\n\r\n    <src-button\r\n      (onClick)=\"connect()\"\r\n      [isFullWidth]=\"true\"\r\n      [data-testid]=\"'connect-button'\"\r\n      size=\"lg\"\r\n      weight=\"primary\"\r\n      class=\"connect-button\"\r\n    >\r\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\r\n    </src-button>\r\n  </div>\r\n}\r\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"] }]
         }] });
@@ -6070,10 +6472,10 @@ class IntroSrcComponent {
         videoElement.innerHTML += 'Browser not supported';
         videoContainer.appendChild(videoElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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();\r\n@if (image) {\r\n  <div class=\"backImage\">\r\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\r\n  </div>\r\n} @else if (videoIntroSrc()) {\r\n  <div #videoPlayerCover class=\"backVideo\"></div>\r\n}\r\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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();\r\n@if (image) {\r\n  <div class=\"backImage\">\r\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\r\n  </div>\r\n} @else if (videoIntroSrc()) {\r\n  <div #videoPlayerCover class=\"backVideo\"></div>\r\n}\r\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.8", ngImport: i0, type: IntroSrcComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IntroSrcComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\r\n@if (image) {\r\n  <div class=\"backImage\">\r\n    <img [ngSrc]=\"image\" fill alt=\"imageSrc\" />\r\n  </div>\r\n} @else if (videoIntroSrc()) {\r\n  <div #videoPlayerCover class=\"backVideo\"></div>\r\n}\r\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 }] }] } });
@@ -6096,7 +6498,6 @@ class UnrealSceneComponent {
         this.changeMouseOverScene.emit(false);
     }
     constructor() {
-        this.unrealConfig = inject(UNREAL_CONFIG);
         this.isStudio = input(false, ...(ngDevMode ? [{ debugName: "isStudio" }] : /* istanbul ignore next */ []));
         this.useContainerAsSizeProvider = input(true, ...(ngDevMode ? [{ debugName: "useContainerAsSizeProvider" }] : /* istanbul ignore next */ []));
         this.studioResolutionSize = input({
@@ -6199,16 +6600,7 @@ class UnrealSceneComponent {
             containerHeight = this.videoElement()?.nativeElement.offsetHeight || 2;
         }
         const pixelRatio = this.pixelRatio;
-        if (this.unrealConfig.optimizedResize) {
-            //New Approach
-            return getResizeValuesUniversal({
-                pixelRatio,
-                containerWidth,
-                containerHeight,
-                maxResolution: this.maxResolution,
-            });
-        }
-        return getResizeValuesUniversalOld({
+        return getResizeValuesUniversal({
             pixelRatio,
             containerWidth,
             containerHeight,
@@ -6216,20 +6608,11 @@ class UnrealSceneComponent {
         });
     }
     getResizeStudioValues() {
-        if (this.unrealConfig.optimizedResize) {
-            return getResizeStudioValues({
-                pixelRatio: this.pixelRatio,
-                containerWidth: this.videoElement()?.nativeElement.offsetWidth || 2,
-                containerHeight: this.videoElement()?.nativeElement.offsetHeight || 2,
-                studioWidth: this.width,
-                studioHeight: this.height,
-                maxResolution: this.maxResolution,
-            });
-        }
-        return getResizeStudioValuesOld({
+        const videoElement = this.videoElement()?.nativeElement;
+        return getResizeStudioValues({
             pixelRatio: this.pixelRatio,
-            containerWidth: this.videoElement()?.nativeElement.offsetWidth || 2,
-            containerHeight: this.videoElement()?.nativeElement.offsetHeight || 2,
+            containerWidth: videoElement?.offsetWidth || 2,
+            containerHeight: videoElement?.offsetHeight || 2,
             studioWidth: this.width,
             studioHeight: this.height,
             maxResolution: this.maxResolution,
@@ -6238,13 +6621,18 @@ class UnrealSceneComponent {
     sendResize(size) {
         this.commandsSender.sendCommandToUnreal({
             command: MetaBoxCommand.FChangeResolutionCommand,
-            payload: { resolution: { x: size.w, y: size.h } },
+            payload: {
+                resolution: { x: size.w, y: size.h },
+                payloadVersion: this.isStudio()
+                    ? EPayloadVersion.disableFovRecalculation
+                    : undefined,
+            },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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\">\r\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\r\n\r\n  <app-intro-src />\r\n  <app-image-loading-src />\r\n  <app-resume-stream-button />\r\n  <app-unreal-status />\r\n  <app-freeze-frame />\r\n  <app-afk-timeout-modal />\r\n\r\n  <ng-content select=\"app-pdf\"></ng-content>\r\n  <ng-content select=\"app-show-case\"></ng-content>\r\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\r\n\r\n  @if (isDevMode) {\r\n    <app-video-stats />\r\n  }\r\n</div>\r\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>%0D%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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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\">\r\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\r\n\r\n  <app-intro-src />\r\n  <app-image-loading-src />\r\n  <app-resume-stream-button />\r\n  <app-unreal-status />\r\n  <app-freeze-frame />\r\n  <app-afk-timeout-modal />\r\n\r\n  <ng-content select=\"app-pdf\"></ng-content>\r\n  <ng-content select=\"app-show-case\"></ng-content>\r\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\r\n\r\n  @if (isDevMode) {\r\n    <app-video-stats />\r\n  }\r\n</div>\r\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>%0D%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.8", ngImport: i0, type: UnrealSceneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnrealSceneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AfkTimeoutModalComponent,
@@ -6283,10 +6671,10 @@ class WebrtcErrorModalComponent {
         }
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\r\n  <header class=\"src-modal__header\"></header>\r\n  <section class=\"src-modal__body\">\r\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\r\n      WebRTC error\r\n    </div>\r\n    <div style=\"text-align: left\">\r\n      An internet connection type (WebRTC) appears to be blocked either by your\r\n      browser settings or your current network. If WebRTC is blocked on your\r\n      browser you may be able to adjust these settings yourself based on\r\n      instructions here:\r\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\r\n        >https://myownconference.com/blog/en/webrtc/</a\r\n      >\r\n      <br /><br />\r\n      Trying a different web browser may help confirm this as well. If WebRTC is\r\n      blocked by your network, try switching to a different network if possible\r\n      or contact your network administrator.<br /><br />\r\n      WebRTC is common, safe and increasingly utilised method for streaming real\r\n      time 3D experiences via a web browser. It typically consumes no more\r\n      bandwidth than streaming an HD video.\r\n    </div>\r\n  </section>\r\n  <footer class=\"src-modal__footer\">\r\n    <src-button\r\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\r\n      [data-testid]=\"'close-webrtc-error-modal'\"\r\n      weight=\"primary\"\r\n    >\r\n      Ok\r\n    </src-button>\r\n  </footer>\r\n</div>\r\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__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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\r\n  <header class=\"src-modal__header\"></header>\r\n  <section class=\"src-modal__body\">\r\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\r\n      WebRTC error\r\n    </div>\r\n    <div style=\"text-align: left\">\r\n      An internet connection type (WebRTC) appears to be blocked either by your\r\n      browser settings or your current network. If WebRTC is blocked on your\r\n      browser you may be able to adjust these settings yourself based on\r\n      instructions here:\r\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\r\n        >https://myownconference.com/blog/en/webrtc/</a\r\n      >\r\n      <br /><br />\r\n      Trying a different web browser may help confirm this as well. If WebRTC is\r\n      blocked by your network, try switching to a different network if possible\r\n      or contact your network administrator.<br /><br />\r\n      WebRTC is common, safe and increasingly utilised method for streaming real\r\n      time 3D experiences via a web browser. It typically consumes no more\r\n      bandwidth than streaming an HD video.\r\n    </div>\r\n  </section>\r\n  <footer class=\"src-modal__footer\">\r\n    <src-button\r\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\r\n      [data-testid]=\"'close-webrtc-error-modal'\"\r\n      weight=\"primary\"\r\n    >\r\n      Ok\r\n    </src-button>\r\n  </footer>\r\n</div>\r\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__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", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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\">\r\n  <header class=\"src-modal__header\"></header>\r\n  <section class=\"src-modal__body\">\r\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\r\n      WebRTC error\r\n    </div>\r\n    <div style=\"text-align: left\">\r\n      An internet connection type (WebRTC) appears to be blocked either by your\r\n      browser settings or your current network. If WebRTC is blocked on your\r\n      browser you may be able to adjust these settings yourself based on\r\n      instructions here:\r\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\r\n        >https://myownconference.com/blog/en/webrtc/</a\r\n      >\r\n      <br /><br />\r\n      Trying a different web browser may help confirm this as well. If WebRTC is\r\n      blocked by your network, try switching to a different network if possible\r\n      or contact your network administrator.<br /><br />\r\n      WebRTC is common, safe and increasingly utilised method for streaming real\r\n      time 3D experiences via a web browser. It typically consumes no more\r\n      bandwidth than streaming an HD video.\r\n    </div>\r\n  </section>\r\n  <footer class=\"src-modal__footer\">\r\n    <src-button\r\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\r\n      [data-testid]=\"'close-webrtc-error-modal'\"\r\n      weight=\"primary\"\r\n    >\r\n      Ok\r\n    </src-button>\r\n  </footer>\r\n</div>\r\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__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"] }]
         }] });
@@ -6332,10 +6720,10 @@ class FilterSettingsComponent {
             panelOpen: this.settings.panelOpen,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<div class=\"settings-container\">\r\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\r\n  @if (settings.panelOpen) {\r\n    <div class=\"settings-panel\">\r\n      <h3>LBM Trigger Settings</h3>\r\n      <h5>Data Flow Monitor</h5>\r\n      <form>\r\n        <label>\r\n          Monitoring delay:\r\n          <input\r\n            [(ngModel)]=\"settings.monitoringDelayTime\"\r\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\r\n            type=\"number\"\r\n            name=\"monitoringDelayTime\"\r\n          />\r\n        </label>\r\n\r\n        <label>\r\n          Minimum Bitrate (kbit/s):\r\n          <input\r\n            [(ngModel)]=\"settings.minimumBitrate\"\r\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\r\n            type=\"number\"\r\n            name=\"minimumBitrate\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Yellow Flag (%):\r\n          <input\r\n            [(ngModel)]=\"settings.yellowFlag\"\r\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\r\n            type=\"number\"\r\n            name=\"yellowFlag\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Red Flag (%):\r\n          <input\r\n            [(ngModel)]=\"settings.redFlag\"\r\n            [placeholder]=\"defaultFilterModel.redFlag\"\r\n            type=\"number\"\r\n            name=\"redFlag\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Minimum FPS:\r\n          <input\r\n            [(ngModel)]=\"settings.minimumFps\"\r\n            [placeholder]=\"defaultFilterModel.minimumFps\"\r\n            type=\"number\"\r\n            name=\"minimumFps\"\r\n          />\r\n        </label>\r\n        <hr />\r\n        <h5>Kalman Filter</h5>\r\n        <label>\r\n          Initial Bitrate Estimate (kbit/s):\r\n          <input\r\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\r\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\r\n            type=\"number\"\r\n            name=\"initialBitrateEstimate\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Initial Error Covariance:\r\n          <input\r\n            [(ngModel)]=\"settings.initialErrorCovariance\"\r\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\r\n            type=\"number\"\r\n            name=\"initialErrorCovariance\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Process Noise (Q):\r\n          <input\r\n            [(ngModel)]=\"settings.processNoise\"\r\n            [placeholder]=\"defaultFilterModel.processNoise\"\r\n            type=\"number\"\r\n            name=\"processNoise\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Measurement Noise (R):\r\n          <input\r\n            [(ngModel)]=\"settings.measurementNoise\"\r\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\r\n            type=\"number\"\r\n            name=\"measurementNoise\"\r\n          />\r\n        </label>\r\n      </form>\r\n      <br />\r\n      <br />\r\n      <div class=\"apply-button-container\">\r\n        <button (click)=\"reset()\">Reset</button>\r\n        <button (click)=\"saveSettings()\">Apply</button>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\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.9", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<div class=\"settings-container\">\r\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\r\n  @if (settings.panelOpen) {\r\n    <div class=\"settings-panel\">\r\n      <h3>LBM Trigger Settings</h3>\r\n      <h5>Data Flow Monitor</h5>\r\n      <form>\r\n        <label>\r\n          Monitoring delay:\r\n          <input\r\n            [(ngModel)]=\"settings.monitoringDelayTime\"\r\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\r\n            type=\"number\"\r\n            name=\"monitoringDelayTime\"\r\n          />\r\n        </label>\r\n\r\n        <label>\r\n          Minimum Bitrate (kbit/s):\r\n          <input\r\n            [(ngModel)]=\"settings.minimumBitrate\"\r\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\r\n            type=\"number\"\r\n            name=\"minimumBitrate\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Yellow Flag (%):\r\n          <input\r\n            [(ngModel)]=\"settings.yellowFlag\"\r\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\r\n            type=\"number\"\r\n            name=\"yellowFlag\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Red Flag (%):\r\n          <input\r\n            [(ngModel)]=\"settings.redFlag\"\r\n            [placeholder]=\"defaultFilterModel.redFlag\"\r\n            type=\"number\"\r\n            name=\"redFlag\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Minimum FPS:\r\n          <input\r\n            [(ngModel)]=\"settings.minimumFps\"\r\n            [placeholder]=\"defaultFilterModel.minimumFps\"\r\n            type=\"number\"\r\n            name=\"minimumFps\"\r\n          />\r\n        </label>\r\n        <hr />\r\n        <h5>Kalman Filter</h5>\r\n        <label>\r\n          Initial Bitrate Estimate (kbit/s):\r\n          <input\r\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\r\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\r\n            type=\"number\"\r\n            name=\"initialBitrateEstimate\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Initial Error Covariance:\r\n          <input\r\n            [(ngModel)]=\"settings.initialErrorCovariance\"\r\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\r\n            type=\"number\"\r\n            name=\"initialErrorCovariance\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Process Noise (Q):\r\n          <input\r\n            [(ngModel)]=\"settings.processNoise\"\r\n            [placeholder]=\"defaultFilterModel.processNoise\"\r\n            type=\"number\"\r\n            name=\"processNoise\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Measurement Noise (R):\r\n          <input\r\n            [(ngModel)]=\"settings.measurementNoise\"\r\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\r\n            type=\"number\"\r\n            name=\"measurementNoise\"\r\n          />\r\n        </label>\r\n      </form>\r\n      <br />\r\n      <br />\r\n      <div class=\"apply-button-container\">\r\n        <button (click)=\"reset()\">Reset</button>\r\n        <button (click)=\"saveSettings()\">Apply</button>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\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.8", ngImport: i0, type: FilterSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-filter-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"settings-container\">\r\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\r\n  @if (settings.panelOpen) {\r\n    <div class=\"settings-panel\">\r\n      <h3>LBM Trigger Settings</h3>\r\n      <h5>Data Flow Monitor</h5>\r\n      <form>\r\n        <label>\r\n          Monitoring delay:\r\n          <input\r\n            [(ngModel)]=\"settings.monitoringDelayTime\"\r\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\r\n            type=\"number\"\r\n            name=\"monitoringDelayTime\"\r\n          />\r\n        </label>\r\n\r\n        <label>\r\n          Minimum Bitrate (kbit/s):\r\n          <input\r\n            [(ngModel)]=\"settings.minimumBitrate\"\r\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\r\n            type=\"number\"\r\n            name=\"minimumBitrate\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Yellow Flag (%):\r\n          <input\r\n            [(ngModel)]=\"settings.yellowFlag\"\r\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\r\n            type=\"number\"\r\n            name=\"yellowFlag\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Red Flag (%):\r\n          <input\r\n            [(ngModel)]=\"settings.redFlag\"\r\n            [placeholder]=\"defaultFilterModel.redFlag\"\r\n            type=\"number\"\r\n            name=\"redFlag\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Minimum FPS:\r\n          <input\r\n            [(ngModel)]=\"settings.minimumFps\"\r\n            [placeholder]=\"defaultFilterModel.minimumFps\"\r\n            type=\"number\"\r\n            name=\"minimumFps\"\r\n          />\r\n        </label>\r\n        <hr />\r\n        <h5>Kalman Filter</h5>\r\n        <label>\r\n          Initial Bitrate Estimate (kbit/s):\r\n          <input\r\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\r\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\r\n            type=\"number\"\r\n            name=\"initialBitrateEstimate\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Initial Error Covariance:\r\n          <input\r\n            [(ngModel)]=\"settings.initialErrorCovariance\"\r\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\r\n            type=\"number\"\r\n            name=\"initialErrorCovariance\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Process Noise (Q):\r\n          <input\r\n            [(ngModel)]=\"settings.processNoise\"\r\n            [placeholder]=\"defaultFilterModel.processNoise\"\r\n            type=\"number\"\r\n            name=\"processNoise\"\r\n          />\r\n        </label>\r\n        <label>\r\n          Measurement Noise (R):\r\n          <input\r\n            [(ngModel)]=\"settings.measurementNoise\"\r\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\r\n            type=\"number\"\r\n            name=\"measurementNoise\"\r\n          />\r\n        </label>\r\n      </form>\r\n      <br />\r\n      <br />\r\n      <div class=\"apply-button-container\">\r\n        <button (click)=\"reset()\">Reset</button>\r\n        <button (click)=\"saveSettings()\">Apply</button>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\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"] }]
         }] });
@@ -6440,10 +6828,10 @@ class LowBandwidthDetectorComponent {
             this.store.dispatch(changeLowBandwidth({ lowBandwidth: false }));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\r\n  <div\r\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\r\n    class=\"lbm-indicator freeze-loader\"\r\n  >\r\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill=\"#85888E\"\r\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\"\r\n        />\r\n        <path\r\n          fill=\"#fff\"\r\n          fill-rule=\"evenodd\"\r\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\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div\r\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\r\n      class=\"lbm-message\"\r\n    >\r\n      <p class=\"lbm-description\">\r\n        Fluid Interactivity Modes were disabled due to an unstable connection.\r\n\r\n        <button\r\n          (click)=\"openLBMDialog()\"\r\n          [attr.data-testid]=\"'learn-more-lbm'\"\r\n          type=\"button\"\r\n          class=\"lbm-learn-more\"\r\n        >\r\n          Learn more\r\n        </button>\r\n      </p>\r\n      <button\r\n        (click)=\"toggleIndicator(false)\"\r\n        [attr.data-testid]=\"'close-lbm-indicator'\"\r\n        type=\"button\"\r\n        class=\"lbm-close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"20\"\r\n          height=\"20\"\r\n          viewBox=\"0 0 20 20\"\r\n          fill=\"none\"\r\n        >\r\n          <path\r\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\"\r\n            fill=\"white\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (isDevMode) {\r\n  <app-filter-settings />\r\n}\r\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);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.9", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\r\n  <div\r\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\r\n    class=\"lbm-indicator freeze-loader\"\r\n  >\r\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill=\"#85888E\"\r\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\"\r\n        />\r\n        <path\r\n          fill=\"#fff\"\r\n          fill-rule=\"evenodd\"\r\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\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div\r\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\r\n      class=\"lbm-message\"\r\n    >\r\n      <p class=\"lbm-description\">\r\n        Fluid Interactivity Modes were disabled due to an unstable connection.\r\n\r\n        <button\r\n          (click)=\"openLBMDialog()\"\r\n          [attr.data-testid]=\"'learn-more-lbm'\"\r\n          type=\"button\"\r\n          class=\"lbm-learn-more\"\r\n        >\r\n          Learn more\r\n        </button>\r\n      </p>\r\n      <button\r\n        (click)=\"toggleIndicator(false)\"\r\n        [attr.data-testid]=\"'close-lbm-indicator'\"\r\n        type=\"button\"\r\n        class=\"lbm-close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"20\"\r\n          height=\"20\"\r\n          viewBox=\"0 0 20 20\"\r\n          fill=\"none\"\r\n        >\r\n          <path\r\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\"\r\n            fill=\"white\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (isDevMode) {\r\n  <app-filter-settings />\r\n}\r\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);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.8", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\r\n  <div\r\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\r\n    class=\"lbm-indicator freeze-loader\"\r\n  >\r\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n        <path\r\n          fill=\"#85888E\"\r\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\"\r\n        />\r\n        <path\r\n          fill=\"#fff\"\r\n          fill-rule=\"evenodd\"\r\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\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div\r\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\r\n      class=\"lbm-message\"\r\n    >\r\n      <p class=\"lbm-description\">\r\n        Fluid Interactivity Modes were disabled due to an unstable connection.\r\n\r\n        <button\r\n          (click)=\"openLBMDialog()\"\r\n          [attr.data-testid]=\"'learn-more-lbm'\"\r\n          type=\"button\"\r\n          class=\"lbm-learn-more\"\r\n        >\r\n          Learn more\r\n        </button>\r\n      </p>\r\n      <button\r\n        (click)=\"toggleIndicator(false)\"\r\n        [attr.data-testid]=\"'close-lbm-indicator'\"\r\n        type=\"button\"\r\n        class=\"lbm-close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"20\"\r\n          height=\"20\"\r\n          viewBox=\"0 0 20 20\"\r\n          fill=\"none\"\r\n        >\r\n          <path\r\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\"\r\n            fill=\"white\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (isDevMode) {\r\n  <app-filter-settings />\r\n}\r\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);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"] }]
         }] });
@@ -6468,20 +6856,14 @@ function provideUnrealModule() {
         AFKService,
         SignallingService,
         StreamStatusTelemetryService,
+        StreamStatusTelemetryService2,
         FpsMonitorService,
-        {
-            provide: WebRtcPlayerService,
-            useFactory: () => {
-                const config = inject(UNREAL_CONFIG, { optional: true });
-                return config?.newWebRtcConnector
-                    ? new WebRtcPlayerService2()
-                    : new WebRtcPlayerService();
-            },
-        },
+        WebRtcPlayerService,
         provideEnvironmentInitializer(() => {
             inject(AggregatorService);
             inject(InputService);
             inject(StreamStatusTelemetryService);
+            inject(StreamStatusTelemetryService2);
             inject(ConsoleExtensionsService);
             inject(AFKService);
             inject(FreezeFrameService);
@@ -6495,5 +6877,5 @@ function provideUnrealModule() {
  * Generated bundle index. Do not edit.
  */
 
-export { AFKService, AfkTimeoutModalComponent, AggregatorService, AnalyticsService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, CommandTelemetryService, CommandsEffects, ConfigHandler, 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, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, 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, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryService, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, 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, getResizeStudioValues, getResizeStudioValuesOld, getResizeValuesUniversal, getResizeValuesUniversalOld, getRtcErrorMessage, iceConnectionFailed, initSignalling, keepMaxUntilReset, makeEven, provideUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, 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, AfkTimeoutModalComponent, AggregatorService, AnalyticsService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, CommandTelemetryService, CommandsEffects, ConfigHandler, 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, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, 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, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryService, StreamStatusTelemetryService2, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, 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, answerSent, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, commandsFeature, commandsReducer, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeStudioValuesOld, getResizeValuesUniversal, getResizeValuesUniversalOld, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, 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, trackTelemetryData, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map