@3dsource/angular-unreal-module 0.0.113-dev.0 → 0.0.113-dev.2

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

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectionStrategy, Component, Injectable, DestroyRef, effect, untracked, signal, computed, Pipe, input, ElementRef, viewChild, afterNextRender, HostListener, output, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
 import { SourceButtonComponent, SourceLoadingComponent } from '@3dsource/source-ui-native';
-import { merge, map, scan, concatMap, of, animationFrameScheduler, interval, Observable, switchMap, timer, take, timeout, mergeMap, EMPTY, debounceTime, Subject, skip, share, from, fromEvent, 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 { merge, map, scan, concatMap, of, animationFrameScheduler, interval, Observable, skip, switchMap, concat, delay, debounceTime, timer, take, timeout, mergeMap, EMPTY, Subject, share, takeUntil as takeUntil$1, from, fromEvent, throwError, defer, retry, tap as tap$1, NEVER, startWith, throttleTime, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, pairwise, Subscription, bufferTime, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { createAction, props, createReducer, on, createFeature, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, createEffect, ofType, provideEffects } from '@ngrx/effects';
-import { map as map$1, distinctUntilChanged, takeWhile, filter, tap, takeUntil, catchError, withLatestFrom, exhaustMap, 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 { map as map$1, distinctUntilChanged, takeWhile, filter, tap, takeUntil, catchError, withLatestFrom, exhaustMap, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1 } from 'rxjs/operators';
 import { Logger, calculateMedian, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, whereNot, Truthy, tapLog, Falsy, generateUuid, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
 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, EPayloadVersion } from '@3dsource/types-unreal';
-import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { v4 } from 'uuid';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgOptimizedImage, AsyncPipe, JsonPipe } from '@angular/common';
@@ -197,8 +197,11 @@ const DESTROY_DISCONNECT_REASONS = [
 
 const DEBOUNCE_TO_MANY_RESIZE_CALLS = 100;
 const SAME_SIZE_THRESHOLD = 1.01;
+// Minimum container dimension in px — prevents division by zero in resize calculations
+const MIN_CONTAINER_SIZE = 2;
 const MINIMAL_FPS = 6;
 const STREAMING_VIDEO_ID = 'streamingVideo';
+const STREAMING_AUDIO_ID = 'streamingAudio';
 const CONSOLE_COMMAND_ENABLE_MESSAGES = 'EnableAllScreenMessages';
 const CONSOLE_COMMAND_DISABLE_MESSAGES = 'DisableAllScreenMessages';
 const CONSOLE_COMMAND_PIXEL_QUALITY = 'PixelStreaming.FreezeFrameQuality 95';
@@ -229,7 +232,7 @@ const commandStarted = createAction(scoped$1 `command started`, props());
 const commandCompleted = createAction(scoped$1 `command completed`, props());
 
 const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
-const trackMixpanelEvent = createAction(scoped `track mixpanel event`, props());
+const trackMixpanelEvent = createAction(scoped `track Mixpanel event`, props());
 const trackTelemetryData = createAction(scoped `track telemetry data`, props());
 const setMaxFps = createAction(scoped `change fps`, props());
 const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
@@ -275,9 +278,9 @@ const instanceReady = createAction(scoped `instance ready`);
 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
+ * 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.
+ * two legs: config fetch vs. ping sweep. Observability-only.
  */
 const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
 /**
@@ -289,9 +292,9 @@ const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
  */
 const regionResolved = createAction(scoped `region resolved`, props());
 /**
- * Dispatched around the HTTP polling roundtrip inside `getAwsInstance`
+ * Dispatched around the HTTP polling roundup inside `getAwsInstance`
  * (old orchestration flow). Only fires when polling is actually used
- * (i.e. signaling URL is not a direct `ws://` / `wss://` endpoint).
+ * (i.e., signaling URL is not a direct `ws://` / `wss://` endpoint).
  * Observability-only — no state change.
  */
 const pollingStarted = createAction(scoped `polling started`);
@@ -310,11 +313,7 @@ const setAfkTimerVisible = createAction(scoped `set afk timer visible`);
 const setAfkTimerHide = createAction(scoped `set afk timer hide`);
 const setAfkTimerCountdown = createAction(scoped `set afk timer count down`, props());
 const showUnrealErrorMessage = createAction(scoped `show unreal error message`, props());
-const initSignalling = createAction(scoped `init signalling`, (data = {
-    resetDisconnectionReason: true,
-}) => ({
-    resetDisconnectionReason: data.resetDisconnectionReason,
-}));
+const initSignalling = createAction(scoped `init signalling`, (resetDisconnectionReason = true) => ({ resetDisconnectionReason }));
 const startStream = createAction(scoped `startStream`, props());
 const resetConfig = createAction(scoped `reset config`);
 const resetAfk = createAction(scoped `reset afk action`);
@@ -339,8 +338,9 @@ const dropDC = createAction(scoped `drop data channel`);
 const dropPC = createAction(scoped `drop peer connection`);
 const showLoadingProgress = createAction(scoped `show loading progress`, props());
 const showResumeStreamPopup = createAction(scoped `show resume stream popup`, props());
-const showAfkTimeoutPopup = createAction(scoped `show afk timeout popup`, props());
-const setAfkTimeout = createAction(scoped `set afk timeout`, props());
+const showUserInactivityTimeoutPopup = createAction(scoped `show user inactivity timeout popup`, props());
+const setUserInactivityTimeout = createAction(scoped `set user inactivity timeout`, props());
+const resetUserInactivityTimeout = createAction(scoped `reset user inactivity timeout`);
 
 const initialState$1 = {
     streamRequestContext: null,
@@ -372,7 +372,7 @@ const initialState$1 = {
         autoStart: true,
         warnTimeout: DEFAULT_AFK_TIMEOUT,
     },
-    afkTimeout: DEFAULT_AFK_TIMEOUT,
+    userInactivityTimeout: DEFAULT_AFK_TIMEOUT,
     matchUrls: [],
     streamClientCompanyId: '',
     streamViewId: 'default',
@@ -385,9 +385,18 @@ const initialState$1 = {
     showAfkTimeoutPopup: true,
 };
 const unrealReducer = createReducer(initialState$1, on(changeStatusMainVideoOnScene, (state, { isVideoPlaying }) => {
-    return { ...state, isVideoPlaying: isVideoPlaying };
+    return { ...state, isVideoPlaying };
 }), on(setAwsInstance, (state, { instanceName, wsUrl, pollingUrl }) => {
-    return { ...state, awsInstance: { instanceName, wsUrl, pollingUrl } };
+    return {
+        ...state,
+        awsInstance: {
+            ...state.awsInstance,
+            instanceName,
+            wsUrl,
+            pollingUrl,
+            progressComplete: 0,
+        },
+    };
 }), on(setViewportReady, (state) => {
     return {
         ...state,
@@ -414,15 +423,11 @@ const unrealReducer = createReducer(initialState$1, on(changeStatusMainVideoOnSc
         },
     };
 }), on(disconnectStream, (state, errorMessage) => {
-    if (state.dataChannelConnected ||
-        state.disconnectReason === DisconnectReason.Destroy) {
+    const alreadyHandled = state.dataChannelConnected ||
+        state.disconnectReason === DisconnectReason.Destroy;
+    if (alreadyHandled)
         return state;
-    }
-    return {
-        ...state,
-        errorMessage,
-        statusMessage: null,
-    };
+    return { ...state, errorMessage, statusMessage: null };
 }), on(setFreezeFrameFromVideo, (state, freezeFrameFromVideo) => {
     return {
         ...state,
@@ -449,14 +454,17 @@ const unrealReducer = createReducer(initialState$1, on(changeStatusMainVideoOnSc
 }), on(resetWarnTimeout, (state) => {
     return {
         ...state,
-        streamConfig: { ...state.streamConfig, warnTimeout: state.afkTimeout },
+        streamConfig: {
+            ...state.streamConfig,
+            warnTimeout: state.userInactivityTimeout,
+        },
     };
 }), on(resetConfig, (state) => {
     return {
         ...state,
         streamConfig: {
             ...initialState$1.streamConfig,
-            warnTimeout: state.afkTimeout,
+            warnTimeout: state.userInactivityTimeout,
         },
     };
 }), on(initSignalling, (state, { resetDisconnectionReason = true }) => {
@@ -537,12 +545,12 @@ const unrealReducer = createReducer(initialState$1, on(changeStatusMainVideoOnSc
     return { ...state, showLoadingProgress: visible };
 }), on(showResumeStreamPopup, (state, { visible }) => {
     return { ...state, showResumeStreamPopup: visible };
-}), on(showAfkTimeoutPopup, (state, { visible }) => {
+}), on(showUserInactivityTimeoutPopup, (state, { visible }) => {
     return { ...state, showAfkTimeoutPopup: visible };
-}), on(setAfkTimeout, (state, { timeout }) => {
+}), on(setUserInactivityTimeout, (state, { timeout }) => {
     return {
         ...state,
-        afkTimeout: timeout,
+        userInactivityTimeout: timeout,
         streamConfig: { ...state.streamConfig, warnTimeout: timeout },
     };
 }), on(setCirrusDisconnected, (state) => {
@@ -560,7 +568,7 @@ const unrealReducer = createReducer(initialState$1, on(changeStatusMainVideoOnSc
         environmentId: state.environmentId,
         streamRequestContext: state.streamRequestContext,
         streamConfig: state.streamConfig,
-        afkTimeout: state.afkTimeout,
+        userInactivityTimeout: state.userInactivityTimeout,
     };
 }), on(dropConnection, (state) => {
     return { ...state, establishingConnection: false };
@@ -1079,63 +1087,6 @@ function getResizeValuesUniversal(params) {
     return { w: makeEven(w), h: makeEven(h), x: 0, y: 0, scale: w / maxSpace.w };
 }
 
-//TODO: Remove this legacy method after confirming that `getResizeValuesUniversal`
-// works well in all scenarios and updating any dependent code to use it instead.
-function getResizeValuesUniversalOld(params) {
-    const { pixelRatio, containerWidth, containerHeight, maxResolution } = params;
-    const maxSpace = {
-        w: containerWidth * pixelRatio,
-        h: containerHeight * pixelRatio,
-    };
-    const isVertical = containerWidth < containerHeight;
-    let maxH = FULL_HD_HEIGHT;
-    let maxW = FULL_HD_WIDTH;
-    if (maxResolution) {
-        maxH = FULL_HD_HEIGHT * 2;
-        maxW = FULL_HD_WIDTH * 2;
-    }
-    const maxLimits = isVertical
-        ? { w: maxH, h: maxW, x: 0, y: 0 }
-        : { w: maxW, h: maxH, x: 0, y: 0 };
-    const props = fitIntoRectangle({ x: 0, y: 0, w: containerWidth, h: containerHeight }, { x: 0, y: 0, ...maxSpace });
-    let out = { ...props };
-    const fitIntoMax = fitIntoRectangle(props, maxLimits);
-    if (fitIntoMax.scale < 1) {
-        // If reducing size to 1920x1080 is required, do it
-        out = fitIntoMax;
-    }
-    else {
-        // Otherwise, use the lowest resolution because the layout size is smaller than 1920x1080
-        out.scale = 1;
-    }
-    /**
-     * Ensure that the size is always even.
-     */
-    out.w = makeEven(out.w);
-    out.h = makeEven(out.h);
-    return { ...out };
-}
-function getResizeStudioValuesOld(params) {
-    const { pixelRatio, containerWidth, containerHeight, studioWidth, studioHeight, } = params;
-    const maxSpace = {
-        w: containerWidth * pixelRatio,
-        h: containerHeight * pixelRatio,
-    };
-    const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: studioWidth, h: studioHeight }, { x: 0, y: 0, ...maxSpace });
-    const out = fitIntoRectangle(videoSizePixelPerfect, {
-        x: 0,
-        y: 0,
-        w: Math.min(maxSpace.w, FULL_HD_WIDTH),
-        h: Math.min(maxSpace.h, FULL_HD_HEIGHT),
-    });
-    /**
-     * Ensure that the size is always even.
-     */
-    out.w = makeEven(out.w);
-    out.h = makeEven(out.h);
-    return out;
-}
-
 const removeExileCommands = (state, idToRemove) => {
     const exileTimeout = 10000;
     const out = { ...state };
@@ -1143,11 +1094,11 @@ const removeExileCommands = (state, idToRemove) => {
     out.totalCommandsCompleted++;
     const time = new Date().getTime();
     const markForDelete = [];
-    Object.entries(out.commandsInProgress).forEach(([, { id, timeStamp }]) => {
+    for (const { id, timeStamp } of out.commandsInProgress) {
         if (time - timeStamp > exileTimeout) {
             markForDelete.push(id);
         }
-    });
+    }
     out.totalCommandsCompleted += markForDelete.length;
     out.commandsInProgress = out.commandsInProgress.filter((command) => !markForDelete.includes(command.id));
     return out;
@@ -1180,7 +1131,6 @@ const commandsFeature = createFeature({
     reducer: commandsReducer,
 });
 
-const selectCommandsInProgress = createSelector(commandsFeature.selectCommandsInProgress, (commandsInProgress) => commandsInProgress?.length ?? 0);
 const selectCommandProgress = createSelector(commandsFeature.selectTotalCommandsStarted, commandsFeature.selectTotalCommandsCompleted, (totalCommandsStarted, totalCommandsCompleted) => totalCommandsStarted ? totalCommandsCompleted / totalCommandsStarted : 0);
 
 const selectFreezeFrameDataUrlFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.dataUrl || null);
@@ -1194,9 +1144,8 @@ const selectStreamConfig = createSelector(unrealFeature.selectStreamConfig, (con
 const selectWarnTimeout = createSelector(selectStreamConfig, (config) => config?.warnTimeout || DEFAULT_AFK_TIMEOUT);
 const selectIsExistMatchUrls = createSelector(unrealFeature.selectMatchUrls, (urls) => urls?.length > 0);
 const selectIsAutostart = createSelector(selectStreamConfig, (config) => config?.autoStart);
-const selectShowReconnectPopup = createSelector(unrealFeature.selectCirrusConnected, unrealFeature.selectEstablishingConnection, (connected, establishing) => !connected && !establishing);
-const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, unrealFeature.selectShowLoadingProgress, (showPopup, viewportReady, selectShowLoadingProgress) => !showPopup && !viewportReady && selectShowLoadingProgress);
-const selectIsVideoPlayingAndDataChannelConnected = createSelector(unrealFeature.selectIsVideoPlaying, unrealFeature.selectDataChannelConnected, (isVideoPlaying, isDataChannelConnected) => isVideoPlaying && isDataChannelConnected);
+const selectShowReconnectPopup = createSelector(unrealFeature.selectCirrusConnected, unrealFeature.selectEstablishingConnection, (cirrusConnected, establishingConnection) => !cirrusConnected && !establishingConnection);
+const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, (showPopup, viewportReady) => !showPopup && !viewportReady);
 const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unrealFeature.selectAwsInstance, (data, instance) => {
     const info = [];
     if (data) {
@@ -1209,29 +1158,37 @@ const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unr
     return info.join('<br>');
 });
 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 selectIsFullyConnected = createSelector(unrealFeature.selectViewportReady, unrealFeature.selectDataChannelConnected, unrealFeature.selectCirrusConnected, (viewportReady, dataChannelConnected, cirrusConnected) => viewportReady && dataChannelConnected && cirrusConnected);
+const selectIsLoaderScreenVisible = createSelector(selectIsFullyConnected, (fullyConnected) => !fullyConnected);
 const selectCirrusConnectionId = createSelector(unrealFeature.selectSsData, (data) => data?.connectionId);
 /**
- * Returns Scene load progress as a float value in between 0-1
+ * Returns Scene load progress as a float value between 0 and 1.
+ *
+ * Progress is split into two phases:
+ * 1. **Signaling** (0 → ~56%): connection polling or orchestration progress.
+ *    Starts at 0.1%, so the bar is never visually empty while connecting.
+ * 2. **Commands** (~56% → 100%): Unreal command progress after the data channel connects.
+ *
+ * The split point bumps by +1% once the WebSocket URL is known,
+ * producing a small visual step that indicates the WS handshake succeeded.
  */
 const selectTotalProgress = createSelector(unrealFeature.selectStatusPercentSignallingServer, selectCommandProgress, unrealFeature.selectAwsInstance, unrealFeature.selectDataChannelConnected, (statusPercentSignallingServer, commandProgress, awsInstance, dataChannelConnected) => {
-    // TODO make better mechanism to detect is new orchestration
-    const isNewOrchestration = String(awsInstance?.wsUrl).match(/^wss:\/\/orchestration-websocket/i);
-    const newOrchestrationProgressComplete = dataChannelConnected
-        ? 100
-        : (awsInstance?.progressComplete || 0) * 100;
-    /**
-     * Set 57% {@link SIGNALLING_PERCENT_VALUE} immediately when signalingServer?.signalingUrl is available
-     * Up to 56% {@link SIGNALLING_PERCENT_VALUE} - 1 of the progress is reserved for signaling server polling
-     */
-    const signalingPercentValue = isNewOrchestration
-        ? newOrchestrationProgressComplete
-        : statusPercentSignallingServer;
     const SIGNALLING_MAX = SIGNALLING_PERCENT_VALUE / 100;
+    const ORCHESTRATION_WS_PATTERN = /^wss:\/\/orchestration-websocket/i;
+    const isNewOrchestration = ORCHESTRATION_WS_PATTERN.test(awsInstance?.wsUrl ?? '');
+    // Orchestration progress is 0–1 from the backend; map to 0–1 directly.
+    // Once the data channel is connected, signaling is fully complete (1.0).
+    const signalingProgress = isNewOrchestration
+        ? dataChannelConnected
+            ? 1
+            : (awsInstance?.progressComplete ?? 0)
+        : (statusPercentSignallingServer ?? 0) / 100;
+    // +1% bump once WS URL is known (visual step for WS handshake)
     const splitPoint = awsInstance?.wsUrl
         ? SIGNALLING_MAX + 0.01
         : SIGNALLING_MAX;
-    const progressSignaling = lerp(0.001, splitPoint, (signalingPercentValue ?? 0) / 100);
+    // 0.001 minimum so the bar is never completely empty while loading
+    const progressSignaling = lerp(0.001, splitPoint, signalingProgress);
     const progressRest = lerp(0, 1 - splitPoint, commandProgress);
     return clampf(0, 1, progressSignaling + progressRest);
 });
@@ -1284,37 +1241,12 @@ class UnrealEffects {
             onDataChannelClose: this.unrealInitialConfig?.reconnect?.onDataChannelClose ??
                 DEFAULT_RECONNECT_ON_DATACHANNEL_CLOSE,
         };
-        this.disconnectReasonHandling$ = createEffect(() => {
-            return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => {
-                // Skip DataChannelClosed if peer reconnection is enabled and signaling is connected
-                // The peer reconnection effect will handle this case
-                if (reason === DisconnectReason.DataChannelClosed &&
-                    this.reconnectConfig.enabled &&
-                    this.reconnectConfig.onDataChannelClose &&
-                    this.signallingService.isConnected()) {
-                    Logger.info('[Reconnect] Skipping destroy for DataChannelClosed - peer reconnection will handle');
-                    return false;
-                }
-                return DESTROY_DISCONNECT_REASONS.includes(reason);
-            }), tap(({ reason, message }) => {
-                Logger.log(`Disconnect Call=> reason:'${reason}', message:'${message}'`);
-            }), map(({ reason }) => destroyRemoteConnections({ reason })));
-        });
         this.destroyConnections$ = createEffect(() => {
             return this.actions$.pipe(ofType(destroyUnrealScene), tap(() => {
                 this.commandsSender.destroy();
                 this.videoService.setContainer(null);
             }), map(() => destroyRemoteConnections({ reason: DisconnectReason.Destroy })));
         });
-        this.destroyRemoteConnections$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), tap(({ reason }) => {
-                this.signallingService.close({
-                    code: WSCloseCode_FORCE_CIRRUS_CLOSE,
-                    reason,
-                });
-                this.webRtcPlayerService.closePC();
-            }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map(() => dropConnection()));
-        });
         this.changeStreamResolution$ = createEffect(() => {
             return this.actions$.pipe(ofType(changeStreamResolutionAction), filter((size) => !!(size?.width && size?.height)), concatLatestFrom(() => this.store.select(unrealFeature.selectStreamResolution)), filter(([newSizes, savedSizes]) => !(newSizes.width === savedSizes.width &&
                 newSizes.height === savedSizes.height)), map(([sizes]) => changeStreamResolutionSuccessAction({
@@ -1323,11 +1255,25 @@ class UnrealEffects {
             })));
         });
         this.resetAfk$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setConfig, setAfkTimeout, resetWarnTimeout, resetConfig), map(() => resetAfk()));
+            return this.actions$.pipe(ofType(setConfig, setUserInactivityTimeout, resetWarnTimeout, resetConfig), map(() => resetAfk()));
         });
         this.abortEstablishingConnection$ = createEffect(() => {
-            return merge(this.store.select(unrealFeature.selectViewportReady).pipe(filter(Truthy)), this.actions$.pipe(ofType(setCirrusDisconnected, destroyUnrealScene, dropConnection))).pipe(tapLog('ABORT'), map(() => abortEstablishingConnection()));
+            return this.actions$.pipe(ofType(setCirrusDisconnected, dropConnection, destroyUnrealScene), map(() => abortEstablishingConnection()));
         });
+        this.iframeMessaging$ = createEffect(() => {
+            const cirrusConnected$ = this.store
+                .select(unrealFeature.selectCirrusConnected)
+                .pipe(skip(1));
+            // On disconnect: immediately show 'Connection closed.', nullify after 2s
+            const cirrusStatus$ = cirrusConnected$.pipe(switchMap((connected) => connected
+                ? of('Creating Socket...')
+                : concat(of('Connection closed.'), of(null).pipe(delay(2000)))));
+            // Skip initial false; emit null on every viewport state change
+            const viewportReset$ = this.store
+                .select(unrealFeature.selectViewportReady)
+                .pipe(skip(1), delay(500), map(() => null));
+            return merge(cirrusStatus$, this.store.select(unrealFeature.selectStatusMessage), viewportReset$).pipe(debounceTime(0), distinctUntilChanged(), tapLog('STATUS=>'), tap((status) => this.postToScreenLocker(status)));
+        }, { dispatch: false });
         this.setSignalingTo100$ = createEffect(() => {
             return this.actions$.pipe(ofType(setAwsInstance), map(() => setStatusPercentSignallingServer({ percent: 100 })));
         });
@@ -1377,8 +1323,35 @@ class UnrealEffects {
                 }));
             }));
         });
