@3dsource/angular-unreal-module 0.0.99 → 0.0.100

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

@@ -3,7 +3,7 @@ import { InjectionToken, inject, ChangeDetectionStrategy, Component, Injectable,
 import { SourceButtonComponent, SourceLoadingComponent } from '@3dsource/source-ui-native';
 import { map as map$1, filter, catchError, distinctUntilChanged, takeWhile, tap, withLatestFrom, exhaustMap, takeUntil, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, delay, skip as skip$1 } from 'rxjs/operators';
 import { Logger, generateUuid, tapLog, Truthy, calculateMedian, clampf, Signal, lerp, getCanvasCached, getSnapshot, whereNot, Falsy, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB, fitIntoRectangle } from '@3dsource/utils';
-import { merge, map, scan, timeout, of, take, concatMap, animationFrameScheduler, interval, Observable, debounceTime, switchMap, fromEvent, EMPTY, timer, mergeMap, skip, share, Subject, from, throwError, defer, retry, tap as tap$1, startWith, takeUntil as takeUntil$1, auditTime, filter as filter$1, throttleTime, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
+import { merge, map, scan, timeout, of, take, concatMap, animationFrameScheduler, interval, Observable, debounceTime, switchMap, fromEvent, EMPTY, timer, mergeMap, skip, share, Subject, from, throwError, defer, retry, tap as tap$1, startWith, takeUntil as takeUntil$1, auditTime, filter as filter$1, throttleTime, BehaviorSubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
 import { createAction, props, createReducer, on, createFeature, Store, createSelector, provideState } from '@ngrx/store';
 import { concatLatestFrom } from '@ngrx/operators';
 import { Actions, createEffect, ofType, provideEffects } from '@ngrx/effects';
@@ -12,7 +12,7 @@ import { HttpClient } from '@angular/common/http';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { MetaBoxCommand } from '@3dsource/types-unreal';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NgOptimizedImage, JsonPipe } from '@angular/common';
+import { NgOptimizedImage, AsyncPipe, JsonPipe } from '@angular/common';
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -197,7 +197,7 @@ const initSignalling = createAction(scoped `init signalling`, (data = {
 }));
 const startStream = createAction(scoped `startStream`, props());
 const resetConfig = createAction(scoped `reset config`);
-const resetAfkAction = createAction(scoped `reset afk action`);
+const resetAfk = createAction(scoped `reset afk action`);
 const resetWarnTimeout = createAction(scoped `reset config warn timeout`);
 const abortEstablishingConnection = createAction(scoped `abortEstablishingConnection`);
 const setUnrealPlaywrightConfig = createAction(scoped `set unreal playwright config`);
@@ -212,6 +212,9 @@ const reconnectPeerSuccess = createAction(scoped `reconnect peer success`);
 const reconnectPeerFailed = createAction(scoped `reconnect peer failed`, props());
 /** Action dispatched when ICE connection state changes to failed/disconnected */
 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 WSCloseCode_NORMAL_CLOSURE = 3000;
 const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
@@ -277,13 +280,7 @@ const OrchestrationMessageTypes = {
 };
 
 const UnrealInternalSignalEvents = {
-    OnVideoInitialized: 'OnVideoInitialized',
-    RestAfkTimer: 'RestAfkTimer',
     UnrealCallback: 'UnrealCallback',
-    VideoPlayClick: 'VideoPlayClick',
-    ShowPlayButton: 'ShowPlayButton',
-    ForceResizeViewport: 'ForceResizeViewport',
-    VideoAdaptedToContainer: 'VideoAdaptedToContainer',
 };
 
 function AnswerHandler(msg) {
@@ -386,7 +383,7 @@ function observeCommandResponse(data, sender, timeOut = 60000, dispatchOnTimeout
     const observable = fromSignal(UnrealInternalSignalEvents.UnrealCallback).pipe(map$1(({ json }) => {
         // Some callbacks do not have commandCallback wrapper,
         // so first we check if it exists,
-        // then fallback to JSON itself
+        // then fall back to JSON itself
         return 'commandCallback' in json
             ? { json }
             : { json: { commandCallback: json } };
@@ -489,14 +486,26 @@ class DataFlowMonitor {
     }
 }
 
+const dispatchResize = () => {
+    window.dispatchEvent(new Event('resize'));
+};
+
+const errorCodes = {
+    code404: 'Your asset is being synced on Metabox servers and is not yet available in Metabox Studio or Metabox Configurator. Please check again later after syncing is complete. ',
+};
+function getRtcErrorMessage(code) {
+    if (code === null) {
+        return undefined;
+    }
+    return errorCodes[`code${code}`];
+}
+
 /**
  * UnrealInternalSignalEvents commands list wrapper listener
  * @param event
  */
 function fromSignal(event) {
-    return Signal.on(event).pipe(
-    //tapLog('fromSignal', event), // <== for debugging, do not remove
-    map$1((data) => data && typeof data === 'object' && 'detail' in data ? data.detail : ''));
+    return Signal.on(event).pipe(map$1((data) => data && typeof data === 'object' && 'detail' in data ? data.detail : ''));
 }
 /**
  * UnrealInternalSignalEvents commands list wrapper sender
@@ -525,23 +534,6 @@ function fromUnrealCallBackSignal(command) {
     }));
 }
 
-const dispatchResize = () => {
-    window.dispatchEvent(new Event('resize'));
-};
-const forceResizeUnrealVideo = () => {
-    sendSignal(UnrealInternalSignalEvents.ForceResizeViewport);
-};
-
-const errorCodes = {
-    code404: 'Your asset is being synced on Metabox servers and is not yet available in Metabox Studio or Metabox Configurator. Please check again later after syncing is complete. ',
-};
-function getRtcErrorMessage(code) {
-    if (code === null) {
-        return undefined;
-    }
-    return errorCodes[`code${code}`];
-}
-
 const floatToSmoothPercents = () => {
     return (source) => source.pipe(scan((acc, value) => ({
         previous: acc.current,
@@ -723,10 +715,6 @@ const removeExileCommands = (state, idToRemove) => {
     return out;
 };
 
-const resetAfk = () => {
-    sendSignal(UnrealInternalSignalEvents.RestAfkTimer);
-};
-
 function fromResizeObserver(elem) {
     return new Observable((subscriber) => {
         const observer = new window.ResizeObserver((entries) => subscriber.next(entries));
@@ -1099,7 +1087,7 @@ class UnrealEffects {
             })));
         });
         this.forceLBMOff$ = createEffect(() => {
-            return fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'visible'), filter(Truthy), withLatestFrom(this.store.select(unrealFeature.selectLowBandwidth)), filter(([, isLowBandwidth]) => isLowBandwidth), tapLog('forceLBMOff$'), map(() => changeLowBandwidth({ lowBandwidth: false })));
+            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 })));
@@ -1120,7 +1108,7 @@ class UnrealEffects {
             .pipe(catchError(() => EMPTY))))))
             .subscribe();
         this.resetAfk$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setConfig, resetWarnTimeout, resetConfig), map(() => resetAfkAction()));
+            return this.actions$.pipe(ofType(setConfig, resetWarnTimeout, resetConfig), map(() => resetAfk()));
         });
         this.abortEstablishingConnection$ = createEffect(() => {
             const viewportReady$ = this.store
@@ -1137,9 +1125,6 @@ class UnrealEffects {
                 });
             }));
         }, { dispatch: false });
-        this.resetAfkAction$ = createEffect(() => {
-            return this.actions$.pipe(ofType(resetAfkAction), tap(() => resetAfk()));
-        }, { dispatch: false });
         this.setSignalingTo100$ = createEffect(() => {
             return this.actions$.pipe(ofType(setAwsInstance), map(() => setStatusPercentSignallingServer({ percent: 100 })));
         });
@@ -1237,7 +1222,7 @@ class UnrealEffects {
             return this.actions$.pipe(ofType(setLoopBackCommandIsCompleted, reconnectPeerSuccess), tap(() => this.commandTelemetryService.trackStopCommand('EXT-SetViewportReady', false, { ready: true })), map(() => setViewportReady()));
         });
         this.startStream$ = createEffect(() => {
-            return this.actions$.pipe(ofType(startStream), tapLog('Start Stream Pressed'), map(() => initSignalling()));
+            return this.actions$.pipe(ofType(startStream), map(() => initSignalling()));
         });
         this.listenUnrealCallbackByInitSignalling$ = createEffect(() => {
             return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap(() => fromSignal(UnrealInternalSignalEvents.UnrealCallback).pipe(map(({ json }) => json?.commandCallback
@@ -1338,7 +1323,7 @@ class UnrealEffects {
                     }
                 }));
             }), 
-            // Cancel if scene is destroyed
+            // Cancel if a scene is destroyed
             takeUntil(this.actions$.pipe(ofType(destroyUnrealScene), take(1))))));
         });
         /**
@@ -1443,6 +1428,7 @@ const selectIsLoaderScreenVisible = createSelector(unrealFeature.selectViewportR
 
 class SubService {
     constructor() {
+        this.actions$ = inject(Actions);
         this.store = inject(Store);
         this.disconnect$ = this.store
             .select(unrealFeature.selectCirrusConnected)
@@ -1463,7 +1449,7 @@ class AFKService extends SubService {
         this.init();
     }
     init() {
-        merge(this.store.select(selectWarnTimeout), fromSignal(UnrealInternalSignalEvents.RestAfkTimer))
+        merge(this.store.select(selectWarnTimeout), this.actions$.pipe(ofType(resetAfk)))
             .pipe(withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady))
             .subscribe(() => this.resetAfkWarningTimer());
         this.store
@@ -1561,6 +1547,9 @@ class FreezeFrameService extends SubService {
             .select(unrealFeature.selectViewportReady)
             .pipe(filter(Truthy))
             .subscribe(() => this.invalidate());
+        this.actions$
+            .pipe(ofType(videoStreamInitialized))
+            .subscribe(() => this.invalidate());
     }
     setData(view) {
         view = view.slice(1 + 4);
@@ -1907,7 +1896,7 @@ class VideoService extends SubService {
             .pipe(take(1), filter((data) => this.video === data.target), tapLog('VideoService loadedmetadata:'))
             .subscribe(() => {
             if (this.video) {
-                sendSignal(UnrealInternalSignalEvents.OnVideoInitialized, this.video);
+                this.store.dispatch(videoStreamInitialized());
             }
         });
     }
@@ -2117,7 +2106,7 @@ class CommandTelemetryService {
      * Finally, calls the provided function with the modified data object.
      *
      * @param {IToBeDecorated} funcToDecorate - The function to be decorated with telemetry tracking.
-     * @param {any} data - The data object to be passed to the function. It will be augmented with a unique tracking ID.
+     * @param {MetaBoxCommandPacket} data - The data object to be passed to the function. It will be augmented with a unique tracking ID.
      */
     wrapper(funcToDecorate, data) {
         const out = { ...data, trackingId: generateUuid() };
@@ -3313,6 +3302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class ConsoleExtensionsService extends SubService {
     #httpClient = inject(HttpClient);
+    #commandsSender = inject(UnrealCommunicatorService);
     #isDevMode = inject(DevModeService).isDevMode;
     constructor() {
         super();
@@ -3329,6 +3319,21 @@ class ConsoleExtensionsService extends SubService {
             }));
             return true;
         };
+        window.dropDC = () => {
+            Signal.broadcast('dropDC');
+            return true;
+        };
+        window.dropPC = () => {
+            Signal.broadcast('dropPC');
+            return true;
+        };
+        window.setResolution = ({ w, h }) => {
+            this.#commandsSender.sendCommandToUnreal({
+                command: MetaBoxCommand.FChangeResolutionCommand,
+                payload: { resolution: { x: w, y: h } },
+            });
+            return 'LowBandwidth => toggled';
+        };
         window.toggleBandwidth = () => {
             this.store
                 .select(unrealFeature.selectLowBandwidth)
@@ -3343,7 +3348,7 @@ class ConsoleExtensionsService extends SubService {
         window.restartApp = () => {
             this.store
                 .select(unrealFeature.selectAwsInstance)
-                .pipe(take(1), filter((data) => !!data.instanceName), tapLog('Instance', `Restart initiated`), switchMap((data) => this.#httpClient.get(`//${data.instanceName}/restartapp`)), catchError(() => of(null)))
+                .pipe(take(1), filter((data) => !!data.instanceName), switchMap((data) => this.#httpClient.get(`//${data.instanceName}/restartapp`)), catchError(() => of(null)))
                 .subscribe();
         };
         window.unrealHelp = () => this.unrealHelp();
@@ -3388,7 +3393,6 @@ class UnrealCommunicatorService {
     constructor() {
         this.store = inject(Store);
         this.commandTelemetryService = inject(CommandTelemetryService);
-        this.freezeFrameService = inject(FreezeFrameService);
         this.webRtcPlayerService = inject(WebRtcPlayerService);
         this.destroy$ = new Subject();
         this.cirrusConnected = this.store.selectSignal(unrealFeature.selectCirrusConnected);
@@ -3396,7 +3400,6 @@ class UnrealCommunicatorService {
     }
     init() {
         this.emitUIInteraction = this.commandTelemetryService.decorate(this.emitUIInteraction.bind(this));
-        this.listenVideo();
         this.store
             .select(unrealFeature.selectDataChannelConnected)
             .pipe(filter(Truthy))
@@ -3437,7 +3440,7 @@ class UnrealCommunicatorService {
     }
     sendInputData(data) {
         try {
-            resetAfk();
+            this.store.dispatch(resetAfk());
             this.webRtcPlayerService.send(data);
         }
         catch (error) {
@@ -3469,12 +3472,6 @@ class UnrealCommunicatorService {
     requestQualityControl() {
         this.sendInputData(new Uint8Array([MessageType.RequestQualityControl]).buffer);
     }
-    listenVideo() {
-        fromSignal(UnrealInternalSignalEvents.OnVideoInitialized).subscribe(() => {
-            sendSignal(UnrealInternalSignalEvents.ShowPlayButton);
-            this.freezeFrameService.invalidate();
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnrealCommunicatorService }); }
 }
@@ -3540,11 +3537,9 @@ class InputService extends SubService {
         Logger.log('DEBUG: video initialized: ', video);
         this.options = InputOptions;
         this.reInit$.next();
-        merge(fromResizeObserver(video), fromSignal(UnrealInternalSignalEvents.VideoAdaptedToContainer))
+        merge(fromResizeObserver(video), this.actions$.pipe(ofType(videoAdaptedToContainer)))
             .pipe(debounceTime$1(300), takeUntil$1(this.deactivatedVideoTrigger$))
-            .subscribe(() => {
-            this.setupNormalizeAndQuantize(video);
-        });
+            .subscribe(() => this.setupNormalizeAndQuantize(video));
         this.setupNormalizeAndQuantize(video);
         this.registerInputs(video);
     }
@@ -4147,9 +4142,6 @@ class UnrealCommunicatorPlaywrightService extends UnrealCommunicatorService {
     sendInputData() {
         return;
     }
-    listenVideo() {
-        return;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnrealCommunicatorPlaywrightService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnrealCommunicatorPlaywrightService }); }
 }
@@ -4700,11 +4692,11 @@ class AfkTimeoutModalComponent {
         this.#afkService.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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-color-bg-default, #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-color-text-default-subdued, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-color-bg-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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-color-bg-default, #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-color-text-default-subdued, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-color-bg-default, #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 (isAfkTimerVisible()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <src-button\n        [isFullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </src-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--src-colors-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
         }] });
 
 class FreezeFrameComponent {
@@ -4787,20 +4779,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class StatGraphComponent {
     constructor() {
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
         this.stat = input(...(ngDevMode ? [undefined, { debugName: "stat" }] : []));
-        this.el = inject(ElementRef);
-        this.graph = viewChild('graph', ...(ngDevMode ? [{ debugName: "graph" }] : []));
         this.color = input('#417bc9', ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.tickStep = input(3, ...(ngDevMode ? [{ debugName: "tickStep" }] : []));
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.el = inject(ElementRef);
+        this.graph = viewChild('graph', ...(ngDevMode ? [{ debugName: "graph" }] : []));
         this.data = [];
         this.max = signal(0, ...(ngDevMode ? [{ debugName: "max" }] : []));
         this.min = signal(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
         this.current = signal(0, ...(ngDevMode ? [{ debugName: "current" }] : []));
-        effect(() => {
-            const stat = this.stat();
-            this.pushData(stat ?? null);
-        });
+        effect(() => this.pushData(this.stat()?.value ?? null));
         afterNextRender({
             read: () => {
                 const graph = this.graph();
@@ -4822,7 +4811,7 @@ class StatGraphComponent {
         const all = this.data.filter((r) => r !== null && !isNaN(r));
         this.max.set(Math.max(...all));
         this.min.set(Math.min(...all));
-        this.scaleY = this.canvas.height / (this.max() || 1);
+        const scaleY = this.canvas.height / (this.max() || 1);
         this.current.set(all[all.length - 1] || 0);
         this.ctx.save();
         const bounds = this.el.nativeElement.getBoundingClientRect();
@@ -4830,7 +4819,7 @@ class StatGraphComponent {
         this.canvas.height = bounds.height - 30; // -p height
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         [...this.data].reverse().forEach((val, index) => {
-            const h = (val || 0) * this.scaleY;
+            const h = (val || 0) * scaleY;
             this.ctx.fillStyle = this.getColor(this.color(), h);
             this.ctx.fillRect(index * this.tickStep(), this.canvas.height - h, this.tickStep(), h);
         });
@@ -4857,12 +4846,12 @@ class StatGraphComponent {
         this.draw();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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.1.5", 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: { stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], resize: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], resize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -4941,11 +4930,11 @@ class UnrealStatusComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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-color-bg-default);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-color-text-default, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"], dependencies: [{ kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid", "role", "ariaLabel", "ariaValueNow", "ariaValueMin", "ariaValueMax"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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-color-bg-default);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-color-text-default, #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 (showLoader()) {\n  <div class=\"status-box\">\n    @if (awsInstance()?.message) {\n      <p>{{ awsInstance()?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <src-loading\n          [size]=\"30\"\n          [backgroundStrokeColor]=\"'#E5E7EB'\"\n          [progressStrokeColor]=\"'#1F2937'\"\n        />\n        {{ messagePercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message src-loading{margin-right:12px}\n"] }]
         }] });
 
 class VideoStatsComponent {
@@ -4954,31 +4943,45 @@ class VideoStatsComponent {
         this.store = inject(Store);
         this.videoService = inject(VideoService);
         this.isDevMode = inject(DevModeService).isDevMode;
-        this.videoStats = toSignal(this.videoService.videoStats$);
+        this.obs$ = this.videoService.videoStats$;
         this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
         this.ssInfo = this.store.selectSignal(selectSignalingParameters);
-        this.fpsTick = computed(() => this.videoStats()?.aggregatedStats?.framesPerSecond || 0, ...(ngDevMode ? [{ debugName: "fpsTick" }] : []));
-        this.fpsAvgTick = computed(() => this.videoStats()?.aggregatedStats?.avgFrameRate || 0, ...(ngDevMode ? [{ debugName: "fpsAvgTick" }] : []));
-        this.bitrateTick = computed(() => this.videoStats()?.aggregatedStats?.bitrate || 0, ...(ngDevMode ? [{ debugName: "bitrateTick" }] : []));
-        this.videoQP = computed(() => this.videoStats()?.aggregatedStats?.VideoEncoderQP || 0, ...(ngDevMode ? [{ debugName: "videoQP" }] : []));
-        this.bitrateAverageTick = computed(() => this.videoStats()?.aggregatedStats?.avgBitrate || 0, ...(ngDevMode ? [{ debugName: "bitrateAverageTick" }] : []));
-        this.videoStatus = computed(() => {
-            const videoStats = this.videoStats();
-            if (this.isDevMode && videoStats) {
-                const data = {
-                    ...videoStats.aggregatedStats,
-                    quality: videoStats.quality,
-                };
-                return this.fields
-                    .map((key) => ({
+        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,
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     value: data[key],
-                }))
-                    .filter((value) => !this.elementsToShow.includes(value.key));
-            }
-            return undefined;
-        }, ...(ngDevMode ? [{ debugName: "videoStatus" }] : []));
+                };
+            })
+                .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() {
         this.fields = [
             'kalmanBitrate',
             'bitrateDrop',
@@ -5005,35 +5008,32 @@ class VideoStatsComponent {
             //'pliCount',
             //'sliCount',
             //'transportId',
-            //'id'
+            //'id',
         ];
-        this.graphList = signal([], ...(ngDevMode ? [{ debugName: "graphList" }] : []));
-        this.idKey = 'com.source3d.unreal.stat';
-        this.elementsToShow = [];
-        this.getFields();
-    }
-    ngOnInit() {
         this.updateGraph();
     }
     updateGraph() {
-        this.graphList.set(this.fields
-            .map((key) => {
+        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.videoStats()?.aggregatedStats?.[key] || 0,
+                stat,
             };
-        })
-            .filter((value) => this.elementsToShow.includes(value.key)));
+        });
+        this.graphList$ = of(this.graphList).pipe(combineLatestWith(this.trigger$), map$1(([graphList]) => graphList.filter((r) => this.elementsToShow.includes(r.key))));
     }
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
         this.writeFields();
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     toggleGraph($event, el, value) {
         $event.stopPropagation();
-        if ((value && typeof value !== 'number') || isNaN(value)) {
+        if ((value && typeof value !== 'number') ||
+            (typeof value === 'number' && isNaN(value))) {
             return;
         }
         if (this.elementsToShow.includes(el)) {
@@ -5043,7 +5043,7 @@ class VideoStatsComponent {
             this.elementsToShow.push(el);
         }
         this.writeFields();
-        this.updateGraph();
+        this.trigger$.next();
     }
     getFields() {
         try {
@@ -5062,15 +5062,16 @@ class VideoStatsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 [stat]=\"fpsTick()\" label=\"FPS (higher is better)\" />\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\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key) {\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: ["stat", "color", "tickStep", "label"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats 2</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VideoStatsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, 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 [stat]=\"fpsTick()\" label=\"FPS (higher is better)\" />\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\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key) {\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, SafePipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats 2</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList$ | async; track graph) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"(graph.stat | async)!\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssInfo() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class ResumeStreamButtonComponent {
     constructor() {
+        this.actions$ = inject(Actions);
         this.store = inject(Store);
         this.videoService = inject(VideoService);
         this.destroyRef = inject(DestroyRef);
@@ -5090,14 +5091,12 @@ class ResumeStreamButtonComponent {
             .subscribe(() => this.onDisconnect());
     }
     ngAfterViewInit() {
-        fromSignal(UnrealInternalSignalEvents.ShowPlayButton)
-            .pipe(takeUntilDestroyed(this.destroyRef))
+        this.actions$
+            .pipe(ofType(videoStreamInitialized), takeUntilDestroyed(this.destroyRef), filter(() => !!this.videoService.video?.paused))
             .subscribe(() => {
-            if (this.videoService.video?.paused) {
-                Logger.info('Simulate Press Play');
-                this.videoService.play();
-                resetAfk();
-            }
+            Logger.info('Simulate Press Play');
+            this.videoService.play();
+            this.store.dispatch(resetAfk());
         });
     }
     connect() {
@@ -5107,11 +5106,11 @@ class ResumeStreamButtonComponent {
         this.isSecondStart.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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-color-bg-default, #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-gray-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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-color-bg-default, #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-gray-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"] }]
+            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream has been paused due to inactivity\n      </div>\n    }\n\n    <src-button\n      (onClick)=\"connect()\"\n      [isFullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </src-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
         }] });
 
 class IntroSrcComponent {
@@ -5205,6 +5204,7 @@ class UnrealSceneComponent {
         this.changeMouseOverScene = output();
         this.width = FULL_HD_WIDTH;
         this.height = FULL_HD_HEIGHT;
+        this.actions$ = inject(Actions);
         this.store = inject(Store);
         this.isExistMatchUrls = this.store.selectSignal(selectIsExistMatchUrls);
         this.isDevMode = inject(DevModeService).isDevMode;
@@ -5242,7 +5242,7 @@ class UnrealSceneComponent {
             this.width = width;
             this.height = height;
         }));
-        const resizeRequired$ = merge(fromSignal(UnrealInternalSignalEvents.OnVideoInitialized), fromEvent(window, 'resize'));
+        const resizeRequired$ = merge(this.actions$.pipe(ofType(videoStreamInitialized)), fromEvent(window, 'resize'));
         const videoStreamSizeChanged$ = this.videoService?.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
             w: stats.aggregatedStats.frameWidth || 0,
             h: stats.aggregatedStats.frameHeight || 0,
@@ -5263,11 +5263,9 @@ class UnrealSceneComponent {
             this.store.dispatch(changeStreamResolutionAction({ width: size.w, height: size.h }));
             this.sendResize(size);
         });
-        fromSignal(UnrealInternalSignalEvents.ForceResizeViewport)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.sendResize(this.resizeValues);
-        });
+        this.actions$
+            .pipe(ofType(forceResizeViewport), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.sendResize(this.resizeValues));
     }
     adaptVideo(size) {
         const video = this.videoService.video;
@@ -5283,7 +5281,7 @@ class UnrealSceneComponent {
                 video.style.height = `${video.height}px`;
             }
         }
-        sendSignal(UnrealInternalSignalEvents.VideoAdaptedToContainer);
+        this.store.dispatch(videoAdaptedToContainer());
     }
     /**
      * This method calculates the dimensions for resizing a layout in a configurator stream.
@@ -5403,11 +5401,11 @@ class WebrtcErrorModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-color-bg-default, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "weight", "size", "context", "customClass", "isFullWidth", "isPressed", "isDisabled", "isLoading", "isInverted", "iconButton", "srcButtonConfig", "formID", "data-testid", "ariaLabel"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-color-bg-default, #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"] }]
+            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\"></header>\n  <section class=\"src-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"src-modal__footer\">\n    <src-button\n      (onClick)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </src-button>\n  </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
         }] });
 
 class FilterSettingsComponent {
@@ -5475,7 +5473,7 @@ class LowBandwidthDetectorComponent {
             .pipe(combineLatestWith(this.isLowBandwidth$), map(([viewPortReady, isLowBandwidth]) => viewPortReady && !isLowBandwidth))
             .pipe(share());
         this.reTrigger$ = this.monitoringTrigger$.pipe(map(() => ({ quality: 'lime' })));
-        this.canSwitchToLowBand$ = this.monitoringTrigger$.pipe(debounceTime(100), switchMap((canSwitch) => concat(of(false), timer(FilterModel.monitoringDelayTime).pipe(map(() => canSwitch))).pipe(take(2), takeUntil$1(this.monitoringTrigger$))), distinctUntilChanged$1(), tapLog('DROP: [LOWBANDWIDTH] Monitoring Active =>'), share());
+        this.canSwitchToLowBand$ = this.monitoringTrigger$.pipe(debounceTime(100), switchMap((canSwitch) => concat(of(false), timer(FilterModel.monitoringDelayTime).pipe(map(() => canSwitch))).pipe(take(2), takeUntil$1(this.monitoringTrigger$))), distinctUntilChanged$1(), share());
         this.videoQuality$ = merge(this.nativeQuality$, this.reTrigger$).pipe(share(), takeUntil$1(this.viewPortDestroyedTrigger$));
         this.fps$ = this.aggregatedStats$.pipe(map((data) => data.framesPerSecond || 0));
         this.bitrateDrop$ = this.aggregatedStats$.pipe(map((data) => data.dataFlowCheckResult), filter((br) => br.isDropDetected), takeUntil$1(merge(this.viewPortDestroyedTrigger$, this.reTrigger$)));
@@ -5647,5 +5645,5 @@ function provideAngularUnrealModule(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AFKService, AfkPlaywrightService, AfkTimeoutModalComponent, AggregatorPlaywrightService, AggregatorService, AnalyticsService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, CommandTelemetryPlaywrightService, CommandTelemetryService, ConfigHandler, ConsoleExtensionsPlaywrightService, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DEFAULT_RECONNECT_DELAY_MS, DEFAULT_RECONNECT_ENABLED, DEFAULT_RECONNECT_MAX_ATTEMPTS, DEFAULT_RECONNECT_ON_DATACHANNEL_CLOSE, DEFAULT_RECONNECT_ON_ICE_FAILURE, DataFlowMonitor, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverPlaywrightService, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFramePlaywrightService, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputPlaywrightService, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MessageType, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PingHandler, PlayerCountHandler, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingPlaywrightService, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryPlaywrightService, StreamStatusTelemetryService, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCommunicatorPlaywrightService, UnrealCommunicatorService, UnrealEffects, UnrealInternalSignalEvents, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, floatToSmoothPercents, forceResizeUnrealVideo, fromResizeObserver, fromSignal, fromUnrealCallBackSignal, getActiveUrl, getImageFromVideoStream, getRtcErrorMessage, iceConnectionFailed, initSignalling, initialState, keepMaxUntilReset, observeCommandResponse, provideAngularUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, removeExileCommands, resetAfk, resetAfkAction, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsShowPopupWithoutAutoStart, selectIsVideoPlayingAndDataChannelConnected, selectLastCommandInProgress, selectLoaderCommands, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, sendSignal, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setViewportNotReady, setViewportReady, showUnrealErrorMessage, smoothTransition, startStream, trackMixpanelEvent, unrealFeature, unrealReducer, updateCirrusInfo };
+export { AFKService, AfkPlaywrightService, AfkTimeoutModalComponent, AggregatorPlaywrightService, AggregatorService, AnalyticsService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, CommandTelemetryPlaywrightService, CommandTelemetryService, ConfigHandler, ConsoleExtensionsPlaywrightService, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DEFAULT_RECONNECT_DELAY_MS, DEFAULT_RECONNECT_ENABLED, DEFAULT_RECONNECT_MAX_ATTEMPTS, DEFAULT_RECONNECT_ON_DATACHANNEL_CLOSE, DEFAULT_RECONNECT_ON_ICE_FAILURE, DataFlowMonitor, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverPlaywrightService, FileReceiverService, FilterSettingsComponent, FpsMonitorService, FreezeFrameComponent, FreezeFramePlaywrightService, FreezeFrameService, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputPlaywrightService, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MessageType, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PingHandler, PlayerCountHandler, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingPlaywrightService, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryPlaywrightService, StreamStatusTelemetryService, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCommunicatorPlaywrightService, UnrealCommunicatorService, UnrealEffects, UnrealInternalSignalEvents, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, commandCompleted, commandStarted, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, fromSignal, fromUnrealCallBackSignal, getActiveUrl, getImageFromVideoStream, getRtcErrorMessage, iceConnectionFailed, initSignalling, initialState, keepMaxUntilReset, observeCommandResponse, provideAngularUnrealModule, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, removeExileCommands, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetWarnTimeout, saveAnalyticsEvent, selectClientAndViewIds, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsLoaderScreenVisible, selectIsShowPopupWithoutAutoStart, selectIsVideoPlayingAndDataChannelConnected, selectLastCommandInProgress, selectLoaderCommands, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, sendSignal, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setViewportNotReady, setViewportReady, showUnrealErrorMessage, smoothTransition, startStream, trackMixpanelEvent, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map