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

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, from, fromEvent, throwError, defer, retry, tap as tap$1, takeUntil as takeUntil$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';
@@ -208,7 +211,7 @@ const WS_TIMEOUT = 2000;
 const POLLING_TIME = 4000;
 const WS_OPEN_STATE = 1;
 const DEFAULT_AFK_TIMEOUT_PERIOD = 15;
-const DEFAULT_AFK_TIMEOUT = 120;
+const DEFAULT_AFK_TIMEOUT = 10;
 const DATA_CHANNEL_CONNECTION_TIMEOUT = 8000; //ms;
 const SIGNALLING_PERCENT_VALUE = 56;
 const SCREEN_LOCKER_CONTAINER_ID = '3dsource_start_screen';
@@ -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;
@@ -1194,8 +1145,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 selectShowReconnectPopup = createSelector(unrealFeature.selectCirrusConnected, unrealFeature.selectEstablishingConnection, (cirrusConnected, establishingConnection) => !cirrusConnected && !establishingConnection);
+const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, (showPopup, viewportReady) => !showPopup && !viewportReady);
 const selectIsVideoPlayingAndDataChannelConnected = createSelector(unrealFeature.selectIsVideoPlaying, unrealFeature.selectDataChannelConnected, (isVideoPlaying, isDataChannelConnected) => isVideoPlaying && isDataChannelConnected);
 const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unrealFeature.selectAwsInstance, (data, instance) => {
     const info = [];
@@ -1209,29 +1160,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);
 });
@@ -1286,12 +1245,9 @@ class UnrealEffects {
         };
         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
+                // Skip DataChannelClosed if peer reconnection will handle this case
                 if (reason === DisconnectReason.DataChannelClosed &&
-                    this.reconnectConfig.enabled &&
-                    this.reconnectConfig.onDataChannelClose &&
-                    this.signallingService.isConnected()) {
+                    this.canPeerReconnect()) {
                     Logger.info('[Reconnect] Skipping destroy for DataChannelClosed - peer reconnection will handle');
                     return false;
                 }
@@ -1323,11 +1279,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 merge(this.store.select(unrealFeature.selectViewportReady).pipe(filter(Truthy)), this.actions$.pipe(ofType(setCirrusDisconnected, destroyUnrealScene, dropConnection))).pipe(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 })));
         });
@@ -1404,7 +1374,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,6 +1387,9 @@ class UnrealEffects {
         this.startStream$ = createEffect(() => {
             return this.actions$.pipe(ofType(startStream), map(() => initSignalling()));
         });
+        this.resetAfkOnVideoStart$ = createEffect(() => {
+            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), tap(() => Logger.info('Simulate Press Play')), map(() => resetAfk()));
+        });
         /**
          * Effect: `forceViewportNotReady$`
          *
@@ -1444,9 +1417,7 @@ class UnrealEffects {
          */
         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,
@@ -1557,16 +1528,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 +1577,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,7 +1588,7 @@ 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.isViewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
@@ -1620,6 +1596,8 @@ class AFKService extends SubService {
         this.afkResetTrigger = toSignal(merge(this.store.select(selectWarnTimeout), this.actions$.pipe(ofType(resetAfk))));
         /** Ticks when cirrus disconnects */
         this.disconnected = toSignal(this.disconnect$);
+        /** Ticks when resetUserInactivityTimeout action fires */
+        this.resetUserInactivityTrigger = toSignal(this.actions$.pipe(ofType(resetUserInactivityTimeout)));
         this.destroyRef.onDestroy(() => this.clearTimers());
         if (this.unrealConfig?.playwright) {
             return;
@@ -1647,6 +1625,11 @@ class AFKService extends SubService {
                 untracked(() => this.stop());
             }
         });
+        // Full reset (hide overlay + restart warning timer) on external request
+        effect(() => {
+            this.resetUserInactivityTrigger();
+            untracked(() => this.reset());
+        });
     }
     hideOverlay() {
         this.store.dispatch(setAfkTimerHide());
@@ -1724,11 +1707,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();
@@ -1881,7 +1881,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 +1958,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;
@@ -2100,7 +2100,7 @@ class VideoService extends SubService {
     }
     createWebRtcAudio() {
         const audio = new Audio();
-        audio.id = 'streamingAudio';
+        audio.id = STREAMING_AUDIO_ID;
         this.audio = audio;
     }
     playAudio(audio) {
@@ -2573,7 +2573,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 +2585,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 +2617,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 +2646,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 +2658,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 +2675,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 +2709,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 +2742,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 +2916,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 +2931,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 +2986,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 +3039,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 +3107,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 +3125,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 +3539,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 +3664,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 +3674,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 +3688,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 +3755,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 +3861,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 }));
@@ -3932,7 +3936,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 +4054,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 +4085,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 +4151,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 +4231,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 +4247,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 +4307,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 +4361,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 +4380,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) {
@@ -5432,22 +5443,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();
@@ -5920,12 +5930,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 +6062,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 +6157,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 +6184,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 +6219,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 +6245,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 +6310,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 +6340,9 @@ class IntroSrcComponent {
             });
         });
     }
+    loadingImageError() {
+        this.#store.dispatch(resetIntroSrc());
+    }
     createVideo(src, videoContainer) {
         if (typeof src !== 'string') {
             return;
@@ -6470,15 +6373,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 +6398,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 +6421,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 +6456,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 +6494,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 +6514,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 +6533,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 +6546,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 +6565,6 @@ class WebrtcErrorModalComponent {
     }
     #dialogRef;
     #store;
-    close() {
-        this.#dialogRef.close();
-    }
     closeModalWithCirrusDisconnect() {
         if (!this.isCirrusConnected()) {
             this.#store.dispatch(disconnectStream({
@@ -6671,6 +6574,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 +6633,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 +6661,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 +6760,7 @@ function provideUnrealModule() {
         StreamStatusTelemetryService2,
         FpsMonitorService,
         WebRtcPlayerService,
+        LoadingProgressService,
         provideEnvironmentInitializer(() => {
             inject(AggregatorService);
             inject(InputService);
@@ -6871,5 +6779,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, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsFullyConnected, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, 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