+        /**
+         * Effect: `forceViewportNotReady$`
+         *
+         * Ensures the viewport is explicitly marked as *not ready* to prevent
+         * a temporary black screen flash when disconnecting.
+         *
+         * ### Why
+         * - The video stream is disconnected immediately.
+         * - The DataChannel closes slightly later.
+         * - Closing the DataChannel resets the Unreal scene,
+         *   which also sets `viewPortReady` to `false`.
+         *
+         * Without this effect, the order of these events may cause
+         * a visible flicker (video flashing to black).
+         */
+        this.forceViewportNotReady$ = createEffect(() => {
+            return this.actions$.pipe(ofType(destroyRemoteConnections), concatLatestFrom(() => this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady), map(() => setViewportNotReady()));
+        });
         this.resetCirrusOnDestroy$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), map(() => setCirrusDisconnected()));
+            return this.actions$.pipe(ofType(destroyRemoteConnections), concatLatestFrom(() => this.store.select(unrealFeature.selectCirrusConnected)), filter(([, cirrusConnected]) => cirrusConnected), map(() => setCirrusDisconnected()));
+        });
+        this.destroyRemoteConnections$ = createEffect(() => {
+            return this.actions$.pipe(ofType(destroyRemoteConnections), tap(({ reason }) => {
+                this.signallingService.close({
+                    code: WSCloseCode_FORCE_CIRRUS_CLOSE,
+                    reason,
+                });
+                this.webRtcPlayerService.closePC();
+            }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map(() => dropConnection()));
         });
         this.destroyConnectionAndRestart$ = createEffect(() => {
             return this.actions$.pipe(ofType(setCirrusDisconnected), concatLatestFrom(() => this.store.select(unrealFeature.selectDisconnectReason)), filter(([, reason]) => reason === DisconnectReason.DataChannelTimeout), map(() => initSignalling()));
@@ -1404,7 +1377,7 @@ class UnrealEffects {
                 });
                 this.commandTelemetryService.trackStartCommand('EXT-SetViewportReady');
             }), switchMap(() => 
-            // Wait for initial commands to be sent before sending loopback.
+            // Wait for initial commands to be sent before sending the loopback.
             // commandStarted fires for each sent command; debounce ensures
             // we proceed only after no more commands are started for 100 ms.
             this.actions$.pipe(ofType(commandStarted), debounceTime(100), take(1), switchMap(() => this.unrealCallbackService.observeCommandResponse({ command: MetaBoxCommand.FLoopBackCommand }, (data) => this.commandsSender.sendCommandToUnreal(data))), switchMap(() => this.videoService.videoStats$), filter(({ aggregatedStats: s }) => !!s.framesPerSecond &&
@@ -1417,23 +1390,8 @@ class UnrealEffects {
         this.startStream$ = createEffect(() => {
             return this.actions$.pipe(ofType(startStream), map(() => initSignalling()));
         });
-        /**
-         * Effect: `forceViewportNotReady$`
-         *
-         * Ensures the viewport is explicitly marked as *not ready* to prevent
-         * a temporary black screen flash when disconnecting.
-         *
-         * ### Why
-         * - The video stream is disconnected immediately.
-         * - The DataChannel closes slightly later.
-         * - Closing the DataChannel resets the Unreal scene,
-         *   which also sets `viewPortReady` to `false`.
-         *
-         * Without this effect, the order of these events may cause
-         * a visible flicker (video flashing to black).
-         */
-        this.forceViewportNotReady$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), map(() => setViewportNotReady()));
+        this.resetAfkOnVideoStart$ = createEffect(() => {
+            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), tap(() => Logger.info('Simulate Press Play')), map(() => resetAfk()));
         });
         /**
          * Effect: `handleDataChannelClosed$`
@@ -1442,11 +1400,22 @@ class UnrealEffects {
          * Only triggers if reconnection is enabled, onDataChannelClose is true,
          * and the signaling WebSocket is still connected.
          */
