@3dsource/angular-unreal-module 0.0.112 → 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, Pipe, input, ElementRef, viewChild, afterNextRender, HostListener, computed, output, makeEnvironmentProviders, provideEnvironmentInitializer } 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, debounceTime, switchMap, take, fromEvent, EMPTY, timer, timeout, mergeMap, Subject, skip, share, from, throwError, defer, retry, tap as tap$1, startWith, takeUntil as takeUntil$1, throttleTime, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, pairwise, Subscription, bufferTime, BehaviorSubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
+import { 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, withLatestFrom, exhaustMap, catchError, takeUntil, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1, delay, skip as skip$1 } from 'rxjs/operators';
-import { Logger, calculateMedian, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, whereNot, Truthy, Falsy, tapLog, generateUuid, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
+import { 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';
@@ -116,10 +116,92 @@ const InputOptions = {
     suppressBrowserKeys: true,
 };
 
+const WSCloseCode_NORMAL_CLOSURE = 3000;
+const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
+const WSCloseCode_NORMAL_MANUAL_DISCONNECT = 3002;
+const WSCloseCode_FORCE_CIRRUS_CLOSE = 3003;
+const WSCloseCode_UNKNOWN = 1000;
+const WSCloseCode_CIRRUS_PLAYER_DISCONNECTED = 1001;
+const WSCloseCode_CIRRUS_ABNORMAL_CLOSURE = 1006;
+const WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR = 1013;
+const WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER = 1011;
+const WSCloseCodes = [
+    WSCloseCode_NORMAL_CLOSURE,
+    WSCloseCode_NORMAL_AFK_TIMEOUT,
+    WSCloseCode_NORMAL_MANUAL_DISCONNECT,
+    WSCloseCode_FORCE_CIRRUS_CLOSE,
+    WSCloseCode_UNKNOWN,
+    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
+    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
+    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
+    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
+];
+
+const DisconnectReason = {
+    Afk: 'Afk',
+    None: 'None',
+    Destroy: 'Destroy',
+    DataChannelClosed: 'DataChannelClosed',
+    DataChannelTimeout: 'DataChannelTimeout',
+    WebRTCError: 'WebRTCError',
+    WebSocketError: 'WebSocketError',
+    WebSocketClose: 'WebSocketClose',
+    DropConnection: 'DropConnection',
+    OrchestrationPlayerDisconnected: 'OrchestrationPlayerDisconnected',
+    OrchestrationStreamerDisconnected: 'OrchestrationStreamerDisconnected',
+    IceConnectionFailed: 'IceConnectionFailed',
+    ReconnectFailed: 'ReconnectFailed',
+    NewConnectionAttempt: 'NewConnectionAttempt',
+    AbortEstablishingConnection: 'AbortEstablishingConnection',
+};
+
+/*
+export interface RequestReservation extends InstanceMessageBase {
+  type: 'requestReservation';
+}
+*/
+const OrchestrationMessageTypes = {
+    ping: 'ping',
+    error: 'error',
+    offer: 'offer',
+    answer: 'answer',
+    ssInfo: 'ssInfo',
+    config: 'config',
+    playerCount: 'playerCount',
+    iceCandidate: 'iceCandidate',
+    streamerList: 'streamerList',
+    requestStream: 'requestStream',
+    listStreamers: 'listStreamers',
+    instanceReady: 'instanceReady',
+    p2pEstablished: 'p2pEstablished',
+    instanceReserved: 'instanceReserved',
+    playerDisconnected: 'playerDisconnected',
+    streamPreparedForUserInteraction: 'streamPreparedForUserInteraction',
+    streamerDisconnected: 'streamerDisconnected',
+    interruptClientStream: 'interruptClientStream',
+};
+
+/** Disconnect reasons that should trigger remote connection cleanup. */
+const DESTROY_DISCONNECT_REASONS = [
+    DisconnectReason.Afk,
+    DisconnectReason.DataChannelClosed,
+    DisconnectReason.DataChannelTimeout,
+    DisconnectReason.WebSocketError,
+    DisconnectReason.WebSocketClose,
+    DisconnectReason.WebRTCError,
+    DisconnectReason.DropConnection,
+    DisconnectReason.ReconnectFailed,
+    DisconnectReason.OrchestrationPlayerDisconnected,
+    DisconnectReason.OrchestrationStreamerDisconnected,
+];
+
 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';
@@ -129,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';
@@ -152,7 +234,6 @@ const commandCompleted = createAction(scoped$1 `command completed`, props());
 const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
 const trackMixpanelEvent = createAction(scoped `track mixpanel event`, props());
 const trackTelemetryData = createAction(scoped `track telemetry data`, props());
-const changeLowBandwidth = createAction(scoped `change low bandwidth`, props());
 const setMaxFps = createAction(scoped `change fps`, props());
 const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
 const destroyUnrealScene = createAction(scoped `destroyUnrealScene`);
@@ -171,10 +252,6 @@ const setIntroVideoSrc = createAction(scoped `set intro video src`, props());
 const resetIntroSrc = createAction(scoped `reset intro src`);
 const setFreezeFrameFromVideo = createAction(scoped `set freeze frame from video`, props());
 const setEstablishingConnection = createAction(scoped `set establishing connection`, props());
-/**
- * @deprecated Use `dataChannelReady` instead. Currently, this action is not working.
- */
-const setDataChannelConnected = createAction(scoped `set data channel connected`, props());
 const dataChannelConnected = createAction(scoped `data channel connected`, props());
 const dataChannelReady = createAction(scoped `dataChannelReady`);
 const setConfig = createAction(scoped `set config`, props());
@@ -236,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`);
@@ -261,83 +334,20 @@ const iceConnectionFailed = createAction(scoped `ice connection failed`, props()
 const forceResizeViewport = createAction(scoped `force resize viewport`);
 const videoAdaptedToContainer = createAction(scoped `video adapted to container`);
 const videoStreamInitialized = createAction(scoped `video stream initialized`);
-const setKalmanSettings = createAction(scoped `set kalman settings`, props());
 const dropDC = createAction(scoped `drop data channel`);
 const dropPC = createAction(scoped `drop peer connection`);
-
-const WSCloseCode_NORMAL_CLOSURE = 3000;
-const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
-const WSCloseCode_NORMAL_MANUAL_DISCONNECT = 3002;
-const WSCloseCode_FORCE_CIRRUS_CLOSE = 3003;
-const WSCloseCode_UNKNOWN = 1000;
-const WSCloseCode_CIRRUS_PLAYER_DISCONNECTED = 1001;
-const WSCloseCode_CIRRUS_ABNORMAL_CLOSURE = 1006;
-const WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR = 1013;
-const WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER = 1011;
-const WSCloseCodes = [
-    WSCloseCode_NORMAL_CLOSURE,
-    WSCloseCode_NORMAL_AFK_TIMEOUT,
-    WSCloseCode_NORMAL_MANUAL_DISCONNECT,
-    WSCloseCode_FORCE_CIRRUS_CLOSE,
-    WSCloseCode_UNKNOWN,
-    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
-    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
-    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
-    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
-];
-
-const DisconnectReason = {
-    Afk: 'Afk',
-    None: 'None',
-    Destroy: 'Destroy',
-    DataChannelClosed: 'DataChannelClosed',
-    DataChannelTimeout: 'DataChannelTimeout',
-    WebRTCError: 'WebRTCError',
-    WebSocketError: 'WebSocketError',
-    WebSocketClose: 'WebSocketClose',
-    DropConnection: 'DropConnection',
-    OrchestrationPlayerDisconnected: 'OrchestrationPlayerDisconnected',
-    OrchestrationStreamerDisconnected: 'OrchestrationStreamerDisconnected',
-    IceConnectionFailed: 'IceConnectionFailed',
-    ReconnectFailed: 'ReconnectFailed',
-    NewConnectionAttempt: 'NewConnectionAttempt',
-    AbortEstablishingConnection: 'AbortEstablishingConnection',
-};
-
-/*
-export interface RequestReservation extends InstanceMessageBase {
-  type: 'requestReservation';
-}
-*/
-const OrchestrationMessageTypes = {
-    ping: 'ping',
-    error: 'error',
-    offer: 'offer',
-    answer: 'answer',
-    ssInfo: 'ssInfo',
-    config: 'config',
-    playerCount: 'playerCount',
-    iceCandidate: 'iceCandidate',
-    streamerList: 'streamerList',
-    requestStream: 'requestStream',
-    listStreamers: 'listStreamers',
-    instanceReady: 'instanceReady',
-    p2pEstablished: 'p2pEstablished',
-    instanceReserved: 'instanceReserved',
-    playerDisconnected: 'playerDisconnected',
-    streamPreparedForUserInteraction: 'streamPreparedForUserInteraction',
-    streamerDisconnected: 'streamerDisconnected',
-    interruptClientStream: 'interruptClientStream',
-};
+const showLoadingProgress = createAction(scoped `show loading progress`, props());
+const showResumeStreamPopup = createAction(scoped `show resume stream popup`, 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,
     environmentId: null,
-    lowBandwidthStats: undefined,
     isFirstSuccessLoad: false,
     isAfkTimerVisible: false,
     afkCountdown: 0,
-    lowBandwidth: false,
     cirrusConnected: false,
     establishingConnection: false,
     isReconnecting: false,
@@ -347,7 +357,6 @@ const initialState$1 = {
     statusPercentSignallingServer: null,
     statusMessage: null,
     errorMessage: null,
-    ssInfo: null,
     ssData: null,
     streamResolution: { width: null, height: null },
     freezeFrameFromVideo: { dataUrl: null, progress: null },
@@ -363,6 +372,7 @@ const initialState$1 = {
         autoStart: true,
         warnTimeout: DEFAULT_AFK_TIMEOUT,
     },
+    userInactivityTimeout: DEFAULT_AFK_TIMEOUT,
     matchUrls: [],
     streamClientCompanyId: '',
     streamViewId: 'default',
@@ -370,15 +380,23 @@ const initialState$1 = {
     imageIntroSrc: null,
     imageLoadingSrc: '',
     analyticsEvent: null,
+    showLoadingProgress: true,
+    showResumeStreamPopup: true,
+    showAfkTimeoutPopup: true,
 };
-const unrealReducer = createReducer(initialState$1, on(changeLowBandwidth, (state, { lowBandwidth, stats }) => ({
-    ...state,
-    lowBandwidth: lowBandwidth,
-    lowBandwidthStats: lowBandwidth ? stats : undefined,
-})), on(changeStatusMainVideoOnScene, (state, { isVideoPlaying }) => {
-    return { ...state, isVideoPlaying: isVideoPlaying };
+const unrealReducer = createReducer(initialState$1, on(changeStatusMainVideoOnScene, (state, { 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,
@@ -388,12 +406,8 @@ const unrealReducer = createReducer(initialState$1, on(changeLowBandwidth, (stat
     };
 }), on(setViewportNotReady, (state) => {
     return { ...state, viewportReady: false };
-}), on(updateCirrusInfo, (state, { ssInfo, ssData }) => {
-    return {
-        ...state,
-        ssInfo: ssInfo, // For back compatibility
-        ssData: ssData, // Contains all the data from the ssInfo as an object
-    };
+}), on(updateCirrusInfo, (state, { ssData }) => {
+    return { ...state, ssData: ssData };
 }), on(changeStreamResolutionSuccessAction, (state, { width, height }) => {
     return { ...state, streamResolution: { width: width, height: height } };
 }), on(setFreezeFrame, (state, freezeFrame) => {
@@ -409,15 +423,11 @@ const unrealReducer = createReducer(initialState$1, on(changeLowBandwidth, (stat
         },
     };
 }), 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,
@@ -441,12 +451,21 @@ const unrealReducer = createReducer(initialState$1, on(changeLowBandwidth, (stat
     };
 }), on(setConfig, startStream, (state, { config }) => {
     return { ...state, streamConfig: { ...state.streamConfig, ...config } };
-}), on(resetConfig, (state) => {
-    return { ...state, streamConfig: initialState$1.streamConfig };
 }), on(resetWarnTimeout, (state) => {
     return {
         ...state,
-        streamConfig: { ...state.streamConfig, warnTimeout: DEFAULT_AFK_TIMEOUT },
+        streamConfig: {
+            ...state.streamConfig,
+            warnTimeout: state.userInactivityTimeout,
+        },
+    };
+}), on(resetConfig, (state) => {
+    return {
+        ...state,
+        streamConfig: {
+            ...initialState$1.streamConfig,
+            warnTimeout: state.userInactivityTimeout,
+        },
     };
 }), on(initSignalling, (state, { resetDisconnectionReason = true }) => {
     return {
@@ -522,6 +541,18 @@ const unrealReducer = createReducer(initialState$1, on(changeLowBandwidth, (stat
     return { ...state, analyticsEvent: event };
 }), on(setCirrusConnected, (state) => {
     return { ...state, cirrusConnected: true };
+}), on(showLoadingProgress, (state, { visible }) => {
+    return { ...state, showLoadingProgress: visible };
+}), on(showResumeStreamPopup, (state, { visible }) => {
+    return { ...state, showResumeStreamPopup: visible };
+}), on(showUserInactivityTimeoutPopup, (state, { visible }) => {
+    return { ...state, showAfkTimeoutPopup: visible };
+}), on(setUserInactivityTimeout, (state, { timeout }) => {
+    return {
+        ...state,
+        userInactivityTimeout: timeout,
+        streamConfig: { ...state.streamConfig, warnTimeout: timeout },
+    };
 }), on(setCirrusDisconnected, (state) => {
     return {
         ...initialState$1,
@@ -537,6 +568,7 @@ const unrealReducer = createReducer(initialState$1, on(changeLowBandwidth, (stat
         environmentId: state.environmentId,
         streamRequestContext: state.streamRequestContext,
         streamConfig: state.streamConfig,
+        userInactivityTimeout: state.userInactivityTimeout,
     };
 }), on(dropConnection, (state) => {
     return { ...state, establishingConnection: false };
@@ -608,7 +640,7 @@ function PlayerCountHandler(msg) {
 }
 
 function SSInfoHandler(msg) {
-    this.store.dispatch(updateCirrusInfo({ ssInfo: msg.message, ssData: msg.data }));
+    this.store.dispatch(updateCirrusInfo({ ssData: msg.data }));
     return null;
 }
 
@@ -1055,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 };
@@ -1119,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;
@@ -1159,9 +1134,9 @@ const commandsFeature = createFeature({
 const selectCommandsInProgress = createSelector(commandsFeature.selectCommandsInProgress, (commandsInProgress) => commandsInProgress?.length ?? 0);
 const selectCommandProgress = createSelector(commandsFeature.selectTotalCommandsStarted, commandsFeature.selectTotalCommandsCompleted, (totalCommandsStarted, totalCommandsCompleted) => totalCommandsStarted ? totalCommandsCompleted / totalCommandsStarted : 0);
 
-const selectFreezeFrameDataUrlFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, unrealFeature.selectLowBandwidth, (freezeFrameFromVideo, isLow) => isLow ? null : freezeFrameFromVideo?.dataUrl || null);
-const selectFreezeFrameProgressMessageFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, unrealFeature.selectLowBandwidth, (freezeFrameFromVideo, isLow) => isLow ? null : freezeFrameFromVideo?.progress || null);
-const selectFreezeFrameDataUrl = createSelector(unrealFeature.selectFreezeFrame, unrealFeature.selectLowBandwidth, (freezeFrame, isLow) => freezeFrame?.dataUrl && isLow ? freezeFrame?.dataUrl : null);
+const selectFreezeFrameDataUrlFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.dataUrl || null);
+const selectFreezeFrameProgressMessageFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.progress || null);
+const selectFreezeFrameDataUrl = createSelector(unrealFeature.selectFreezeFrame, (freezeFrame) => (freezeFrame?.dataUrl ? freezeFrame?.dataUrl : null));
 const selectIsFreezeFrameLoading = createSelector(unrealFeature.selectFreezeFrame, (freezeFrame) => freezeFrame?.progress
     ? freezeFrame.progress > 0 && freezeFrame.progress < 1
     : false);
@@ -1170,50 +1145,55 @@ 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 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, unrealFeature.selectSsInfo, (data, instance, ssInfo) => {
+const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unrealFeature.selectAwsInstance, (data, instance) => {
     const info = [];
     if (data) {
         info.push(`${data.cirrusVersion}, ${data.branchInfo}, ${data.instanceType}`);
         info.push(`Unreal App Version: ${data.streamerVersion}`);
         info.push(`APP: ${data.streamPath}${data.streamApp}`);
     }
-    else {
-        info.push(ssInfo);
-    }
     info.push(`Polling: ${instance.pollingUrl}`);
     info.push(`WS: ${instance.wsUrl}`);
     return info.join('<br>');
 });
+const selectClientAndViewIds = createSelector(unrealFeature.selectStreamClientCompanyId, unrealFeature.selectStreamViewId, (clientId, viewId) => ({ clientId, viewId }));
+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);
 });
-const selectClientAndViewIds = createSelector(unrealFeature.selectStreamClientCompanyId, unrealFeature.selectStreamViewId, (clientId, viewId) => ({ clientId, viewId }));
-const selectIsLoaderScreenVisible = createSelector(unrealFeature.selectViewportReady, unrealFeature.selectDataChannelConnected, unrealFeature.selectCirrusConnected, (viewReady, cirrusConnected, dataChannelConnected) => !viewReady || !cirrusConnected || !dataChannelConnected);
-const selectCirrusConnectionId = createSelector(unrealFeature.selectSsData, (data) => data?.connectionId);
 
 class UnrealErrorModalComponent {
     constructor() {
@@ -1224,38 +1204,14 @@ class UnrealErrorModalComponent {
     close() {
         this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\n  <header class=\"src-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"src-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"src-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"src-modal__footer\">\n    <src-button (onClick)=\"close()\">Ok</src-button>\n  </div>\n</div>\n", styles: [".src-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\n  <header class=\"src-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"src-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"src-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"src-modal__footer\">\n    <src-button (onClick)=\"close()\">Ok</src-button>\n  </div>\n</div>\n", styles: [".src-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div class=\"src-modal src-modal--small\">\n  <header class=\"src-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"src-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"src-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"src-modal__footer\">\n    <src-button (onClick)=\"close()\">Ok</src-button>\n  </div>\n</div>\n", styles: [".src-modal__header{padding:16px 24px 0}\n"] }]
         }] });
 
-/**
- * Default LBM Filter Parameters
- */
-const DefaultFilterModel = {
-    minimumBitrate: 1600,
-    yellowFlag: 30,
-    redFlag: 50,
-    minimumFps: 5,
-    monitoringDelayTime: 5000,
-    initialBitrateEstimate: 1600,
-    initialErrorCovariance: 1,
-    processNoise: 3,
-    measurementNoise: 500,
-    panelOpen: false,
-};
-/**
- * Global LBM Filter Parameters
- */
-const FilterModel = { ...DefaultFilterModel };
-/**
- * Bitrate Monitor Static Class
- */
-const BITRATE_MONITOR = new DataFlowMonitor(FilterModel.yellowFlag, FilterModel.redFlag, 20);
-
 class UnrealEffects {
     constructor() {
         this.actions$ = inject(Actions);
@@ -1276,7 +1232,6 @@ class UnrealEffects {
         this.connectionCompleted$ = this.store
             .select(unrealFeature.selectDataChannelConnected)
             .pipe(filter(Truthy));
-        // ==================== PEER RECONNECTION EFFECTS ====================
         this.reconnectConfig = {
             enabled: this.unrealInitialConfig?.reconnect?.enabled ?? DEFAULT_RECONNECT_ENABLED,
             maxAttempts: this.unrealInitialConfig?.reconnect?.maxAttempts ??
@@ -1289,29 +1244,14 @@ class UnrealEffects {
                 DEFAULT_RECONNECT_ON_DATACHANNEL_CLOSE,
         };
         this.disconnectReasonHandling$ = createEffect(() => {
-            const destroyReasons = [
-                DisconnectReason.Afk,
-                DisconnectReason.DataChannelClosed,
-                DisconnectReason.DataChannelTimeout,
-                DisconnectReason.WebSocketError,
-                DisconnectReason.WebSocketClose,
-                DisconnectReason.WebRTCError,
-                DisconnectReason.DropConnection,
-                DisconnectReason.ReconnectFailed,
-                DisconnectReason.OrchestrationPlayerDisconnected,
-                DisconnectReason.OrchestrationStreamerDisconnected,
-            ];
             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;
                 }
-                return destroyReasons.some((r) => r === reason);
+                return DESTROY_DISCONNECT_REASONS.includes(reason);
             }), tap(({ reason, message }) => {
                 Logger.log(`Disconnect Call=> reason:'${reason}', message:'${message}'`);
             }), map(({ reason }) => destroyRemoteConnections({ reason })));
@@ -1331,11 +1271,6 @@ class UnrealEffects {
                 this.webRtcPlayerService.closePC();
             }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map(() => dropConnection()));
         });
-        this.webrtcErrorModalComponent$ = createEffect(() => {
-            return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => reason === DisconnectReason.WebRTCError), debounceTime(400), switchMap(() => this.store
-                .select(unrealFeature.selectDataChannelConnected)
-                .pipe(take(1), filter(Falsy))), tap(() => this.dialog.open(WebrtcErrorModalComponent)));
-        }, { dispatch: false });
         this.changeStreamResolution$ = createEffect(() => {
             return this.actions$.pipe(ofType(changeStreamResolutionAction), filter((size) => !!(size?.width && size?.height)), concatLatestFrom(() => this.store.select(unrealFeature.selectStreamResolution)), filter(([newSizes, savedSizes]) => !(newSizes.width === savedSizes.width &&
                 newSizes.height === savedSizes.height)), map(([sizes]) => changeStreamResolutionSuccessAction({
@@ -1343,49 +1278,25 @@ class UnrealEffects {
                 height: sizes.height,
             })));
         });
-        this.forceLBMOff$ = createEffect(() => {
-            return fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'visible'), filter(Truthy), withLatestFrom(this.store.select(unrealFeature.selectLowBandwidth)), filter(([, isLowBandwidth]) => isLowBandwidth), map(() => changeLowBandwidth({ lowBandwidth: false })));
-        });
-        this.resetFreezeFrameOnLowBandwidthTriggered$ = createEffect(() => {
-            return this.actions$.pipe(ofType(changeLowBandwidth), map(({ lowBandwidth }) => lowBandwidth), distinctUntilChanged(), map(() => setFreezeFrame({ dataUrl: null, progress: null })));
-        });
-        this.sendLbmStatistics$ = createEffect(() => {
-            return this.actions$.pipe(ofType(changeLowBandwidth), filter(({ lowBandwidth }) => lowBandwidth), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), this.store.select(unrealFeature.selectStreamClientCompanyId), this.store.select(unrealFeature.selectStreamViewId)), take(1), exhaustMap(([, instance, companyId, viewId]) => this.http
-                .post(this.unrealInitialConfig?.customErrorsEndpoint || '', {
-                message: {
-                    type: 'front',
-                    error: 'low_bandwidth_mode',
-                    signalling: instance.pollingUrl,
-                },
-                client: instance.pollingUrl,
-                session_uuid: companyId,
-                session_uuid2: viewId,
-            })
-                .pipe(catchError(() => EMPTY))));
-        }, { dispatch: false });
         this.resetAfk$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setConfig, resetWarnTimeout, resetConfig), map(() => resetAfk()));
+            return this.actions$.pipe(ofType(setConfig, setUserInactivityTimeout, resetWarnTimeout, resetConfig), map(() => resetAfk()));
         });
         this.abortEstablishingConnection$ = createEffect(() => {
-            const viewportReady$ = this.store
-                .select(unrealFeature.selectViewportReady)
-                .pipe(filter(Truthy), map(() => abortEstablishingConnection()));
-            const disconnectEvents$ = this.actions$.pipe(ofType(setCirrusDisconnected, destroyUnrealScene, dropConnection), map(() => abortEstablishingConnection()));
-            return merge(viewportReady$, disconnectEvents$).pipe(tapLog('ABORT'));
+            return merge(this.store.select(unrealFeature.selectViewportReady).pipe(filter(Truthy)), this.actions$.pipe(ofType(setCirrusDisconnected, destroyUnrealScene, dropConnection))).pipe(map(() => abortEstablishingConnection()));
         });
-        this.setMaxFps$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setMaxFps), tap(({ maxFps }) => {
-                this.commandsSender.sendCommandToUnreal({
-                    command: MetaBoxCommand.FExecuteConsoleCommandCommand,
-                    payload: { value: `t.MaxFPS ${maxFps}` },
-                });
-            }));
-        }, { dispatch: false });
-        this.setKalmanSettings$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setKalmanSettings), tap(({ settings }) => {
-                this.videoService.kalmanFilter1D.config(settings);
-                BITRATE_MONITOR.config(settings);
-            }));
+        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 })));
@@ -1448,27 +1359,10 @@ class UnrealEffects {
                 data: { content },
             }).closed), map(() => showUnrealErrorMessage({ code: null })));
         });
-        this.sendStatisticsToUnreal$ = createEffect(() => {
-            return this.actions$.pipe(ofType(showUnrealErrorMessage), filter(({ code }) => code === 404), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), this.store.select(unrealFeature.selectStreamClientCompanyId), this.store.select(unrealFeature.selectStreamViewId)), switchMap(([action, instance, companyId, viewId]) => this.http
-                .post(this.unrealInitialConfig?.customErrorsEndpoint || '', {
-                client: instance.pollingUrl,
-                session_uuid: companyId,
-                session_uuid2: viewId,
-                message: {
-                    type: 'front',
-                    error: 'pak_not_found',
-                    info: action?.error ?? '',
-                },
-            })
-                .pipe(tap(() => Logger.log(`successfully send to ${this.unrealInitialConfig?.customErrorsEndpoint}`)), catchError(() => {
-                Logger.error(`get error from ${this.unrealInitialConfig?.customErrorsEndpoint}`);
-                return EMPTY;
-            }))));
-        }, { dispatch: false });
         this.unrealReceiverReady$ = createEffect(() => {
             return this.actions$.pipe(ofType(dataChannelConnected), concatLatestFrom(() => this.store.select(unrealFeature.selectIsReconnecting)), filter(([, isReconnecting]) => !isReconnecting), map(() => dataChannelReady()));
         });
-        this.initAppBySetDataChannelConnected$ = createEffect(() => {
+        this.initAppByDataChannelReady$ = createEffect(() => {
             return this.actions$.pipe(ofType(dataChannelReady), tap(() => {
                 this.commandsSender.sendCommandToUnreal({
                     command: MetaBoxCommand.FExecuteConsoleCommandCommand,
@@ -1479,10 +1373,13 @@ class UnrealEffects {
                     payload: { value: this.isDevMode },
                 });
                 this.commandTelemetryService.trackStartCommand('EXT-SetViewportReady');
-            }), switchMap(() => this.store.select(selectCommandsInProgress).pipe(debounceTime(100), // !IMPORTANT last command detection time
-            take(1), switchMap(() => this.unrealCallbackService.observeCommandResponse({ command: MetaBoxCommand.FLoopBackCommand }, (data) => this.commandsSender.sendCommandToUnreal(data))), switchMap(() => this.videoService.videoStats$), filter((videoStats) => !!videoStats.aggregatedStats.framesPerSecond &&
-                videoStats.aggregatedStats.framesPerSecond > MINIMAL_FPS &&
-                (videoStats.aggregatedStats.framesDecoded || 0) > 15), take(1), map(() => setLoopBackCommandIsCompleted()))));
+            }), switchMap(() => 
+            // 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 &&
+                s.framesPerSecond > MINIMAL_FPS &&
+                (s.framesDecoded ?? 0) > 15), take(1), map(() => setLoopBackCommandIsCompleted()))));
         });
         this.setViewportReadyBySetLoopBackCommandIsCompleted$ = createEffect(() => {
             return this.actions$.pipe(ofType(setLoopBackCommandIsCompleted, reconnectPeerSuccess), tap(() => this.commandTelemetryService.trackStopCommand('EXT-SetViewportReady', false, { ready: true })), map(() => setViewportReady()));
@@ -1490,16 +1387,9 @@ class UnrealEffects {
         this.startStream$ = createEffect(() => {
             return this.actions$.pipe(ofType(startStream), map(() => initSignalling()));
         });
-        this.connectToSignaling$ = createEffect(() => {
-            return this.actions$.pipe(ofType(initSignalling), withLatestFrom(this.store.select(unrealFeature.selectMatchUrls), this.store.select(selectIsAutostart), this.store.select(unrealFeature.selectCirrusConnected)), filter(([, , autoStart, cirrusConnected]) => {
-                if (cirrusConnected) {
-                    Logger.warn(`SIGNALING REQUEST can't be called when cirrus connection is already established.`);
-                }
-                return autoStart && !cirrusConnected;
-            }), map(([, matchMakerUrls]) => [...matchMakerUrls].filter(Truthy)), filter((urls) => urls.length > 0), 
-            // Ensure a single in-flight request per attempt.
-            exhaustMap((urls) => this.signallingService.connectToSignaling(urls)));
-        }, { dispatch: false });
+        this.resetAfkOnVideoStart$ = createEffect(() => {
+            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), tap(() => Logger.info('Simulate Press Play')), map(() => resetAfk()));
+        });
         /**
          * Effect: `forceViewportNotReady$`
          *
@@ -1527,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,
@@ -1584,9 +1472,7 @@ class UnrealEffects {
                         }));
                     }
                 }));
-            }), 
-            // Cancel if a scene is destroyed
-            takeUntil(this.actions$.pipe(ofType(destroyUnrealScene), take(1))))));
+            }), takeUntil(this.actions$.pipe(ofType(destroyUnrealScene), take(1))))));
         });
         /**
          * Effect: `handlePeerReconnectFailed$`
@@ -1602,21 +1488,66 @@ class UnrealEffects {
                 message: reason,
             })));
         });
-        /**
-         * 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');
+        this.setMaxFps$ = createEffect(() => {
+            return this.actions$.pipe(ofType(setMaxFps), tap(({ maxFps }) => {
+                this.commandsSender.sendCommandToUnreal({
+                    command: MetaBoxCommand.FExecuteConsoleCommandCommand,
+                    payload: { value: `t.MaxFPS ${maxFps}` },
+                });
             }));
         }, { dispatch: false });
+        this.webrtcErrorModalComponent$ = createEffect(() => {
+            return this.actions$.pipe(ofType(disconnectStream), filter(({ reason }) => reason === DisconnectReason.WebRTCError), debounceTime(400), switchMap(() => this.store
+                .select(unrealFeature.selectDataChannelConnected)
+                .pipe(take(1), filter(Falsy))), tap(() => this.dialog.open(WebrtcErrorModalComponent)));
+        }, { dispatch: false });
+        this.sendStatisticsToUnreal$ = createEffect(() => {
+            return this.actions$.pipe(ofType(showUnrealErrorMessage), filter(({ code }) => code === 404), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), this.store.select(unrealFeature.selectStreamClientCompanyId), this.store.select(unrealFeature.selectStreamViewId)), switchMap(([action, instance, companyId, viewId]) => this.http
+                .post(this.unrealInitialConfig?.customErrorsEndpoint || '', {
+                client: instance.pollingUrl,
+                session_uuid: companyId,
+                session_uuid2: viewId,
+                message: {
+                    type: 'front',
+                    error: 'pak_not_found',
+                    info: action?.error ?? '',
+                },
+            })
+                .pipe(tap(() => Logger.log(`successfully send to ${this.unrealInitialConfig?.customErrorsEndpoint}`)), catchError(() => {
+                Logger.error(`get error from ${this.unrealInitialConfig?.customErrorsEndpoint}`);
+                return EMPTY;
+            }))));
+        }, { dispatch: false });
+        this.connectToSignaling$ = createEffect(() => {
+            return this.actions$.pipe(ofType(initSignalling), withLatestFrom(this.store.select(unrealFeature.selectMatchUrls), this.store.select(selectIsAutostart), this.store.select(unrealFeature.selectCirrusConnected)), filter(([, , autoStart, cirrusConnected]) => {
+                if (cirrusConnected) {
+                    Logger.warn(`SIGNALING REQUEST can't be called when cirrus connection is already established.`);
+                }
+                return autoStart && !cirrusConnected;
+            }), map(([, matchMakerUrls]) => [...matchMakerUrls].filter(Truthy)), filter((urls) => urls.length > 0), 
+            // Ensure a single in-flight request per attempt.
+            exhaustMap((urls) => this.signallingService.connectToSignaling(urls)));
+        }, { 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.10", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealEffects }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -1630,10 +1561,10 @@ class CommandsEffects {
                 : json?.correlationId), filter(Truthy), map((id) => commandCompleted({ id })))));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommandsEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommandsEffects }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CommandsEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CommandsEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommandsEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CommandsEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -1646,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();
         });
@@ -1657,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 });
@@ -1665,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;
@@ -1692,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());
@@ -1762,18 +1700,35 @@ class AFKService extends SubService {
             }
         }, 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AFKService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AFKService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AFKService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AFKService, decorators: [{
             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();
@@ -1853,13 +1808,37 @@ class FreezeFrameService extends SubService {
             progress: 1,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FreezeFrameService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FreezeFrameService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FreezeFrameService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FreezeFrameService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Default LBM Filter Parameters
+ */
+const DefaultFilterModel = {
+    minimumBitrate: 1600,
+    yellowFlag: 30,
+    redFlag: 50,
+    minimumFps: 5,
+    monitoringDelayTime: 5000,
+    initialBitrateEstimate: 1600,
+    initialErrorCovariance: 1,
+    processNoise: 3,
+    measurementNoise: 500,
+    panelOpen: false,
+};
+/**
+ * Global LBM Filter Parameters
+ */
+const FilterModel = { ...DefaultFilterModel };
+/**
+ * Bitrate Monitor Static Class
+ */
+const BITRATE_MONITOR = new DataFlowMonitor(FilterModel.yellowFlag, FilterModel.redFlag, 20);
+
 class VideoService extends SubService {
     constructor() {
         super(...arguments);
@@ -1902,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) {
@@ -1979,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;
@@ -2121,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) {
@@ -2132,10 +2111,10 @@ class VideoService extends SubService {
             error: () => ({}),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: VideoService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: VideoService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VideoService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VideoService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: VideoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VideoService, decorators: [{
             type: Injectable
         }] });
 
@@ -2341,10 +2320,10 @@ class CommandTelemetryService {
         this.trackTime(out);
         funcToDecorate(out);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommandTelemetryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CommandTelemetryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommandTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CommandTelemetryService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2594,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',
@@ -2604,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',
@@ -2636,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() {
@@ -2665,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).
@@ -2677,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`
@@ -2694,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
@@ -2728,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.
      *
@@ -2761,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(
@@ -2924,10 +2905,10 @@ class SignallingService extends SubService {
         Logger.log('Start Getting Region');
         return this.regionsPingService.getFastest().pipe(take(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SignallingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SignallingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SignallingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SignallingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2935,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);
@@ -2948,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);
             }
@@ -2995,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);
@@ -3044,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);
@@ -3106,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
      *
@@ -3124,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');
@@ -3472,10 +3473,10 @@ class WebRtcPlayerService extends SubService {
             Logger.error("Couldn't create answer", e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WebRtcPlayerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebRtcPlayerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WebRtcPlayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebRtcPlayerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3538,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() {
@@ -3663,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) {
@@ -3673,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 ||
@@ -3685,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 ||
@@ -3768,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:
@@ -3819,10 +3802,10 @@ class AggregatorService extends SubService {
                 Logger.warn(`unrecognized data received, packet ID ${view[0]}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AggregatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AggregatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AggregatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AggregatorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3873,18 +3856,12 @@ class ConsoleExtensionsService extends SubService {
             return true;
         };
         window.setResolution = ({ w, h }) => {
+            const resolution = { x: w, y: h };
             this.#commandsSender.sendCommandToUnreal({
                 command: MetaBoxCommand.FChangeResolutionCommand,
-                payload: { resolution: { x: w, y: h } },
+                payload: { resolution },
             });
-            return 'LowBandwidth => toggled';
-        };
-        window.toggleBandwidth = () => {
-            this.store
-                .select(unrealFeature.selectLowBandwidth)
-                .pipe(take(1))
-                .subscribe((isLow) => this.store.dispatch(changeLowBandwidth({ lowBandwidth: !isLow })));
-            return 'LowBandwidth => toggled';
+            return `Resolution set to ${resolution.x}x${resolution.y}`;
         };
         window.setMaxFps = (maxFps) => {
             this.store.dispatch(setMaxFps({ maxFps }));
@@ -3910,10 +3887,10 @@ class ConsoleExtensionsService extends SubService {
         Logger.info('setWarnTime() => set time to appear the AFK window.');
         Logger.info('emitCommand(command) => send command to Unreal Engine.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConsoleExtensionsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ConsoleExtensionsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3929,10 +3906,10 @@ class DevModeService {
             localStorage.removeItem('devMode');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DevModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DevModeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3959,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();
         });
@@ -4043,10 +4022,10 @@ class UnrealCommunicatorService {
     requestQualityControl() {
         this.sendInputData(new Uint8Array([MessageType.RequestQualityControl]).buffer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealCommunicatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealCommunicatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4075,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;
@@ -4098,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;
@@ -4164,57 +4151,53 @@ 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 {
+                    inRange: false,
+                    x: 65535,
+                    y: 65535,
+                };
+            }
+            else {
                 return {
-                    x: normalizedX * 32767,
-                    y: normalizedY * 32767,
+                    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);
     }
     registerInputs(video) {
-        merge(this.store
-            .select(unrealFeature.selectLowBandwidth)
-            .pipe(distinctUntilChanged(), filter(Truthy)), fromEvent(window, 'blur'))
+        fromEvent(window, 'blur')
             .pipe(filter(() => !!video), takeUntil$1(this.deactivatedVideoTrigger$))
             .subscribe(() => this.releaseMouseButtons(255, 0, 0));
         this.registerMouseEnterAndLeaveEvents(video);
@@ -4248,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) => {
@@ -4263,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);
             }
@@ -4320,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) {
@@ -4374,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);
@@ -4393,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) {
@@ -4638,10 +4620,10 @@ class RegionsPingService {
             throw error;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RegionsPingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RegionsPingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RegionsPingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RegionsPingService, decorators: [{
             type: Injectable
         }] });
 
