@3dsource/angular-unreal-module 0.0.13 → 0.0.15

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

@@ -2,23 +2,18 @@ import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component, InjectionToken, inject, Pipe, Injectable, DestroyRef, signal, ElementRef, input, HostListener, Input, ViewChild, computed, output } from '@angular/core';
 import { map, filter, catchError, first, skip as skip$1, tap, delay, takeUntil, switchMap as switchMap$1, withLatestFrom, distinctUntilChanged, debounceTime, exhaustMap } from 'rxjs/operators';
 import { Signal, Logger, clampf, generateUuid, tapLog, Truthy, calculateMedian, smoothTransition, getCanvasCached, getSnapshot, whereNot, lerp, Falsy, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, Semaphore, COLOR_CODES, KeyboardNumericCode, InvertedKeyMap, isEmpty, where, fpIsASameAsB, fitIntoRectangle } from '@3dsource/utils';
-import { NgClass, NgOptimizedImage, AsyncPipe, JsonPipe, NgIf } from '@angular/common';
-import { SourceButtonSize, SourceButtonColorScheme, SourceButtonComponent } from '@source/ui-sdk/source-button';
+import { NgClass, NgOptimizedImage, AsyncPipe, JsonPipe } from '@angular/common';
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import { createAction, props, on, createFeature, createSelector, Store } from '@ngrx/store';
-import { createImmerReducer } from 'ngrx-immer/store';
+import { SourceButtonComponent, SourceIconButtonComponent, SourceLoadingComponent } from '@3dsource/source-ui-native';
+import { createAction, props, createReducer, on, createFeature, createSelector, Store } from '@ngrx/store';
 import { scan, timeout, of, switchMap, Observable, fromEvent, skip, share, take, from, timer, Subject, combineLatest, retryWhen, merge, tap as tap$1, interval, startWith, combineLatestWith, takeUntil as takeUntil$1, auditTime, map as map$1, EMPTY, debounceTime as debounceTime$1, BehaviorSubject, first as first$1, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
+import { MetaBoxCommand } from '@3dsource/types-unreal';
+import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { DomSanitizer } from '@angular/platform-browser';
-import { DialogRef, Dialog } from '@angular/cdk/dialog';
-import { SourceRoundButtonComponent } from '@source/ui-sdk/source-round-button';
 import { HttpClient } from '@angular/common/http';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { concatLatestFrom } from '@ngrx/operators';
-import mixpanel from 'mixpanel-browser';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { SourceModalComponent } from '@source/ui-sdk/source-modal';
-import { SourceIconComponent } from '@source/ui-sdk/source-icon';
-import { SourceLoadingComponent } from '@source/ui-sdk/source-loading';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -75,19 +70,18 @@ function fromUnrealCallBackSignal(command) {
 
 class ClickableOverlayComponent {
     constructor() {
-        this.SourceButtonSize = SourceButtonSize;
-        this.SourceButtonColorScheme = SourceButtonColorScheme;
         this.state = toSignal(fromSignal(UnrealInternalSignalEvents.ClickableOverlay).pipe(map((data) => (typeof data === 'object' ? data : null))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ClickableOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ClickableOverlayComponent, isStandalone: true, selector: "app-clickable-overlay", ngImport: i0, template: "@if (state()) {\n  <div\n    (click)=\"state()?.onOverlayClick()\"\n    [ngClass]=\"state()?.className\"\n    id=\"videoPlayOverlay\"\n  >\n    @if (state()?.isActivityDetected) {\n      <div class=\"resume-box\">\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"state()?.message\" 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          [colorScheme]=\"SourceButtonColorScheme.PRIMARY\"\n          [isFullWidth]=\"true\"\n          [size]=\"SourceButtonSize.LARGE\"\n          [data-testid]=\"'continue-session'\"\n        >\n          Continue\n        </src-button>\n      </div>\n    }\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--inputFont);color:var(--colour4);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(--br-medium, 8px);background:var(--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(--colors-text-default, #1f2937);text-align:center;font-family:var(--font-family-sans);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(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px;color:var(--colors-gray-color-gray-500, #6b7280)}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "iconPrefix", "iconButton", "icon", "isPressed", "isDisabled", "isLoading", "label", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ClickableOverlayComponent, isStandalone: true, selector: "app-clickable-overlay", ngImport: i0, template: "@if (state()) {\n  <div\n    (click)=\"state()?.onOverlayClick()\"\n    [ngClass]=\"state()?.className\"\n    id=\"videoPlayOverlay\"\n  >\n    @if (state()?.isActivityDetected) {\n      <div class=\"resume-box\">\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"state()?.message\" 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          [colorScheme]=\"'primary'\"\n          [isFullWidth]=\"true\"\n          [size]=\"'large'\"\n          [data-testid]=\"'continue-session'\"\n        >\n          Continue\n        </src-button>\n      </div>\n    }\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--inputFont);color:var(--colour4);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(--br-medium, 8px);background:var(--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(--colors-text-default, #1f2937);text-align:center;font-family:var(--font-family-sans);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(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px;color:var(--colors-gray-color-gray-500, #6b7280)}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "icon", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ClickableOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-clickable-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SourceButtonComponent], template: "@if (state()) {\n  <div\n    (click)=\"state()?.onOverlayClick()\"\n    [ngClass]=\"state()?.className\"\n    id=\"videoPlayOverlay\"\n  >\n    @if (state()?.isActivityDetected) {\n      <div class=\"resume-box\">\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"state()?.message\" 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          [colorScheme]=\"SourceButtonColorScheme.PRIMARY\"\n          [isFullWidth]=\"true\"\n          [size]=\"SourceButtonSize.LARGE\"\n          [data-testid]=\"'continue-session'\"\n        >\n          Continue\n        </src-button>\n      </div>\n    }\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--inputFont);color:var(--colour4);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(--br-medium, 8px);background:var(--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(--colors-text-default, #1f2937);text-align:center;font-family:var(--font-family-sans);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(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px;color:var(--colors-gray-color-gray-500, #6b7280)}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
+            args: [{ selector: 'app-clickable-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SourceButtonComponent], template: "@if (state()) {\n  <div\n    (click)=\"state()?.onOverlayClick()\"\n    [ngClass]=\"state()?.className\"\n    id=\"videoPlayOverlay\"\n  >\n    @if (state()?.isActivityDetected) {\n      <div class=\"resume-box\">\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"state()?.message\" 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          [colorScheme]=\"'primary'\"\n          [isFullWidth]=\"true\"\n          [size]=\"'large'\"\n          [data-testid]=\"'continue-session'\"\n        >\n          Continue\n        </src-button>\n      </div>\n    }\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--inputFont);color:var(--colour4);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(--br-medium, 8px);background:var(--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(--colors-text-default, #1f2937);text-align:center;font-family:var(--font-family-sans);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(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px;color:var(--colors-gray-color-gray-500, #6b7280)}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
         }] });
 
 const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
+const trackMixpanelEvent = createAction(scoped `track mixpanel event`, props());
 const changeLowBandwidth = createAction(scoped `change low bandwidth`, props());
 const setMaxFps = createAction(scoped `change fps`, props());
 const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
@@ -147,14 +141,6 @@ const DisconnectReason = {
     dataChannelTimeout: 'dataChannelTimeout',
 };
 
-const MixPanelEvents = {
-    pixelstreaming_end: 'pixelstreaming_end',
-    pixelstreaming_start: 'pixelstreaming_start',
-    render_request: 'render_request',
-    custom_click: 'custom_click',
-    route_change: 'route_change',
-};
-
 /*
 export interface RequestReservation extends InstanceMessageBase {
   type: 'requestReservation';
@@ -266,11 +252,6 @@ const InputOptions = {
     fakeMouseWithTouches: false,
 };
 
-const MIX_PANEL = {
-    metaBoxTrack: undefined,
-    streamTrack: undefined,
-};
-
 const UnrealStatusMessage = {
     CONNECTING_TO_SESSION: 'Connecting to session.',
     STARTING_YOUR_SESSION: 'Starting your session',
@@ -629,566 +610,6 @@ function mapQpToQuality(VideoEncoderQP) {
     return quality;
 }
 
-/* eslint-disable */
-/**
-* This file is auto-generated by the API parser
-* Please note that any changes in this file may be overwritten
-* Version: 2025-04-22 14:21:41
-/*
-
-
-
-/**
-@description
-Type of Asset for all PAKs.
-*/
-var EAssetType;
-(function (EAssetType) {
-    EAssetType["none"] = "none";
-    EAssetType["product"] = "product";
-    EAssetType["material"] = "material";
-    EAssetType["environment"] = "environment";
-    EAssetType["level"] = "level";
-    EAssetType["camera"] = "camera";
-    EAssetType["level_sequence"] = "level_sequence";
-    EAssetType["screenshot"] = "screenshot";
-    EAssetType["light"] = "light";
-})(EAssetType || (EAssetType = {}));
-/**
-@description
-Dimension type.
-*/
-var EDimensionType;
-(function (EDimensionType) {
-    EDimensionType["none"] = "none";
-    EDimensionType["millimeter"] = "millimeter";
-    EDimensionType["centimeter"] = "centimeter";
-    EDimensionType["meter"] = "meter";
-    EDimensionType["kilometer"] = "kilometer";
-    EDimensionType["inch"] = "inch";
-    EDimensionType["duim"] = "duim";
-    EDimensionType["yard"] = "yard";
-    EDimensionType["miles"] = "miles";
-})(EDimensionType || (EDimensionType = {}));
-/**
-@description
-SequenceLoopBehavior.
-*/
-var ESequenceLoopBehavior;
-(function (ESequenceLoopBehavior) {
-    ESequenceLoopBehavior["none"] = "none";
-    ESequenceLoopBehavior["loop"] = "loop";
-    ESequenceLoopBehavior["pingPong"] = "pingPong";
-    ESequenceLoopBehavior["loopSection"] = "loopSection";
-    ESequenceLoopBehavior["pingPongSection"] = "pingPongSection";
-})(ESequenceLoopBehavior || (ESequenceLoopBehavior = {}));
-/**
-@description
-Items types that can be placed in scene.
-*/
-var ESceneItemType;
-(function (ESceneItemType) {
-    ESceneItemType["products"] = "products";
-    ESceneItemType["lights"] = "lights";
-    ESceneItemType["pawn"] = "pawn";
-})(ESceneItemType || (ESceneItemType = {}));
-/**
-@description
-Measure axis position.
-*/
-var EMeasureAxisZPosition;
-(function (EMeasureAxisZPosition) {
-    EMeasureAxisZPosition["front"] = "front";
-    EMeasureAxisZPosition["left"] = "left";
-    EMeasureAxisZPosition["right"] = "right";
-    EMeasureAxisZPosition["leftRight"] = "leftRight";
-    EMeasureAxisZPosition["back"] = "back";
-})(EMeasureAxisZPosition || (EMeasureAxisZPosition = {}));
-/**
-@description
-Measure axis position.
-*/
-var EPaddingUnit;
-(function (EPaddingUnit) {
-    EPaddingUnit["pixel"] = "pixel";
-    EPaddingUnit["cm"] = "cm";
-})(EPaddingUnit || (EPaddingUnit = {}));
-/**
-@description
-Curve type.
-*/
-var ECurve;
-(function (ECurve) {
-    ECurve["linear"] = "linear";
-    ECurve["inSine"] = "inSine";
-    ECurve["outSine"] = "outSine";
-    ECurve["inOutSine"] = "inOutSine";
-    ECurve["inQuad"] = "inQuad";
-    ECurve["outQuad"] = "outQuad";
-    ECurve["inOutQuad"] = "inOutQuad";
-    ECurve["inCubic"] = "inCubic";
-    ECurve["outCubic"] = "outCubic";
-    ECurve["inOutCubic"] = "inOutCubic";
-    ECurve["inQuart"] = "inQuart";
-    ECurve["outQuart"] = "outQuart";
-    ECurve["inOutQuart"] = "inOutQuart";
-    ECurve["inQuint"] = "inQuint";
-    ECurve["outQuint"] = "outQuint";
-    ECurve["inOutQuint"] = "inOutQuint";
-    ECurve["inExpo"] = "inExpo";
-    ECurve["outExpo"] = "outExpo";
-    ECurve["inOutExpo"] = "inOutExpo";
-    ECurve["inCirc"] = "inCirc";
-    ECurve["outCirc"] = "outCirc";
-    ECurve["inOutCirc"] = "inOutCirc";
-    ECurve["inBack"] = "inBack";
-    ECurve["outBack"] = "outBack";
-    ECurve["inOutBack"] = "inOutBack";
-    ECurve["inElastic"] = "inElastic";
-    ECurve["outElastic"] = "outElastic";
-    ECurve["inOutElastic"] = "inOutElastic";
-    ECurve["inBounce"] = "inBounce";
-    ECurve["outBounce"] = "outBounce";
-    ECurve["inOutBounce"] = "inOutBounce";
-})(ECurve || (ECurve = {}));
-/**
-@description
-Fit options.
-*/
-var EFitMethod;
-(function (EFitMethod) {
-    EFitMethod["none"] = "none";
-    EFitMethod["byLocation"] = "byLocation";
-    EFitMethod["byRotation"] = "byRotation";
-    EFitMethod["top"] = "top";
-    EFitMethod["bottom"] = "bottom";
-    EFitMethod["front"] = "front";
-    EFitMethod["back"] = "back";
-    EFitMethod["right"] = "right";
-    EFitMethod["left"] = "left";
-})(EFitMethod || (EFitMethod = {}));
-/**
-@description
-Movement allowance along specified axis.
-*/
-var EMovementAllowance;
-(function (EMovementAllowance) {
-    EMovementAllowance["none"] = "none";
-    EMovementAllowance["planeYZ"] = "planeYZ";
-    EMovementAllowance["planeXY"] = "planeXY";
-    EMovementAllowance["planeXZ"] = "planeXZ";
-    EMovementAllowance["axisX"] = "axisX";
-    EMovementAllowance["axisY"] = "axisY";
-    EMovementAllowance["axisZ"] = "axisZ";
-})(EMovementAllowance || (EMovementAllowance = {}));
-/**
-@description
-Alignment options.
-*/
-var EAlignment;
-(function (EAlignment) {
-    EAlignment["byBottomSide"] = "byBottomSide";
-    EAlignment["byTopSide"] = "byTopSide";
-    EAlignment["byFrontSide"] = "byFrontSide";
-    EAlignment["byBackSide"] = "byBackSide";
-    EAlignment["byRightSide"] = "byRightSide";
-    EAlignment["byLeftSide"] = "byLeftSide";
-})(EAlignment || (EAlignment = {}));
-/**
-@description
-Gizmo type.
-*/
-var EGizmoType;
-(function (EGizmoType) {
-    EGizmoType["translation"] = "translation";
-    EGizmoType["rotation"] = "rotation";
-    EGizmoType["scale"] = "scale";
-    EGizmoType["none"] = "none";
-})(EGizmoType || (EGizmoType = {}));
-/**
-@description
-Pawn camera control mode.
-*/
-var EControlMode;
-(function (EControlMode) {
-    EControlMode["none"] = "none";
-    EControlMode["select"] = "select";
-    EControlMode["orbit"] = "orbit";
-    EControlMode["pan"] = "pan";
-    EControlMode["dolly"] = "dolly";
-})(EControlMode || (EControlMode = {}));
-/**
-@description
-Pawn movement mode.
-*/
-var EPawnMovementMode;
-(function (EPawnMovementMode) {
-    EPawnMovementMode["none"] = "none";
-    EPawnMovementMode["around"] = "around";
-    EPawnMovementMode["aroundBlocking"] = "aroundBlocking";
-    EPawnMovementMode["walk"] = "walk";
-    EPawnMovementMode["aroundObstacles"] = "aroundObstacles";
-    EPawnMovementMode["productsControl"] = "productsControl";
-})(EPawnMovementMode || (EPawnMovementMode = {}));
-/**
-@description
-Light mode.
-*/
-var ELightMode;
-(function (ELightMode) {
-    ELightMode["NONE"] = "NONE";
-    ELightMode["RECT"] = "RECT";
-    ELightMode["PANEL"] = "PANEL";
-})(ELightMode || (ELightMode = {}));
-/**
-@description
-Rectangle light type.
-*/
-var ERectLightType;
-(function (ERectLightType) {
-    ERectLightType["rect"] = "rect";
-    ERectLightType["circ"] = "circ";
-    ERectLightType["hexa"] = "hexa";
-})(ERectLightType || (ERectLightType = {}));
-/**
-@deprecated
-Don't need anymore.
-
-All deprecated properties marked as optional. Use with care!
-
-@description
-App type.
-*/
-var EAppType;
-(function (EAppType) {
-    EAppType["none"] = "none";
-    EAppType["platform"] = "platform";
-    EAppType["metabox"] = "metabox";
-    EAppType["vps"] = "vps";
-    EAppType["abg"] = "abg";
-    EAppType["htmx"] = "htmx";
-    EAppType["proampac"] = "proampac";
-})(EAppType || (EAppType = {}));
-/**
-@description
-DLSS mode.
-*/
-var EDlssMode;
-(function (EDlssMode) {
-    EDlssMode["Off"] = "Off";
-    EDlssMode["Auto"] = "Auto";
-    EDlssMode["DLAA"] = "DLAA";
-    EDlssMode["UltraQuality"] = "UltraQuality";
-    EDlssMode["Quality"] = "Quality";
-    EDlssMode["Balanced"] = "Balanced";
-    EDlssMode["Performance"] = "Performance";
-})(EDlssMode || (EDlssMode = {}));
-var MetaBoxCommand;
-(function (MetaBoxCommand) {
-    /**
-  @deprecated
-  No need
-  */
-    MetaBoxCommand["FLoadPaksInMemoryCommand"] = "loadPaksInMemory";
-    MetaBoxCommand["FSetDlssModeCommand"] = "setDlssMode";
-    MetaBoxCommand["FLoadProductCommand"] = "loadProduct";
-    /**
-  @deprecated
-  Use {@link FLoadProductCommand}
-  */
-    MetaBoxCommand["FSelectProductCommand"] = "selectProduct";
-    /**
-  @deprecated
-  Use {@link FUnLoadProductByObjectNameCommand}
-  */
-    MetaBoxCommand["FUnLoadProductCommand"] = "unLoadProduct";
-    /**
-  @deprecated
-  Use {@link FUnLoadProductCommand}
-  */
-    MetaBoxCommand["FRemoveProductCommand"] = "removeProduct";
-    MetaBoxCommand["FUnLoadProductByObjectNameCommand"] = "unLoadProductByObjectName";
-    /**
-  @deprecated
-  Use {@link FUnLoadProductByObjectNameCommand}
-  */
-    MetaBoxCommand["FRemoveProductInSceneCommand"] = "removeProductInScene";
-    MetaBoxCommand["FUnLoadAllProductsCommand"] = "unLoadAllProducts";
-    /**
-  @deprecated
-  Use {@link FUnLoadAllProductsCommand}
-  */
-    MetaBoxCommand["FRemoveAllProductsCommand"] = "removeAllProducts";
-    MetaBoxCommand["FSetFlyingMeshCommand"] = "setFlyingMesh";
-    MetaBoxCommand["FLoadLevelCommand"] = "loadLevel";
-    MetaBoxCommand["FUnLoadLevelCommand"] = "unLoadLevel";
-    /**
-  @deprecated
-  Use {@link FUnLoadLevelCommand}
-  */
-    MetaBoxCommand["FHideLevelCommand"] = "hideLevel";
-    MetaBoxCommand["FUnLoadAllLevelsCommand"] = "unLoadAllLevels";
-    /**
-  @deprecated
-  Use {@link FUnLoadAllLevelsCommand}
-  */
-    MetaBoxCommand["FHideAllLevelsCommand"] = "hideAllLevels";
-    MetaBoxCommand["FSetMaterialCommand"] = "setMaterial";
-    MetaBoxCommand["FSetFlyingMaterialCommand"] = "setFlyingMaterial";
-    MetaBoxCommand["FPlayAnimationCommand"] = "playAnimation";
-    MetaBoxCommand["FLoadButtonCommand"] = "loadButton";
-    MetaBoxCommand["FUnLoadButtonByObjectNameCommand"] = "unLoadButtonByObjectName";
-    MetaBoxCommand["FUnLoadAllButtonsCommand"] = "unLoadAllButtons";
-    MetaBoxCommand["FSetButtonScaleCommand"] = "setButtonScale";
-    MetaBoxCommand["FRequestUnwrapImageCommand"] = "requestUnwrapImage";
-    MetaBoxCommand["FLoadMeasureCommand"] = "loadMeasure";
-    MetaBoxCommand["FUnLoadMeasureByObjectNameCommand"] = "unLoadMeasureByObjectName";
-    MetaBoxCommand["FUnLoadAllMeasuresCommand"] = "unLoadAllMeasures";
-    MetaBoxCommand["FGetAssetsInPakCommand"] = "getAssetsInPak";
-    MetaBoxCommand["FChangeGizmoTypeCommand"] = "changeGizmoType";
-    MetaBoxCommand["FSetSelectionSettingsCommand"] = "setSelectionSettings";
-    MetaBoxCommand["FDragCommand"] = "drag";
-    MetaBoxCommand["FDropCommand"] = "drop";
-    /**
-  @deprecated
-  Use {@link FFitToObjectsCommand}
-  */
-    MetaBoxCommand["FFitCommand"] = "fit";
-    MetaBoxCommand["FFitToObjectsCommand"] = "fitToObjects";
-    MetaBoxCommand["FFitToObjectsByBSphereCommand"] = "fitToObjectsByBSphere";
-    MetaBoxCommand["FFitToObjectsByBBoxCommand"] = "fitToObjectsByBBox";
-    /**
-  @deprecated
-  Use {@link FSelectProductByObjectNameCommand}
-  */
-    MetaBoxCommand["FSelectProductInSceneCommand"] = "selectProductInScene";
-    MetaBoxCommand["FSelectProductByObjectNameCommand"] = "selectProductByObjectName";
-    MetaBoxCommand["FUnselectAllProductsCommand"] = "unselectAllProducts";
-    MetaBoxCommand["FMoveSelectedCommand"] = "moveSelected";
-    MetaBoxCommand["FMoveProductByObjectNameCommand"] = "moveProductByObjectName";
-    MetaBoxCommand["FSetProductsLocationCommand"] = "setProductsLocation";
-    MetaBoxCommand["FAlignProductsToPlaneCommand"] = "alignProductsToPlane";
-    MetaBoxCommand["FRotateSelectedCommand"] = "rotateSelected";
-    MetaBoxCommand["FRotateObjectNameCommand"] = "rotateObjectName";
-    MetaBoxCommand["FRotateActorByTagCommand"] = "rotateActorByTag";
-    /**
-  @deprecated
-  Use {@link FUnloadSelectedProductCommand}
-  */
-    MetaBoxCommand["FRemoveFocusedCommand"] = "removeFocused";
-    MetaBoxCommand["FUnloadSelectedProductCommand"] = "unloadSelectedProduct";
-    MetaBoxCommand["FAttachActorCommand"] = "attachActor";
-    MetaBoxCommand["FDetachActorCommand"] = "detachActor";
-    MetaBoxCommand["FDetachAllActorsCommand"] = "detachAllActors";
-    MetaBoxCommand["FMoveAttachedActorsInSocketCommand"] = "moveAttachedActorsInSocket";
-    MetaBoxCommand["FEnableTeleportCommand"] = "enableTeleport";
-    MetaBoxCommand["FSetPawnMovementModeCommand"] = "setPawnMovementMode";
-    MetaBoxCommand["FSnapAxisCommand"] = "snapAxis";
-    MetaBoxCommand["FClickSnapCommand"] = "clickSnap";
-    MetaBoxCommand["FPawnTransformControlCommand"] = "pawnTransformControl";
-    MetaBoxCommand["FFlyingProductCommand"] = "flyingProduct";
-    MetaBoxCommand["FFreezeFrameCommand"] = "freezeFrame";
-    /**
-  @deprecated
-  Use {@link FControlSensitivityCommand}
-  */
-    MetaBoxCommand["FMouseSensitivityCommand"] = "mouseSensitivity";
-    MetaBoxCommand["FControlSensitivityCommand"] = "controlSensitivity";
-    MetaBoxCommand["FEnableComposureCommand"] = "enableComposure";
-    MetaBoxCommand["FEnableCursorCommand"] = "enableCursor";
-    MetaBoxCommand["FEnableControlsCommand"] = "enableControls";
-    MetaBoxCommand["FEnableSelectionByCursorCommand"] = "enableSelectionByCursor";
-    MetaBoxCommand["FEnableRotationByCursorCommand"] = "enableRotationByCursor";
-    MetaBoxCommand["FEnableZoomByCursorCommand"] = "enableZoomByCursor";
-    MetaBoxCommand["FEnableInteractByCursorCommand"] = "enableInteractByCursor";
-    MetaBoxCommand["FEnablePanByCursorCommand"] = "enablePanByCursor";
-    MetaBoxCommand["FEnableControlsByCursorCommand"] = "enableControlsByCursor";
-    MetaBoxCommand["FSetControlCameraModeCommand"] = "setControlCameraMode";
-    MetaBoxCommand["FSetCameraHeightCommand"] = "setCameraHeight";
-    MetaBoxCommand["FAddCameraHeightCommand"] = "addCameraHeight";
-    /**
-  @deprecated
-  Use {@link FAddCameraHeightCommand}
-  */
-    MetaBoxCommand["FMoveCameraCommand"] = "moveCamera";
-    MetaBoxCommand["FCameraBoxCommand"] = "cameraBox";
-    /**
-  @deprecated
-  Use {@link FClampPanToProductsCommand}
-  */
-    MetaBoxCommand["FClampPanToProductCommand"] = "clampPanToProduct";
-    MetaBoxCommand["FClampPanToProductsCommand"] = "clampPanToProducts";
-    MetaBoxCommand["FSetCameraControlClampsCommand"] = "setCameraControlClamps";
-    MetaBoxCommand["FResetControlClampsCommand"] = "resetControlClamps";
-    MetaBoxCommand["FCameraSettingsCommand"] = "cameraSettings";
-    /**
-  @deprecated
-  Use {@link FCameraSettingsCommand}
-  */
-    MetaBoxCommand["FChangeFovCommand"] = "changeFov";
-    MetaBoxCommand["FApplyCameraPresetCommand"] = "applyCameraPreset";
-    MetaBoxCommand["FSetCameraTransformCommand"] = "setCameraTransform";
-    MetaBoxCommand["FRequestCameraPresetCommand"] = "requestCameraPreset";
-    MetaBoxCommand["FCameraRecenterCommand"] = "cameraRecenter";
-    MetaBoxCommand["FResetZoomCommand"] = "resetZoom";
-    /**
-  @deprecated
-  Use {@link FResetZoomCommand}
-  */
-    MetaBoxCommand["FResetMinZoomCommand"] = "resetMinZoom";
-    MetaBoxCommand["FApplyZoomCommand"] = "applyZoom";
-    /**
-  @deprecated
-  Use {@link FApplyZoomCommand}
-  */
-    MetaBoxCommand["FZoomCommand"] = "zoom";
-    MetaBoxCommand["FAddPanelLightCommand"] = "addPanelLight";
-    MetaBoxCommand["FUpdatePanelLightCommand"] = "updatePanelLight";
-    MetaBoxCommand["FAddRectLightCommand"] = "addRectLight";
-    MetaBoxCommand["FUpdateRectLightCommand"] = "updateRectLight";
-    MetaBoxCommand["FRemoveLightCommand"] = "removeLight";
-    MetaBoxCommand["FSetHdrCommand"] = "setHdr";
-    MetaBoxCommand["FWeatherCommand"] = "weather";
-    /**
-  @deprecated
-  Use {@link FWeatherCommand}
-  */
-    MetaBoxCommand["FEnableUDSCommand"] = "enableUDS";
-    /**
-  @deprecated
-  Use {@link FWeatherCommand}
-  */
-    MetaBoxCommand["FTimeUDSCommand"] = "timeUDS";
-    /**
-  @deprecated
-  Use {@link FWeatherCommand}
-  */
-    MetaBoxCommand["FSetSunOrientationCommand"] = "setSunOrientation";
-    MetaBoxCommand["FEnableLightModeCommand"] = "enableLightMode";
-    MetaBoxCommand["FSetSettingsSequenceCommand"] = "setSettingsSequence";
-    MetaBoxCommand["FInitSequenceCommand"] = "initSequence";
-    MetaBoxCommand["FInitSequenceByObjectNameCommand"] = "initSequenceByObjectName";
-    MetaBoxCommand["FPlaySequenceCommand"] = "playSequence";
-    MetaBoxCommand["FJumpToSequenceCommand"] = "jumpToSequence";
-    MetaBoxCommand["FDragSequenceCommand"] = "dragSequence";
-    MetaBoxCommand["FPauseSequenceCommand"] = "pauseSequence";
-    MetaBoxCommand["FStopSequenceCommand"] = "stopSequence";
-    /**
-  @deprecated
-  Use {@link FPlaySequenceCommand}
-  */
-    MetaBoxCommand["FResumeSequenceCommand"] = "resumeSequence";
-    /**
-  @deprecated
-  Use {@link FInitSequenceCommand}, {@link FPlaySequenceCommand}
-  */
-    MetaBoxCommand["FStartSequenceCommand"] = "startSequence";
-    /**
-  @deprecated
-  Use {@link FTakeRenderCommand}
-  */
-    MetaBoxCommand["FTakeScreenshotCommand"] = "takeScreenshot";
-    MetaBoxCommand["FTakeRenderCommand"] = "takeRender";
-    /**
-  @deprecated
-  Use {@link FTakeLayeredRenderCommand}
-  */
-    MetaBoxCommand["FTakeLayeredScreenshotCommand"] = "takeLayeredScreenshot";
-    MetaBoxCommand["FTakeLayeredRenderCommand"] = "takeLayeredRender";
-    /**
-  @deprecated
-  Use {@link FTakeSpinnerRenderCommand}
-  */
-    MetaBoxCommand["FTake360ScreenshotCommand"] = "take360Screenshot";
-    /**
-  @deprecated
-  Use {@link FTakeSpinnerRenderCommand}
-  */
-    MetaBoxCommand["FTake360RenderCommand"] = "take360Render";
-    MetaBoxCommand["FTakeSpinnerRenderCommand"] = "takeSpinnerRender";
-    /**
-  @deprecated
-  Use {@link FTakeSpinnerRenderPreviewCommand}
-  */
-    MetaBoxCommand["FTake360PreviewCommand"] = "take360Preview";
-    MetaBoxCommand["FTakeSpinnerRenderPreviewCommand"] = "takeSpinnerRenderPreview";
-    /**
-  @deprecated
-  Use {@link FEnableSpinnerModeCommand}
-  */
-    MetaBoxCommand["F360EnableCommand"] = "360Enable";
-    /**
-  @deprecated
-  Use {@link FEnableSpinnerModeCommand}
-  */
-    MetaBoxCommand["F360DisableCommand"] = "360Disable";
-    MetaBoxCommand["FEnableSpinnerModeCommand"] = "enableSpinnerMode";
-    MetaBoxCommand["F360VerticalRotateCommand"] = "360VerticalRotate";
-    MetaBoxCommand["FUnDoCommand"] = "unDo";
-    MetaBoxCommand["FReDoCommand"] = "reDo";
-    MetaBoxCommand["FRequestSceneStateCommand"] = "requestSceneState";
-    MetaBoxCommand["FEnableSceneStateCallbackCommand"] = "enableSceneStateCallback";
-    /**
-  @deprecated
-  Use {@link FRequestSceneStateCommand}
-  */
-    MetaBoxCommand["FSaveSceneStateCommand"] = "saveSceneState";
-    MetaBoxCommand["FLoadSceneStateCommand"] = "loadSceneState";
-    MetaBoxCommand["FStartUndoRedoChainCommand"] = "startUndoRedoChain";
-    MetaBoxCommand["FAddUndoRedoChainCommand"] = "addUndoRedoChain";
-    /**
-  @deprecated
-  Don't need anymore.
-  */
-    MetaBoxCommand["FAppInitCommand"] = "appInit";
-    MetaBoxCommand["FDebugModeCommand"] = "debugMode";
-    MetaBoxCommand["FChangeResolutionCommand"] = "changeResolution";
-    MetaBoxCommand["FExecuteConsoleCommandCommand"] = "executeConsoleCommand";
-    MetaBoxCommand["FPingCommand"] = "ping";
-    MetaBoxCommand["FRestartComposeCommand"] = "restartCompose";
-    MetaBoxCommand["FResetSceneCommand"] = "resetScene";
-    MetaBoxCommand["FDatasmithToPakCommand"] = "datasmithToPak";
-    MetaBoxCommand["FMorphToPakCommand"] = "morphToPak";
-    MetaBoxCommand["FLoopBackCommand"] = "loopBack";
-    MetaBoxCommand["FTestCommand"] = "test";
-})(MetaBoxCommand || (MetaBoxCommand = {}));
-/**
- * List of deprecated commands.
- */
-const DeprecatedCommands = [
-    MetaBoxCommand.FLoadPaksInMemoryCommand,
-    MetaBoxCommand.FSelectProductCommand,
-    MetaBoxCommand.FUnLoadProductCommand,
-    MetaBoxCommand.FRemoveProductCommand,
-    MetaBoxCommand.FRemoveProductInSceneCommand,
-    MetaBoxCommand.FRemoveAllProductsCommand,
-    MetaBoxCommand.FHideLevelCommand,
-    MetaBoxCommand.FHideAllLevelsCommand,
-    MetaBoxCommand.FFitCommand,
-    MetaBoxCommand.FSelectProductInSceneCommand,
-    MetaBoxCommand.FRemoveFocusedCommand,
-    MetaBoxCommand.FMouseSensitivityCommand,
-    MetaBoxCommand.FMoveCameraCommand,
-    MetaBoxCommand.FClampPanToProductCommand,
-    MetaBoxCommand.FChangeFovCommand,
-    MetaBoxCommand.FResetMinZoomCommand,
-    MetaBoxCommand.FZoomCommand,
-    MetaBoxCommand.FEnableUDSCommand,
-    MetaBoxCommand.FTimeUDSCommand,
-    MetaBoxCommand.FSetSunOrientationCommand,
-    MetaBoxCommand.FResumeSequenceCommand,
-    MetaBoxCommand.FStartSequenceCommand,
-    MetaBoxCommand.FTakeScreenshotCommand,
-    MetaBoxCommand.FTakeLayeredScreenshotCommand,
-    MetaBoxCommand.FTake360ScreenshotCommand,
-    MetaBoxCommand.FTake360RenderCommand,
-    MetaBoxCommand.FTake360PreviewCommand,
-    MetaBoxCommand.F360EnableCommand,
-    MetaBoxCommand.F360DisableCommand,
-    MetaBoxCommand.FSaveSceneStateCommand,
-    MetaBoxCommand.FAppInitCommand,
-];
-
 const getResetControlClampsCommand = () => ({
     command: MetaBoxCommand.FResetControlClampsCommand,
 });
@@ -1654,126 +1075,189 @@ const initialState = {
     imageIntroSrc: null,
     imageLoadingSrc: 'assets/images/avif/configurator_bg.avif',
 };
-const unrealReducer = createImmerReducer(initialState, on(changeLowBandwidth, (state, { lowBandwidth, stats }) => {
-    state.lowBandwidth = lowBandwidth;
-    if (!lowBandwidth) {
-        state.lowBandwidthStats = undefined;
-        return state;
-    }
-    state.lowBandwidthStats = stats;
-    return state;
+const unrealReducer = createReducer(initialState, on(changeLowBandwidth, (state, { lowBandwidth, stats }) => {
+    return {
+        ...state,
+        lowBandwidth: lowBandwidth,
+        lowBandwidthStats: lowBandwidth ? stats : undefined,
+    };
 }), on(changeStatusMainVideoOnScene, (state, { isVideoPlaying }) => {
-    state.isVideoPlaying = isVideoPlaying;
-    return state;
+    return {
+        ...state,
+        isVideoPlaying: isVideoPlaying,
+    };
 }), on(setAwsInstance, (state, awsInstance) => {
-    state.awsInstance = awsInstance;
-    return state;
+    return {
+        ...state,
+        awsInstance: awsInstance,
+    };
 }), on(setViewportReady, (state, { value }) => {
-    state.viewportReady = value;
-    if (value) {
-        state.statusMessage = null;
-        state.errorMessage = null;
-    }
-    return state;
+    return {
+        ...state,
+        viewportReady: value,
+        statusMessage: value ? null : state.statusMessage,
+        errorMessage: value ? null : state.errorMessage,
+    };
 }), on(updateCirrusInfo, (state, { ssInfo, ssData }) => {
-    state.ssInfo = ssInfo; // For back compatibility
-    state.ssData = ssData; //Contains all the data from the ssInfo as object
-    return state;
+    return {
+        ...state,
+        ssInfo: ssInfo, // For back compatibility
+        ssData: ssData, // Contains all the data from the ssInfo as object
+    };
 }), on(changeStreamResolutionSuccessAction, (state, { width, height }) => {
-    state.streamResolution.width = width;
-    state.streamResolution.height = height;
-    return state;
+    return {
+        ...state,
+        streamResolution: {
+            width: width,
+            height: height,
+        },
+    };
 }), on(setFreezeFrame, (state, freezeFrame) => {
-    if (freezeFrame.progress === 0 ||
-        freezeFrame.progress === 1 ||
-        freezeFrame.progress === null) {
-        state.freezeFrame.dataUrl = freezeFrame.dataUrl;
-    }
-    state.freezeFrame.progress = freezeFrame.progress || null;
-    return state;
+    return {
+        ...state,
+        freezeFrame: {
+            dataUrl: freezeFrame.progress === 0 ||
+                freezeFrame.progress === 1 ||
+                freezeFrame.progress === null
+                ? freezeFrame.dataUrl
+                : state.freezeFrame.dataUrl,
+            progress: freezeFrame.progress || null,
+        },
+    };
 }), on(setErrorMessage, (state, errorMessage) => {
     if (state.dataChannelConnected) {
         return state;
     }
-    state.errorMessage = errorMessage;
-    state.statusMessage = null;
-    return state;
+    return {
+        ...state,
+        errorMessage: errorMessage,
+        statusMessage: null,
+    };
 }), on(setFreezeFrameFromVideo, (state, freezeFrameFromVideo) => {
-    state.freezeFrameFromVideo.dataUrl = freezeFrameFromVideo.dataUrl;
-    state.freezeFrameFromVideo.progress = freezeFrameFromVideo.progress || null;
-    return state;
+    return {
+        ...state,
+        freezeFrameFromVideo: {
+            dataUrl: freezeFrameFromVideo.dataUrl,
+            progress: freezeFrameFromVideo.progress || null,
+        },
+    };
 }), on(setStatusMessage, (state, { message }) => {
-    state.statusMessage = message;
-    return state;
+    return {
+        ...state,
+        statusMessage: message,
+    };
 }), on(setEstablishingConnection, (state, { value }) => {
-    state.establishingConnection = value;
-    return state;
+    return {
+        ...state,
+        establishingConnection: value,
+    };
 }), on(setStatusPercentSignallingServer, (state, { percent }) => {
-    state.statusPercentSignallingServer = percent;
-    return state;
+    return {
+        ...state,
+        statusPercentSignallingServer: percent,
+    };
 }), on(setDataChannelConnected, (state, { value }) => {
-    state.dataChannelConnected = value;
-    if (value) {
-        state.wasInitialized = true;
-    }
-    return state;
+    return {
+        ...state,
+        dataChannelConnected: value,
+        wasInitialized: value ? true : state.wasInitialized,
+    };
 }), on(setConfig, (state, { config }) => {
-    state.streamConfig = { ...state.streamConfig, ...config };
-    return state;
+    return {
+        ...state,
+        streamConfig: { ...state.streamConfig, ...config },
+    };
 }), on(resetConfig, (state) => {
-    state.streamConfig = initialState.streamConfig;
-    return state;
+    return {
+        ...state,
+        streamConfig: initialState.streamConfig,
+    };
 }), on(resetWarnTimeout, (state) => {
-    state.streamConfig.warnTimeout = DEFAULT_WARN_TIMEOUT;
-    return state;
+    return {
+        ...state,
+        streamConfig: {
+            ...state.streamConfig,
+            warnTimeout: DEFAULT_WARN_TIMEOUT,
+        },
+    };
 }), on(setCirrusConnected, (state) => {
-    state.cirrusConnected = true;
-    return state;
+    return {
+        ...state,
+        cirrusConnected: true,
+    };
 }), on(setCirrusDisconnected, (state) => {
-    state.cirrusConnected = false;
-    return state;
+    return {
+        ...state,
+        cirrusConnected: false,
+    };
 }), on(initSignalling, (state) => {
-    state.disconnectReason = DisconnectReason.none;
-    return state;
+    return {
+        ...state,
+        disconnectReason: DisconnectReason.none,
+    };
 }), on(setSignalingName, (state, { instanceName }) => {
-    state.awsInstance = { ...state.awsInstance, instanceName };
-    return state;
+    return {
+        ...state,
+        awsInstance: { ...state.awsInstance, instanceName },
+    };
 }), on(setLoopBackCommandIsCompleted, (state) => {
-    state.isFirstSuccessLoad = true;
-    return state;
+    return {
+        ...state,
+        isFirstSuccessLoad: true,
+    };
 }), on(setUnrealVersion, (state, { version }) => {
-    state.unrealVersion = version;
-    return state;
+    return {
+        ...state,
+        unrealVersion: version,
+    };
 }), on(setStreamClientCompanyId, (state, { id }) => {
-    state.streamClientCompanyId = id;
-    return state;
+    return {
+        ...state,
+        streamClientCompanyId: id,
+    };
 }), on(setStreamViewId, (state, { id }) => {
-    state.streamViewId = id;
-    return state;
+    return {
+        ...state,
+        streamViewId: id,
+    };
 }), on(setIntroImageSrc, (state, { src }) => {
-    state.imageIntroSrc = src;
-    return state;
+    return {
+        ...state,
+        imageIntroSrc: src,
+    };
 }), on(setLoadingImageSrc, (state, { src }) => {
-    state.imageLoadingSrc = src;
-    return state;
+    return {
+        ...state,
+        imageLoadingSrc: src,
+    };
 }), on(setIntroVideoSrc, (state, { src }) => {
-    state.videoIntroSrc = src;
-    return state;
+    return {
+        ...state,
+        videoIntroSrc: src,
+    };
 }), on(resetIntroSrc, (state) => {
-    state.imageIntroSrc = '';
-    state.videoIntroSrc = '';
-    return state;
+    return {
+        ...state,
+        imageIntroSrc: '',
+        videoIntroSrc: '',
+    };
 }), on(commandStarted, (state, { id, command }) => {
-    state.loaderCommands.totalCommandsStarted =
-        state.loaderCommands.totalCommandsStarted + 1;
-    state.loaderCommands.commandsInProgress = [
-        ...state.loaderCommands.commandsInProgress,
-        { id, command, timeStamp: new Date().getTime() },
-    ];
-    return state;
+    return {
+        ...state,
+        loaderCommands: {
+            ...state.loaderCommands,
+            totalCommandsStarted: state.loaderCommands.totalCommandsStarted + 1,
+            commandsInProgress: [
+                ...state.loaderCommands.commandsInProgress,
+                { id, command, timeStamp: new Date().getTime() },
+            ],
+        },
+    };
 }), on(commandCompleted, (state, { id }) => {
-    state.loaderCommands = removeExileCommands(state.loaderCommands, id);
-    return state;
+    return {
+        ...state,
+        loaderCommands: removeExileCommands(state.loaderCommands, id),
+    };
 }), on(resetUnrealState, (state) => {
     return {
         ...initialState,
@@ -1904,11 +1388,11 @@ class LowBandwidthModalComponent {
         this.dialogRef.close(value || false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n  <header class=\"src-modal__header\">\n    <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      Unstable Connection\n    </h6>\n    <src-round-button\n      (onClick)=\"close()\"\n      [icon]=\"'close_small'\"\n      [data-testid]=\"'close'\"\n      class=\"src-modal__close\"\n    />\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        colorScheme=\"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: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "iconPrefix", "iconButton", "icon", "isPressed", "isDisabled", "isLoading", "label", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }, { kind: "component", type: SourceRoundButtonComponent, selector: "src-round-button", inputs: ["type", "size", "counter", "icon", "isDisabled", "data-testid"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\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        colorScheme=\"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: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "icon", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-low-bandwidth-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SafePipe, SourceButtonComponent, SourceRoundButtonComponent], 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    <src-round-button\n      (onClick)=\"close()\"\n      [icon]=\"'close_small'\"\n      [data-testid]=\"'close'\"\n      class=\"src-modal__close\"\n    />\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        colorScheme=\"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"] }]
+            args: [{ selector: 'app-low-bandwidth-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceIconButtonComponent, 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        colorScheme=\"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"] }]
         }] });
 
 class SubService {
@@ -2007,8 +1491,6 @@ class AfkRestartScreenLockerComponent {
         this.imageLoadingSrc = toSignal(this.store.select(unrealFeature.selectImageLoadingSrc));
         this.streamConfig = toSignal(this.store.select(selectStreamConfig));
         this.isSecondStart = signal(!!(this.streamConfig()?.autoStart && location.href.match(/^https/gi)));
-        this.SourceButtonSize = SourceButtonSize;
-        this.SourceButtonColorScheme = SourceButtonColorScheme;
         this.playCallBack = null;
     }
     ngOnInit() {
@@ -2036,11 +1518,11 @@ class AfkRestartScreenLockerComponent {
         this.playCallBack = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AfkRestartScreenLockerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AfkRestartScreenLockerComponent, isStandalone: true, selector: "app-afk-restart-screen-locker", ngImport: i0, template: "@if (!isViewportReady()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      <img\n        [ngSrc]=\"imageLoadingSrc()!\"\n        fill\n        loading=\"lazy\"\n        alt=\"image loading src\"\n      />\n    </div>\n\n    @if (showReconnectPopup()) {\n      <div class=\"stream-message-wrapper\">\n        <div class=\"resume-box\">\n          <src-button\n            (onClick)=\"connect()\"\n            [isFullWidth]=\"true\"\n            [size]=\"SourceButtonSize.LARGE\"\n            [colorScheme]=\"SourceButtonColorScheme.PRIMARY\"\n            [label]=\"isSecondStart() ? 'Resume' : 'Start'\"\n            [data-testid]=\"'connect-button'\"\n            class=\"connect-button\"\n          >\n          </src-button>\n        </div>\n      </div>\n    }\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 .stream-message-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:3;display:flex;align-items:center;justify-content:center}.resume-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box__text{margin-bottom:18px}.resume-box__text p{color:var(--color-gray-500, #6b7280);text-align:center;font-family:var(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}.preload .message-loader{position:absolute;bottom:20px;left:50%;display:block;margin:auto;transform:translate(-50%)}.preload .message-loader>p{margin:0;line-height:1;transition:all ease .35s}.preload .message-loader>p span{font-size:10px;transition:all ease .35s}@media (min-width: 1900px){.preload .message-loader{bottom:40px}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "iconPrefix", "iconButton", "icon", "isPressed", "isDisabled", "isLoading", "label", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AfkRestartScreenLockerComponent, isStandalone: true, selector: "app-afk-restart-screen-locker", ngImport: i0, template: "@if (!isViewportReady()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      <img\n        [ngSrc]=\"imageLoadingSrc()!\"\n        fill\n        loading=\"lazy\"\n        alt=\"image loading src\"\n      />\n    </div>\n\n    @if (showReconnectPopup()) {\n      <div class=\"stream-message-wrapper\">\n        <div class=\"resume-box\">\n          <src-button\n            (onClick)=\"connect()\"\n            [isFullWidth]=\"true\"\n            [size]=\"'large'\"\n            [colorScheme]=\"'primary'\"\n            [data-testid]=\"'connect-button'\"\n            class=\"connect-button\"\n          >\n            {{ isSecondStart() ? 'Resume' : 'Start' }}\n          </src-button>\n        </div>\n      </div>\n    }\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 .stream-message-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:3;display:flex;align-items:center;justify-content:center}.resume-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box__text{margin-bottom:18px}.resume-box__text p{color:var(--color-gray-500, #6b7280);text-align:center;font-family:var(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}.preload .message-loader{position:absolute;bottom:20px;left:50%;display:block;margin:auto;transform:translate(-50%)}.preload .message-loader>p{margin:0;line-height:1;transition:all ease .35s}.preload .message-loader>p span{font-size:10px;transition:all ease .35s}@media (min-width: 1900px){.preload .message-loader{bottom:40px}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "icon", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AfkRestartScreenLockerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-afk-restart-screen-locker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SourceButtonComponent], template: "@if (!isViewportReady()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      <img\n        [ngSrc]=\"imageLoadingSrc()!\"\n        fill\n        loading=\"lazy\"\n        alt=\"image loading src\"\n      />\n    </div>\n\n    @if (showReconnectPopup()) {\n      <div class=\"stream-message-wrapper\">\n        <div class=\"resume-box\">\n          <src-button\n            (onClick)=\"connect()\"\n            [isFullWidth]=\"true\"\n            [size]=\"SourceButtonSize.LARGE\"\n            [colorScheme]=\"SourceButtonColorScheme.PRIMARY\"\n            [label]=\"isSecondStart() ? 'Resume' : 'Start'\"\n            [data-testid]=\"'connect-button'\"\n            class=\"connect-button\"\n          >\n          </src-button>\n        </div>\n      </div>\n    }\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 .stream-message-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:3;display:flex;align-items:center;justify-content:center}.resume-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box__text{margin-bottom:18px}.resume-box__text p{color:var(--color-gray-500, #6b7280);text-align:center;font-family:var(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}.preload .message-loader{position:absolute;bottom:20px;left:50%;display:block;margin:auto;transform:translate(-50%)}.preload .message-loader>p{margin:0;line-height:1;transition:all ease .35s}.preload .message-loader>p span{font-size:10px;transition:all ease .35s}@media (min-width: 1900px){.preload .message-loader{bottom:40px}}\n"] }]
+            args: [{ selector: 'app-afk-restart-screen-locker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SourceButtonComponent, SourceButtonComponent], template: "@if (!isViewportReady()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      <img\n        [ngSrc]=\"imageLoadingSrc()!\"\n        fill\n        loading=\"lazy\"\n        alt=\"image loading src\"\n      />\n    </div>\n\n    @if (showReconnectPopup()) {\n      <div class=\"stream-message-wrapper\">\n        <div class=\"resume-box\">\n          <src-button\n            (onClick)=\"connect()\"\n            [isFullWidth]=\"true\"\n            [size]=\"'large'\"\n            [colorScheme]=\"'primary'\"\n            [data-testid]=\"'connect-button'\"\n            class=\"connect-button\"\n          >\n            {{ isSecondStart() ? 'Resume' : 'Start' }}\n          </src-button>\n        </div>\n      </div>\n    }\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 .stream-message-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:3;display:flex;align-items:center;justify-content:center}.resume-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box__text{margin-bottom:18px}.resume-box__text p{color:var(--color-gray-500, #6b7280);text-align:center;font-family:var(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}.preload .message-loader{position:absolute;bottom:20px;left:50%;display:block;margin:auto;transform:translate(-50%)}.preload .message-loader>p{margin:0;line-height:1;transition:all ease .35s}.preload .message-loader>p span{font-size:10px;transition:all ease .35s}@media (min-width: 1900px){.preload .message-loader{bottom:40px}}\n"] }]
         }] });
 
 class StatGraphComponent {
@@ -4029,38 +3511,9 @@ class InputService extends SubService {
     }
 }
 
-class MixPanelService {
-    #unrealConfig = inject(UNREAL_CONFIG);
-    init() {
-        MIX_PANEL.metaBoxTrack = mixpanel.init(this.#unrealConfig.mixpanelToken, {
-            ignore_dnt: true,
-        }, 'metaBoxTrack');
-        MIX_PANEL.streamTrack = mixpanel.init(this.#unrealConfig.mixpanelStreamToken, {
-            ignore_dnt: true,
-        }, 'streamTrack');
-        this.trackMetabox('Metabox started');
-        this.trackStream('Metabox started');
-    }
-    trackMetabox(event, data) {
-        MIX_PANEL.metaBoxTrack.track(event, data);
-    }
-    trackStream(event, data) {
-        MIX_PANEL.streamTrack.track(event, data);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MixPanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MixPanelService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MixPanelService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class StreamStatusTelemetryService {
     #store = inject(Store);
     #videoStatGenerator = inject(VideoStreamStatusService);
-    #mixPanelService = inject(MixPanelService);
     constructor() {
         this.initTelemetry();
     }
@@ -4089,7 +3542,7 @@ class StreamStatusTelemetryService {
             .subscribe((data) => this.trackEventToMixPanel(data));
     }
     trackEventToMixPanel(data) {
-        this.#mixPanelService.trackStream('streamStatus', data);
+        this.#store.dispatch(trackMixpanelEvent({ event: 'streamStatus', data }));
     }
     init() {
         // do nothing, just to not forget to initialize Service
@@ -4101,6 +3554,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+class UnrealErrorModalComponent {
+    constructor() {
+        this.dialogRef = inject(DialogRef);
+        this.dialogData = inject(DIALOG_DATA);
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\n  <div class=\"src-modal__header\">\n    <div\n      class=\"src-modal__title\"\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n    >\n      Warning\n    </div>\n  </div>\n  <div class=\"src-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"src-modal__footer\">\n    <src-button [colorScheme]=\"'secondary'\" (onClick)=\"close()\">\n      Ok\n    </src-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "icon", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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  <div class=\"src-modal__header\">\n    <div\n      class=\"src-modal__title\"\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n    >\n      Warning\n    </div>\n  </div>\n  <div class=\"src-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"src-modal__footer\">\n    <src-button [colorScheme]=\"'secondary'\" (onClick)=\"close()\">\n      Ok\n    </src-button>\n  </div>\n</div>\n" }]
+        }] });
+
 class UnrealEffects {
     constructor() {
         this.dialog = inject(Dialog);
@@ -4212,25 +3681,9 @@ class UnrealEffects {
             return this.actions$.pipe(ofType(destroyRemoteConnections), filter(({ disconnectReason }) => disconnectReason === DisconnectReason.dataChannelTimeout), switchMap(() => this.actions$.pipe(ofType(resetUnrealState), first())), map$1(() => initSignalling()));
         });
         this.showUnrealError$ = createEffect(() => {
-            return this.actions$.pipe(ofType(showUnrealErrorMessage), map$1(({ code }) => getRtcErrorMessage(code)), distinctUntilChanged(), filter(Truthy), switchMap((content) => this.dialog.open(SourceModalComponent, {
+            return this.actions$.pipe(ofType(showUnrealErrorMessage), map$1(({ code }) => getRtcErrorMessage(code)), distinctUntilChanged(), filter(Truthy), switchMap((content) => this.dialog.open(UnrealErrorModalComponent, {
                 scrollStrategy: this.scrollStrategy,
-                data: {
-                    size: 'small',
-                    backButton: false,
-                    closeButton: true,
-                    headerTitle: 'Warning',
-                    content,
-                    testID: 'unreal-error',
-                    footerButtons: [
-                        {
-                            srcButtonConfig: {
-                                colorScheme: 'secondary',
-                            },
-                            label: 'Ok',
-                            action: () => false,
-                        },
-                    ],
-                },
+                data: { content },
             }).closed), map$1(() => showUnrealErrorMessage({ code: null })));
         });
         this.initAppBySetDataChannelConnected$ = createEffect(() => {
@@ -4698,17 +4151,11 @@ class VideoStatsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus()) {\n  @if (viewportReady()) {\n    <div class=\"settings-container\">\n      <button (click)=\"toggle()\" class=\"gear-button\">\n        <src-icon [name]=\"'settings'\" />\n      </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                [dataTick]=\"fpsTick()\"\n                label=\"FPS (higher is better)\"\n              />\n            </li>\n            <li>\n              <app-stat-graph\n                [dataTick]=\"videoQP()\"\n                label=\"QP (lower is better)\"\n                color=\"#D5ff07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgFPS (higher is better)\"\n              [dataTick]=\"fpsAvgTick()\"\n              color=\"#00aa00\"\n            />\n          </li>-->\n            <li>\n              <app-stat-graph\n                [dataTick]=\"bitrateTick()\"\n                label=\"Bitrate\"\n                color=\"#D57F07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgBitrate\"\n              [dataTick]=\"bitrateAverageTick()\"\n              color=\"#D50007\"\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                  [dataTick]=\"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}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000}.gear-button{left:0;position:absolute;background:none;border:none;cursor:pointer;font-size:24px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{border-radius:4px;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{cursor:pointer}#aggregatedStats .stat span{font-weight:700}#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: ["color", "tickStep", "label", "dataTick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "component", type: SourceIconComponent, selector: "src-icon", inputs: ["colorProperty", "width", "height", "presentation", "name"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus()) {\n  @if (viewportReady()) {\n    <div class=\"settings-container\">\n      <button (click)=\"toggle()\" class=\"gear-button\">Video 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                [dataTick]=\"fpsTick()\"\n                label=\"FPS (higher is better)\"\n              />\n            </li>\n            <li>\n              <app-stat-graph\n                [dataTick]=\"videoQP()\"\n                label=\"QP (lower is better)\"\n                color=\"#D5ff07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgFPS (higher is better)\"\n              [dataTick]=\"fpsAvgTick()\"\n              color=\"#00aa00\"\n            />\n          </li>-->\n            <li>\n              <app-stat-graph\n                [dataTick]=\"bitrateTick()\"\n                label=\"Bitrate\"\n                color=\"#D57F07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgBitrate\"\n              [dataTick]=\"bitrateAverageTick()\"\n              color=\"#D50007\"\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                  [dataTick]=\"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}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000}.gear-button{left:0;position:absolute;background:none;border:none;cursor:pointer;font-size:24px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{border-radius:4px;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{cursor:pointer}#aggregatedStats .stat span{font-weight:700}#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: ["color", "tickStep", "label", "dataTick"] }, { 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: "19.2.8", ngImport: i0, type: VideoStatsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        StatGraphComponent,
-                        AsyncPipe,
-                        JsonPipe,
-                        SourceIconComponent,
-                        SafePipe,
-                    ], template: "@if (videoStatus()) {\n  @if (viewportReady()) {\n    <div class=\"settings-container\">\n      <button (click)=\"toggle()\" class=\"gear-button\">\n        <src-icon [name]=\"'settings'\" />\n      </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                [dataTick]=\"fpsTick()\"\n                label=\"FPS (higher is better)\"\n              />\n            </li>\n            <li>\n              <app-stat-graph\n                [dataTick]=\"videoQP()\"\n                label=\"QP (lower is better)\"\n                color=\"#D5ff07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgFPS (higher is better)\"\n              [dataTick]=\"fpsAvgTick()\"\n              color=\"#00aa00\"\n            />\n          </li>-->\n            <li>\n              <app-stat-graph\n                [dataTick]=\"bitrateTick()\"\n                label=\"Bitrate\"\n                color=\"#D57F07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgBitrate\"\n              [dataTick]=\"bitrateAverageTick()\"\n              color=\"#D50007\"\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                  [dataTick]=\"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}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000}.gear-button{left:0;position:absolute;background:none;border:none;cursor:pointer;font-size:24px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{border-radius:4px;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{cursor:pointer}#aggregatedStats .stat span{font-weight:700}#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()) {\n  @if (viewportReady()) {\n    <div class=\"settings-container\">\n      <button (click)=\"toggle()\" class=\"gear-button\">Video 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                [dataTick]=\"fpsTick()\"\n                label=\"FPS (higher is better)\"\n              />\n            </li>\n            <li>\n              <app-stat-graph\n                [dataTick]=\"videoQP()\"\n                label=\"QP (lower is better)\"\n                color=\"#D5ff07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgFPS (higher is better)\"\n              [dataTick]=\"fpsAvgTick()\"\n              color=\"#00aa00\"\n            />\n          </li>-->\n            <li>\n              <app-stat-graph\n                [dataTick]=\"bitrateTick()\"\n                label=\"Bitrate\"\n                color=\"#D57F07\"\n              />\n            </li>\n            <!--          <li>\n            <app-stat-graph\n              label=\"AvgBitrate\"\n              [dataTick]=\"bitrateAverageTick()\"\n              color=\"#D50007\"\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                  [dataTick]=\"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}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000}.gear-button{left:0;position:absolute;background:none;border:none;cursor:pointer;font-size:24px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{border-radius:4px;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{cursor:pointer}#aggregatedStats .stat span{font-weight:700}#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 UnrealStatusComponent {
@@ -5066,11 +4513,11 @@ class WebrtcErrorModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <src-round-button\n      (onClick)=\"close()\"\n      [icon]=\"'close'\"\n      [data-testid]=\"'close'\"\n      class=\"src-modal__close\"\n    >\n    </src-round-button>\n  </header>\n  <section class=\"src-modal__body\">\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      colorScheme=\"primary\"\n      >Ok</src-button\n    >\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(--color-text-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: SourceRoundButtonComponent, selector: "src-round-button", inputs: ["type", "size", "counter", "icon", "isDisabled", "data-testid"], outputs: ["onClick"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "iconPrefix", "iconButton", "icon", "isPressed", "isDisabled", "isLoading", "label", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n  </header>\n  <section class=\"src-modal__body\">\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      [colorScheme]=\"'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(--color-text-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", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "icon", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceRoundButtonComponent, SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n    <src-round-button\n      (onClick)=\"close()\"\n      [icon]=\"'close'\"\n      [data-testid]=\"'close'\"\n      class=\"src-modal__close\"\n    >\n    </src-round-button>\n  </header>\n  <section class=\"src-modal__body\">\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      colorScheme=\"primary\"\n      >Ok</src-button\n    >\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(--color-text-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, SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n  <header class=\"src-modal__header\">\n    <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n      WebRTC error\n    </div>\n  </header>\n  <section class=\"src-modal__body\">\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      [colorScheme]=\"'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(--color-text-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"] }]
         }] });
 
 class FilterSettingsComponent {
@@ -5113,11 +4560,11 @@ class FilterSettingsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FilterSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: FilterSettingsComponent, isStandalone: true, selector: "app-filter-settings", ngImport: i0, template: "<!-- filter-settings.component.html -->\n<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">\n    <src-icon [name]=\"'settings'\" />\n  </button>\n\n  <div *ngIf=\"settings.panelOpen\" 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</div>\n", styles: [".settings-container{position:absolute;top:50px;right:10px;z-index:1000}.gear-button{right:0;position:absolute;cursor:pointer;font-size:20px}.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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SourceIconComponent, selector: "src-icon", inputs: ["colorProperty", "width", "height", "presentation", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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:50px;right:10px;z-index:1000}.gear-button{right:0;position:absolute;cursor:pointer;font-size:20px}.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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FilterSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-settings', imports: [FormsModule, NgIf, SourceIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- filter-settings.component.html -->\n<div class=\"settings-container\">\n  <button (click)=\"togglePanel()\" class=\"gear-button\">\n    <src-icon [name]=\"'settings'\" />\n  </button>\n\n  <div *ngIf=\"settings.panelOpen\" 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</div>\n", styles: [".settings-container{position:absolute;top:50px;right:10px;z-index:1000}.gear-button{right:0;position:absolute;cursor:pointer;font-size:20px}.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"] }]
+            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:50px;right:10px;z-index:1000}.gear-button{right:0;position:absolute;cursor:pointer;font-size:20px}.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 {
@@ -5232,5 +4679,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AFKService, AfkRestartScreenLockerComponent, AggregatorService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, ClickableOverlayComponent, CommandTelemetryService, ConfigHandler, ConsoleExtensionsService, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_TIMEOUT_PERIOD, DEFAULT_WARN_TIMEOUT, DataFlowMonitor, DevModeService, DisconnectReason, EControlSchemeType, EMessageType, EToClientMessageType, FULL_HD_HEIGHT, FULL_HD_WIDTH, FilterSettingsComponent, FreezeFrameComponent, FreezeFrameService, IceCandidateHandler, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MIX_PANEL, MixPanelEvents, MixPanelService, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, PingHandler, PlayerCountHandler, RegionsPingService, ResetTelemetry, SAME_SIZE_THRESHOLD, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryService, SubService, TelemetryStart, TelemetryStop, UNREAL_CONFIG, UnrealCommunicatorService, UnrealEffects, UnrealInternalSignalEvents, UnrealSceneComponent, UnrealStatusMessage, VideoLockerComponent, VideoRecorder, VideoService, VideoStatsComponent, VideoStreamStatusService, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CIRRUS_CLOSED, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, alignProductsToPlaneCommand, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, clampAndKeepMaxPercents, clampPanToProductsCommand, commandCompleted, commandStarted, decodeData, destroyConnectionsAndResetState, destroyRemoteConnections, dispatchResize, filteredLogs, floatToSmoothPercents, forceResizeUnrealVideo, fromResizeObserver, fromSignal, fromUnrealCallBackSignal, getActiveUrl, getApplyCameraPresetCommand, getApplyZoomCommand, getCameraBoxCommand, getCameraRecenterCommand, getCameraSettingsCommand, getChangeGizmoTypeCommand, getChangeResolutionCommand, getClickSnapCommand, getControlSensitivityCommand, getDebugModeCommand, getDragCommand, getDragSequenceCommand, getDropCommand, getEnableComposureCommand, getEnableControlsCommand, getEnableSpinnerModeCommand, getEnableTeleportCommand, getExecuteConsoleCommand, getFitToObjectsCommand, getFreezeFrameCommand, getImageFromVideoStream, getInitSequenceByObjectNameCommand, getJumpToSequenceCommand, getLoadLevelCommand, getLoadProductCommand, getLoadSceneStateCommand, getLoopBackCommand, getMoveSelectedCommand, getPauseSequenceCommand, getPlaySequenceCommand, getRequestCameraPresetCommand, getResetControlClampsCommand, getRotateSelectedCommand, getRtcErrorMessage, getSelectProductByObjectNameCommand, getSetCameraControlClampsCommand, getSetControlCameraModeCommand, getSetFpsCommand, getSetMaterialCommand, getSetPawnMovementModeCommand, getSetSettingsSequenceCommand, getStopSequenceCommand, getTakeRenderCommand, getTakeSpinnerRenderCommand, getTakeSpinnerRenderPreviewCommand, getUnLoadAllProductsCommand, getUnLoadProductByObjectNameCommand, getUnselectAllProductsCommand, getWeatherCommand, initSignalling, initialState, mapQpToQuality, observeCommandResponse, removeExileCommands, resetAfk, resetAfkAction, resetConfig, resetIntroSrc, resetUnrealState, resetUnrealStateAction, resetWarnTimeout, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsFreezeFrameLoading, selectIsVideoPlayingAndDataChannelConnected, selectLastCommandInProgress, selectLoaderCommands, selectMatchUrls, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, selectWsUrl, sendSignal, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setErrorMessage, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setProductsLocationCommand, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealVersion, setViewportReady, showUnrealErrorMessage, unLoadAllLevelsCommand, unrealFeature, unrealReducer, updateCirrusInfo };
+export { AFKService, AfkRestartScreenLockerComponent, AggregatorService, AnswerHandler, CONSOLE_COMMAND_DISABLE_MESSAGES, CONSOLE_COMMAND_ENABLE_MESSAGES, CONSOLE_COMMAND_PIXEL_QUALITY, ClickableOverlayComponent, CommandTelemetryService, ConfigHandler, ConsoleExtensionsService, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_TIMEOUT_PERIOD, DEFAULT_WARN_TIMEOUT, DataFlowMonitor, DevModeService, DisconnectReason, EControlSchemeType, EMessageType, EToClientMessageType, FULL_HD_HEIGHT, FULL_HD_WIDTH, FilterSettingsComponent, FreezeFrameComponent, FreezeFrameService, IceCandidateHandler, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, KalmanFilter1D, LatencyTimings, LowBandwidthDetectorComponent, LowBandwidthModalComponent, MINIMAL_FPS, MouseButton, MouseButtonsMask, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, PingHandler, PlayerCountHandler, RegionsPingService, ResetTelemetry, SAME_SIZE_THRESHOLD, SSInfoHandler, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamStatusTelemetryService, SubService, TelemetryStart, TelemetryStop, UNREAL_CONFIG, UnrealCommunicatorService, UnrealEffects, UnrealInternalSignalEvents, UnrealSceneComponent, UnrealStatusMessage, VideoLockerComponent, VideoRecorder, VideoService, VideoStatsComponent, VideoStreamStatusService, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CIRRUS_CLOSED, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCodes, WS_OPEN_STATE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, alignProductsToPlaneCommand, changeLowBandwidth, changeStatusMainVideoOnScene, changeStreamResolutionAction, changeStreamResolutionSuccessAction, clampAndKeepMaxPercents, clampPanToProductsCommand, commandCompleted, commandStarted, decodeData, destroyConnectionsAndResetState, destroyRemoteConnections, dispatchResize, filteredLogs, floatToSmoothPercents, forceResizeUnrealVideo, fromResizeObserver, fromSignal, fromUnrealCallBackSignal, getActiveUrl, getApplyCameraPresetCommand, getApplyZoomCommand, getCameraBoxCommand, getCameraRecenterCommand, getCameraSettingsCommand, getChangeGizmoTypeCommand, getChangeResolutionCommand, getClickSnapCommand, getControlSensitivityCommand, getDebugModeCommand, getDragCommand, getDragSequenceCommand, getDropCommand, getEnableComposureCommand, getEnableControlsCommand, getEnableSpinnerModeCommand, getEnableTeleportCommand, getExecuteConsoleCommand, getFitToObjectsCommand, getFreezeFrameCommand, getImageFromVideoStream, getInitSequenceByObjectNameCommand, getJumpToSequenceCommand, getLoadLevelCommand, getLoadProductCommand, getLoadSceneStateCommand, getLoopBackCommand, getMoveSelectedCommand, getPauseSequenceCommand, getPlaySequenceCommand, getRequestCameraPresetCommand, getResetControlClampsCommand, getRotateSelectedCommand, getRtcErrorMessage, getSelectProductByObjectNameCommand, getSetCameraControlClampsCommand, getSetControlCameraModeCommand, getSetFpsCommand, getSetMaterialCommand, getSetPawnMovementModeCommand, getSetSettingsSequenceCommand, getStopSequenceCommand, getTakeRenderCommand, getTakeSpinnerRenderCommand, getTakeSpinnerRenderPreviewCommand, getUnLoadAllProductsCommand, getUnLoadProductByObjectNameCommand, getUnselectAllProductsCommand, getWeatherCommand, initSignalling, initialState, mapQpToQuality, observeCommandResponse, removeExileCommands, resetAfk, resetAfkAction, resetConfig, resetIntroSrc, resetUnrealState, resetUnrealStateAction, resetWarnTimeout, selectCommandProgress, selectCommandsInProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsFreezeFrameLoading, selectIsVideoPlayingAndDataChannelConnected, selectLastCommandInProgress, selectLoaderCommands, selectMatchUrls, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectWarnTimeout, selectWsUrl, sendSignal, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setDataChannelConnected, setErrorMessage, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setProductsLocationCommand, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealVersion, setViewportReady, showUnrealErrorMessage, trackMixpanelEvent, unLoadAllLevelsCommand, unrealFeature, unrealReducer, updateCirrusInfo };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map