+        this.disconnectReasonHandling$ = createEffect(() => {
+            return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => {
+                // Skip DataChannelClosed if peer reconnection will handle this case
+                if (reason === DisconnectReason.DataChannelClosed &&
+                    this.canPeerReconnect()) {
+                    Logger.info('[Reconnect] Skipping destroy for DataChannelClosed - peer reconnection will handle');
+                    return false;
+                }
+                return DESTROY_DISCONNECT_REASONS.includes(reason);
+            }), tap(({ reason, message }) => {
+                Logger.log(`Disconnect Call=> reason:'${reason}', message:'${message}'`);
+            }), map(({ reason }) => destroyRemoteConnections({ reason })));
+        });
         this.handleDataChannelClosed$ = createEffect(() => {
             return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => reason === DisconnectReason.DataChannelClosed &&
-                this.reconnectConfig.enabled &&
-                this.reconnectConfig.onDataChannelClose &&
-                this.signallingService.isConnected()), tap(() => {
+                this.canPeerReconnect()), tap(() => {
                 Logger.warn('[Reconnect] DataChannel closed, initiating peer reconnection');
             }), map(() => reconnectPeer({
                 attempt: 1,
@@ -1454,6 +1423,11 @@ class UnrealEffects {
                 delay: 0,
             })));
         });