@@ -4671,11 +4653,9 @@ class StreamStatusTelemetryService {
             return this.videoService.videoStats$.pipe(throttleTime(5000, asyncScheduler, {
                 leading: true,
                 trailing: true,
-            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), this.store.select(unrealFeature.selectLowBandwidth), this.store.select(unrealFeature.selectLowBandwidthStats), signalingReadyTime$, viewPortReadyTime$), map$1(([data, signalingServer, isLowBandwidth, lbmStats, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
+            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), signalingReadyTime$, viewPortReadyTime$), map$1(([data, signalingServer, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
                 data,
                 signalingServer,
-                isLowBandwidth,
-                lbmStats,
                 startTimeUtc,
                 signalingReadyTime,
                 viewPortReadyTime,
@@ -4692,7 +4672,7 @@ class StreamStatusTelemetryService {
         return readyState$.pipe(filter(Boolean), take$1(1), map$1(() => Date.now() - startedAt), startWith$1(undefined));
     }
     mapEventData(params) {
-        const { data, signalingServer, isLowBandwidth, lbmStats, startTimeUtc, signalingReadyTime, viewPortReadyTime, } = params;
+        const { data, signalingServer, startTimeUtc, signalingReadyTime, viewPortReadyTime, } = params;
         const { bitrate, VideoEncoderQP, framesPerSecond, frameWidth, frameHeight, jitter, packetsLost, currentRoundTripTime, runTime, } = data.aggregatedStats;
         return {
             startTimeUtc,
@@ -4701,7 +4681,6 @@ class StreamStatusTelemetryService {
             runTime,
             frameWidth,
             frameHeight,
-            isLowBandwidth,
             client: signalingServer.wsUrl,
             pixelRatio: window.devicePixelRatio,
             framesPerSecond,
@@ -4709,7 +4688,6 @@ class StreamStatusTelemetryService {
             packetsLost,
             instanceName: signalingServer.instanceName,
             bitrate,
-            lbmStats,
             rtt: currentRoundTripTime,
             VideoEncoderQP,
         };
@@ -4717,10 +4695,10 @@ class StreamStatusTelemetryService {
     trackEventToMixPanel(data) {
         this.store.dispatch(trackMixpanelEvent({ event: 'streamStatus', data }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StreamStatusTelemetryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StreamStatusTelemetryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4953,10 +4931,10 @@ class StreamStatusTelemetryService2 {
                 ],
             },
         ];
-        if (this.unrealConfig?.playwright)
-            return;
-        if (!this.unrealConfig?.streamTelemetryV2)
+        if (this.unrealConfig?.playwright ||
+            !this.unrealConfig?.streamTelemetryV2) {
             return;
+        }
         this.init();
     }
     getOrCreateUserId() {
@@ -5372,10 +5350,10 @@ class StreamStatusTelemetryService2 {
             data: { userId: this.userId, ...data },
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StreamStatusTelemetryService2 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StreamStatusTelemetryService2 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 // ──────────────────────────────────────────────────────────────────
@@ -5457,30 +5435,29 @@ class FileHandlerService {
         setTimeout(() => sender(out), 0);
         return observable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FileHandlerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileHandlerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FileHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileHandlerService, decorators: [{
             type: Injectable
         }] });
 
 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();
@@ -5549,10 +5526,10 @@ class AnalyticsService extends SubService {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnalyticsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AnalyticsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnalyticsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AnalyticsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5919,10 +5896,10 @@ class FpsMonitorService {
         }
         return { fps: fps / len, bitrate: bitrate / len, qp: qp / len };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FpsMonitorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FpsMonitorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FpsMonitorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FpsMonitorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5953,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,
         })));
@@ -5993,10 +5965,10 @@ class UnrealCallbackService {
         setTimeout(() => sender({ ...data, correlationId }), 0);
         return observable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealCallbackService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealCallbackService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealCallbackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealCallbackService, decorators: [{
             type: Injectable
         }] });
 
@@ -6005,19 +5977,21 @@ class AfkTimeoutModalComponent {
         this.#store = inject(Store);
         this.#afkService = inject(AFKService);
         this.isAfkTimerVisible = this.#store.selectSignal(unrealFeature.selectIsAfkTimerVisible);
+        this.showAfkTimeoutPopup = this.#store.selectSignal(unrealFeature.selectShowAfkTimeoutPopup);
         this.afkCountdown = this.#store.selectSignal(unrealFeature.selectAfkCountdown);
+        this.isShowAfkPopup = computed(() => this.isAfkTimerVisible() && this.showAfkTimeoutPopup(), ...(ngDevMode ? [{ debugName: "isShowAfkPopup" }] : /* istanbul ignore next */ []));
     }
     #store;
     #afkService;
     resetAfk() {
         this.#afkService.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isShowAfkPopup()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
+            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isShowAfkPopup()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
         }] });
 
 class FreezeFrameComponent {
@@ -6027,10 +6001,10 @@ class FreezeFrameComponent {
         this.combinedFreeze = this.#store.selectSignal(selectFreezeFrameCombinedDataUrl);
     }
     #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FreezeFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FreezeFrameComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"] }]
         }] });
@@ -6058,10 +6032,10 @@ class SafePipe {
                 throw new Error(`Invalid safe type specified: ${type}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SafePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SafePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safe',
@@ -6073,10 +6047,10 @@ class LowBandwidthModalComponent {
     close(value) {
         this.#dialogRef.close(value || false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-low-bandwidth-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SafePipe, SourceButtonComponent], template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n  </header>\n  <section class=\"src-modal__body\">\n    <div\n      [innerHtml]=\"\n        'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n          | safe: 'html'\n      \"\n      class=\"src-modal__scroll-box\"\n    ></div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <div class=\"src-modal__buttons\">\n      <src-button\n        (onClick)=\"close(true)\"\n        [data-testid]=\"'switch-to-interactive-mode'\"\n      >\n        Switch\n      </src-button>\n\n      <src-button\n        (onClick)=\"close()\"\n        [data-testid]=\"'close-lbm-modal'\"\n        weight=\"primary\"\n      >\n        Ok\n      </src-button>\n    </div>\n  </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"] }]
         }] });
@@ -6088,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.10", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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.ɵ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)=\"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.10", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
+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 {
@@ -6170,10 +6144,10 @@ class StatGraphComponent {
         }
         this.draw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StatGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StatGraphComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], resize: [{
@@ -6183,83 +6157,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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 */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    #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 (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.10", ngImport: i0, type: UnrealStatusComponent, decorators: [{
+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  <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 {
@@ -6270,43 +6183,19 @@ class VideoStatsComponent {
         this.isDevMode = inject(DevModeService).isDevMode;
         this.obs$ = this.videoService.videoStats$;
         this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
-        this.ssInfo = this.store.selectSignal(selectSignalingParameters);
-        this.fpsTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.framesPerSecond || 0,
-        }))));
-        this.fpsAvgTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.avgFrameRate,
-        }))));
-        this.bitrateTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.bitrate,
-        }))));
-        this.videoQP = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.VideoEncoderQP,
-        }))));
-        this.bitrateAverageTick = toSignal(this.obs$.pipe(map$1((stat) => ({
-            value: stat.aggregatedStats.avgBitrate,
-        }))));
+        this.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.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',
@@ -6330,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);
@@ -6361,91 +6245,78 @@ 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.10", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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(); 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.10", ngImport: i0, type: VideoStatsComponent, decorators: [{
+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]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
+            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.isExistMatchUrls = this.#store.selectSignal(selectIsExistMatchUrls);
         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.isShowResumeButton = computed(() => this.isLoaderScreenVisible() &&
             this.showReconnectPopup() &&
-            this.isExistMatchUrls(), ...(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.isExistMatchUrls() &&
+            this.showResumeStreamPopup(), ...(ngDevMode ? [{ debugName: "isShowResumeButton" }] : /* istanbul ignore next */ []));
+        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.10", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
+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);
@@ -6469,6 +6340,9 @@ class IntroSrcComponent {
             });
         });
     }
+    loadingImageError() {
+        this.#store.dispatch(resetIntroSrc());
+    }
     createVideo(src, videoContainer) {
         if (typeof src !== 'string') {
             return;
@@ -6499,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.10", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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.ɵ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)=\"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.10", ngImport: i0, type: IntroSrcComponent, decorators: [{
+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 {
@@ -6527,62 +6398,57 @@ 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);
         this.#store = inject(Store);
         this.isExistMatchUrls = this.#store.selectSignal(selectIsExistMatchUrls);
         this.isDevMode = inject(DevModeService).isDevMode;
-        this.lightMode = this.#store.selectSignal(unrealFeature.selectLowBandwidth);
         this.isFreezeFrameLoading = this.#store.selectSignal(selectIsFreezeFrameLoading);
         this.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) &&
@@ -6590,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]) => {
@@ -6623,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({
@@ -6641,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,
@@ -6659,10 +6532,10 @@ class UnrealSceneComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, studioResolutionSize: { classPropertyName: "studioResolutionSize", publicName: "studioResolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: { 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.10", ngImport: i0, type: UnrealSceneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UnrealSceneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AfkTimeoutModalComponent,
@@ -6672,13 +6545,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         ResumeStreamButtonComponent,
                         ImageLoadingSrcComponent,
                         IntroSrcComponent,
-                    ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer [class.lightModeCursor]=\"lightMode()\" id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n  <ng-content select=\"app-low-bandwidth-detector\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], studioResolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "studioResolutionSize", required: false }] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], onMouseOver: [{
+                    ], 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: { 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 {
@@ -6689,9 +6565,6 @@ class WebrtcErrorModalComponent {
     }
     #dialogRef;
     #store;
-    close() {
-        this.#dialogRef.close();
-    }
     closeModalWithCirrusDisconnect() {
         if (!this.isCirrusConnected()) {
             this.#store.dispatch(disconnectStream({
@@ -6701,22 +6574,23 @@ class WebrtcErrorModalComponent {
         }
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
         }] });
 
 class FilterSettingsComponent {
     constructor() {
-        this.#store = inject(Store);
         this.storageKey = 'LBMFilterSettings';
         this.defaultFilterModel = { ...DefaultFilterModel };
         this.settings = { ...DefaultFilterModel };
     }
-    #store;
     ngOnInit() {
         const savedSettings = localStorage.getItem(this.storageKey);
         if (savedSettings) {
@@ -6742,7 +6616,6 @@ class FilterSettingsComponent {
         }
         Object.assign(this.settings, settings);
         Object.assign(FilterModel, settings);
-        this.#store.dispatch(setKalmanSettings({ settings }));
     }
     reset() {
         this.dispatch({
@@ -6750,23 +6623,23 @@ class FilterSettingsComponent {
             panelOpen: this.settings.panelOpen,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FilterSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-filter-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">LBM</button>\n  @if (settings.panelOpen) {\n    <div class=\"settings-panel\">\n      <h3>LBM Trigger Settings</h3>\n      <h5>Data Flow Monitor</h5>\n      <form>\n        <label>\n          Monitoring delay:\n          <input\n            [(ngModel)]=\"settings.monitoringDelayTime\"\n            [placeholder]=\"defaultFilterModel.monitoringDelayTime\"\n            type=\"number\"\n            name=\"monitoringDelayTime\"\n          />\n        </label>\n\n        <label>\n          Minimum Bitrate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.minimumBitrate\"\n            [placeholder]=\"defaultFilterModel.minimumBitrate\"\n            type=\"number\"\n            name=\"minimumBitrate\"\n          />\n        </label>\n        <label>\n          Yellow Flag (%):\n          <input\n            [(ngModel)]=\"settings.yellowFlag\"\n            [placeholder]=\"defaultFilterModel.yellowFlag\"\n            type=\"number\"\n            name=\"yellowFlag\"\n          />\n        </label>\n        <label>\n          Red Flag (%):\n          <input\n            [(ngModel)]=\"settings.redFlag\"\n            [placeholder]=\"defaultFilterModel.redFlag\"\n            type=\"number\"\n            name=\"redFlag\"\n          />\n        </label>\n        <label>\n          Minimum FPS:\n          <input\n            [(ngModel)]=\"settings.minimumFps\"\n            [placeholder]=\"defaultFilterModel.minimumFps\"\n            type=\"number\"\n            name=\"minimumFps\"\n          />\n        </label>\n        <hr />\n        <h5>Kalman Filter</h5>\n        <label>\n          Initial Bitrate Estimate (kbit/s):\n          <input\n            [(ngModel)]=\"settings.initialBitrateEstimate\"\n            [placeholder]=\"defaultFilterModel.initialBitrateEstimate\"\n            type=\"number\"\n            name=\"initialBitrateEstimate\"\n          />\n        </label>\n        <label>\n          Initial Error Covariance:\n          <input\n            [(ngModel)]=\"settings.initialErrorCovariance\"\n            [placeholder]=\"defaultFilterModel.initialErrorCovariance\"\n            type=\"number\"\n            name=\"initialErrorCovariance\"\n          />\n        </label>\n        <label>\n          Process Noise (Q):\n          <input\n            [(ngModel)]=\"settings.processNoise\"\n            [placeholder]=\"defaultFilterModel.processNoise\"\n            type=\"number\"\n            name=\"processNoise\"\n          />\n        </label>\n        <label>\n          Measurement Noise (R):\n          <input\n            [(ngModel)]=\"settings.measurementNoise\"\n            [placeholder]=\"defaultFilterModel.measurementNoise\"\n            type=\"number\"\n            name=\"measurementNoise\"\n          />\n        </label>\n      </form>\n      <br />\n      <br />\n      <div class=\"apply-button-container\">\n        <button (click)=\"reset()\">Reset</button>\n        <button (click)=\"saveSettings()\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".settings-container{position:absolute;top:65px;right:10px;z-index:1000}.gear-button{right:0;width:50px;position:absolute;cursor:pointer;font-size:10px;background:none;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#e6f419;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}.settings-panel{font-size:13px;background:#fff;border:1px solid #ccc;padding:15px;margin-top:25px;border-radius:4px;box-shadow:0 2px 8px #0003}.settings-panel h3{margin-top:0}.settings-panel form{display:flex;flex-direction:column}.settings-panel label{margin-bottom:10px;display:flex;flex-direction:column}.settings-panel input{padding:4px;margin-top:4px;border:1px solid #ccc;border-radius:2px}.apply-button-container{position:absolute;bottom:15px;right:15px}.apply-button-container button{padding:6px 12px;border:none;background-color:#1976d2;color:#fff;border-radius:4px;cursor:pointer;margin:2px}.apply-button-container button:hover{background-color:#1565c0}\n"] }]
         }] });
 
 class LowBandwidthDetectorComponent {
     constructor() {
-        this.store = inject(Store);
+        this.#store = inject(Store);
         this.dialog = inject(Dialog);
         this.destroyRef = inject(DestroyRef);
         this.videoService = inject(VideoService);
         this.isDevMode = inject(DevModeService).isDevMode;
-        this.viewportReady$ = this.store.select(unrealFeature.selectViewportReady);
-        this.isLowBandwidth$ = this.store.select(unrealFeature.selectLowBandwidth);
+        this.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));
         this.viewPortDestroyedTrigger$ = this.viewportReady$.pipe(distinctUntilChanged$1(), filter(Falsy));
@@ -6788,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))
@@ -6827,15 +6701,13 @@ class LowBandwidthDetectorComponent {
             else {
                 reason = `Speed < ${FilterModel.minimumBitrate}`;
             }
-            Logger.info(`LBM DETECTED: ${reason}, switching to low bandwidth; `, dataFlowResult.message);
-            this.store.dispatch(changeLowBandwidth({
-                lowBandwidth: true,
+            Logger.info(`LBM DETECTED: ${reason}, switching to low bandwidth; `, dataFlowResult.message, {
                 stats: {
                     dataFlowResult,
                     reason,
                     triggerTime: this.aggregatedStats()?.runTime ?? 0,
                 },
-            }));
+            });
         }
     }
     toggleIndicator(value) {
@@ -6855,13 +6727,12 @@ class LowBandwidthDetectorComponent {
             .closed.pipe(filter(Truthy))
             .subscribe(() => {
             this.toggleIndicator(false);
-            this.store.dispatch(changeLowBandwidth({ lowBandwidth: false }));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"], dependencies: [{ kind: "component", type: FilterSettingsComponent, selector: "app-filter-settings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"], dependencies: [{ kind: "component", type: FilterSettingsComponent, selector: "app-filter-settings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\n  <div\n    [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n    class=\"lbm-indicator freeze-loader\"\n  >\n    <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"#85888E\"\n          d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n        />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n\n    <div\n      [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n      class=\"lbm-message\"\n    >\n      <p class=\"lbm-description\">\n        Fluid Interactivity Modes were disabled due to an unstable connection.\n\n        <button\n          (click)=\"openLBMDialog()\"\n          [attr.data-testid]=\"'learn-more-lbm'\"\n          type=\"button\"\n          class=\"lbm-learn-more\"\n        >\n          Learn more\n        </button>\n      </p>\n      <button\n        (click)=\"toggleIndicator(false)\"\n        [attr.data-testid]=\"'close-lbm-indicator'\"\n        type=\"button\"\n        class=\"lbm-close\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n\n@if (isDevMode) {\n  <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"] }]
         }] });
@@ -6889,6 +6760,7 @@ function provideUnrealModule() {
         StreamStatusTelemetryService2,
         FpsMonitorService,
         WebRtcPlayerService,
+        LoadingProgressService,
         provideEnvironmentInitializer(() => {
             inject(AggregatorService);
             inject(InputService);
@@ -6907,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, DataFlowMonitor, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MessageType, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PingHandler, PlayerCountHandler, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryService, StreamStatusTelemetryService2, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, UnrealCommunicatorService, UnrealEffects, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, answerSent, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, commandsFeature, commandsReducer, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeStudioValuesOld, getResizeValuesUniversal, getResizeValuesUniversalOld, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setKalmanSettings, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setViewportNotReady, setViewportReady, showUnrealErrorMessage, smoothTransition, startStream, trackMixpanelEvent, trackTelemetryData, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
+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