+        this.webrtcErrorModalComponent$ = createEffect(() => {
+            return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => reason === DisconnectReason.WebRTCError), debounceTime(400), switchMap(() => this.store
+                .select(unrealFeature.selectDataChannelConnected)
+                .pipe(take(1), filter(Falsy))), tap(() => this.dialog.open(WebrtcErrorModalComponent)));
+        }, { dispatch: false });
         /**
          * Effect: `resetStateForPeerReconnect$`
          *
@@ -1525,11 +1499,6 @@ class UnrealEffects {
                 });
             }));
         }, { dispatch: false });
-        this.webrtcErrorModalComponent$ = createEffect(() => {
-            return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => reason === DisconnectReason.WebRTCError), debounceTime(400), switchMap(() => this.store
-                .select(unrealFeature.selectDataChannelConnected)
-                .pipe(take(1), filter(Falsy))), tap(() => this.dialog.open(WebrtcErrorModalComponent)));
-        }, { dispatch: false });
         this.sendStatisticsToUnreal$ = createEffect(() => {
             return this.actions$.pipe(ofType(showUnrealErrorMessage), filter(({ code }) => code === 404), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), this.store.select(unrealFeature.selectStreamClientCompanyId), this.store.select(unrealFeature.selectStreamViewId)), switchMap(([action, instance, companyId, viewId]) => this.http
                 .post(this.unrealInitialConfig?.customErrorsEndpoint || '', {
@@ -1557,16 +1526,21 @@ class UnrealEffects {
             // Ensure a single in-flight request per attempt.
             exhaustMap((urls) => this.signallingService.connectToSignaling(urls)));
         }, { dispatch: false });
-        /**
-         * Effect: `logPeerReconnectSuccess$`
-         *
-         * Logs successful peer reconnection for telemetry.
-         */
-        this.logPeerReconnectSuccess$ = createEffect(() => {
-            return this.actions$.pipe(ofType(reconnectPeerSuccess), tap(() => {
-                Logger.info('[Reconnect] Peer connection restored successfully');
-            }));
-        }, { dispatch: false });
+    }
+    canPeerReconnect() {
+        return (this.reconnectConfig.enabled &&
+            this.reconnectConfig.onDataChannelClose &&
+            this.signallingService.isConnected());
+    }
+    postToScreenLocker(text) {
+        try {
+            const el = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ??
+                SCREEN_LOCKER_CONTAINER_ID);
+            el?.contentWindow?.postMessage(text, '*');
+        }
+        catch {
+            // Fails silently if cross-origin
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealEffects }); }
@@ -1601,7 +1575,7 @@ class SubService {
         this.disconnect$ = this.store
             .select(unrealFeature.selectCirrusConnected)
             .pipe(skip(1), filter(Falsy), share());
-        this._destroy = this.destroyRef.onDestroy(() => {
+        this.destroyRef.onDestroy(() => {
             this.destroy$.next();
             this.destroy$.complete();
         });
@@ -1612,13 +1586,13 @@ class AFKService extends SubService {
     constructor() {
         super();
         this.active = false; // Whether the AFK system is currently looking for inactivity.
-        this.countdown = 0; // The inactivity warning overlay has a countdown to show time until disconnect.
+        this.countdown = 0;
         this.warnTimeout = this.store.selectSignal(selectWarnTimeout);
+        this.isAfkTimerVisible = this.store.selectSignal(unrealFeature.selectIsAfkTimerVisible);
         this.isViewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
         /** Ticks every time warnTimeout changes or resetAfk action fires */
         this.afkResetTrigger = toSignal(merge(this.store.select(selectWarnTimeout), this.actions$.pipe(ofType(resetAfk))));
-        /** Ticks when cirrus disconnects */
         this.disconnected = toSignal(this.disconnect$);
         this.destroyRef.onDestroy(() => this.clearTimers());
         if (this.unrealConfig?.playwright) {
@@ -1640,15 +1614,20 @@ class AFKService extends SubService {
                 untracked(() => this.startAfkWarningTimer());
             }
         });
-        // Stop on disconnect
         effect(() => {
             const disconnected = this.disconnected();
             if (disconnected !== undefined) {
                 untracked(() => this.stop());
             }
         });
+        this.actions$
+            .pipe(ofType(resetUserInactivityTimeout), takeUntil$1(this.destroy$))
+            .subscribe(() => this.reset());
     }
     hideOverlay() {
+        if (!this.isAfkTimerVisible()) {
+            return;
+        }
         this.store.dispatch(setAfkTimerHide());
     }
     /**
@@ -1724,11 +1703,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+class LoadingProgressService {
+    constructor() {
+        this.#store = inject(Store);
+        this.loaderVisible = this.#store.selectSignal(selectShowLoader);
+        this.percents = toSignal(this.#store
+            .select(selectTotalProgress)
+            .pipe(keepMaxUntilReset(toObservable(this.loaderVisible).pipe(filter(Falsy))), floatToSmoothPercents(), distinctUntilChanged()));
+    }
+    #store;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LoadingProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LoadingProgressService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LoadingProgressService, decorators: [{
+            type: Injectable
+        }] });
+
 class FreezeFrameService extends SubService {
     constructor() {
         super();
         this.receiving = false;
         this.size = 0;
+        this.jpeg = undefined;
         this.freezeFrameOverlay = new Image();
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
         this.init();
@@ -1842,6 +1838,7 @@ const BITRATE_MONITOR = new DataFlowMonitor(FilterModel.yellowFlag, FilterModel.
 class VideoService extends SubService {
     constructor() {
         super(...arguments);
+        this.isVideoPlaying = this.store.selectSignal(unrealFeature.selectIsVideoPlaying);
         this.video = null;
         this.audio = null;
         this.container = null;
@@ -1881,7 +1878,7 @@ class VideoService extends SubService {
             this.videoTrack$.next({ stream, pcClient });
         }
         else {
-            console.error('Video element is not defined.');
+            Logger.error('Video element is not defined.');
         }
     }
     attachAudioStream(stream) {
@@ -1958,7 +1955,7 @@ class VideoService extends SubService {
         catch (err) {
             // Handle InvalidStateError or any transient WebRTC errors gracefully
             if (err instanceof DOMException && err.name === 'InvalidStateError') {
-                console.warn('Peer connection is closed or unusable, skipping stats.');
+                Logger.warn('Peer connection is closed or unusable, skipping stats.');
                 return null;
             }
             throw err;
@@ -2065,6 +2062,7 @@ class VideoService extends SubService {
         if (!this.video) {
             return;
         }
+        this.changeStatusMainVideoOnScene(false);
         this.video = null;
         this.audio = null;
         this.videoTrack$.next(null);
@@ -2076,7 +2074,12 @@ class VideoService extends SubService {
         while (this.container?.firstChild) {
             this.container.removeChild(this.container.firstChild);
         }
-        this.store.dispatch(changeStatusMainVideoOnScene({ isVideoPlaying: false }));
+    }
+    changeStatusMainVideoOnScene(isVideoPlaying) {
+        if (this.isVideoPlaying() === isVideoPlaying) {
+            return;
+        }
+        this.store.dispatch(changeStatusMainVideoOnScene({ isVideoPlaying }));
     }
     createWebRtcVideo() {
         dispatchResize();
@@ -2089,18 +2092,14 @@ class VideoService extends SubService {
         video.disablePictureInPicture = true;
         this.video = video;
         this.container?.appendChild(this.video);
-        this.video.addEventListener('play', () => this.store.dispatch(changeStatusMainVideoOnScene({ isVideoPlaying: true })));
+        this.video.addEventListener('play', () => this.changeStatusMainVideoOnScene(true));
         fromEvent(this.video, 'loadedmetadata')
-            .pipe(take(1), filter((data) => this.video === data.target), tapLog('VideoService loadedmetadata:'))
-            .subscribe(() => {
-            if (this.video) {
-                this.store.dispatch(videoStreamInitialized());
-            }
-        });
+            .pipe(take(1), filter((data) => this.video === data.target), tapLog('VideoService loadedmetadata:'), filter(() => !!this.video))
+            .subscribe(() => this.store.dispatch(videoStreamInitialized()));
     }
     createWebRtcAudio() {
         const audio = new Audio();
-        audio.id = 'streamingAudio';
+        audio.id = STREAMING_AUDIO_ID;
         this.audio = audio;
     }
     playAudio(audio) {
@@ -2573,7 +2572,9 @@ class SignallingService extends SubService {
             return;
         }
         this.setHandlersFromStream();
-        this.action$.pipe(ofType(dataChannelReady)).subscribe(() => {
+        this.action$
+            .pipe(ofType(dataChannelReady), takeUntil(this.abort$))
+            .subscribe(() => {
             this.send({
                 type: 'p2pEstablished',
                 source: 'front',
@@ -2583,7 +2584,7 @@ class SignallingService extends SubService {
         this.action$
             .pipe(ofType(dataChannelReady), switchMap(() => this.store
             .select(unrealFeature.selectViewportReady)
-            .pipe(filter(Truthy), take(1))))
+            .pipe(filter(Truthy), take(1))), takeUntil(this.abort$))
             .subscribe(() => {
             this.send({
                 type: 'streamPreparedForUserInteraction',
@@ -2615,10 +2616,10 @@ class SignallingService extends SubService {
             },
             // count: 10, // Optional: cap the number of attempts.
         }), 
-        // abort$ sits OUTSIDE retry so it kills the entire retry loop,
+        // abort$ sits OUTSIDE retry, so it kills the entire retry loop,
         // not just the current attempt. Each inner createWebSocket also
         // receives abort$ independently, so mid-connection attempts are
-        // cancelled too.
+        // canceled too.
         takeUntil(this.abort$));
     }
     startEstablishingConnection() {
@@ -2644,7 +2645,7 @@ class SignallingService extends SubService {
      *
      * 1. **Telemetry** — Starts a `getSignaling` span for end-to-end timing.
      * 2. **Candidate URL selection** — A stateful generator (`urlGen`) is created
-     *    from `urlsPool`. Each resubscription (e.g. via `retry`) advances to the next URL.
+     *    from `urlsPool`. Each resubscription (e.g., via `retry`) advances to the next URL.
      * 3. **Short-circuit for WS URLs** — If the picked candidate already matches
      *    `ws://` or `wss://`, emit `{ wsUrl, pollingUrl: null, instanceName: null }`
      *    immediately and complete (no HTTP request).
@@ -2656,7 +2657,7 @@ class SignallingService extends SubService {
      *    while the request is in flight are **ignored** until completion, preventing overlap.
      * 6. **Per-attempt timeout** — `timeout(WS_TIMEOUT)` caps how long we wait for a response.
      *    On timeout, the attempt errors and the outer `retry` schedules the next URL.
-     * 7. **Response validation & progress reporting** — A `filter`:
+     * 7. **Response validation and progress reporting** — A `filter`:
      *    - Calls `TelemetryStop('getSignaling', { ...data, multi: true })` on receipt.
      *    - If `data.signallingServer === ''` or `data.error`:
      *      shows a status message, optionally dispatches `setStatusPercentSignallingServer`
@@ -2673,7 +2674,7 @@ class SignallingService extends SubService {
      *
      * ### Concurrency semantics
      *
-     * - `exhaustMap` guarantees a **single** HTTP request per attempt; subsequent
+     * - `exhaustMap` guarantees a **single** HTTP request per attempt; later
      *   `{clientId, viewId}` emissions are ignored until the current request completes.
      *
      * ### Telemetry semantics
@@ -2707,7 +2708,7 @@ class SignallingService extends SubService {
      * @remarks
      * - The URL generator (`urlGen`) is created **outside** `defer`, so resubscriptions
      *   advance the pool. Creating it inside `defer` would restart from the first URL each retry.
-     * - `location.protocol` is used to derive `ws` vs `wss`. If this may run in non-browser
+     * - `location.protocol` is used to derive `ws` vs. `wss`. If this may run in non-browser
      *   contexts (e.g., SSR), guard or abstract this logic.
      * - Consider capping retries with `count` in `retry({ count, delay })` when appropriate.
      *
@@ -2740,7 +2741,7 @@ class SignallingService extends SubService {
                     };
                 }));
             }
-            // Old (HTTP-polling) orchestration flow — mark the roundtrip so
+            // Old (HTTP-polling) orchestration flow — mark the round trip so
             // the signaling-phase timeline can show it as a distinct segment.
             this.store.dispatch(pollingStarted());
             return this.store.select(selectClientAndViewIds).pipe(
@@ -2914,6 +2915,8 @@ class WebRtcPlayerService extends SubService {
     constructor() {
         super();
         this.onDataChannelMessage$ = new Subject();
+        this.pcClient = null;
+        this.dcClient = null;
         this.signallingSrv = inject(SignallingService);
         this.videoService = inject(VideoService);
         this.commandTelemetryService = inject(CommandTelemetryService);
@@ -2927,29 +2930,37 @@ class WebRtcPlayerService extends SubService {
         this.iceCandidateBuffer = [];
         this.isReconnecting = this.store.selectSignal(unrealFeature.selectIsReconnecting);
         this.init();
-        this.actions$.pipe(ofType(dropDC)).subscribe(() => this.dcClient?.close());
-        this.actions$.pipe(ofType(dropPC)).subscribe(() => this.pcClient?.close());
+        this.actions$
+            .pipe(ofType(dropDC), takeUntil(this.destroy$))
+            .subscribe(() => this.dcClient?.close());
+        this.actions$
+            .pipe(ofType(dropPC), takeUntil(this.destroy$))
+            .subscribe(() => this.pcClient?.close());
     }
     init() {
-        this.signallingSrv.onConfig$.subscribe((config) => {
+        this.signallingSrv.onConfig$
+            .pipe(takeUntil(this.destroy$))
+            .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) => {
+        this.signallingSrv.onOffer$
+            .pipe(filter(Truthy), takeUntil(this.destroy$))
+            .subscribe((offer) => {
             void this.handleServerOffer(offer);
         });
         // Answer to a client-initiated offer
         this.signallingSrv.onWebRtcAnswer$
-            .pipe(filter(Truthy))
+            .pipe(filter(Truthy), takeUntil(this.destroy$))
             .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,
-            });
+        this.signallingSrv.onWebRtcIce$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((candidate) => {
+            this.commandTelemetryService.trackStopCommand('EXT-iceCandidate', true, { multi: true });
             if (this.remoteDescriptionSet) {
                 this.handleCandidateFromServer(candidate);
             }
@@ -2974,11 +2985,15 @@ class WebRtcPlayerService extends SubService {
             if (!this.pcClient) {
                 this.setupPeerConnection(this.cfg);
             }
+            const pc = this.pcClient;
+            if (!pc) {
+                return;
+            }
             // Offer already defines media transceivers — don't add extras
-            await this.pcClient?.setRemoteDescription(offer);
+            await pc.setRemoteDescription(offer);
             this.remoteDescriptionSet = true;
             this.flushIceCandidateBuffer();
-            await this.createAnswer(this.pcClient);
+            await this.createAnswer(pc);
         }
         catch (e) {
             Logger.error('Failed to handle server offer', e);
@@ -3023,10 +3038,16 @@ class WebRtcPlayerService extends SubService {
             if (!this.pcClient) {
                 this.setupPeerConnection(this.cfg);
             }
+            const pc = this.pcClient;
+            if (!pc) {
+                return;
+            }
             // 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);
+            await this.setupTransceiversAsync(pc);
+            this.dcClient = this.createDataChannel(pc, 'UnrealDcConnection', {
+                ordered: true,
+            });
+            await this.createOffer(pc);
         }
         catch (e) {
             Logger.error('Failed to create WebRTC offer', e);
@@ -3085,7 +3106,7 @@ class WebRtcPlayerService extends SubService {
      * 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.
+     * - **Level IDC** (`ZZ`) — the level which caps resolution/framerate/bitrate.
      *
      * ### H.264 profiles relevant to Unreal Engine Pixel Streaming
      *
@@ -3103,12 +3124,12 @@ class WebRtcPlayerService extends SubService {
      * | `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.
+     * depending on the 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.
+     * that the client GPU may not speed up.
      */
     prioritizeH264Profile(sdp, profileLevelId) {
         const lines = sdp.split('\r\n');
@@ -3517,7 +3538,7 @@ class FileReceiverService extends SubService {
         }
         this.store
             .select(unrealFeature.selectViewportReady)
-            .pipe(filter(Truthy))
+            .pipe(filter(Truthy), takeUntil(this.destroy$))
             .subscribe(() => this.reset());
     }
     reset() {
@@ -3642,7 +3663,7 @@ class AggregatorService extends SubService {
     initialize() {
         this.store
             .select(unrealFeature.selectCirrusConnected)
-            .pipe(distinctUntilChanged())
+            .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe((connected) => {
             this.resetResponseList();
             if (connected) {
@@ -3652,7 +3673,9 @@ class AggregatorService extends SubService {
         const unlockViewport$ = this.store
             .select(unrealFeature.selectViewportReady)
             .pipe(filter(Truthy));
-        merge(unlockViewport$, this.disconnect$).subscribe(() => {
+        merge(unlockViewport$, this.disconnect$)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
             this.removeLoadScreen();
         });
         if (!this.selectStreamConfig()?.autoStart ||
@@ -3664,22 +3687,6 @@ class AggregatorService extends SubService {
     addResponseEventListener(name, listener) {
         this.responseEventListeners.set(name, listener);
     }
-    showOnScreenKeyboard(command) {
-        if (command.showOnScreenKeyboard) {
-            // Show the 'edit text' button.
-            //editTextButton.classList.remove('hiddenState');
-            // Place the 'edit text' button near the UE4 input widget.
-            //let pos = unquantizeAndDenormalizeUnsigned(command.x, command.y);
-            //editTextButton.style.top = pos.y.toString() + 'px';
-            //editTextButton.style.left = (pos.x - 40).toString() + 'px';
-        }
-        else {
-            // Hide the 'edit text' button.
-            //editTextButton.classList.add('hiddenState');
-            // Hide the on-screen keyboard.
-            // hiddenInput.blur();
-        }
-    }
     removeLoadScreen() {
         document
             .getElementById(this.unrealConfig?.screenLockerContainerId ||
@@ -3747,12 +3754,8 @@ class AggregatorService extends SubService {
                 break;
             }
             case ToClientMessage.Command: {
-                const commandAsString = decodeData(anyData);
-                Logger.colored(...COLOR_CODES.FROM_UNREAL, commandAsString);
-                const command = JSON.parse(commandAsString);
-                if (command.command === 'onScreenKeyboard') {
-                    this.showOnScreenKeyboard(command);
-                }
+                const command = JSON.parse(decodeData(anyData));
+                Logger.colored(...COLOR_CODES.FROM_UNREAL, command);
                 break;
             }
             case ToClientMessage.FileExtension:
@@ -3857,7 +3860,7 @@ class ConsoleExtensionsService extends SubService {
                 command: MetaBoxCommand.FChangeResolutionCommand,
                 payload: { resolution },
             });
-            return `Max Fps Set to ${resolution}`;
+            return `Resolution set to ${resolution.x}x${resolution.y}`;
         };
         window.setMaxFps = (maxFps) => {
             this.store.dispatch(setMaxFps({ maxFps }));
@@ -3894,6 +3897,10 @@ class DevModeService {
     get isDevMode() {
         return Truthy(localStorage.getItem('devMode'));
     }
+    /**
+     * Called from the browser console to toggle dev mode at runtime.
+     * @preserve
+     */
     setDevMode(value) {
         if (value) {
             localStorage.setItem('devMode', value.toString());
@@ -3932,7 +3939,9 @@ class UnrealCommunicatorService {
         // of the store selector. The selector reads the current state and can fire on
         // stale `true` from a previous session when switching components (Angular
         // creates the new component before destroying the old one).
-        this.actions$.pipe(ofType(dataChannelConnected)).subscribe(() => {
+        this.actions$
+            .pipe(ofType(dataChannelConnected), takeUntil$1(this.destroy$))
+            .subscribe(() => {
             this.requestInitialSettings();
             this.requestQualityControl();
         });
@@ -4048,7 +4057,15 @@ class InputService extends SubService {
             KeyboardNumericCode.NumpadDecimal,
         ];
         this.availableKeys = this.defaultKeys;
+        this.options = InputOptions;
         this.reInit$ = new Subject();
+        this.deactivatedVideoTrigger$ = NEVER;
+        this.normalizeAndQuantizeUnsigned = (_x, _y) => ({
+            inRange: false,
+            x: 65535,
+            y: 65535,
+        });
+        this.normalizeAndQuantizeSigned = (_x, _y) => ({ x: 0, y: 0 });
         this.videoBoundingRect = new DOMRect(0, 0, 1, 1);
         this.fingerIds = new Map();
         this.maxByteValue = 255;
@@ -4071,11 +4088,11 @@ class InputService extends SubService {
         const visibilityVisibleTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'visible'), filter(Truthy), startWith(true));
         this.deactivatedVideoTrigger$ = merge(this.disconnect$, this.reInit$, visibilityHiddenTrigger$);
         merge(visibilityVisibleTrigger$, this.store.select(unrealFeature.selectViewportReady).pipe(filter(Truthy)))
-            .pipe(filter(() => !!this.video))
+            .pipe(filter(() => !!this.video), takeUntil$1(this.destroy$))
             .subscribe(() => this.setup());
     }
     useKeyboardKeys(keys) {
-        this.availableKeys = keys || [];
+        this.availableKeys = keys;
     }
     get video() {
         return this.videoService.video;
@@ -4137,49 +4154,47 @@ class InputService extends SubService {
         };
     }
     setupNormalizeAndQuantize(videoElement) {
-        if (videoElement) {
-            this.videoBoundingRect = videoElement.getBoundingClientRect();
-            this.offsetParams = this.getObjectFitOffset(videoElement);
-            // Unsigned XY positions are the ratio (0.0..1.0) along a viewport axis,
-            // quantized into an uint16 (0..65536).
-            // Signed XY deltas are the ratio (-1.0..1.0) along a viewport axis,
-            // quantized into an int16 (-32767..32767).
-            // This allows the browser viewport and client viewport to have a different
-            // size.
-            // Hack: Currently we set an out-of-range position to an extreme (65535)
-            // as we can't yet accurately detect mouse enter and leave events
-            // precisely inside a video with an aspect ratio which causes mattes.
-            this.normalizeAndQuantizeUnsigned = (x, y) => {
-                const normalizedX = x / videoElement.clientWidth;
-                const normalizedY = y / videoElement.clientHeight;
-                if (normalizedX < 0.0 ||
-                    normalizedX > 1.0 ||
-                    normalizedY < 0.0 ||
-                    normalizedY > 1.0) {
-                    return {
-                        inRange: false,
-                        x: 65535,
-                        y: 65535,
-                    };
-                }
-                else {
-                    return {
-                        inRange: true,
-                        x: normalizedX * 65536,
-                        y: normalizedY * 65536,
-                    };
-                }
-            };
-            // Signed.
-            this.normalizeAndQuantizeSigned = (x, y) => {
-                const normalizedX = x / (0.5 * videoElement.clientWidth);
-                const normalizedY = y / (0.5 * videoElement.clientHeight);
+        this.videoBoundingRect = videoElement.getBoundingClientRect();
+        this.offsetParams = this.getObjectFitOffset(videoElement);
+        // Unsigned XY positions are the ratio (0.0..1.0) along a viewport axis,
+        // quantized into an uint16 (0..65536).
+        // Signed XY deltas are the ratio (-1.0..1.0) along a viewport axis,
+        // quantized into an int16 (-32767..32767).
+        // This allows the browser viewport and client viewport to have a different
+        // size.
+        // Hack: Currently, we set an out-of-range position to an extreme (65535)
+        // as we can't yet accurately detect mouse enter and leave events
+        // precisely inside a video with an aspect ratio which causes mattes.
+        this.normalizeAndQuantizeUnsigned = (x, y) => {
+            const normalizedX = x / videoElement.clientWidth;
+            const normalizedY = y / videoElement.clientHeight;
+            if (normalizedX < 0.0 ||
+                normalizedX > 1.0 ||
+                normalizedY < 0.0 ||
+                normalizedY > 1.0) {
                 return {
-                    x: normalizedX * 32767,
-                    y: normalizedY * 32767,
+                    inRange: false,
+                    x: 65535,
+                    y: 65535,
                 };
+            }
+            else {
+                return {
+                    inRange: true,
+                    x: normalizedX * 65536,
+                    y: normalizedY * 65536,
+                };
+            }
+        };
+        // Signed.
+        this.normalizeAndQuantizeSigned = (x, y) => {
+            const normalizedX = x / (0.5 * videoElement.clientWidth);
+            const normalizedY = y / (0.5 * videoElement.clientHeight);
+            return {
+                x: normalizedX * 32767,
+                y: normalizedY * 32767,
             };
-        }
+        };
     }
     sendInputData(data) {
         this.commandsSender.sendInputData(data);
@@ -4219,11 +4234,12 @@ class InputService extends SubService {
             this.fingerIds.set(touch.identifier, finger);
         };
         const forgetTouch = (touch) => {
-            this.fingers.push(this.fingerIds.get(touch.identifier));
+            const finger = this.fingerIds.get(touch.identifier);
+            if (finger) {
+                this.fingers.push(finger);
+            }
             // Sort array back into descending order. This means if finger '1' were to lift after finger '0', we would ensure that 0 will be the first index to pop
-            this.fingers.sort(function (a, b) {
-                return b - a;
-            });
+            this.fingers.sort((a, b) => b - a);
             this.fingerIds.delete(touch.identifier);
         };
         const emitTouchData = (type, touches) => {
@@ -4234,21 +4250,24 @@ class InputService extends SubService {
                 const touch = touches[t];
                 const { x, y } = this.getTouchPositionWithOffset(touch);
                 Logger.info(`F${this.fingerIds.get(touch.identifier)}=(${x}, ${y})`);
-                const coord = this.normalizeAndQuantizeUnsigned(x, y);
+                const normalizeCoordinates = this.normalizeAndQuantizeUnsigned(x, y);
                 const data = new DataView(new ArrayBuffer(9));
                 data.setUint8(0, type);
                 data.setUint8(1, numTouches);
-                data.setUint16(byte, coord.x, true);
+                data.setUint16(byte, normalizeCoordinates.x, true);
                 byte += 2;
-                data.setUint16(byte, coord.y, true);
+                data.setUint16(byte, normalizeCoordinates.y, true);
                 byte += 2;
-                data.setUint8(byte, this.fingerIds.get(touch.identifier));
+                const finger = this.fingerIds.get(touch.identifier);
+                if (finger) {
+                    data.setUint8(byte, finger);
+                }
                 byte += 1;
                 // force is between 0.0 and 1.0, so quantize into byte.
                 // iOs bug: Forced to be always 0.5 on all devices as we do not use forced touch any way;/
                 data.setUint8(byte, this.maxByteValue * 0.5);
                 byte += 1;
-                data.setUint8(byte, coord.inRange ? 1 : 0);
+                data.setUint8(byte, normalizeCoordinates.inRange ? 1 : 0);
                 byte += 1;
                 this.sendInputData(data.buffer);
             }
@@ -4291,42 +4310,42 @@ class InputService extends SubService {
         window.focus();
     }
     emitMouseMove(x, y, deltaX, deltaY) {
-        const coord = this.normalizeAndQuantizeUnsigned(x, y);
+        const normalizeCoordinates = this.normalizeAndQuantizeUnsigned(x, y);
         const delta = this.normalizeAndQuantizeSigned(deltaX, deltaY);
-        const Data = new DataView(new ArrayBuffer(9));
-        Data.setUint8(0, MessageType.MouseMove);
-        Data.setUint16(1, coord.x, true);
-        Data.setUint16(3, coord.y, true);
-        Data.setInt16(5, delta.x, true);
-        Data.setInt16(7, delta.y, true);
-        this.sendInputData(Data.buffer);
+        const data = new DataView(new ArrayBuffer(9));
+        data.setUint8(0, MessageType.MouseMove);
+        data.setUint16(1, normalizeCoordinates.x, true);
+        data.setUint16(3, normalizeCoordinates.y, true);
+        data.setInt16(5, delta.x, true);
+        data.setInt16(7, delta.y, true);
+        this.sendInputData(data.buffer);
     }
     emitMouseDown(button, x, y) {
-        const coord = this.normalizeAndQuantizeUnsigned(x, y);
-        const Data = new DataView(new ArrayBuffer(6));
-        Data.setUint8(0, MessageType.MouseDown);
-        Data.setUint8(1, button);
-        Data.setUint16(2, coord.x, true);
-        Data.setUint16(4, coord.y, true);
-        this.sendInputData(Data.buffer);
+        const normalizeCoordinates = this.normalizeAndQuantizeUnsigned(x, y);
+        const data = new DataView(new ArrayBuffer(6));
+        data.setUint8(0, MessageType.MouseDown);
+        data.setUint8(1, button);
+        data.setUint16(2, normalizeCoordinates.x, true);
+        data.setUint16(4, normalizeCoordinates.y, true);
+        this.sendInputData(data.buffer);
     }
     emitMouseUp(button, x, y) {
-        const coord = this.normalizeAndQuantizeUnsigned(x, y);
-        const Data = new DataView(new ArrayBuffer(6));
-        Data.setUint8(0, MessageType.MouseUp);
-        Data.setUint8(1, button);
-        Data.setUint16(2, coord.x, true);
-        Data.setUint16(4, coord.y, true);
-        this.sendInputData(Data.buffer);
+        const normalizeCoordinates = this.normalizeAndQuantizeUnsigned(x, y);
+        const data = new DataView(new ArrayBuffer(6));
+        data.setUint8(0, MessageType.MouseUp);
+        data.setUint8(1, button);
+        data.setUint16(2, normalizeCoordinates.x, true);
+        data.setUint16(4, normalizeCoordinates.y, true);
+        this.sendInputData(data.buffer);
     }
     emitMouseWheel(delta, x, y) {
-        const coord = this.normalizeAndQuantizeUnsigned(x, y);
-        const Data = new DataView(new ArrayBuffer(7));
-        Data.setUint8(0, MessageType.MouseWheel);
-        Data.setInt16(1, delta, true);
-        Data.setUint16(3, coord.x, true);
-        Data.setUint16(5, coord.y, true);
-        this.sendInputData(Data.buffer);
+        const normalizeCoordinates = this.normalizeAndQuantizeUnsigned(x, y);
+        const data = new DataView(new ArrayBuffer(7));
+        data.setUint8(0, MessageType.MouseWheel);
+        data.setInt16(1, delta, true);
+        data.setUint16(3, normalizeCoordinates.x, true);
+        data.setUint16(5, normalizeCoordinates.y, true);
+        this.sendInputData(data.buffer);
     }
     releaseMouseButtons(buttons, x, y) {
         if (buttons & MouseButtonsMask.PrimaryButton) {
@@ -4345,7 +4364,7 @@ class InputService extends SubService {
             this.emitMouseUp(MouseButton.FifthButton, x, y);
         }
     }
-    // If the user has any mouse buttons pressed then press them again.
+    // If the user has any mouse buttons pressed, then press them again.
     pressMouseButtons(buttons, x, y) {
         if (buttons & MouseButtonsMask.PrimaryButton) {
             this.emitMouseDown(MouseButton.MainButton, x, y);
@@ -4364,58 +4383,53 @@ class InputService extends SubService {
         }
     }
     registerHoveringMouseEvents(htmlVideoElement) {
-        htmlVideoElement.onmousemove = (e) => {
+        fromEvent(htmlVideoElement, 'mousemove')
+            .pipe(takeUntil$1(this.deactivatedVideoTrigger$))
+            .subscribe((e) => {
             const { x, y } = this.getMousePositionWithOffset(e);
             this.emitMouseMove(x, y, e.movementX, e.movementY);
             e.preventDefault();
-        };
-        htmlVideoElement.onmousedown = (e) => {
+        });
+        fromEvent(htmlVideoElement, 'mousedown')
+            .pipe(takeUntil$1(this.deactivatedVideoTrigger$))
+            .subscribe((e) => {
             const { x, y } = this.getMousePositionWithOffset(e);
             this.focusWindow();
             this.emitMouseDown(e.button, x, y);
             e.preventDefault();
-        };
-        htmlVideoElement.onmouseup = (e) => {
+        });
+        fromEvent(htmlVideoElement, 'mouseup')
+            .pipe(takeUntil$1(this.deactivatedVideoTrigger$))
+            .subscribe((e) => {
             const { x, y } = this.getMousePositionWithOffset(e);
             this.emitMouseUp(e.button, x, y);
             e.preventDefault();
-        };
-        // When the context menu is shown, then it is safest to release the button
-        // pressed when the event happened. This will guarantee we will
-        // get at least one mouse up corresponding to a mouse down event. Otherwise,
-        // the mouse can get stuck.
-        // https://github.com/facebook/react/issues/5531
-        // playerElement.oncontextmenu = (e) => {
-        //   e.preventDefault();
-        //   this.emitMouseUp(e.button, e.offsetX, e.offsetY);
-        // };
+        });
         fromEvent(htmlVideoElement, 'wheel')
             .pipe(takeUntil$1(this.deactivatedVideoTrigger$))
             .subscribe((e) => {
             this.emitMouseWheel(e.deltaY * -120, e.offsetX, e.offsetY);
             e.preventDefault();
         });
-        htmlVideoElement.pressMouseButtons = (e) => {
-            this.pressMouseButtons(e.buttons, e.offsetX, e.offsetY);
-        };
-        htmlVideoElement.releaseMouseButtons = (e) => {
-            this.releaseMouseButtons(e.buttons, e.offsetX, e.offsetY);
-        };
     }
     registerMouseEnterAndLeaveEvents(htmlVideoElement) {
-        htmlVideoElement.onmouseenter = (e) => {
+        fromEvent(htmlVideoElement, 'mouseenter')
+            .pipe(takeUntil$1(this.deactivatedVideoTrigger$))
+            .subscribe((e) => {
             this.focusWindow();
-            const Data = new DataView(new ArrayBuffer(1));
-            Data.setUint8(0, MessageType.MouseEnter);
-            this.sendInputData(Data.buffer);
-            htmlVideoElement.pressMouseButtons(e);
-        };
-        htmlVideoElement.onmouseleave = (e) => {
-            const Data = new DataView(new ArrayBuffer(1));
-            Data.setUint8(0, MessageType.MouseLeave);
-            this.sendInputData(Data.buffer);
-            htmlVideoElement.releaseMouseButtons(e);
-        };
+            const data = new DataView(new ArrayBuffer(1));
+            data.setUint8(0, MessageType.MouseEnter);
+            this.sendInputData(data.buffer);
+            this.pressMouseButtons(e.buttons, e.offsetX, e.offsetY);
+        });
+        fromEvent(htmlVideoElement, 'mouseleave')
+            .pipe(takeUntil$1(this.deactivatedVideoTrigger$))
+            .subscribe((e) => {
+            const data = new DataView(new ArrayBuffer(1));
+            data.setUint8(0, MessageType.MouseLeave);
+            this.sendInputData(data.buffer);
+            this.releaseMouseButtons(e.buttons, e.offsetX, e.offsetY);
+        });
     }
     // Browser keys do not have a charCode so we only need to test keyCode.
     isKeyCodeBrowserKey(keyCode) {
@@ -4716,7 +4730,7 @@ class StreamStatusTelemetryService2 {
         /**
          * 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,
+         * meaningful) from a Résumé/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).
          */
@@ -4725,7 +4739,7 @@ class StreamStatusTelemetryService2 {
          * 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
+         * doesn't unselect 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).
          */
@@ -4734,7 +4748,7 @@ class StreamStatusTelemetryService2 {
          * 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.
+         * 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
@@ -4765,7 +4779,7 @@ class StreamStatusTelemetryService2 {
         /**
          * 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*
+         * 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.
@@ -4871,7 +4885,7 @@ class StreamStatusTelemetryService2 {
                     // 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
+                    //  - `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)
@@ -4907,7 +4921,7 @@ class StreamStatusTelemetryService2 {
                     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
+                    // command counter, so phase 5 shows how many commands the client
                     // fired at Unreal before the viewport was ready.
                     {
                         label: 'Viewport ready',
@@ -4951,7 +4965,7 @@ class StreamStatusTelemetryService2 {
             .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.
+        // Close the session when the tab is hidden / being evicted from cache.
         // `pagehide` fires in more cases than `beforeunload` (covers iOS Safari, bfcache).
         fromEvent(window, 'pagehide').subscribe(() => this.endSession('pagehide'));
     }
@@ -4966,7 +4980,7 @@ class StreamStatusTelemetryService2 {
         //  - 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).
+        //    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
@@ -5016,7 +5030,7 @@ class StreamStatusTelemetryService2 {
                 this.session.handshakeFlow = 'client-offer';
         }));
         // Unreal-command counter — increments on every `commandStarted`
-        // action. Snapshotted into the `viewport_ready` closer payload as
+        // action. Snapshot ted into the `viewport_ready` closer payload as
         // phase-5's `commandCount`.
         sub.add(this.actions$.pipe(ofType(commandStarted)).subscribe(() => {
             if (this.session)
@@ -5117,7 +5131,7 @@ class StreamStatusTelemetryService2 {
      * 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
+     * labels aren't on the wire — the viewer derives them from neighbor
      * phases' `label` fields.
      */
     emitPhaseEnded(bucket, bucketIdx, extrasValue) {
@@ -5188,7 +5202,7 @@ class StreamStatusTelemetryService2 {
                 qpP95: qp.p95,
             });
         }
-        // FPS low vs current target.
+        // 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) {
@@ -5318,7 +5332,7 @@ class StreamStatusTelemetryService2 {
         // 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].
+        // in charts. `ceil - 1` keeps them distinct: p. 95 = 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))];
@@ -5331,7 +5345,7 @@ class StreamStatusTelemetryService2 {
         };
     }
     track(event, data) {
-        // `userId` is attached to every event so the server can bucket files
+        // `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({
@@ -5351,8 +5365,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 /** Compact one side of an ICE candidate pair to `"type (url)"` or just
  *  `type` (host candidates have no URL). */
 function fmtCandidate(c) {
-    if (!c)
+    if (!c) {
         return null;
+    }
     return c.url ? `${c.type} (${c.url})` : c.type;
 }
 /**
@@ -5432,22 +5447,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }] });
 
 class AnalyticsService extends SubService {
-    #store = inject(Store);
     /** Signals monitorMouse inner subscriptions to stop (viewport lost / new session). */
     #stopMouse$ = new Subject();
     sendEventToMixPanel(name, params = {}) {
         Logger.log('Analytics Event:', name, params);
-        this.#store.dispatch(saveAnalyticsEvent({ event: { name, params } }));
+        this.store.dispatch(saveAnalyticsEvent({ event: { name, params } }));
     }
     constructor() {
         super();
-        const abortSignal$ = this.#store
+        const abortSignal$ = this.store
             .select(unrealFeature.selectViewportReady)
             .pipe(filter$1(Falsy), map(() => void 0));
-        this.#store
+        this.store
             .select(unrealFeature.selectViewportReady)
-            .pipe(distinctUntilChanged(), filter$1(Truthy), tap(() => this.monitorMouse(abortSignal$)))
-            .subscribe();
+            .pipe(distinctUntilChanged(), filter$1(Truthy), takeUntil$1(this.destroy$))
+            .subscribe(() => this.monitorMouse(abortSignal$));
     }
     monitorMouse(abortSignal$) {
         this.#stopMouse$.next();
@@ -5530,7 +5544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * ## How it works
  *
  * The service subscribes to `VideoService.videoStats$` (emitted every 250 ms)
- * and collects samples of FPS, bitrate, and QP (Quantisation Parameter).
+ * and collects samples of FPS, bitrate, and QP (Quantization Parameter).
  * Every {@link SAMPLE_WINDOW} ticks (~2 s) it averages the collected samples
  * and feeds them into a set of **fuzzy-logic membership functions** that
  * classify each metric into overlapping quality bands.
@@ -5539,28 +5553,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * **1. FPS ratio** = `actualFPS / currentTargetFPS` (0..1+)
  *
- * | Band   | Range               | Meaning                                       |
+ * | Band | Range | Meaning |
  * |--------|---------------------|-----------------------------------------------|
- * | low    | ratio < 0.7 → 1.0, linear ramp 0.7..0.9 → 0   | Stream cannot keep up with the target         |
- * | ok     | triangle 0.8..1.0, peak at 0.95                 | Stream roughly matches the target             |
- * | high   | ratio 0.9..1.0 → ramp, >1.0 → 1.0              | Stream meets or exceeds the target            |
+ * | low | ratio < 0.7 → 1.0, linear ramp 0.7..0.9 → 0 | Stream cannot keep up with the target |
+ * | okays | triangle 0.8..1.0, peak at 0.95 | Stream roughly matches the target |
+ * | high | ratio 0.9..1.0 → ramp, >1.0 → 1.0 | Stream meets or exceeds the target |
  *
  * **2. Bitrate load** = `currentBitrate / MAX_BITRATE` (0..1+)
  *
  * `MAX_BITRATE` = 20 Mbit/s — the reference ceiling for the encoder.
  *
- * | Band   | Range                                           | Meaning                                       |
+ * | Band | Range | Meaning |
  * |--------|-------------------------------------------------|-----------------------------------------------|
- * | high   | load 0.5..0.8 → ramp, >0.8 → 1.0               | Encoder is using most of the available bandwidth |
- * | not high | load < 0.5 → 0.0                              | Bandwidth headroom is available                |
+ * | high | load 0.5..0.8 → ramp, >0.8 → 1.0 | Encoder is using most of the available bandwidth |
+ * | not high | load < 0.5 → 0.0 | Bandwidth headroom is available |
  *
  * **3. Quality** — mapped from QP via `mapQpToQuality()` (see {@link Quality}):
  *
- * | Quality  | QP range  | Meaning                                         |
+ * | Quality | QP range | Meaning |
  * |----------|-----------|-------------------------------------------------|
- * | `lime`   | QP <= 26  | Good — encoder has enough headroom              |
- * | `orange` | QP 27..35 | Fair — encoder is under moderate pressure        |
- * | `red`    | QP > 35   | Poor — heavy compression, visible artefacts      |
+ * | `lime` | QP <= 26 | Good — encoder has enough headroom |
+ * | `orange` | QP 27..35 | Fair — encoder is under moderate pressure |
+ * | `red` | QP > 35 | Poor — heavy compression, visible artifacts |
  *
  * ### Decision rules (evaluated in priority order, first match wins)
  *
@@ -5574,17 +5588,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * ## Cooldown-based throttling
  *
- * The service continuously evaluates fuzzy rules every sample window.
+ * The service continuously evaluates fuzzy rules in every sample window.
  * After each FPS step change it enforces a cooldown before the next
  * change can be applied. The cooldown duration depends on the
  * (previous decision → next decision) pair:
  *
- * | Previous  | Next      | Cooldown                                            |
+ * | Previous | Next | Cooldown |
  * |-----------|-----------|-----------------------------------------------------|
- * | decrease  | decrease  | {@link COOLDOWN_DECREASE_AFTER_DECREASE_MS} (2 s)   |
- * | decrease  | increase  | {@link COOLDOWN_INCREASE_AFTER_DECREASE_MS} (10 s)  |
- * | increase  | decrease  | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s)            |
- * | increase  | increase  | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s)            |
+ * | decrease | decrease | {@link COOLDOWN_DECREASE_AFTER_DECREASE_MS} (2 s) |
+ * | decrease | increase | {@link COOLDOWN_INCREASE_AFTER_DECREASE_MS} (10 s) |
+ * | increase | decrease | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s) |
+ * | increase | increase | {@link COOLDOWN_AFTER_INCREASE_MS} (2 s) |
  *
  * This means the system reacts quickly after an increase (2 s in any
  * direction) but is cautious about stepping back up after a decrease
@@ -5601,7 +5615,7 @@ class FpsMonitorService {
         this.videoService = inject(VideoService);
         this.store = inject(Store);
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
-        /** Discrete FPS targets the controller can switch between (ascending order). Last 0 is unlimited framerate indicator*/
+        /** Discrete FPS targets the controller can switch between (ascending order). Last 0 is an unlimited framerate indicator*/
         this.FPS_STEPS = [30, 40, 50, 0];
         /**
          * Reference FPS used to compute the FPS ratio when `currentFpsTarget` is 0
@@ -5622,7 +5636,7 @@ class FpsMonitorService {
         this.COOLDOWN_DECREASE_AFTER_DECREASE_MS = 2_000;
         /**
          * Cooldown (ms) for an increase following a previous decrease.
-         * The stream needs more time to stabilise before stepping back up.
+         * The stream needs more time to stabilize before stepping back up.
          */
         this.COOLDOWN_INCREASE_AFTER_DECREASE_MS = 10_000;
         /**
@@ -5701,9 +5715,9 @@ class FpsMonitorService {
      * Rules are evaluated in priority order — first match wins.
      *
      * Inputs:
-     * - `fpsRatio`    = avgFPS / currentTargetFPS  (e.g. 45/60 = 0.75)
-     * - `bitrateLoad` = avgBitrate / 20 Mbit/s     (e.g. 12M/20M = 0.6)
-     * - `quality`     = mapQpToQuality(avgQP)       → 'lime' | 'orange' | 'red'
+     * - `fpsRatio` = avgFPS / currentTargetFPS (e.g., 45/60 = 0.75)
+     * - `bitrateLoad` = avgBitrate / 20 Mbit/s (e.g., 12M/20M = 0.6)
+     * - `quality` = mapQpToQuality(avgQP) → 'lime' | 'orange' | 'red'
      */
     evaluateDecision(avg, currentTarget) {
         const referenceTarget = currentTarget > 0 ? currentTarget : this.UNLIMITED_REFERENCE_FPS;
@@ -5720,17 +5734,17 @@ class FpsMonitorService {
             return 'decrease';
         }
         // Rule 2: FPS looks acceptable numerically, but encoder quality is 'red'
-        // (QP > 35 — heavy compression artefacts). Reducing target FPS frees
+        // (QP > 35 — heavy compression artifacts). Reducing target FPS frees
         // encoder headroom and improves visual quality.
         if (fpsOk > 0.4 && quality === 'red') {
             return 'decrease';
         }
-        // Rule 3: FPS is ok, but bitrate is above ~50-80% of 20 Mbit/s ceiling
+        // Rule 3: FPS is ok, but the bitrate is above ~50-80% of 20 Mbit/s ceiling
         // and quality is 'orange' (QP 27..35). Near capacity — don't push higher.
         if (fpsOk > 0.4 && bitrateHigh > 0.5 && quality === 'orange') {
             return 'hold';
         }
-        // Rule 4: FPS meets/exceeds target (ratio >= ~0.95), quality is 'lime'
+        // Rule 4: FPS meets/exceeds the target (ratio >= ~0.95), quality is 'lime'
         // (QP <= 26), and bitrate is below 50% of ceiling — safe to step up.
         // Note: the last FPS_STEPS value (0) means "no limit", so compare by
         // position in FPS_STEPS rather than numerically.
@@ -5753,11 +5767,11 @@ class FpsMonitorService {
     // ---------------------------------------------------------------------------
     /**
      * FPS ratio membership "low".
-     * Input: ratio = actualFPS / targetFPS (e.g. 42/60 = 0.70).
+     * Input: a ratio = actualFPS / targetFPS (e.g., 42/60 = 0.70).
      *
-     *   ratio < 0.7  → 1.0  (clearly failing, e.g. 40/60)
-     *   ratio 0.7..0.9 → linear ramp down (e.g. 0.8 → 0.5)
-     *   ratio > 0.9  → 0.0  (keeping up)
+     *   ratio < 0.7 → 1.0 (clearly failing, e.g., 40/60)
+     *   ratio 0.7..0.9 → linear ramp down (e.g., 0.8 → 0.5)
+     *   a ratio > 0.9 → 0.0 (keeping up)
      */
     membershipFpsLow(ratio) {
         if (ratio < 0.7)
@@ -5770,10 +5784,10 @@ class FpsMonitorService {
      * FPS ratio membership "ok" — triangle shape.
      * Input: ratio = actualFPS / targetFPS.
      *
-     *   ratio < 0.8  → 0.0
-     *   ratio 0.8..0.95 → ramp up, peak at 0.95 (e.g. 57/60)
+     *   ratio < 0.8 → 0.0
+     *   ratio 0.8..0.95 → ramp up, peak at 0.95 (e.g., 57/60)
      *   ratio 0.95..1.0 → ramp down
-     *   ratio > 1.0  → 0.0
+     *   a ratio > 1.0 → 0.0
      */
     membershipFpsOk(ratio) {
         if (ratio < 0.8)
@@ -5788,9 +5802,9 @@ class FpsMonitorService {
      * FPS ratio membership "high".
      * Input: ratio = actualFPS / targetFPS.
      *
-     *   ratio < 0.9  → 0.0
-     *   ratio 0.9..1.0 → linear ramp up (e.g. 0.95 → 0.5)
-     *   ratio >= 1.0 → 1.0  (meeting or exceeding target, e.g. 60/60)
+     *   ratio < 0.9 → 0.0
+     *   ratio 0.9..1.0 → linear ramp up (e.g., 0.95 → 0.5)
+     *   a ratio >= 1.0 → 1.0 (meeting or exceeding target, e.g., 60/60)
      */
     membershipFpsHigh(ratio) {
         if (ratio < 0.9)
@@ -5801,11 +5815,11 @@ class FpsMonitorService {
     }
     /**
      * Bitrate load membership "high".
-     * Input: load = currentBitrate / MAX_BITRATE (20 Mbit/s).
+     * Input: a load = currentBitrate / MAX_BITRATE (20 Mbit/s).
      *
-     *   load < 0.5  → 0.0  (below 10 Mbit/s — plenty of headroom)
-     *   load 0.5..0.8 → linear ramp (e.g. 13M/20M = 0.65 → 0.5)
-     *   load > 0.8  → 1.0  (above 16 Mbit/s — near capacity)
+     *   load < 0.5 → 0.0 (below 10 Mbit/s — plenty of headroom)
+     *   load 0.5..0.8 → linear ramp (e.g., 13M/20M = 0.65 → 0.5)
+     *   load > 0.8 → 1.0 (above 16 Mbit/s — near capacity)
      */
     membershipBitrateHigh(load) {
         if (load < 0.5)
@@ -5837,14 +5851,14 @@ class FpsMonitorService {
         Logger.info(`[FpsMonitor] Decision: ${decision} → FPS: ${newTarget}, Quality: ${quality}`);
         if (newTarget !== this.currentFpsTarget) {
             this.currentFpsTarget = newTarget;
-            this.store.dispatch(setMaxFps({ maxFps: newTarget }));
+            // this.store.dispatch(setMaxFps({ maxFps: newTarget }));
         }
         this.lastDecisionTime = now;
         this.samples = [];
     }
     /**
-     * Get the next FPS target based on current target and decision.
-     * Clamps to valid FPS_STEPS range.
+     * Get the next FPS target based on the current target and decision.
+     * Clamps to the valid FPS_STEPS range.
      */
     getNextFpsTarget(currentTarget, decision) {
         const currentIndex = this.FPS_STEPS.indexOf(currentTarget);
@@ -5920,12 +5934,7 @@ class UnrealCallbackService {
      * ```
      */
     fromUnrealCallback(command) {
-        return this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => {
-            if ('commandCallback' in json) {
-                return json.commandCallback;
-            }
-            return json;
-        }), filter((json) => json.command === command), map$1((data) => ({
+        return this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.command === command), map$1((data) => ({
             command: data.command,
             payload: 'payload' in data ? data.payload : null,
         })));
@@ -6057,15 +6066,15 @@ class ImageLoadingSrcComponent {
         this.imageLoadingSrc = this.#store.selectSignal(unrealFeature.selectImageLoadingSrc);
     }
     #store;
-    imageError() {
+    loadingImageError() {
         this.#store.dispatch(setLoadingImageSrc({ src: '' }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"imageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"imageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"] }]
+            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"] }]
         }] });
 
 class StatGraphComponent {
@@ -6152,83 +6161,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 class UnrealStatusComponent {
     constructor() {
-        this.unrealInitialConfig = inject(UNREAL_CONFIG);
-        this.destroyRef = inject(DestroyRef);
-        this.store = inject(Store);
-        this.resetPercentageSignal$ = this.store
-            .select(selectShowLoader)
-            .pipe(filter(Falsy));
-        this.showLoader = this.store.selectSignal(selectShowLoader);
-        /**
-         * An observable that emits smoothed percentage values from 0 to 100.
-         */
-        this.messagePercents = toSignal(this.store.select(selectTotalProgress).pipe(keepMaxUntilReset(this.resetPercentageSignal$), floatToSmoothPercents(), distinctUntilChanged(), map$1((progress) => progress || 0)));
-        this.awsInstance = this.store.selectSignal(unrealFeature.selectAwsInstance);
-    }
-    ngOnInit() {
-        /**
-         * A subject that emits null values to trigger nullification.
-         */
-        const nullify$ = new Subject();
-        /**
-         * An observable that emits null values with a delay of 2000 milliseconds.
-         */
-        const nullifyObs$ = nullify$
-            .asObservable()
-            .pipe(delay(2000));
-        /**
-         * An observable that emits the status message from the Unreal feature store.
-         */
-        const signalingStatus$ = this.store.select(unrealFeature.selectStatusMessage);
-        /**
-         * An observable that emits connection status messages based on the Cirrus connection state.
-         * Then call side effect to nullify the message.
-         */
-        const cirrusConnected$ = this.store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(skip(1), switchMap((connected) => connected
-            ? of('Creating Socket...')
-            : of('Connection closed.').pipe(tap(() => nullify$.next(null)))));
-        /**
-         * An observable that emits the viewport visibility state.
-         */
-        const viewportTrigger$ = this.store.select(unrealFeature.selectViewportReady);
-        /**
-         * An observable that will nullify any message displayed after 500 mSec, when viewport changes its state.
-         */
-        const streamToggle$ = merge(viewportTrigger$.pipe(filter(Falsy), skip(1)), viewportTrigger$.pipe(filter(Truthy))).pipe(delay(500), map$1(() => null));
-        /**
-         * A subscription that merges various status observables and emits debounced status via postMessage.
-         */
-        merge(nullifyObs$, cirrusConnected$, signalingStatus$, streamToggle$)
-            .pipe(tapLog('STATUS=>'), debounceTime$1(0), takeUntilDestroyed(this.destroyRef))
-            .subscribe((status) => this.sendMessageToIndex(status));
-    }
-    /**
-     * Sends a message to the embedded iframe identified by the default value '3dsource_start_screen' ID.
-     * This function tries to post a message to the iframe's content window. If the content
-     * window is not accessible (e.g., due to cross-origin policies), the function fails silently.
-     *
-     * @param {string} text The message to be sent to the iframe. This could be a status update
-     * or any other relevant information that the iframe needs to process.
-     */
-    sendMessageToIndex(text) {
-        const objectElement = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ||
-            SCREEN_LOCKER_CONTAINER_ID);
-        try {
-            const objectDocument = objectElement.contentWindow;
-            objectDocument?.postMessage(text, '*');
-        }
-        catch {
-            // Fails silently if the iframe's content window cannot be accessed
-        }
+        this.#store = inject(Store);
+        this.#loadingProgress = inject(LoadingProgressService);
+        this.awsInstance = this.#store.selectSignal(unrealFeature.selectAwsInstance);
+        this.messagePercents = this.#loadingProgress.percents;
+        this.showLoader = this.#loadingProgress.loaderVisible;
+        this.showLoadingProgress = this.#store.selectSignal(unrealFeature.selectShowLoadingProgress);
+        this.isShowLoadingPercentsPopup = computed(() => this.showLoader() && this.showLoadingProgress(), ...(ngDevMode ? [{ debugName: "isShowLoadingPercentsPopup" }] : /* istanbul ignore next */ []));
     }
+    #store;
+    #loadingProgress;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\n  @let _awsInstance = awsInstance();\n  <div class=\"status-box\">\n    @if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div class=\"status-box\">\n    @if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceLoadingComponent], template: "@if (showLoader()) {\n  @let _awsInstance = awsInstance();\n  <div class=\"status-box\">\n    @if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"] }]
+            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceLoadingComponent], template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div class=\"status-box\">\n    @if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"] }]
         }] });
 
 class VideoStatsComponent {
@@ -6240,42 +6188,18 @@ class VideoStatsComponent {
         this.obs$ = this.videoService.videoStats$;
         this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
         this.ssData = this.store.selectSignal(selectSignalingParameters);
-        this.fpsTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.framesPerSecond || 0,
-        }))));
-        this.fpsAvgTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.avgFrameRate,
-        }))));
-        this.bitrateTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.bitrate,
-        }))));
-        this.videoQP = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.VideoEncoderQP,
-        }))));
-        this.bitrateAverageTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.avgBitrate,
-        }))));
+        this.fpsTick = toSignal(this.obs$.pipe(map$1((stat) => ({ value: stat.aggregatedStats.framesPerSecond || 0 }))));
+        this.fpsAvgTick = toSignal(this.obs$.pipe(map$1((stat) => ({ value: stat.aggregatedStats.avgFrameRate }))));
+        this.bitrateTick = toSignal(this.obs$.pipe(map$1((stat) => ({ value: stat.aggregatedStats.bitrate }))));
+        this.videoQP = toSignal(this.obs$.pipe(map$1((stat) => ({ value: stat.aggregatedStats.VideoEncoderQP }))));
+        this.bitrateAverageTick = toSignal(this.obs$.pipe(map$1((stat) => ({ value: stat.aggregatedStats.avgBitrate }))));
         this.videoStatus = toSignal(this.obs$.pipe(map$1((event) => this.isDevMode &&
             {
                 ...event.aggregatedStats,
                 quality: event.quality,
-            }), filter(Boolean), map$1((data) => {
-            return this.fields
-                .map((key) => {
-                return {
-                    key,
-                    value: data[key],
-                };
-            })
-                .filter((r) => !this.elementsToShow.includes(r.key));
-        })));
-        this.graphList = [];
-        this.idKey = 'com.source3d.unreal.stat';
-        this.elementsToShow = [];
-        this.trigger$ = new BehaviorSubject(undefined);
-        this.getFields();
-    }
-    ngOnInit() {
+            }), filter(Boolean), map$1((data) => this.fields
+            .map((key) => ({ key, value: data[key] }))
+            .filter((r) => !this.elementsToShow().includes(r.key)))));
         this.fields = [
             'kalmanBitrate',
             'bitrateDrop',
@@ -6299,26 +6223,21 @@ class VideoStatsComponent {
             'type',
             'codecs',
             'selectedPair',
-            //'pliCount',
-            //'sliCount',
-            //'transportId',
-            //'id',
         ];
-        this.updateGraph();
-    }
-    updateGraph() {
-        this.graphList = this.fields.map((key) => {
-            const stat = this.obs$.pipe(map$1((val) => {
-                const value = val.aggregatedStats[key];
-                return { value };
-            }));
-            return {
-                key,
-                color: Math.floor(Math.random() * 16777216).toString(),
-                stat,
-            };
-        });
-        this.graphList$ = of(this.graphList).pipe(combineLatestWith(this.trigger$), map$1(([graphList]) => graphList.filter((r) => this.elementsToShow.includes(r.key))));
+        this.elementsToShow = signal([], ...(ngDevMode ? [{ debugName: "elementsToShow" }] : /* istanbul ignore next */ []));
+        this.idKey = 'com.source3d.unreal.stat';
+        this.graphListItems = this.fields.map((key) => ({
+            key,
+            color: '#' +
+                Math.floor(Math.random() * 16777216)
+                    .toString(16)
+                    .padStart(6, '0'),
+            stat: this.obs$.pipe(map$1((val) => ({
+                value: val.aggregatedStats[key],
+            }))),
+        }));
+        this.graphList = computed(() => this.graphListItems.filter((r) => this.elementsToShow().includes(r.key)), ...(ngDevMode ? [{ debugName: "graphList" }] : /* istanbul ignore next */ []));
+        this.restoreFromStorage();
     }
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
@@ -6330,78 +6249,63 @@ class VideoStatsComponent {
             (typeof value === 'number' && isNaN(value))) {
             return;
         }
-        if (this.elementsToShow.includes(el)) {
-            this.elementsToShow = this.elementsToShow.filter((item) => item !== el);
-        }
-        else {
-            this.elementsToShow.push(el);
-        }
+        this.elementsToShow.update((current) => current.includes(el)
+            ? current.filter((item) => item !== el)
+            : [...current, el]);
         this.writeFields();
-        this.trigger$.next();
     }
-    getFields() {
+    restoreFromStorage() {
         try {
-            const { elements, collapsed } = JSON.parse(localStorage.getItem(this.idKey)) || [];
-            this.elementsToShow = elements || [];
-            this.collapsed.set(collapsed);
+            const { elements, collapsed } = JSON.parse(localStorage.getItem(this.idKey)) || {};
+            this.elementsToShow.set(elements || []);
+            this.collapsed.set(collapsed ?? false);
         }
         catch {
-            this.elementsToShow = [];
+            this.elementsToShow.set([]);
         }
     }
     writeFields() {
         localStorage.setItem(this.idKey, JSON.stringify({
             collapsed: this.collapsed(),
-            elements: this.elementsToShow,
+            elements: this.elementsToShow(),
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div class=\"ssInfo\">\n      @for (line of ssData(); track line) {\n        <div>{{ line }}</div>\n      }\n    </div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VideoStatsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, AsyncPipe, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
+            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, AsyncPipe, JsonPipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div class=\"ssInfo\">\n      @for (line of ssData(); track line) {\n        <div>{{ line }}</div>\n      }\n    </div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class ResumeStreamButtonComponent {
+    #store;
     constructor() {
-        this.actions$ = inject(Actions);
         this.#store = inject(Store);
-        this.#videoService = inject(VideoService);
-        this.#destroyRef = inject(DestroyRef);
-        this.showReconnectPopup = this.#store.selectSignal(selectShowReconnectPopup);
-        this.isLoaderScreenVisible = this.#store.selectSignal(selectIsLoaderScreenVisible);
         this.streamConfig = this.#store.selectSignal(selectStreamConfig);
+        this.isSecondStart = signal(!!(this.streamConfig()?.autoStart && location.href.match(/^https/gi)), ...(ngDevMode ? [{ debugName: "isSecondStart" }] : /* istanbul ignore next */ []));
+        this.isLoaderScreenVisible = this.#store.selectSignal(selectIsLoaderScreenVisible);
+        this.showReconnectPopup = this.#store.selectSignal(selectShowReconnectPopup);
         this.isExistMatchUrls = this.#store.selectSignal(selectIsExistMatchUrls);
         this.showResumeStreamPopup = this.#store.selectSignal(unrealFeature.selectShowResumeStreamPopup);
-        this.isSecondStart = signal(!!(this.streamConfig()?.autoStart && location.href.match(/^https/gi)), ...(ngDevMode ? [{ debugName: "isSecondStart" }] : /* istanbul ignore next */ []));
         this.isShowResumeButton = computed(() => this.isLoaderScreenVisible() &&
             this.showReconnectPopup() &&
             this.isExistMatchUrls() &&
             this.showResumeStreamPopup(), ...(ngDevMode ? [{ debugName: "isShowResumeButton" }] : /* istanbul ignore next */ []));
-    }
-    #store;
-    #videoService;
-    #destroyRef;
-    ngOnInit() {
-        this.#store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(skip$1(1), filter(Falsy), takeUntilDestroyed(this.#destroyRef))
-            .subscribe(() => this.onDisconnect());
-    }
-    ngAfterViewInit() {
-        this.actions$
-            .pipe(ofType(videoStreamInitialized), takeUntilDestroyed(this.#destroyRef), filter(() => !!this.#videoService.video?.paused))
-            .subscribe(() => {
-            Logger.info('Simulate Press Play');
-            this.#videoService.play();
-            this.#store.dispatch(resetAfk());
+        this.cirrusConnected = this.#store.selectSignal(unrealFeature.selectCirrusConnected);
+        let wasConnected = this.cirrusConnected();
+        effect(() => {
+            const connected = this.cirrusConnected();
+            if (!connected && wasConnected) {
+                this.disconnect();
+            }
+            wasConnected = connected;
         });
     }
     connect() {
         this.#store.dispatch(startStream({ config: { autoStart: true } }));
     }
-    onDisconnect() {
+    disconnect() {
         this.isSecondStart.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -6410,13 +6314,13 @@ class ResumeStreamButtonComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class IntroSrcComponent {
     #store;
     constructor() {
-        this.videoElement = viewChild('videoPlayerCover', ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
         this.#store = inject(Store);
+        this.videoElement = viewChild('videoPlayerCover', ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
         this.imageIntroSrc = this.#store.selectSignal(unrealFeature.selectImageIntroSrc);
         this.videoIntroSrc = this.#store.selectSignal(unrealFeature.selectVideoIntroSrc);
         this.viewportReady = this.#store.selectSignal(unrealFeature.selectViewportReady);
@@ -6440,6 +6344,9 @@ class IntroSrcComponent {
             });
         });
     }
+    loadingImageError() {
+        this.#store.dispatch(resetIntroSrc());
+    }
     createVideo(src, videoContainer) {
         if (typeof src !== 'string') {
             return;
@@ -6470,15 +6377,12 @@ class IntroSrcComponent {
         sourceElement.addEventListener('error', () => this.#store.dispatch(resetIntroSrc()));
         videoContainer.appendChild(videoElement);
     }
-    imageError() {
-        this.#store.dispatch(resetIntroSrc());
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"imageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IntroSrcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"imageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
         }], ctorParameters: () => [], propDecorators: { videoElement: [{ type: i0.ViewChild, args: ['videoPlayerCover', { isSignal: true }] }] } });
 
 class UnrealSceneComponent {
@@ -6498,19 +6402,19 @@ class UnrealSceneComponent {
     onMouseOut() {
         this.changeMouseOverScene.emit(false);
     }
+    onContextMenu(event) {
+        event.preventDefault();
+    }
     constructor() {
-        this.isStudio = input(false, ...(ngDevMode ? [{ debugName: "isStudio" }] : /* istanbul ignore next */ []));
         this.useContainerAsSizeProvider = input(true, ...(ngDevMode ? [{ debugName: "useContainerAsSizeProvider" }] : /* istanbul ignore next */ []));
-        this.studioResolutionSize = input({
+        this.isStudio = input(false, ...(ngDevMode ? [{ debugName: "isStudio" }] : /* istanbul ignore next */ []));
+        this.resolutionSize = input({
             width: FULL_HD_WIDTH,
             height: FULL_HD_HEIGHT,
-        }, ...(ngDevMode ? [{ debugName: "studioResolutionSize" }] : /* istanbul ignore next */ []));
-        this.studioResolutionValues = toObservable(computed(() => {
-            const values = this.studioResolutionSize();
-            return { width: values.width, height: values.height };
-        }));
-        this.videoElement = viewChild('videoContainer', ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "resolutionSize" }] : /* istanbul ignore next */ []));
         this.changeMouseOverScene = output();
+        this.videoElement = viewChild('videoContainer', ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
+        this.resolutionValues$ = toObservable(this.resolutionSize);
         this.width = FULL_HD_WIDTH;
         this.height = FULL_HD_HEIGHT;
         this.actions$ = inject(Actions);
@@ -6521,38 +6425,34 @@ class UnrealSceneComponent {
         this.maxResolution = Truthy(new URLSearchParams(location.search).get('maxresolution'));
         this.commandsSender = inject(UnrealCommunicatorService);
         this.videoService = inject(VideoService);
-        this.element = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
         this.destroyRef.onDestroy(() => this.#store.dispatch(destroyUnrealScene()));
         effect(() => {
             const videoElement = this.videoElement();
             const isExistMatchUrls = this.isExistMatchUrls();
-            if (videoElement && isExistMatchUrls) {
-                this.#store.dispatch(initSignalling());
-            }
+            untracked(() => {
+                if (videoElement && isExistMatchUrls) {
+                    this.#store.dispatch(initSignalling());
+                }
+            });
         });
         afterNextRender({
             read: () => {
                 const videoElement = this.videoElement();
                 if (videoElement) {
                     this.videoService.setContainer(videoElement.nativeElement);
-                    if (this.element?.nativeElement) {
-                        fromEvent(this.element?.nativeElement, 'contextmenu')
-                            .pipe(takeUntilDestroyed(this.destroyRef))
-                            .subscribe((event) => event.preventDefault());
-                    }
                     this.listenResizeValues();
                 }
             },
         });
     }
     listenResizeValues() {
-        const customSizeInputChanged$ = this.studioResolutionValues.pipe(filter(Truthy), distinctUntilChanged(), filter(({ width, height }) => this.width !== width || this.height !== height), map$1(({ width, height }) => ({ width, height })), tap(({ width, height }) => {
+        const customSizeInputChanged$ = this.resolutionValues$.pipe(filter(({ width, height }) => this.width !== width || this.height !== height), tap(({ width, height }) => {
             this.width = width;
             this.height = height;
         }));
         const resizeRequired$ = merge(this.actions$.pipe(ofType(videoStreamInitialized)), fromEvent(window, 'resize'));
-        const videoStreamSizeChanged$ = this.videoService?.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
+        const videoStreamSizeChanged$ = this.videoService.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
             w: stats.aggregatedStats.frameWidth || 0,
             h: stats.aggregatedStats.frameHeight || 0,
         })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
@@ -6560,12 +6460,17 @@ class UnrealSceneComponent {
         merge(customSizeInputChanged$, resizeRequired$, videoStreamSizeChanged$)
             .pipe(debounceTime(DEBOUNCE_TO_MANY_RESIZE_CALLS), switchMap(() => {
             const key = Math.random();
-            // Monitoring the size of the video stream
+            // Poll 3 times to capture late-arriving DOM measurements after layout settles
             return timer(0, 300).pipe(take(3), map$1(() => key));
         }), map$1((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
             fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD) &&
-            previous.key === current.key), tap((size) => this.adaptVideo(size)), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
-            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD)), combineLatestWith(this.#store
+            previous.key === current.key), tap((size) => this.adaptVideo(size)), 
+        // Key excluded: only dispatch when actual pixel dimensions change
+        distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
+            fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD)), 
+        // Holds dispatch until data channel is up; retains true after disconnect
+        // so resizes still reach Unreal — cleanup is handled by destroyUnrealScene
+        combineLatestWith(this.#store
             .select(unrealFeature.selectDataChannelConnected)
             .pipe(filter(Truthy))), takeUntilDestroyed(this.destroyRef))
             .subscribe(([size]) => {
@@ -6593,11 +6498,13 @@ class UnrealSceneComponent {
         this.#store.dispatch(videoAdaptedToContainer());
     }
     getResizeValuesUniversal() {
-        let containerWidth = window.innerWidth || 2;
-        let containerHeight = window.innerHeight || 2;
+        let containerWidth = window.innerWidth || MIN_CONTAINER_SIZE;
+        let containerHeight = window.innerHeight || MIN_CONTAINER_SIZE;
         if (this.useContainerAsSizeProvider()) {
-            containerWidth = this.videoElement()?.nativeElement.offsetWidth || 2;
-            containerHeight = this.videoElement()?.nativeElement.offsetHeight || 2;
+            containerWidth =
+                this.videoElement()?.nativeElement.offsetWidth || MIN_CONTAINER_SIZE;
+            containerHeight =
+                this.videoElement()?.nativeElement.offsetHeight || MIN_CONTAINER_SIZE;
         }
         const pixelRatio = this.pixelRatio;
         return getResizeValuesUniversal({
@@ -6611,8 +6518,8 @@ class UnrealSceneComponent {
         const videoElement = this.videoElement()?.nativeElement;
         return getResizeStudioValues({
             pixelRatio: this.pixelRatio,
-            containerWidth: videoElement?.offsetWidth || 2,
-            containerHeight: videoElement?.offsetHeight || 2,
+            containerWidth: videoElement?.offsetWidth || MIN_CONTAINER_SIZE,
+            containerHeight: videoElement?.offsetHeight || MIN_CONTAINER_SIZE,
             studioWidth: this.width,
             studioHeight: this.height,
             maxResolution: this.maxResolution,
@@ -6630,7 +6537,7 @@ class UnrealSceneComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, studioResolutionSize: { classPropertyName: "studioResolutionSize", publicName: "studioResolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, resolutionSize: { classPropertyName: "resolutionSize", publicName: "resolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealSceneComponent, decorators: [{
             type: Component,
@@ -6643,12 +6550,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         ImageLoadingSrcComponent,
                         IntroSrcComponent,
                     ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], studioResolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "studioResolutionSize", required: false }] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], onMouseOver: [{
+        }], ctorParameters: () => [], propDecorators: { useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], resolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolutionSize", required: false }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
             }], onMouseOut: [{
                 type: HostListener,
                 args: ['mouseout']
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
             }] } });
 
 class WebrtcErrorModalComponent {
@@ -6659,9 +6569,6 @@ class WebrtcErrorModalComponent {
     }
     #dialogRef;
     #store;
-    close() {
-        this.#dialogRef.close();
-    }
     closeModalWithCirrusDisconnect() {
         if (!this.isCirrusConnected()) {
             this.#store.dispatch(disconnectStream({
@@ -6671,6 +6578,9 @@ class WebrtcErrorModalComponent {
         }
         this.close();
     }
+    close() {
+        this.#dialogRef.close();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal__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 }); }
 }
@@ -6727,12 +6637,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 class LowBandwidthDetectorComponent {
     constructor() {
-        this.store = inject(Store);
+        this.#store = inject(Store);
         this.dialog = inject(Dialog);
         this.destroyRef = inject(DestroyRef);
         this.videoService = inject(VideoService);
         this.isDevMode = inject(DevModeService).isDevMode;
-        this.viewportReady$ = this.store.select(unrealFeature.selectViewportReady);
+        this.viewportReady$ = this.#store.select(unrealFeature.selectViewportReady);
         this.isLowBandwidth$ = of(true);
         this.lowBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Truthy));
         this.highBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Falsy));
@@ -6755,6 +6665,7 @@ class LowBandwidthDetectorComponent {
         this.isIndicatorExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isIndicatorExpanded" }] : /* istanbul ignore next */ []));
         this.isIndicatorExpandedTrigger$ = toObservable(this.isIndicatorExpanded).pipe(skip(1), distinctUntilChanged$1(), filter(Falsy));
     }
+    #store;
     ngOnInit() {
         this.lowBandwidthTrigger$
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -6853,6 +6764,7 @@ function provideUnrealModule() {
         StreamStatusTelemetryService2,
         FpsMonitorService,
         WebRtcPlayerService,
+        LoadingProgressService,
         provideEnvironmentInitializer(() => {
             inject(AggregatorService);
             inject(InputService);
@@ -6871,5 +6783,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, DESTROY_DISCONNECT_REASONS, 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, 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, setAfkTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setViewportNotReady, setViewportReady, showAfkTimeoutPopup, showLoadingProgress, showResumeStreamPopup, showUnrealErrorMessage, smoothTransition, startStream, trackMixpanelEvent, trackTelemetryData, 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, DESTROY_DISCONNECT_REASONS, DataFlowMonitor, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, KalmanFilter1D, LatencyTimings, LoadingProgressService, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MIN_CONTAINER_SIZE, 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_AUDIO_ID, 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, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, commandsFeature, commandsReducer, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeValuesUniversal, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetUserInactivityTimeout, resetWarnTimeout, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsFullyConnected, selectIsLoaderScreenVisible, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setUserInactivityTimeout, setViewportNotReady, setViewportReady, showLoadingProgress, showResumeStreamPopup, showUnrealErrorMessage, showUserInactivityTimeoutPopup, smoothTransition, startStream, trackMixpanelEvent, trackTelemetryData, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map