@3dsource/angular-unreal-module 0.0.171 → 0.0.173

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

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { input, output, ChangeDetectionStrategy, Component, InjectionToken, inject, DestroyRef, Injectable, signal, effect, untracked, computed, ElementRef, viewChild, afterNextRender, HostListener, SecurityContext, Pipe, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
-import { Subject, skip, share, merge, map, scan, timestamp, startWith, pairwise, concatMap, of, animationFrameScheduler, interval, Observable, timer, take, defer, switchMap, from, throwError, EMPTY, retry, timeout as timeout$1, repeat, BehaviorSubject, takeUntil as takeUntil$1, fromEvent, tap as tap$1, throttleTime, delay, concat, debounceTime, mergeMap, NEVER, ignoreElements, shareReplay, firstValueFrom, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, Subscription, bufferTime, combineLatestWith } from 'rxjs';
-import { createAction, props, createReducer, on, createFeature, Store, createSelector, provideState } from '@ngrx/store';
-import { whereNot, Falsy, Logger, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, generateUuid, Truthy, tapLog, Semaphore, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
-import { filter, map as map$1, distinctUntilChanged, takeWhile, takeUntil, catchError, tap, timeout, finalize, first, switchMap as switchMap$1, withLatestFrom, exhaustMap, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1 } from 'rxjs/operators';
+import { input, output, ChangeDetectionStrategy, Component, InjectionToken, inject, DestroyRef, Injectable, signal, effect, untracked, computed, ElementRef, viewChild, afterNextRender, HostListener, TemplateRef, Directive, SecurityContext, Pipe, contentChild, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
+import { NgTemplateOutlet, NgOptimizedImage, JsonPipe } from '@angular/common';
+import { createAction, props, createReducer, on, createFeature, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, ofType, createEffect, provideEffects } from '@ngrx/effects';
+import { Subject, skip, share, timer, of, take, defer, switchMap, from, throwError, Observable, EMPTY, retry, merge, timeout as timeout$1, repeat, BehaviorSubject, interval, map as map$1, takeUntil as takeUntil$1, fromEvent, tap as tap$1, throttleTime, delay, concat, debounceTime, mergeMap, NEVER, ignoreElements, startWith, scan, timestamp, pairwise, concatMap, animationFrameScheduler, shareReplay, firstValueFrom, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, Subscription, bufferTime, combineLatestWith } from 'rxjs';
+import { whereNot, lerp, clampf, Falsy, generateUuid, Truthy, Logger, tapLog, Semaphore, COLOR_CODES, getCanvasCached, getSnapshot, fitIntoRectangle, where, KeyboardNumericCode, InvertedKeyMap, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
+import { filter, takeUntil, catchError, tap, map, timeout, finalize, first, switchMap as switchMap$1, distinctUntilChanged, withLatestFrom, exhaustMap, takeWhile, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1 } from 'rxjs/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { MetaBoxCommand, EPayloadVersion } from '@3dsource/types-unreal';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgOptimizedImage, JsonPipe } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class UnrealButtonComponent {
@@ -34,14 +34,246 @@ class UnrealButtonComponent {
         event.preventDefault();
         this.clicked.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: UnrealButtonComponent, isStandalone: true, selector: "app-unreal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  (click)=\"handleClick($event)\"\r\n  [attr.data-testid]=\"testID() || null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\r\n  [class.unreal-button--lg]=\"size() === 'lg'\"\r\n  [class.unreal-button--full-width]=\"fullWidth()\"\r\n  [disabled]=\"isDisabled()\"\r\n  [type]=\"type()\"\r\n  class=\"unreal-button\"\r\n>\r\n  <span><ng-content></ng-content></span>\r\n</button>\r\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--src-ui-accent-default, #017bff);--unrealButtonBorder: none;--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff);--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff)}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: UnrealButtonComponent, isStandalone: true, selector: "app-unreal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  (click)=\"handleClick($event)\"\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\n  [class.unreal-button--lg]=\"size() === 'lg'\"\n  [class.unreal-button--full-width]=\"fullWidth()\"\n  [disabled]=\"isDisabled()\"\n  [type]=\"type()\"\n  class=\"unreal-button\"\n>\n  <span><ng-content></ng-content></span>\n</button>\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--unreal-accent, var(--src-ui-accent-default, #017bff));--unrealButtonBorder: none;--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff));--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--unreal-accent-hover, var(--src-ui-accent-default-hover, #016fe6));--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff))}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  (click)=\"handleClick($event)\"\r\n  [attr.data-testid]=\"testID() || null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\r\n  [class.unreal-button--lg]=\"size() === 'lg'\"\r\n  [class.unreal-button--full-width]=\"fullWidth()\"\r\n  [disabled]=\"isDisabled()\"\r\n  [type]=\"type()\"\r\n  class=\"unreal-button\"\r\n>\r\n  <span><ng-content></ng-content></span>\r\n</button>\r\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--src-ui-accent-default, #017bff);--unrealButtonBorder: none;--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff);--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff)}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"] }]
+            args: [{ selector: 'app-unreal-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"handleClick($event)\"\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\n  [class.unreal-button--lg]=\"size() === 'lg'\"\n  [class.unreal-button--full-width]=\"fullWidth()\"\n  [disabled]=\"isDisabled()\"\n  [type]=\"type()\"\n  class=\"unreal-button\"\n>\n  <span><ng-content></ng-content></span>\n</button>\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--unreal-accent, var(--src-ui-accent-default, #017bff));--unrealButtonBorder: none;--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff));--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--unreal-accent-hover, var(--src-ui-accent-default-hover, #016fe6));--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff))}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+function AnswerHandler(msg) {
+    this.onWebRtcAnswer$.next(msg);
+}
+
+function ConfigHandler(msg) {
+    this.onConfig$.next(msg);
+    //DO NOT REMOVE. Possible required in future for SFU
+    /*this.send({
+      type: OrchestrationMessageTypes.listStreamers,
+      correlationId: this.correlationId,
+    });*/
+}
+
+function IceCandidateHandler(msg) {
+    this.onWebRtcIce$.next(msg.candidate);
+}
+
+const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
+const unrealCommandCallback = createAction(scoped `unreal command callback`, props());
+const commandStarted = createAction(scoped `command started`, props());
+const commandCompleted = createAction(scoped `command completed`, props());
+const trackMixpanelEvent = createAction(scoped `track Mixpanel event`, props());
+const trackTelemetryData = createAction(scoped `track telemetry data`, props());
+const setMaxFps = createAction(scoped `change fps`, props());
+const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
+const destroyUnrealScene = createAction(scoped `destroyUnrealScene`);
+const setCirrusConnected = createAction(scoped `cirrusConnected`);
+const setCirrusDisconnected = createAction(scoped `cirrusDisconnected`);
+const changeStatusMainVideoOnScene = createAction(scoped `change status main video on scene`, props());
+const setAwsInstance = createAction(scoped `set aws instance`, props());
+const setStatusMessage = createAction(scoped `set status message`, props());
+const setStatusPercentSignallingServer = createAction(scoped `change status percent signalling server`, props());
+const setFreezeFrame = createAction(scoped `set freeze frame`, props());
+const setStreamClientCompanyId = createAction(scoped `set stream client company id`, props());
+const setStreamViewId = createAction(scoped `set stream view id`, props());
+const setIntroImageSrc = createAction(scoped `set intro image src`, props());
+const setLoadingImageSrc = createAction(scoped `set loading image src`, props());
+const setIntroVideoSrc = createAction(scoped `set intro video src`, props());
+const resetIntroSrc = createAction(scoped `reset intro src`);
+const setFreezeFrameFromVideo = createAction(scoped `set freeze frame from video`, props());
+const setEstablishingConnection = createAction(scoped `set establishing connection`, props());
+const dataChannelConnected = createAction(scoped `data channel connected`, props());
+const dataChannelReady = createAction(scoped `dataChannelReady`);
+const setConfig = createAction(scoped `set config`, props());
+const disconnectStream = createAction(scoped `disconnectStream`, props());
+const dropConnection = createAction(scoped `dropConnection`);
+const setViewportReady = createAction(scoped `set viewport ready`);
+const setViewportNotReady = createAction(scoped `set viewport not ready`);
+const changeStreamResolutionAction = createAction(scoped `change stream resolution`, props());
+const setSignalingName = createAction(scoped `set aws instanceName`, props());
+const setOrchestrationParameters = createAction(scoped `set orchestration parameters`, props());
+/**
+ * Dispatched when the orchestration server signals that the reserved
+ * instance is ready to serve the stream (`instanceReady` WS message).
+ * Carries the stream-machine coordinates — `originInstanceUri` is used to
+ * open the second (stream-machine) signalling socket. Also consumed by
+ * telemetry as a phase marker.
+ */
+const instanceReady = createAction(scoped `instance ready`, props());
+/**
+ * Dispatched when `RegionsPingService.getFastest()` begins — right
+ * before the region-list HTTP request goes out. Bookends the entire
+ * region-discovery flow together with {@link regionResolved}.
+ * Observability-only — no state change.
+ */
+const regionPingFetchStart = createAction(scoped `region ping fetch start`);
+/**
+ * Dispatched once `RegionsPingService.getProviders()` returns the region
+ * list — i.e., the fetch step is done and the actual per-region ping
+ * sweep is about to start. Splits the region-discovery waterfall into
+ * two legs: config fetch vs. ping sweep. Observability-only.
+ */
+const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
+/**
+ * Dispatched once the closest region has been resolved by the
+ * regions-ping service. Carries every sampled ping RTT to the winning
+ * region (one entry per probe — `checkLatency` issues `ping_count`
+ * sequential pings per region) so consumers can inspect variance /
+ * jitter, not just the mean. Observability-only — no state change.
+ */
+const regionResolved = createAction(scoped `region resolved`, props());
+/**
+ * Dispatched around the HTTP polling roundup inside `getAwsInstance`
+ * (old orchestration flow). Only fires when polling is actually used
+ * (i.e., signaling URL is not a direct `ws://` / `wss://` endpoint).
+ * Observability-only — no state change.
+ */
+const pollingStarted = createAction(scoped `polling started`);
+const pollingEnded = createAction(scoped `polling ended`);
+/**
+ * Dispatched once for every `retry()` attempt inside the signalling
+ * connect pipeline. Two kinds:
+ *
+ *   - `'connect'` — outer retry around the whole connect pipeline
+ *     (region ping → AWS instance → WebSocket). Fires when the WS
+ *     errors (e.g. "WebSocket closed before open") and the entire
+ *     pipeline is re-subscribed. See `SIGNALLING.md` — every one of
+ *     these currently triggers a fresh region-ping storm.
+ *   - `'orchestration'` — inner retry inside `getAwsInstance`,
+ *     advancing `urlGen` to the next candidate signalling URL when
+ *     polling fails or returns an error payload.
+ *
+ * Observability-only — no state change. Surfaces in the viewer's
+ * Anomalies table as `signaling_retry` rows so a session that
+ * needed N tries shows N entries with their reasons.
+ */
+const signalingRetryAttempted = createAction(scoped `signaling retry attempted`, props());
+/**
+ * Dispatched when the client has just sent an SDP answer back to Cirrus
+ * after receiving the server-initiated offer. Observability-only.
+ */
+const answerSent = createAction(scoped `answer sent`);
+const setOrchestrationMessage = createAction(scoped `set orchestration message`, props());
+const setOrchestrationProgress = createAction(scoped `set orchestration progress`, props());
+const setOrchestrationContext = createAction(scoped `set orchestration params`, props());
+const updateCirrusInfo = createAction(scoped `set unrealInfo`, props());
+const setLoopBackCommandIsCompleted = createAction(scoped `set loopBack command is completed`);
+const setAfkTimerVisible = createAction(scoped `set afk timer visible`);
+const setAfkTimerHide = createAction(scoped `set afk timer hide`);
+const setAfkTimerCountdown = createAction(scoped `set afk timer count down`, props());
+const showUnrealErrorMessage = createAction(scoped `show unreal error message`, props());
+const initSignalling = createAction(scoped `init signalling`);
+/**
+ * Dispatched when a prefetched connection parked on `window.__stream` by the
+ * `stream-prefetch.js` head-script is adopted instead of opening a fresh
+ * `connectToSignaling`. Marks cirrus connected and records the adopted machine
+ * in one transaction; the data channel / app-init chain then proceeds via
+ * `dataChannelConnected` dispatched from `WebRtcPlayerService`.
+ *
+ * Deliberately does NOT touch `streamClientCompanyId` / `streamViewId`: the host
+ * app (e.g. metabox) sets those authoritatively from its own data before
+ * `initSignalling`, and the prefetch script's ids are connection-internal only.
+ */
+const streamAdopted = createAction(scoped `stream adopted`, props());
+const startStream = createAction(scoped `startStream`, props());
+const resetConfig = createAction(scoped `reset config`);
+const resetAfk = createAction(scoped `reset afk action`);
+const resetWarnTimeout = createAction(scoped `reset config warn timeout`);
+/**
+ * Fan-in for "cancel an in-flight signalling attempt". Dispatched by the
+ * abortEstablishingConnection$ effect whenever any of these source actions
+ * fire: `setCirrusDisconnected` (cirrus dropped), `dropConnection` (user
+ * called drop), `destroyUnrealScene` (component teardown). Consumers
+ * (`SignallingService.abort$`, `setDataChannelTimeoutCheck$.abort$`) listen
+ * to this one action instead of the trio so the "abort" intent has a single
+ * named entry in Redux DevTools and one subscription site to update.
+ */
+const abortEstablishingConnection = createAction(scoped `abortEstablishingConnection`);
+const setUnrealPlaywrightConfig = createAction(scoped `set unreal playwright config`);
+const saveAnalyticsEvent = createAction(scoped `save analytics event`, props());
+/** Action to trigger WebRTC peer reconnection (keeps signaling connection) */
+const reconnectPeer = createAction(scoped `reconnect peer`, props());
+/** Action to reset the data channel state before reconnection */
+const resetDataChannelForReconnect = createAction(scoped `reset data channel for reconnect`);
+/** Action dispatched when peer reconnection succeeds */
+const reconnectPeerSuccess = createAction(scoped `reconnect peer success`);
+/** Action dispatched when all peer reconnection attempts are exhausted */
+const reconnectPeerFailed = createAction(scoped `reconnect peer failed`, props());
+/** Action dispatched when ICE connection state changes to failed/disconnected */
+const iceConnectionFailed = createAction(scoped `ice connection failed`, props());
+const forceResizeViewport = createAction(scoped `force resize viewport`);
+const videoAdaptedToContainer = createAction(scoped `video adapted to container`);
+const videoStreamInitialized = createAction(scoped `video stream initialized`);
+const dropDC = createAction(scoped `drop data channel`);
+const dropPC = createAction(scoped `drop peer connection`);
+const showLoadingProgress = createAction(scoped `show loading progress`, props());
+const showResumeStreamPopup = createAction(scoped `show resume stream popup`, props());
+const showUserInactivityTimeoutPopup = createAction(scoped `show user inactivity timeout popup`, props());
+const setUserInactivityTimeout = createAction(scoped `set user inactivity timeout`, props());
+const resetUserInactivityTimeout = createAction(scoped `reset user inactivity timeout`);
+
+const WSCloseCode_NORMAL_CLOSURE = 3000;
+const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
+const WSCloseCode_NORMAL_MANUAL_DISCONNECT = 3002;
+const WSCloseCode_FORCE_CIRRUS_CLOSE = 3003;
+const WSCloseCode_UNKNOWN = 1000;
+const WSCloseCode_CIRRUS_PLAYER_DISCONNECTED = 1001;
+const WSCloseCode_CIRRUS_ABNORMAL_CLOSURE = 1006;
+const WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR = 1013;
+const WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER = 1011;
+const WSCloseCodes = [
+    WSCloseCode_NORMAL_CLOSURE,
+    WSCloseCode_NORMAL_AFK_TIMEOUT,
+    WSCloseCode_NORMAL_MANUAL_DISCONNECT,
+    WSCloseCode_FORCE_CIRRUS_CLOSE,
+    WSCloseCode_UNKNOWN,
+    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
+    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
+    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
+    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
+];
+
+const DisconnectReason = {
+    Afk: 'Afk',
+    None: 'None',
+    Destroy: 'Destroy',
+    DataChannelClosed: 'DataChannelClosed',
+    DataChannelTimeout: 'DataChannelTimeout',
+    WebRTCError: 'WebRTCError',
+    WebSocketError: 'WebSocketError',
+    WebSocketClose: 'WebSocketClose',
+    DropConnection: 'DropConnection',
+    OrchestrationPlayerDisconnected: 'OrchestrationPlayerDisconnected',
+    OrchestrationStreamerDisconnected: 'OrchestrationStreamerDisconnected',
+    IceConnectionFailed: 'IceConnectionFailed',
+    ReconnectFailed: 'ReconnectFailed',
+    NewConnectionAttempt: 'NewConnectionAttempt',
+    AbortEstablishingConnection: 'AbortEstablishingConnection',
+};
+
+/*
+export interface RequestReservation extends InstanceMessageBase {
+  type: 'requestReservation';
+}
+*/
+const OrchestrationMessageTypes = {
+    error: 'error',
+    offer: 'offer',
+    answer: 'answer',
+    ssInfo: 'ssInfo',
+    config: 'config',
+    playerCount: 'playerCount',
+    iceCandidate: 'iceCandidate',
+    streamerList: 'streamerList',
+    requestStream: 'requestStream',
+    listStreamers: 'listStreamers',
+    instanceReady: 'instanceReady',
+    p2pEstablished: 'p2pEstablished',
+    instanceReserved: 'instanceReserved',
+    interruptClientStream: 'interruptClientStream',
+};
+
 const SpecialKeyCodes = {
     BackSpace: 8,
     Shift: 16,
@@ -140,67 +372,6 @@ const InputOptions = {
     suppressBrowserKeys: true,
 };
 
-const WSCloseCode_NORMAL_CLOSURE = 3000;
-const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
-const WSCloseCode_NORMAL_MANUAL_DISCONNECT = 3002;
-const WSCloseCode_FORCE_CIRRUS_CLOSE = 3003;
-const WSCloseCode_UNKNOWN = 1000;
-const WSCloseCode_CIRRUS_PLAYER_DISCONNECTED = 1001;
-const WSCloseCode_CIRRUS_ABNORMAL_CLOSURE = 1006;
-const WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR = 1013;
-const WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER = 1011;
-const WSCloseCodes = [
-    WSCloseCode_NORMAL_CLOSURE,
-    WSCloseCode_NORMAL_AFK_TIMEOUT,
-    WSCloseCode_NORMAL_MANUAL_DISCONNECT,
-    WSCloseCode_FORCE_CIRRUS_CLOSE,
-    WSCloseCode_UNKNOWN,
-    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
-    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
-    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
-    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
-];
-
-const DisconnectReason = {
-    Afk: 'Afk',
-    None: 'None',
-    Destroy: 'Destroy',
-    DataChannelClosed: 'DataChannelClosed',
-    DataChannelTimeout: 'DataChannelTimeout',
-    WebRTCError: 'WebRTCError',
-    WebSocketError: 'WebSocketError',
-    WebSocketClose: 'WebSocketClose',
-    DropConnection: 'DropConnection',
-    OrchestrationPlayerDisconnected: 'OrchestrationPlayerDisconnected',
-    OrchestrationStreamerDisconnected: 'OrchestrationStreamerDisconnected',
-    IceConnectionFailed: 'IceConnectionFailed',
-    ReconnectFailed: 'ReconnectFailed',
-    NewConnectionAttempt: 'NewConnectionAttempt',
-    AbortEstablishingConnection: 'AbortEstablishingConnection',
-};
-
-/*
-export interface RequestReservation extends InstanceMessageBase {
-  type: 'requestReservation';
-}
-*/
-const OrchestrationMessageTypes = {
-    error: 'error',
-    offer: 'offer',
-    answer: 'answer',
-    ssInfo: 'ssInfo',
-    config: 'config',
-    playerCount: 'playerCount',
-    iceCandidate: 'iceCandidate',
-    streamerList: 'streamerList',
-    requestStream: 'requestStream',
-    listStreamers: 'listStreamers',
-    instanceReady: 'instanceReady',
-    p2pEstablished: 'p2pEstablished',
-    instanceReserved: 'instanceReserved',
-    interruptClientStream: 'interruptClientStream',
-};
-
 /** Disconnect reasons that should trigger remote connection cleanup. */
 const DESTROY_DISCONNECT_REASONS = [
     DisconnectReason.Afk,
@@ -300,160 +471,6 @@ const UnrealStatusMessage = {
     STARTING_YOUR_SESSION: 'Starting your session',
 };
 
-const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
-const unrealCommandCallback = createAction(scoped `unreal command callback`, props());
-const commandStarted = createAction(scoped `command started`, props());
-const commandCompleted = createAction(scoped `command completed`, props());
-const trackMixpanelEvent = createAction(scoped `track Mixpanel event`, props());
-const trackTelemetryData = createAction(scoped `track telemetry data`, props());
-const setMaxFps = createAction(scoped `change fps`, props());
-const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
-const destroyUnrealScene = createAction(scoped `destroyUnrealScene`);
-const setCirrusConnected = createAction(scoped `cirrusConnected`);
-const setCirrusDisconnected = createAction(scoped `cirrusDisconnected`);
-const changeStatusMainVideoOnScene = createAction(scoped `change status main video on scene`, props());
-const setAwsInstance = createAction(scoped `set aws instance`, props());
-const setStatusMessage = createAction(scoped `set status message`, props());
-const setStatusPercentSignallingServer = createAction(scoped `change status percent signalling server`, props());
-const setFreezeFrame = createAction(scoped `set freeze frame`, props());
-const setStreamClientCompanyId = createAction(scoped `set stream client company id`, props());
-const setStreamViewId = createAction(scoped `set stream view id`, props());
-const setIntroImageSrc = createAction(scoped `set intro image src`, props());
-const setLoadingImageSrc = createAction(scoped `set loading image src`, props());
-const setIntroVideoSrc = createAction(scoped `set intro video src`, props());
-const resetIntroSrc = createAction(scoped `reset intro src`);
-const setFreezeFrameFromVideo = createAction(scoped `set freeze frame from video`, props());
-const setEstablishingConnection = createAction(scoped `set establishing connection`, props());
-const dataChannelConnected = createAction(scoped `data channel connected`, props());
-const dataChannelReady = createAction(scoped `dataChannelReady`);
-const setConfig = createAction(scoped `set config`, props());
-const disconnectStream = createAction(scoped `disconnectStream`, props());
-const dropConnection = createAction(scoped `dropConnection`);
-const setViewportReady = createAction(scoped `set viewport ready`);
-const setViewportNotReady = createAction(scoped `set viewport not ready`);
-const changeStreamResolutionAction = createAction(scoped `change stream resolution`, props());
-const setSignalingName = createAction(scoped `set aws instanceName`, props());
-const setOrchestrationParameters = createAction(scoped `set orchestration parameters`, props());
-/**
- * Dispatched when the orchestration server signals that the reserved
- * instance is ready to serve the stream (`instanceReady` WS message).
- * Carries the stream-machine coordinates — `originInstanceUri` is used to
- * open the second (stream-machine) signalling socket. Also consumed by
- * telemetry as a phase marker.
- */
-const instanceReady = createAction(scoped `instance ready`, props());
-/**
- * Dispatched when `RegionsPingService.getFastest()` begins — right
- * before the region-list HTTP request goes out. Bookends the entire
- * region-discovery flow together with {@link regionResolved}.
- * Observability-only — no state change.
- */
-const regionPingFetchStart = createAction(scoped `region ping fetch start`);
-/**
- * Dispatched once `RegionsPingService.getProviders()` returns the region
- * list — i.e., the fetch step is done and the actual per-region ping
- * sweep is about to start. Splits the region-discovery waterfall into
- * two legs: config fetch vs. ping sweep. Observability-only.
- */
-const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
-/**
- * Dispatched once the closest region has been resolved by the
- * regions-ping service. Carries every sampled ping RTT to the winning
- * region (one entry per probe — `checkLatency` issues `ping_count`
- * sequential pings per region) so consumers can inspect variance /
- * jitter, not just the mean. Observability-only — no state change.
- */
-const regionResolved = createAction(scoped `region resolved`, props());
-/**
- * Dispatched around the HTTP polling roundup inside `getAwsInstance`
- * (old orchestration flow). Only fires when polling is actually used
- * (i.e., signaling URL is not a direct `ws://` / `wss://` endpoint).
- * Observability-only — no state change.
- */
-const pollingStarted = createAction(scoped `polling started`);
-const pollingEnded = createAction(scoped `polling ended`);
-/**
- * Dispatched once for every `retry()` attempt inside the signalling
- * connect pipeline. Two kinds:
- *
- *   - `'connect'` — outer retry around the whole connect pipeline
- *     (region ping → AWS instance → WebSocket). Fires when the WS
- *     errors (e.g. "WebSocket closed before open") and the entire
- *     pipeline is re-subscribed. See `SIGNALLING.md` — every one of
- *     these currently triggers a fresh region-ping storm.
- *   - `'orchestration'` — inner retry inside `getAwsInstance`,
- *     advancing `urlGen` to the next candidate signalling URL when
- *     polling fails or returns an error payload.
- *
- * Observability-only — no state change. Surfaces in the viewer's
- * Anomalies table as `signaling_retry` rows so a session that
- * needed N tries shows N entries with their reasons.
- */
-const signalingRetryAttempted = createAction(scoped `signaling retry attempted`, props());
-/**
- * Dispatched when the client has just sent an SDP answer back to Cirrus
- * after receiving the server-initiated offer. Observability-only.
- */
-const answerSent = createAction(scoped `answer sent`);
-const setOrchestrationMessage = createAction(scoped `set orchestration message`, props());
-const setOrchestrationProgress = createAction(scoped `set orchestration progress`, props());
-const setOrchestrationContext = createAction(scoped `set orchestration params`, props());
-const updateCirrusInfo = createAction(scoped `set unrealInfo`, props());
-const setLoopBackCommandIsCompleted = createAction(scoped `set loopBack command is completed`);
-const setAfkTimerVisible = createAction(scoped `set afk timer visible`);
-const setAfkTimerHide = createAction(scoped `set afk timer hide`);
-const setAfkTimerCountdown = createAction(scoped `set afk timer count down`, props());
-const showUnrealErrorMessage = createAction(scoped `show unreal error message`, props());
-const initSignalling = createAction(scoped `init signalling`);
-/**
- * Dispatched when a prefetched connection parked on `window.__stream` by the
- * `stream-prefetch.js` head-script is adopted instead of opening a fresh
- * `connectToSignaling`. Marks cirrus connected and records the adopted machine
- * in one transaction; the data channel / app-init chain then proceeds via
- * `dataChannelConnected` dispatched from `WebRtcPlayerService`.
- *
- * Deliberately does NOT touch `streamClientCompanyId` / `streamViewId`: the host
- * app (e.g. metabox) sets those authoritatively from its own data before
- * `initSignalling`, and the prefetch script's ids are connection-internal only.
- */
-const streamAdopted = createAction(scoped `stream adopted`, props());
-const startStream = createAction(scoped `startStream`, props());
-const resetConfig = createAction(scoped `reset config`);
-const resetAfk = createAction(scoped `reset afk action`);
-const resetWarnTimeout = createAction(scoped `reset config warn timeout`);
-/**
- * Fan-in for "cancel an in-flight signalling attempt". Dispatched by the
- * abortEstablishingConnection$ effect whenever any of these source actions
- * fire: `setCirrusDisconnected` (cirrus dropped), `dropConnection` (user
- * called drop), `destroyUnrealScene` (component teardown). Consumers
- * (`SignallingService.abort$`, `setDataChannelTimeoutCheck$.abort$`) listen
- * to this one action instead of the trio so the "abort" intent has a single
- * named entry in Redux DevTools and one subscription site to update.
- */
-const abortEstablishingConnection = createAction(scoped `abortEstablishingConnection`);
-const setUnrealPlaywrightConfig = createAction(scoped `set unreal playwright config`);
-const saveAnalyticsEvent = createAction(scoped `save analytics event`, props());
-/** Action to trigger WebRTC peer reconnection (keeps signaling connection) */
-const reconnectPeer = createAction(scoped `reconnect peer`, props());
-/** Action to reset the data channel state before reconnection */
-const resetDataChannelForReconnect = createAction(scoped `reset data channel for reconnect`);
-/** Action dispatched when peer reconnection succeeds */
-const reconnectPeerSuccess = createAction(scoped `reconnect peer success`);
-/** Action dispatched when all peer reconnection attempts are exhausted */
-const reconnectPeerFailed = createAction(scoped `reconnect peer failed`, props());
-/** Action dispatched when ICE connection state changes to failed/disconnected */
-const iceConnectionFailed = createAction(scoped `ice connection failed`, props());
-const forceResizeViewport = createAction(scoped `force resize viewport`);
-const videoAdaptedToContainer = createAction(scoped `video adapted to container`);
-const videoStreamInitialized = createAction(scoped `video stream initialized`);
-const dropDC = createAction(scoped `drop data channel`);
-const dropPC = createAction(scoped `drop peer connection`);
-const showLoadingProgress = createAction(scoped `show loading progress`, props());
-const showResumeStreamPopup = createAction(scoped `show resume stream popup`, props());
-const showUserInactivityTimeoutPopup = createAction(scoped `show user inactivity timeout popup`, props());
-const setUserInactivityTimeout = createAction(scoped `set user inactivity timeout`, props());
-const resetUserInactivityTimeout = createAction(scoped `reset user inactivity timeout`);
-
 const COMMAND_EXILE_TIMEOUT_MS = 10_000;
 function exileExpiredCommands(commandsInProgress, idToRemove, now) {
     let remaining = commandsInProgress.filter(whereNot({ id: idToRemove }));
@@ -785,613 +802,210 @@ const unrealFeature = createFeature({
     reducer: unrealReducer,
 });
 
-class SubService {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.destroy$ = new Subject();
-        this.actions$ = inject(Actions);
-        this.store = inject(Store);
-        this.disconnect$ = this.store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(skip(1), filter(Falsy), share());
-        this.destroyRef.onDestroy(() => {
-            this.destroy$.next();
-            this.destroy$.complete();
-        });
-    }
-}
-
-function AnswerHandler(msg) {
-    this.onWebRtcAnswer$.next(msg);
-}
-
-function ConfigHandler(msg) {
-    this.onConfig$.next(msg);
-    //DO NOT REMOVE. Possible required in future for SFU
-    /*this.send({
-      type: OrchestrationMessageTypes.listStreamers,
-      correlationId: this.correlationId,
-    });*/
-}
-
-function IceCandidateHandler(msg) {
-    this.onWebRtcIce$.next(msg.candidate);
-}
-
-function InstanceReadyHandler(msg) {
-    const payload = msg?.payload;
-    if (!payload) {
-        Logger.warn('instanceReady received without payload — ignoring');
-        return;
-    }
-    if (!payload.originInstanceUri) {
-        Logger.warn('instanceReady without originInstanceUri — ignoring');
-        return;
-    }
-    // Emit for observability (telemetry) and store the stream-machine coords.
-    this.store.dispatch(instanceReady(payload));
-    // This is the answer `requestCirrusViaSocket` is waiting for: the Cirrus
-    // address (`originInstanceUri`) plus the connection id to hand it. The socket
-    // itself is opened by the shared `connectToCirrus`, not here.
-    this.onInstanceReady$.next(payload);
-}
-
-function InstanceReservedHandler(msg) {
-    this.store.dispatch(setOrchestrationParameters({
-        instanceName: msg.payload.instanceId,
-        streamRequestId: msg.payload.streamRequestId,
-        eta: msg.payload.eta ?? 150,
-    }));
+/**
+ * `'metabox'` — the default when `UNREAL_CONFIG` omits `mode` — speaks the full
+ * Metabox command protocol. `'default'` targets a stock Pixel Streaming
+ * application, which understands no `MetaBoxCommand` packet, so the module
+ * sends none of its own.
+ */
+function isMetaboxMode(config) {
+    return (config?.mode ?? 'metabox') === 'metabox';
 }
 
-function PlayerCountHandler(msg) {
-    Logger.log(msg);
-}
-
-function SSInfoHandler(msg) {
-    this.store.dispatch(updateCirrusInfo({ ssData: msg.data }));
-    return null;
-}
-
-const dropCodes = [
-    WSCloseCode_UNKNOWN,
-    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
-    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
-    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
-    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
-];
-function OnCloseHandler(e) {
-    const message = `WebSocket closed: ${JSON.stringify(e.code)} - ${e.reason}`;
-    Logger.warn(message);
-    this.store.dispatch(setCirrusDisconnected());
-    if (dropCodes.includes(e.code)) {
-        this.store.dispatch(dropConnection());
-    }
-}
-
-function OnErrorHandler(e) {
-    Logger.warn(`WS error: ${JSON.stringify(e)}`);
-    this.store.dispatch(disconnectStream({
-        reason: DisconnectReason.WebSocketError,
-        message: 'WebSocket Error',
-    }));
-}
-
-function OnMessageHandler(e) {
-    const handleData = (data) => {
-        //Logger.colored(...COLOR_CODES.FROM_SIGNALING, data);
-        const msg = JSON.parse(data);
-        this.handleMessage(msg);
-    };
-    if (typeof e.data === 'string') {
-        try {
-            handleData(e.data);
-        }
-        catch (err) {
-            Logger.warn('OnMessageHandler: failed to parse string message', err);
-        }
-    }
-    else if (e.data instanceof Blob) {
-        e.data
-            .text()
-            .then(handleData)
-            .catch((err) => Logger.warn('OnMessageHandler: failed to parse Blob message', err));
-    }
-}
-
-/**
- * Open handler of the CIRRUS socket only (`addWsHandlers`), so
- * `setCirrusConnected` now means what it says. It used to also send
- * `requestStream` here, which made the flag fire on the orchestration control
- * socket — a whole provisioning wait (`eta`, ~150 s) before any Cirrus existed.
- * `requestStream` belongs to the control socket and is sent by
- * `requestCirrusViaSocket`.
- */
-function OnOpenHandler() {
-    this.store.dispatch(setCirrusConnected());
-}
-
-/**
- * Keeps the max of numbers seen so far; resets to 0 whenever `reset$` emits.
- */
-const keepMaxUntilReset = (reset$) => (source$) => merge(source$, reset$.pipe(map(() => null))).pipe(scan((max, value) => (value === null ? 0 : Math.max(max, value)), 0));
-
-// Reused across every inbound data-channel message — instantiating a
-// TextDecoder per call adds needless GC churn on a hot path.
-const utf16Decoder = new TextDecoder('utf-16');
-function decodeData(anyData) {
-    try {
-        return utf16Decoder.decode(anyData);
-    }
-    catch {
-        return '';
-    }
-}
-
-const dispatchResize = () => {
-    window.dispatchEvent(new Event('resize'));
-};
-
-const errorCodes = {
-    code404: 'Your asset is being synced on Metabox servers and is not yet available in Metabox Studio or Metabox Configurator. Please check again later after syncing is complete. ',
-};
-function getRtcErrorMessage(code) {
-    if (code === null) {
-        return undefined;
-    }
-    return errorCodes[`code${code}`];
-}
-
-const JUMP_THRESHOLD = 0.95;
-const MAX_TRANSITION_DURATION_MS = 200;
 /**
- * Maps a 0..1 stream directly to a 0..100 integer percent stream.
- * No animation — emits whatever the source emits, rounded and clamped.
+ * Fraction of commands completed (0–1). Drives the second half of the
+ * loading bar, after signaling reaches `SIGNALLING_PERCENT_VALUE`.
  */
-const floatToPercents = () => (source) => source.pipe(map$1((value) => clampf(0, 100, Math.round(value * 100))));
+const selectCommandProgress = createSelector(unrealFeature.selectTotalCommandsStarted, unrealFeature.selectTotalCommandsCompleted, (started, completed) => (started ? completed / started : 0));
+const selectFreezeFrameDataUrlFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.dataUrl || null);
+const selectFreezeFrameProgressMessageFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.progress || null);
+const selectFreezeFrameDataUrl = createSelector(unrealFeature.selectFreezeFrame, (freezeFrame) => (freezeFrame?.dataUrl ? freezeFrame?.dataUrl : null));
+const selectIsFreezeFrameLoading = createSelector(unrealFeature.selectFreezeFrame, (freezeFrame) => freezeFrame?.progress
+    ? freezeFrame.progress > 0 && freezeFrame.progress < 1
+    : false);
+const selectFreezeFrameCombinedDataUrl = createSelector(selectFreezeFrameDataUrlFromVideo, selectFreezeFrameDataUrl, (dataUrlFromVideo, remoteDataUrl) => dataUrlFromVideo || remoteDataUrl || null);
+const selectStreamConfig = createSelector(unrealFeature.selectStreamConfig, (config) => config);
+const selectWarnTimeout = createSelector(selectStreamConfig, (config) => config?.warnTimeout || DEFAULT_AFK_TIMEOUT);
+const selectIsExistMatchUrls = createSelector(unrealFeature.selectMatchUrls, (urls) => urls?.length > 0);
+const selectIsAutostart = createSelector(selectStreamConfig, (config) => config?.autoStart);
+const selectShowReconnectPopup = createSelector(unrealFeature.selectCirrusConnected, unrealFeature.selectEstablishingConnection, (cirrusConnected, establishingConnection) => !cirrusConnected && !establishingConnection);
+const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, (showPopup, viewportReady) => !showPopup && !viewportReady);
 /**
- * Maps a 0..1 progress stream to a smoothed 0..100 integer percent stream.
- * Animates between consecutive values over up to 200ms; jumps directly when
- * the delta exceeds 0.95 (treated as a reset, not a real progression).
+ * The connection id of the current stream session.
+ *
+ * The id is issued on the Cirrus side and reaches us either as the
+ * orchestration's `streamRequestId` (polling response / `instanceReserved` /
+ * `instanceReady`) or, when the backend issues none, in the `ssInfo` message
+ * once Cirrus generated it itself. Inside the player it is ONE value —
+ * `connectionId` — and this selector is where the two arrival paths collapse
+ * into it. It names the session everywhere: the debug overlay ("Connection Id")
+ * and the stream telemetry's `sessionId`.
+ *
+ * Also used by external consumers (e.g., metabox). Do not remove.
  */
-const floatToSmoothPercents = () => (source) => source.pipe(timestamp(), startWith({ value: 0, timestamp: 0 }), pairwise(), concatMap(([prev, curr]) => {
-    const isJump = Math.abs(curr.value - prev.value) > JUMP_THRESHOLD;
-    const dt = prev.timestamp ? curr.timestamp - prev.timestamp : 0;
-    if (isJump || dt === 0) {
-        return of(curr.value);
+const selectCirrusConnectionId = createSelector(unrealFeature.selectAwsInstance, unrealFeature.selectSsData, (awsInstance, ssData) => awsInstance?.streamRequestId ?? ssData?.connectionId);
+const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unrealFeature.selectAwsInstance, selectCirrusConnectionId, (data, instance, connectionId) => {
+    const info = [];
+    if (data) {
+        info.push(`${data.cirrusVersion}, ${data.branchInfo}, ${data.instanceType}`);
+        info.push(`Unreal App Version: ${data.streamerVersion}`);
+        info.push(`APP: ${data.streamPath}${data.streamApp}`);
     }
-    return smoothTransition(prev.value, curr.value, Math.min(dt, MAX_TRANSITION_DURATION_MS));
-}), floatToPercents());
+    // The endpoint that handed us the Cirrus address: an HTTP polling URL in one
+    // flow, a `wss://` orchestration URL in the other.
+    info.push(`Orchestration: ${instance.pollingUrl}`);
+    info.push(`WS: ${instance.wsUrl}`);
+    // The stream's `connectionId` — the telemetry ships it as its `sessionId`
+    // (a file name on the collector), and the viewer labels it `Connection Id`
+    // too, so the same value is named the same thing everywhere.
+    info.push(`Connection Id: ${connectionId ?? '—'}`);
+    return info.join('<br>');
+});
+const selectClientAndViewIds = createSelector(unrealFeature.selectStreamClientCompanyId, unrealFeature.selectStreamViewId, (clientId, viewId) => ({ clientId, viewId }));
+const selectIsFullyConnected = createSelector(unrealFeature.selectViewportReady, unrealFeature.selectDataChannelConnected, unrealFeature.selectCirrusConnected, (viewportReady, dataChannelConnected, cirrusConnected) => viewportReady && dataChannelConnected && cirrusConnected);
+const selectIsLoaderScreenVisible = createSelector(selectIsFullyConnected, (fullyConnected) => !fullyConnected);
 /**
- * Smoothly interpolates from `start` to `end` over `duration`ms using the
- * animation frame scheduler. Completes when the transition finishes.
+ * Returns Scene load progress as a float value between 0 and 1.
  *
- * NOTE: duplicates `smoothTransition` from `@3dsource/utils`. The utils version
- * is missing `takeWhile(... < 1, true)` and never completes — which would
- * deadlock the `concatMap` above. Keep this local copy until utils is fixed.
- * Not exported: internal to `floatToSmoothPercents`.
+ * Progress is split into two phases:
+ * 1. **Signaling** (0 → ~56%): connection polling or orchestration progress.
+ *    Starts at 0.1%, so the bar is never visually empty while connecting.
+ * 2. **Commands** (~56% → 100%): Unreal command progress after the data channel connects.
+ *
+ * The split point bumps by +1% once the WebSocket URL is known,
+ * producing a small visual step that indicates the WS handshake succeeded.
  */
-const smoothTransition = (start, end, duration) => {
-    const startTime = animationFrameScheduler.now();
-    return interval(0, animationFrameScheduler).pipe(map$1(() => clampf(0, 1, (animationFrameScheduler.now() - startTime) / duration)), distinctUntilChanged(), takeWhile((fraction) => fraction < 1, true), map$1((fraction) => lerp(start, end, fraction)));
-};
+const selectTotalProgress = createSelector(unrealFeature.selectStatusPercentSignallingServer, selectCommandProgress, unrealFeature.selectAwsInstance, unrealFeature.selectDataChannelConnected, (statusPercentSignallingServer, commandProgress, awsInstance, dataChannelConnected) => {
+    const SIGNALLING_MAX = SIGNALLING_PERCENT_VALUE / 100;
+    // Stated by the service (`AwsInstance.kind`), not sniffed from the hostname.
+    // In the socket flow it is set by `instanceReserved` — i.e. before
+    // `setAwsInstance` — so the eta-driven bar is picked up from the start of
+    // the provisioning wait.
+    const isNewOrchestration = awsInstance?.kind === 'socket';
+    // Once the data channel is connected, signaling is fully complete (1.0) —
+    // regardless of orchestration type. This is what makes an ADOPTED stream
+    // (which never set `statusPercentSignallingServer`) correctly show the whole
+    // first phase done instead of stalling near the command-only value.
+    // Otherwise: new orchestration reports 0–1 progress; legacy uses the
+    // polling percent.
+    const signalingProgress = dataChannelConnected
+        ? 1
+        : isNewOrchestration
+            ? (awsInstance?.progressComplete ?? 0)
+            : (statusPercentSignallingServer ?? 0) / 100;
+    // +1% bump once WS URL is known (visual step for WS handshake)
+    const splitPoint = awsInstance?.wsUrl
+        ? SIGNALLING_MAX + 0.01
+        : SIGNALLING_MAX;
+    // 0.001 minimum so the bar is never completely empty while loading
+    const progressSignaling = lerp(0.001, splitPoint, signalingProgress);
+    const progressRest = lerp(0, 1 - splitPoint, commandProgress);
+    return clampf(0, 1, progressSignaling + progressRest);
+});
+/** Used by external consumers (e.g., metabox). Do not remove. */
+const selectUserInactivityDetected = createSelector(unrealFeature.selectAfkCountdown, unrealFeature.selectIsAfkTimerVisible, (remainingSecondsToDisconnect, countdownVisible) => ({
+    remainingSecondsToDisconnect,
+    countdownVisible,
+}));
+/** Used by external consumers (e.g., metabox). Do not remove. */
+const selectIsVideoPlayingAndDataChannelConnected = createSelector(unrealFeature.selectIsVideoPlaying, unrealFeature.selectDataChannelConnected, (isVideoPlaying, isDataChannelConnected) => isVideoPlaying && isDataChannelConnected);
 
-const getImageFromVideoStream = (takeSizeFrom = 'video', imageOutput, sizes) => {
-    try {
-        const video = document.getElementById(STREAMING_VIDEO_ID);
-        const { canvas, ctx } = getCanvasCached('video');
-        canvas.width =
-            takeSizeFrom === 'video'
-                ? sizes?.width || video?.clientWidth || FULL_HD_WIDTH
-                : FULL_HD_WIDTH;
-        canvas.height =
-            takeSizeFrom === 'video'
-                ? sizes?.height || video?.clientHeight || FULL_HD_HEIGHT
-                : FULL_HD_HEIGHT;
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        return getSnapshot(canvas, canvas.width, imageOutput);
+class WebrtcErrorModalComponent {
+    constructor() {
+        this.#dialogRef = inject(DialogRef);
+        this.#store = inject(Store);
+        this.isCirrusConnected = inject(Store).selectSignal(unrealFeature.selectCirrusConnected);
     }
-    catch {
-        return null;
+    #dialogRef;
+    #store;
+    closeModalWithCirrusDisconnect() {
+        if (!this.isCirrusConnected()) {
+            this.#store.dispatch(disconnectStream({
+                reason: DisconnectReason.DropConnection,
+                message: 'Modal Drop Connection',
+            }));
+        }
+        this.close();
     }
-};
-
-/**
- * Generator that cycles through `urls` indefinitely. Each call to
- * `getActiveUrl(urls)` returns a fresh generator with its own counter,
- * so concurrent generators (e.g., overlapping reconnect attempts) do
- * not share state. The counter is initialized once per generator
- * instance — before any `yield` — so each `.next()` call advances
- * within that single generator.
- */
-function* getActiveUrl(urls) {
-    let index = 0;
-    while (true) {
-        yield urls[index++ % urls.length];
+    close() {
+        this.#dialogRef.close();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\"></header>\n  <section class=\"unreal-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"unreal-modal__footer\">\n    <app-unreal-button\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </app-unreal-button>\n  </footer>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\"></header>\n  <section class=\"unreal-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"unreal-modal__footer\">\n    <app-unreal-button\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </app-unreal-button>\n  </footer>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
+        }] });
 
-class LatencyTimings {
+class SubService {
     constructor() {
-        this.TestStartTimeMs = null;
-        this.UEReceiptTimeMs = null;
-        this.UEEncodeMs = null;
-        this.UECaptureToSendMs = null;
-        this.UETransmissionTimeMs = null;
-        this.BrowserReceiptTimeMs = null;
-        this.FrameDisplayDeltaTimeMs = null;
-    }
-    Reset() {
-        this.TestStartTimeMs = null;
-        this.UEReceiptTimeMs = null;
-        this.UEEncodeMs = null;
-        this.UECaptureToSendMs = null;
-        this.UETransmissionTimeMs = null;
-        this.BrowserReceiptTimeMs = null;
-        this.FrameDisplayDeltaTimeMs = null;
+        this.destroyRef = inject(DestroyRef);
+        this.destroy$ = new Subject();
+        this.actions$ = inject(Actions);
+        this.store = inject(Store);
+        this.disconnect$ = this.store
+            .select(unrealFeature.selectCirrusConnected)
+            .pipe(skip(1), filter(Falsy), share());
+        this.destroyRef.onDestroy(() => {
+            this.destroy$.next();
+            this.destroy$.complete();
+        });
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    SetUETimings(UETimings) {
-        this.UEReceiptTimeMs = UETimings.ReceiptTimeMs;
-        this.UEEncodeMs = UETimings.EncodeMs;
-        this.UECaptureToSendMs = UETimings.CaptureToSendMs;
-        this.UETransmissionTimeMs = UETimings.TransmissionTimeMs;
-        this.BrowserReceiptTimeMs = Date.now();
+}
+
+class CommandTelemetryService extends SubService {
+    constructor() {
+        super();
+        this.appId = 'metabox-telemetry';
+        this.commandsSent = {};
+        this.exileTimeout = 60000;
+        this.pollingTime = 5000;
+        this.commandSequenceNumber = 0;
+        this.payloads = [];
+        this.httpClient = inject(HttpClient);
+        this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
+        this.init();
     }
-    SetFrameDisplayDeltaTime(DeltaTimeMs) {
-        if (this.FrameDisplayDeltaTimeMs == null) {
-            this.FrameDisplayDeltaTimeMs = Math.round(DeltaTimeMs);
+    init() {
+        if (!this.unrealConfig?.commandTelemetryReceiver ||
+            this.unrealConfig?.playwright) {
+            return;
         }
+        this.reset();
+        this.sessionId = sessionStorage.getItem(this.appId) || this.uuid;
+        this.userId = localStorage.getItem(this.appId) || this.uuid;
+        sessionStorage.setItem(this.appId, this.sessionId);
+        localStorage.setItem(this.appId, this.userId);
+        timer(0, this.pollingTime)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.send(this.payloads);
+        });
     }
-}
-
-function qpToQuality(VideoEncoderQP) {
-    const orangeQP = 26;
-    const redQP = 35;
-    let quality = 'lime';
-    if (VideoEncoderQP > redQP) {
-        quality = 'red';
+    get timeNow() {
+        return Date.now();
     }
-    else if (VideoEncoderQP > orangeQP) {
-        quality = 'orange';
+    get sessionTime() {
+        return this.timeNow - this.startTime;
     }
-    return quality;
-}
-
-/**
- * Base64-encodes a byte array.
- *
- * Builds the intermediate binary string in fixed-size chunks instead of
- * concatenating one character at a time. The naive `bytes.reduce((s, b) => s +
- * String.fromCharCode(b), '')` is O(n²) (each `+` re-copies the growing string)
- * and stalls the main thread for a full-resolution frame; chunking keeps it
- * O(n). The chunk size stays under the argument-count limit of
- * `String.fromCharCode.apply`/spread.
- *
- * @param bytes - The raw bytes to encode.
- * @returns The Base64 representation of `bytes`.
- */
-function uint8ToBase64(bytes) {
-    const CHUNK_SIZE = 0x8000;
-    let binary = '';
-    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
-        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    get canSkipSending() {
+        return !(this.timeNow - this.lastTime > this.pollingTime * 2);
     }
-    return btoa(binary);
-}
-
-function fromResizeObserver(elem) {
-    return new Observable((subscriber) => {
-        const observer = new window.ResizeObserver((entries) => subscriber.next(entries));
-        observer.observe(elem);
-        return () => observer.unobserve(elem);
-    });
-}
-
-/*
- * Copyright (c) 2026.
- * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
- */
-/**
- * Rounds a number to the nearest even integer (rounding up for odd values).
- *
- * Video encoders (H.264/H.265) require even dimensions because chroma subsampling
- * operates on 2×2 pixel blocks. Odd dimensions cause encoding artifacts or failures.
- *
- * @param value - The number to round to the nearest even integer.
- * @returns The nearest even integer greater than or equal to the input.
- *
- * @example
- * makeEven(1079) // 1080
- * makeEven(1080) // 1080
- * makeEven(1081) // 1082
- */
-function makeEven(value) {
-    return Math.floor((value + 1) / 2) * 2;
-}
-
-const FULL_HD_PIXELS = FULL_HD_WIDTH * FULL_HD_HEIGHT;
-const UHD_PIXELS = FULL_HD_WIDTH * 2 * (FULL_HD_HEIGHT * 2);
-/**
- * Calculates the optimal stream resolution for studio mode.
- *
- * Fits the studio aspect ratio into the container (scaled by pixelRatio), then
- * caps the total pixel count to a budget (Full HD or 4K) to avoid overloading
- * the GPU/encoder while maximizing visual quality.
- *
- * The pixel budget approach (instead of per-dimension caps) ensures that
- * non-standard aspect ratios (portrait, ultra-wide, square) utilize available
- * pixels efficiently — e.g. a tall 1080×1920 stream uses the same pixel budget
- * as a wide 1920×1080 stream.
- *
- * Resolution is always capped at the studio dimensions — never upscaled beyond
- * what the Unreal scene was designed for.
- *
- * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
- * @param params.containerWidth - CSS width of the video container in pixels.
- * @param params.containerHeight - CSS height of the video container in pixels.
- * @param params.studioWidth - Target width of the MetaBox Studio scene.
- * @param params.studioHeight - Target height of the MetaBox Studio scene.
- * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
- *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
- * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
- *   and `scale` factor relative to the container's device-pixel size.
- */
-function getResizeStudioValues(params) {
-    const { pixelRatio, containerWidth, containerHeight, studioWidth, studioHeight, maxResolution, } = params;
-    const maxSpace = {
-        w: containerWidth * pixelRatio,
-        h: containerHeight * pixelRatio,
-    };
-    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
-    const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: studioWidth, h: studioHeight }, { x: 0, y: 0, ...maxSpace });
-    let w = videoSizePixelPerfect.w;
-    let h = videoSizePixelPerfect.h;
-    if (w * h > maxPixels) {
-        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
-        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
-        // Applying the same `s` to both dimensions preserves the aspect ratio.
-        const scaleFactor = Math.sqrt(maxPixels / (w * h));
-        w = w * scaleFactor;
-        h = h * scaleFactor;
+    decorate(funcToDecorate) {
+        this.listenCallbacks();
+        return this.wrapper.bind(this, funcToDecorate);
     }
-    const out = fitIntoRectangle(videoSizePixelPerfect, {
-        x: videoSizePixelPerfect.x,
-        y: videoSizePixelPerfect.y,
-        w,
-        h,
-    });
-    out.w = makeEven(out.w);
-    out.h = makeEven(out.h);
-    return out;
-}
-/**
- * Calculates the optimal stream resolution for configurator (non-studio) mode.
- *
- * Uses the full container area (scaled by pixelRatio) as the stream resolution,
- * then caps total pixel count to a budget (Full HD or 4K) to prevent excessive
- * GPU/encoder load while preserving the container's aspect ratio.
- *
- * Unlike {@link getResizeStudioValues}, there is no fixed studio resolution to
- * fit into — the container itself defines the aspect ratio, and the stream fills
- * it entirely (no letterboxing).
- *
- * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
- * @param params.containerWidth - CSS width of the video container in pixels.
- * @param params.containerHeight - CSS height of the video container in pixels.
- * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
- *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
- * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
- *   and `scale` factor (1 when no downscale needed, <1 when capped).
- */
-function getResizeValuesUniversal(params) {
-    const { pixelRatio, containerWidth, containerHeight, maxResolution } = params;
-    const maxSpace = {
-        w: containerWidth * pixelRatio,
-        h: containerHeight * pixelRatio,
-    };
-    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
-    let w = maxSpace.w;
-    let h = maxSpace.h;
-    if (w * h > maxPixels) {
-        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
-        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
-        // Applying the same `s` to both dimensions preserves the aspect ratio.
-        const scaleFactor = Math.sqrt(maxPixels / (w * h));
-        w = w * scaleFactor;
-        h = h * scaleFactor;
-    }
-    return { w: makeEven(w), h: makeEven(h), x: 0, y: 0, scale: w / maxSpace.w };
-}
-
-/**
- * `'metabox'` — the default when `UNREAL_CONFIG` omits `mode` — speaks the full
- * Metabox command protocol. `'default'` targets a stock Pixel Streaming
- * application, which understands no `MetaBoxCommand` packet, so the module
- * sends none of its own.
- */
-function isMetaboxMode(config) {
-    return (config?.mode ?? 'metabox') === 'metabox';
-}
-
-/**
- * Fraction of commands completed (0–1). Drives the second half of the
- * loading bar, after signaling reaches `SIGNALLING_PERCENT_VALUE`.
- */
-const selectCommandProgress = createSelector(unrealFeature.selectTotalCommandsStarted, unrealFeature.selectTotalCommandsCompleted, (started, completed) => (started ? completed / started : 0));
-const selectFreezeFrameDataUrlFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.dataUrl || null);
-const selectFreezeFrameProgressMessageFromVideo = createSelector(unrealFeature.selectFreezeFrameFromVideo, (freezeFrameFromVideo) => freezeFrameFromVideo?.progress || null);
-const selectFreezeFrameDataUrl = createSelector(unrealFeature.selectFreezeFrame, (freezeFrame) => (freezeFrame?.dataUrl ? freezeFrame?.dataUrl : null));
-const selectIsFreezeFrameLoading = createSelector(unrealFeature.selectFreezeFrame, (freezeFrame) => freezeFrame?.progress
-    ? freezeFrame.progress > 0 && freezeFrame.progress < 1
-    : false);
-const selectFreezeFrameCombinedDataUrl = createSelector(selectFreezeFrameDataUrlFromVideo, selectFreezeFrameDataUrl, (dataUrlFromVideo, remoteDataUrl) => dataUrlFromVideo || remoteDataUrl || null);
-const selectStreamConfig = createSelector(unrealFeature.selectStreamConfig, (config) => config);
-const selectWarnTimeout = createSelector(selectStreamConfig, (config) => config?.warnTimeout || DEFAULT_AFK_TIMEOUT);
-const selectIsExistMatchUrls = createSelector(unrealFeature.selectMatchUrls, (urls) => urls?.length > 0);
-const selectIsAutostart = createSelector(selectStreamConfig, (config) => config?.autoStart);
-const selectShowReconnectPopup = createSelector(unrealFeature.selectCirrusConnected, unrealFeature.selectEstablishingConnection, (cirrusConnected, establishingConnection) => !cirrusConnected && !establishingConnection);
-const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, (showPopup, viewportReady) => !showPopup && !viewportReady);
-/**
- * The connection id of the current stream session.
- *
- * The id is issued on the Cirrus side and reaches us either as the
- * orchestration's `streamRequestId` (polling response / `instanceReserved` /
- * `instanceReady`) or, when the backend issues none, in the `ssInfo` message
- * once Cirrus generated it itself. Inside the player it is ONE value —
- * `connectionId` — and this selector is where the two arrival paths collapse
- * into it. It names the session everywhere: the debug overlay ("Connection Id")
- * and the stream telemetry's `sessionId`.
- *
- * Also used by external consumers (e.g., metabox). Do not remove.
- */
-const selectCirrusConnectionId = createSelector(unrealFeature.selectAwsInstance, unrealFeature.selectSsData, (awsInstance, ssData) => awsInstance?.streamRequestId ?? ssData?.connectionId);
-const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unrealFeature.selectAwsInstance, selectCirrusConnectionId, (data, instance, connectionId) => {
-    const info = [];
-    if (data) {
-        info.push(`${data.cirrusVersion}, ${data.branchInfo}, ${data.instanceType}`);
-        info.push(`Unreal App Version: ${data.streamerVersion}`);
-        info.push(`APP: ${data.streamPath}${data.streamApp}`);
-    }
-    // The endpoint that handed us the Cirrus address: an HTTP polling URL in one
-    // flow, a `wss://` orchestration URL in the other.
-    info.push(`Orchestration: ${instance.pollingUrl}`);
-    info.push(`WS: ${instance.wsUrl}`);
-    // The stream's `connectionId` — the telemetry ships it as its `sessionId`
-    // (a file name on the collector), and the viewer labels it `Connection Id`
-    // too, so the same value is named the same thing everywhere.
-    info.push(`Connection Id: ${connectionId ?? '—'}`);
-    return info.join('<br>');
-});
-const selectClientAndViewIds = createSelector(unrealFeature.selectStreamClientCompanyId, unrealFeature.selectStreamViewId, (clientId, viewId) => ({ clientId, viewId }));
-const selectIsFullyConnected = createSelector(unrealFeature.selectViewportReady, unrealFeature.selectDataChannelConnected, unrealFeature.selectCirrusConnected, (viewportReady, dataChannelConnected, cirrusConnected) => viewportReady && dataChannelConnected && cirrusConnected);
-const selectIsLoaderScreenVisible = createSelector(selectIsFullyConnected, (fullyConnected) => !fullyConnected);
-/**
- * Returns Scene load progress as a float value between 0 and 1.
- *
- * Progress is split into two phases:
- * 1. **Signaling** (0 → ~56%): connection polling or orchestration progress.
- *    Starts at 0.1%, so the bar is never visually empty while connecting.
- * 2. **Commands** (~56% → 100%): Unreal command progress after the data channel connects.
- *
- * The split point bumps by +1% once the WebSocket URL is known,
- * producing a small visual step that indicates the WS handshake succeeded.
- */
-const selectTotalProgress = createSelector(unrealFeature.selectStatusPercentSignallingServer, selectCommandProgress, unrealFeature.selectAwsInstance, unrealFeature.selectDataChannelConnected, (statusPercentSignallingServer, commandProgress, awsInstance, dataChannelConnected) => {
-    const SIGNALLING_MAX = SIGNALLING_PERCENT_VALUE / 100;
-    // Stated by the service (`AwsInstance.kind`), not sniffed from the hostname.
-    // In the socket flow it is set by `instanceReserved` — i.e. before
-    // `setAwsInstance` — so the eta-driven bar is picked up from the start of
-    // the provisioning wait.
-    const isNewOrchestration = awsInstance?.kind === 'socket';
-    // Once the data channel is connected, signaling is fully complete (1.0) —
-    // regardless of orchestration type. This is what makes an ADOPTED stream
-    // (which never set `statusPercentSignallingServer`) correctly show the whole
-    // first phase done instead of stalling near the command-only value.
-    // Otherwise: new orchestration reports 0–1 progress; legacy uses the
-    // polling percent.
-    const signalingProgress = dataChannelConnected
-        ? 1
-        : isNewOrchestration
-            ? (awsInstance?.progressComplete ?? 0)
-            : (statusPercentSignallingServer ?? 0) / 100;
-    // +1% bump once WS URL is known (visual step for WS handshake)
-    const splitPoint = awsInstance?.wsUrl
-        ? SIGNALLING_MAX + 0.01
-        : SIGNALLING_MAX;
-    // 0.001 minimum so the bar is never completely empty while loading
-    const progressSignaling = lerp(0.001, splitPoint, signalingProgress);
-    const progressRest = lerp(0, 1 - splitPoint, commandProgress);
-    return clampf(0, 1, progressSignaling + progressRest);
-});
-/** Used by external consumers (e.g., metabox). Do not remove. */
-const selectUserInactivityDetected = createSelector(unrealFeature.selectAfkCountdown, unrealFeature.selectIsAfkTimerVisible, (remainingSecondsToDisconnect, countdownVisible) => ({
-    remainingSecondsToDisconnect,
-    countdownVisible,
-}));
-/** Used by external consumers (e.g., metabox). Do not remove. */
-const selectIsVideoPlayingAndDataChannelConnected = createSelector(unrealFeature.selectIsVideoPlaying, unrealFeature.selectDataChannelConnected, (isVideoPlaying, isDataChannelConnected) => isVideoPlaying && isDataChannelConnected);
-
-class WebrtcErrorModalComponent {
-    constructor() {
-        this.#dialogRef = inject(DialogRef);
-        this.#store = inject(Store);
-        this.isCirrusConnected = inject(Store).selectSignal(unrealFeature.selectCirrusConnected);
-    }
-    #dialogRef;
-    #store;
-    closeModalWithCirrusDisconnect() {
-        if (!this.isCirrusConnected()) {
-            this.#store.dispatch(disconnectStream({
-                reason: DisconnectReason.DropConnection,
-                message: 'Modal Drop Connection',
-            }));
-        }
-        this.close();
-    }
-    close() {
-        this.#dialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\r\n  <header class=\"unreal-modal__header\"></header>\r\n  <section class=\"unreal-modal__body\">\r\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\r\n      WebRTC error\r\n    </div>\r\n    <div style=\"text-align: left\">\r\n      An internet connection type (WebRTC) appears to be blocked either by your\r\n      browser settings or your current network. If WebRTC is blocked on your\r\n      browser you may be able to adjust these settings yourself based on\r\n      instructions here:\r\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\r\n        >https://myownconference.com/blog/en/webrtc/</a\r\n      >\r\n      <br /><br />\r\n      Trying a different web browser may help confirm this as well. If WebRTC is\r\n      blocked by your network, try switching to a different network if possible\r\n      or contact your network administrator.<br /><br />\r\n      WebRTC is common, safe and increasingly utilised method for streaming real\r\n      time 3D experiences via a web browser. It typically consumes no more\r\n      bandwidth than streaming an HD video.\r\n    </div>\r\n  </section>\r\n  <footer class=\"unreal-modal__footer\">\r\n    <app-unreal-button\r\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\r\n      [data-testid]=\"'close-webrtc-error-modal'\"\r\n      weight=\"primary\"\r\n    >\r\n      Ok\r\n    </app-unreal-button>\r\n  </footer>\r\n</div>\r\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\r\n  <header class=\"unreal-modal__header\"></header>\r\n  <section class=\"unreal-modal__body\">\r\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\r\n      WebRTC error\r\n    </div>\r\n    <div style=\"text-align: left\">\r\n      An internet connection type (WebRTC) appears to be blocked either by your\r\n      browser settings or your current network. If WebRTC is blocked on your\r\n      browser you may be able to adjust these settings yourself based on\r\n      instructions here:\r\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\r\n        >https://myownconference.com/blog/en/webrtc/</a\r\n      >\r\n      <br /><br />\r\n      Trying a different web browser may help confirm this as well. If WebRTC is\r\n      blocked by your network, try switching to a different network if possible\r\n      or contact your network administrator.<br /><br />\r\n      WebRTC is common, safe and increasingly utilised method for streaming real\r\n      time 3D experiences via a web browser. It typically consumes no more\r\n      bandwidth than streaming an HD video.\r\n    </div>\r\n  </section>\r\n  <footer class=\"unreal-modal__footer\">\r\n    <app-unreal-button\r\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\r\n      [data-testid]=\"'close-webrtc-error-modal'\"\r\n      weight=\"primary\"\r\n    >\r\n      Ok\r\n    </app-unreal-button>\r\n  </footer>\r\n</div>\r\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
-        }] });
-
-class CommandTelemetryService extends SubService {
-    constructor() {
-        super();
-        this.appId = 'metabox-telemetry';
-        this.commandsSent = {};
-        this.exileTimeout = 60000;
-        this.pollingTime = 5000;
-        this.commandSequenceNumber = 0;
-        this.payloads = [];
-        this.httpClient = inject(HttpClient);
-        this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
-        this.init();
-    }
-    init() {
-        if (!this.unrealConfig?.commandTelemetryReceiver ||
-            this.unrealConfig?.playwright) {
-            return;
-        }
-        this.reset();
-        this.sessionId = sessionStorage.getItem(this.appId) || this.uuid;
-        this.userId = localStorage.getItem(this.appId) || this.uuid;
-        sessionStorage.setItem(this.appId, this.sessionId);
-        localStorage.setItem(this.appId, this.userId);
-        timer(0, this.pollingTime)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.send(this.payloads);
-        });
-    }
-    get timeNow() {
-        return Date.now();
-    }
-    get sessionTime() {
-        return this.timeNow - this.startTime;
-    }
-    get canSkipSending() {
-        return !(this.timeNow - this.lastTime > this.pollingTime * 2);
-    }
-    decorate(funcToDecorate) {
-        this.listenCallbacks();
-        return this.wrapper.bind(this, funcToDecorate);
-    }
-    trackStartCommand(trackingId) {
-        const out = {
-            command: trackingId,
-            trackingId,
-        };
-        const timers = {
-            sessionElapsedTime: this.sessionTime,
-        };
-        this.pushStatToBuffer('commandSent', out, timers);
-        this.trackTime(out);
+    trackStartCommand(trackingId) {
+        const out = {
+            command: trackingId,
+            trackingId,
+        };
+        const timers = {
+            sessionElapsedTime: this.sessionTime,
+        };
+        this.pushStatToBuffer('commandSent', out, timers);
+        this.trackTime(out);
     }
     trackStopCommand(trackingId, multi = false, response = {}, timeStampsRaw) {
         const commandResponse = this.commandsSent[trackingId];
@@ -1542,10 +1156,10 @@ class CommandTelemetryService extends SubService {
         this.trackTime(out);
         funcToDecorate(out);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CommandTelemetryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CommandTelemetryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CommandTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CommandTelemetryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1566,10 +1180,10 @@ class DevModeService {
             localStorage.removeItem('devMode');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DevModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DevModeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1615,7 +1229,7 @@ class RegionsPingService {
                 return of(cached).pipe(tap(() => this.store.dispatch(regionPingFetchEnd())), tap((data) => this.store.dispatch(regionResolved({
                     region: data.region_code,
                     pingsMs: data.result,
-                }))), map$1((data) => data.region_code));
+                }))), map((data) => data.region_code));
             }
             // No regions URL and no cache: there is nothing to ping. Bail out loudly
             // instead of letting `HttpClient.get('')` request the current document
@@ -1638,7 +1252,7 @@ class RegionsPingService {
             }), tap((data) => this.store.dispatch(regionResolved({
                 region: data?.region_code ?? '',
                 pingsMs: data?.result ?? [],
-            }))), map$1((data) => data?.region_code));
+            }))), map((data) => data?.region_code));
         });
     }
     /**
@@ -1888,10 +1502,10 @@ class RegionsPingService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RegionsPingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RegionsPingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RegionsPingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RegionsPingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2228,7 +1842,7 @@ class SignallingService extends SubService {
             // itself at `INNER_RETRY_LIMIT`; only its exhaustion reaches the outer retry,
             // which re-picks the region (rare, real "region down"). Outer delay > inner,
             // so escalation is bounded and region discovery runs once per outer cycle.
-            const connectCycle$ = this.getRegion().pipe(tap((region) => this.region.set(region ?? '')), map$1((region) => this.adaptUrlsToRegion(urlList, region)), switchMap((urls) => this.connectAttempt(urls)), takeUntil(this.abort$));
+            const connectCycle$ = this.getRegion().pipe(tap((region) => this.region.set(region ?? '')), map((region) => this.adaptUrlsToRegion(urlList, region)), switchMap((urls) => this.connectAttempt(urls)), takeUntil(this.abort$));
             return connectCycle$.pipe(retry({
                 delay: (err, attempt) => {
                     this.store.dispatch(signalingRetryAttempted({
@@ -2353,7 +1967,7 @@ class SignallingService extends SubService {
      * `kind`: nothing was requested.
      */
     requestCirrusDirect(url) {
-        return this.waitForClientAndViewIds().pipe(map$1(() => ({
+        return this.waitForClientAndViewIds().pipe(map(() => ({
             wsUrl: url,
             pollingUrl: null,
             instanceName: 'Direct Connection',
@@ -2375,7 +1989,7 @@ class SignallingService extends SubService {
                 }
             }), filter(({ clientId, viewId }) => !!clientId && !!viewId), take(1), switchMap(({ clientId, viewId }) => this.pollLoop(`${url}${clientId}/${viewId}`).pipe(tap((data) => {
                 lastResp = data;
-            }))), map$1((data) => ({
+            }))), map((data) => ({
                 wsUrl: httpUrlToWs(`${location.protocol}//${data.signallingServer}`),
                 pollingUrl: url,
                 instanceName: data.signallingServer ?? '',
@@ -2431,7 +2045,7 @@ class SignallingService extends SubService {
             this.controlWs = control;
             Logger.log('ORCHESTRATION CONTROL WS OPEN');
             this.sendRequestStream();
-            return merge(this.onInstanceReady$.pipe(map$1((payload) => ({
+            return merge(this.onInstanceReady$.pipe(map((payload) => ({
                 wsUrl: payload.originInstanceUri,
                 // The endpoint that answered — the orchestration URL here, the HTTP
                 // polling URL in the other flow. Shown as `Orchestration:` in the overlay.
@@ -2723,10 +2337,10 @@ class SignallingService extends SubService {
         Logger.log('Start Getting Region');
         return this.regionsPingService.getFastest().pipe(take(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SignallingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignallingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SignallingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignallingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2754,7 +2368,7 @@ class VideoService extends SubService {
         this.videoStats$ = this.videoTrack$.pipe(
         // If videoTrack$ emits null, switch to EMPTY → the current interval is canceled.
         switchMap$1((track) => track
-            ? interval(250).pipe(map(() => track.pcClient), switchMap$1((pcClient) => from(this.getStats(pcClient))), filter(Truthy))
+            ? interval(250).pipe(map$1(() => track.pcClient), switchMap$1((pcClient) => from(this.getStats(pcClient))), filter(Truthy))
             : of(null)), filter(Truthy), share());
         this.destroyAbort = new AbortController();
         // Teardown is wired ONCE here instead of per `create()`. The per-create
@@ -3141,10 +2755,10 @@ class VideoService extends SubService {
             this.armGestureRetry(audio);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3600,25 +3214,25 @@ class WebRtcPlayerService extends SubService {
     }
     handlePeerConnectionEvents(pcClient) {
         fromEvent(pcClient, 'signalingstatechange')
-            .pipe(map$1(() => this.pcClient?.signalingState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.signalingState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[Signaling state change] |', state, '|');
             this.commandTelemetryService.trackStopCommand('EXT-Signaling state change', true, { state, multi: true });
         });
         fromEvent(pcClient, 'iceconnectionstatechange')
-            .pipe(map$1(() => this.pcClient?.iceConnectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.iceConnectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[Browser ICE connection] |', state, '|');
             this.commandTelemetryService.trackStopCommand('EXT-Browser ICE connection', true, { state, multi: true });
         });
         fromEvent(pcClient, 'icegatheringstatechange')
-            .pipe(map$1(() => this.pcClient?.iceGatheringState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.iceGatheringState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[Browser ICE gathering] |', state, '|');
             this.commandTelemetryService.trackStopCommand('EXT-Browser ICE gathering', true, { state, multi: true });
         });
         fromEvent(pcClient, 'connectionstatechange')
-            .pipe(map$1(() => this.pcClient?.connectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.connectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[RTCPeerConnection state] |', state, '|');
             // A genuine ICE failure (not a manual dropDC/dropPC, which recover via
@@ -3635,7 +3249,7 @@ class WebRtcPlayerService extends SubService {
             }
         });
         fromEvent(pcClient, 'icecandidate')
-            .pipe(map$1((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((candidate) => this.signallingSrv.send({
             type: 'iceCandidate',
             candidate,
@@ -3643,7 +3257,7 @@ class WebRtcPlayerService extends SubService {
         // When the server creates the DataChannel (server-offer flow),
         // we receive it here via the 'datachannel' event
         fromEvent(pcClient, 'datachannel')
-            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map$1((e) => e.channel), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map((e) => e.channel), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((datachannel) => {
             this.dcClient = this.setupDataChannelCallbacks(datachannel);
         });
@@ -3654,10 +3268,10 @@ class WebRtcPlayerService extends SubService {
             ' readyState=' +
             e.track.readyState)), share());
         onTrack$
-            .pipe(filter((e) => e.track.kind === 'audio'), map$1((e) => e.streams[0]))
+            .pipe(filter((e) => e.track.kind === 'audio'), map((e) => e.streams[0]))
             .subscribe((stream) => this.videoService.attachAudioStream(stream));
         onTrack$
-            .pipe(filter((e) => e.track.kind === 'video'), map$1((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
+            .pipe(filter((e) => e.track.kind === 'video'), map((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
             .subscribe((stream) => {
             if (this.pcClient) {
                 this.videoService.attachVideoStream(stream, this.pcClient);
@@ -3758,7 +3372,7 @@ class WebRtcPlayerService extends SubService {
                 `[DATACHANNEL] Message received on "${datachannel.label}" id=${datachannel.id}, byteCode=${view[0]}, size=${view.byteLength}`,
               );
             }),*/
-            map$1((e) => e.data), takeUntil(merge(this.disconnect$, this.destroy$)))
+            map((e) => e.data), takeUntil(merge(this.disconnect$, this.destroy$)))
                 .subscribe((data) => this.onDataChannelMessage$.next(data));
             return datachannel;
         }
@@ -3810,10 +3424,10 @@ class WebRtcPlayerService extends SubService {
             Logger.error("Couldn't create answer", e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebRtcPlayerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebRtcPlayerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebRtcPlayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebRtcPlayerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3939,10 +3553,10 @@ class StreamAdoptionService {
         this.webRtc.adopt(parked.pc, parked.dc, parked.stream, parked.config ?? {}, parked.dcBuffer);
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamAdoptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamAdoptionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamAdoptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamAdoptionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamAdoptionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamAdoptionService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3974,10 +3588,10 @@ class UnrealCallbackService {
      * ```
      */
     fromUnrealCallback(command) {
-        return this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.command === command), 
+        return this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.command === command), 
         // Cast is required: after a `command`-based filter TS cannot narrow to a
         // type discriminated on `callback`. The unwrapped object IS the full callback.
-        map$1((data) => data));
+        map((data) => data));
     }
     /**
      * Sends a command and observes the matching response by correlationId.
@@ -4001,19 +3615,19 @@ class UnrealCallbackService {
     observeCommandResponse(data, sender, timeOut = 60000, dispatchOnTimeout = true) {
         const correlationId = generateUuid();
         return defer(() => {
-            const observable = this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.correlationId === correlationId), timeout$1(timeOut), catchError(() => dispatchOnTimeout
+            const observable = this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.correlationId === correlationId), timeout$1(timeOut), catchError(() => dispatchOnTimeout
                 ? of({ command: 'timeout', correlationId: 'timeout' })
                 : of(null)), take(1), tapLog('Command Response Observer'), filter(Truthy), 
             // Cast: response is matched by correlationId, so it is the callback for K.
-            map$1((data) => data));
+            map((data) => data));
             setTimeout(() => sender({ ...data, correlationId }), 0);
             return observable;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCallbackService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCallbackService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCallbackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCallbackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4130,10 +3744,10 @@ class UnrealCommunicatorService extends SubService {
     requestQualityControl() {
         this.sendInputData(new Uint8Array([MessageType.RequestQualityControl]).buffer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCommunicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCommunicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4147,12 +3761,12 @@ class UnrealErrorModalComponent {
     close() {
         this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"unreal-modal\">\r\n  <header class=\"unreal-modal__header\">\r\n    <div\r\n      [attr.data-testid]=\"'unreal-error-header-title'\"\r\n      class=\"unreal-modal__title\"\r\n    >\r\n      Warning\r\n    </div>\r\n  </header>\r\n  <div class=\"unreal-modal__body\">\r\n    <div>{{ dialogData.content }}</div>\r\n  </div>\r\n  <div class=\"unreal-modal__footer\">\r\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\r\n  </div>\r\n</div>\r\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"unreal-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"unreal-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"unreal-modal__footer\">\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\n  </div>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "<div class=\"unreal-modal\">\r\n  <header class=\"unreal-modal__header\">\r\n    <div\r\n      [attr.data-testid]=\"'unreal-error-header-title'\"\r\n      class=\"unreal-modal__title\"\r\n    >\r\n      Warning\r\n    </div>\r\n  </header>\r\n  <div class=\"unreal-modal__body\">\r\n    <div>{{ dialogData.content }}</div>\r\n  </div>\r\n  <div class=\"unreal-modal__footer\">\r\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\r\n  </div>\r\n</div>\r\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"] }]
+            args: [{ selector: 'app-unreal-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "<div class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"unreal-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"unreal-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"unreal-modal__footer\">\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\n  </div>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"] }]
         }] });
 
 class UnrealEffects {
@@ -4178,7 +3792,7 @@ class UnrealEffects {
             .select(unrealFeature.selectDataChannelConnected)
             .pipe(filter(Truthy));
         this.destroyConnections$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyUnrealScene), map(() => destroyRemoteConnections({ reason: DisconnectReason.Destroy })));
+            return this.actions$.pipe(ofType(destroyUnrealScene), map$1(() => destroyRemoteConnections({ reason: DisconnectReason.Destroy })));
         });
         // Stage 3 — accurate region re-ping in the background once the stream is up.
         // A few seconds after the data channel is ready (so it doesn't compete with
@@ -4197,10 +3811,10 @@ class UnrealEffects {
         // subscribe to single intent (and it shows up as a distinct entry in the
         // Redux DevTools timeline).
         this.abortEstablishingConnection$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setCirrusDisconnected, dropConnection, destroyUnrealScene), map(() => abortEstablishingConnection()));
+            return this.actions$.pipe(ofType(setCirrusDisconnected, dropConnection, destroyUnrealScene), map$1(() => abortEstablishingConnection()));
         });
         this.resetAfk$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setConfig, setUserInactivityTimeout, resetWarnTimeout, resetConfig), map(() => resetAfk()));
+            return this.actions$.pipe(ofType(setConfig, setUserInactivityTimeout, resetWarnTimeout, resetConfig), map$1(() => resetAfk()));
         });
         this.iframeMessaging$ = createEffect(() => {
             const cirrusConnected$ = this.store
@@ -4213,16 +3827,16 @@ class UnrealEffects {
             // Skip initial false; emit null on every viewport state change
             const viewportReset$ = this.store
                 .select(unrealFeature.selectViewportReady)
-                .pipe(skip(1), delay(500), map(() => null));
+                .pipe(skip(1), delay(500), map$1(() => null));
             return merge(cirrusStatus$, this.store.select(unrealFeature.selectStatusMessage), viewportReset$).pipe(debounceTime(0), distinctUntilChanged(), tapLog('STATUS=>'), tap((status) => this.postToScreenLocker(status)));
         }, { dispatch: false });
         this.setSignalingTo100$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setAwsInstance), map(() => setStatusPercentSignallingServer({ percent: 100 })));
+            return this.actions$.pipe(ofType(setAwsInstance), map$1(() => setStatusPercentSignallingServer({ percent: 100 })));
         });
         this.setOrchestrationParameters$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setOrchestrationParameters), map(({ eta }) => eta), filter((value) => value > 0), switchMap((total) => {
+            return this.actions$.pipe(ofType(setOrchestrationParameters), map$1(({ eta }) => eta), filter((value) => value > 0), switchMap((total) => {
                 // Emit every second: 0,1,2,...,total (inclusive)
-                return timer(0, 1000).pipe(takeUntil(this.connectionCompleted$), take(total + 1), map((sec) => sec / total), distinctUntilChanged(), map((progressComplete) => setOrchestrationProgress({ progressComplete })));
+                return timer(0, 1000).pipe(takeUntil(this.connectionCompleted$), take(total + 1), map$1((sec) => sec / total), distinctUntilChanged(), map$1((progressComplete) => setOrchestrationProgress({ progressComplete })));
             }));
         });
         this.setDataChannelTimeoutCheck$ = createEffect(() => {
@@ -4269,7 +3883,7 @@ class UnrealEffects {
                             return of(null);
                         }), 
                         // map response to the destroy action that ngrx will dispatch
-                        map(() => disconnectStream({
+                        map$1(() => disconnectStream({
                             reason: DisconnectReason.DataChannelTimeout,
                             message: 'Data Channel Timeout',
                         })));
@@ -4293,24 +3907,24 @@ class UnrealEffects {
          * a visible flicker (video flashing to black).
          */
         this.forceViewportNotReady$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady), map(() => setViewportNotReady()));
+            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady), map$1(() => setViewportNotReady()));
         });
         this.resetCirrusOnDestroy$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectCirrusConnected)), filter(([, cirrusConnected]) => cirrusConnected), map(() => setCirrusDisconnected()));
+            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectCirrusConnected)), filter(([, cirrusConnected]) => cirrusConnected), map$1(() => setCirrusDisconnected()));
         });
         this.destroyRemoteConnections$ = createEffect(() => {
             return this.actions$.pipe(ofType(destroyRemoteConnections), tap(({ reason }) => {
                 this.webRtcPlayerService.releaseRemoteConnections(reason);
-            }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map(() => dropConnection()));
+            }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map$1(() => dropConnection()));
         });
         this.destroyConnectionAndRestart$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setCirrusDisconnected), withLatestFrom(this.store.select(unrealFeature.selectDisconnectReason)), filter(([, reason]) => reason === DisconnectReason.DataChannelTimeout), map(() => initSignalling()));
+            return this.actions$.pipe(ofType(setCirrusDisconnected), withLatestFrom(this.store.select(unrealFeature.selectDisconnectReason)), filter(([, reason]) => reason === DisconnectReason.DataChannelTimeout), map$1(() => initSignalling()));
         });
         this.showUnrealError$ = createEffect(() => {
-            return this.actions$.pipe(ofType(showUnrealErrorMessage), map(({ code }) => getRtcErrorMessage(code)), distinctUntilChanged(), filter(Truthy), switchMap((content) => this.dialog.open(UnrealErrorModalComponent, {
+            return this.actions$.pipe(ofType(showUnrealErrorMessage), map$1(({ code }) => getRtcErrorMessage(code)), distinctUntilChanged(), filter(Truthy), exhaustMap((content) => this.dialog.open(UnrealErrorModalComponent, {
                 scrollStrategy: this.scrollStrategy,
                 data: { content },
-            }).closed), map(() => showUnrealErrorMessage({ code: null })));
+            }).closed), map$1(() => showUnrealErrorMessage({ code: null })));
         });
         /**
          * `dataChannelReady` is a ONCE-PER-SESSION signal: it starts app init
@@ -4355,21 +3969,21 @@ class UnrealEffects {
                 // we proceed only after no more commands are started for 50 ms.
                 return this.actions$.pipe(ofType(commandStarted), debounceTime(50), take(1), switchMap(() => this.unrealCallbackService.observeCommandResponse({ command: MetaBoxCommand.FLoopBackCommand }, (data) => this.commandsSender.sendCommandToUnreal(data))), switchMap(() => this.videoService.videoStats$), filter(({ aggregatedStats: s }) => !!s.framesPerSecond &&
                     s.framesPerSecond > MINIMAL_FPS &&
-                    (s.framesDecoded ?? 0) > 15), take(1), map(() => setLoopBackCommandIsCompleted()));
+                    (s.framesDecoded ?? 0) > 15), take(1), map$1(() => setLoopBackCommandIsCompleted()));
             }));
         });
         this.setViewportReadyBySetLoopBackCommandIsCompleted$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setLoopBackCommandIsCompleted, reconnectPeerSuccess), tap(() => this.commandTelemetryService.trackStopCommand('EXT-SetViewportReady', false, { ready: true })), map(() => setViewportReady()));
+            return this.actions$.pipe(ofType(setLoopBackCommandIsCompleted, reconnectPeerSuccess), tap(() => this.commandTelemetryService.trackStopCommand('EXT-SetViewportReady', false, { ready: true })), map$1(() => setViewportReady()));
         });
         this.startStream$ = createEffect(() => {
-            return this.actions$.pipe(ofType(startStream), map(() => initSignalling()));
+            return this.actions$.pipe(ofType(startStream), map$1(() => initSignalling()));
         });
         // When the video stream is initialized but autoplay didn't kick in
         // (browser blocked it; user gesture pending), the user may need extra
         // time before interacting. Refresh the AFK timer so it doesn't tick
         // toward an inactivity warning while we're waiting for permission.
         this.resetAfkOnPausedVideoInit$ = createEffect(() => {
-            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), map(() => resetAfk()));
+            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), map$1(() => resetAfk()));
         });
         /**
          * Effect: `disconnectReasonHandling$`
@@ -4392,7 +4006,7 @@ class UnrealEffects {
                     return false;
                 }
                 return DESTROY_DISCONNECT_REASONS.includes(reason);
-            }), map(({ reason }) => destroyRemoteConnections({ reason })));
+            }), map$1(({ reason }) => destroyRemoteConnections({ reason })));
         });
         /**
          * Effect: `handleDataChannelClosed$`
@@ -4406,7 +4020,7 @@ class UnrealEffects {
                 reason === DisconnectReason.IceConnectionFailed) &&
                 this.canPeerReconnect()), tap(({ reason }) => {
                 Logger.warn(`[Reconnect] ${reason}, initiating peer reconnection`);
-            }), map(() => reconnectPeer({
+            }), map$1(() => reconnectPeer({
                 attempt: 1,
                 maxAttempts: RECONNECT_CONFIG.maxAttempts,
                 delay: 0,
@@ -4424,7 +4038,7 @@ class UnrealEffects {
          */
         this.resetStateForPeerReconnect$ = createEffect(() => {
             return this.actions$.pipe(ofType(reconnectPeer), filter(() => RECONNECT_CONFIG.enabled), filter(({ attempt }) => attempt === 1), // Only reset on the first attempt
-            map(() => resetDataChannelForReconnect()));
+            map$1(() => resetDataChannelForReconnect()));
         });
         /**
          * Effect: `executePeerReconnect$`
@@ -4442,7 +4056,7 @@ class UnrealEffects {
                     return of(this.scheduleRetryOrFail(attempt, maxAttempts, 'Signaling connection lost during peer reconnection'));
                 }
                 // Monitor for successful data channel connection
-                return this.actions$.pipe(ofType(dataChannelConnected), take(1), timeout$1(this.dataChannelConnectionTimeout), tap(() => Logger.info('[Reconnect] Peer reconnection successful!')), map(() => reconnectPeerSuccess()), catchError(() => {
+                return this.actions$.pipe(ofType(dataChannelConnected), take(1), timeout$1(this.dataChannelConnectionTimeout), tap(() => Logger.info('[Reconnect] Peer reconnection successful!')), map$1(() => reconnectPeerSuccess()), catchError(() => {
                     if (attempt < maxAttempts) {
                         Logger.warn(`[Reconnect] Peer reconnection attempt ${attempt} timed out, scheduling retry`);
                     }
@@ -4460,7 +4074,7 @@ class UnrealEffects {
          * Falls back to full disconnection which may trigger full reconnection.
          */
         this.handlePeerReconnectFailed$ = createEffect(() => {
-            return this.actions$.pipe(ofType(reconnectPeerFailed), map(({ reason }) => disconnectStream({
+            return this.actions$.pipe(ofType(reconnectPeerFailed), map$1(({ reason }) => disconnectStream({
                 reason: DisconnectReason.ReconnectFailed,
                 message: reason,
             })));
@@ -4496,9 +4110,9 @@ class UnrealEffects {
         // carries a correlationId resolves a previously started command.
         // Skip in Playwright mode (deterministic command IDs are issued directly).
         this.listenUnrealCallbackByInitSignalling$ = createEffect(() => {
-            return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap(() => this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json
+            return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap(() => this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json
                 ? json.commandCallback?.correlationId
-                : json?.correlationId), filter(Truthy), map((id) => commandCompleted({ id, now: Date.now() })))));
+                : json?.correlationId), filter(Truthy), map$1((id) => commandCompleted({ id, now: Date.now() })))));
         });
         this.connectToSignaling$ = createEffect(() => {
             return this.actions$.pipe(ofType(initSignalling), withLatestFrom(this.store.select(unrealFeature.selectMatchUrls), this.store.select(selectIsAutostart), this.store.select(unrealFeature.selectCirrusConnected)), filter(([, , autoStart, cirrusConnected]) => {
@@ -4506,7 +4120,7 @@ class UnrealEffects {
                     Logger.warn(`SIGNALING REQUEST can't be called when cirrus connection is already established.`);
                 }
                 return autoStart && !cirrusConnected;
-            }), map(([, matchMakerUrls]) => [...matchMakerUrls].filter(Truthy)), filter((urls) => urls.length > 0), 
+            }), map$1(([, matchMakerUrls]) => [...matchMakerUrls].filter(Truthy)), filter((urls) => urls.length > 0), 
             // Ensure a single in-flight request per attempt.
             exhaustMap((urls) => 
             // If a prefetched `window.__stream` is ready — or still connecting —
@@ -4523,35 +4137,434 @@ class UnrealEffects {
             ignoreElements(), startWith(setEstablishingConnection({ value: true })))));
         });
     }
-    canPeerReconnect() {
-        return RECONNECT_CONFIG.enabled && this.signallingService.isConnected();
+    canPeerReconnect() {
+        return RECONNECT_CONFIG.enabled && this.signallingService.isConnected();
+    }
+    /**
+     * Either schedules the next peer-reconnect attempt or gives up with the
+     * supplied reason. Used in two `executePeerReconnect$` branches that share
+     * the same retry-or-fail decision.
+     */
+    scheduleRetryOrFail(attempt, maxAttempts, exhaustedReason) {
+        return attempt < maxAttempts
+            ? reconnectPeer({ attempt: attempt + 1, maxAttempts })
+            : reconnectPeerFailed({ reason: exhaustedReason });
+    }
+    postToScreenLocker(text) {
+        try {
+            const el = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ??
+                SCREEN_LOCKER_CONTAINER_ID);
+            el?.contentWindow?.postMessage(text, '*');
+        }
+        catch {
+            // Fails silently if cross-origin
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealEffects, decorators: [{
+            type: Injectable
+        }] });
+
+function InstanceReadyHandler(msg) {
+    const payload = msg?.payload;
+    if (!payload) {
+        Logger.warn('instanceReady received without payload — ignoring');
+        return;
+    }
+    if (!payload.originInstanceUri) {
+        Logger.warn('instanceReady without originInstanceUri — ignoring');
+        return;
+    }
+    // Emit for observability (telemetry) and store the stream-machine coords.
+    this.store.dispatch(instanceReady(payload));
+    // This is the answer `requestCirrusViaSocket` is waiting for: the Cirrus
+    // address (`originInstanceUri`) plus the connection id to hand it. The socket
+    // itself is opened by the shared `connectToCirrus`, not here.
+    this.onInstanceReady$.next(payload);
+}
+
+function InstanceReservedHandler(msg) {
+    this.store.dispatch(setOrchestrationParameters({
+        instanceName: msg.payload.instanceId,
+        streamRequestId: msg.payload.streamRequestId,
+        eta: msg.payload.eta ?? 150,
+    }));
+}
+
+function PlayerCountHandler(msg) {
+    Logger.log(msg);
+}
+
+function SSInfoHandler(msg) {
+    this.store.dispatch(updateCirrusInfo({ ssData: msg.data }));
+    return null;
+}
+
+const dropCodes = [
+    WSCloseCode_UNKNOWN,
+    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
+    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
+    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
+    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
+];
+function OnCloseHandler(e) {
+    const message = `WebSocket closed: ${JSON.stringify(e.code)} - ${e.reason}`;
+    Logger.warn(message);
+    this.store.dispatch(setCirrusDisconnected());
+    if (dropCodes.includes(e.code)) {
+        this.store.dispatch(dropConnection());
+    }
+}
+
+function OnErrorHandler(e) {
+    Logger.warn(`WS error: ${JSON.stringify(e)}`);
+    this.store.dispatch(disconnectStream({
+        reason: DisconnectReason.WebSocketError,
+        message: 'WebSocket Error',
+    }));
+}
+
+function OnMessageHandler(e) {
+    const handleData = (data) => {
+        //Logger.colored(...COLOR_CODES.FROM_SIGNALING, data);
+        const msg = JSON.parse(data);
+        this.handleMessage(msg);
+    };
+    if (typeof e.data === 'string') {
+        try {
+            handleData(e.data);
+        }
+        catch (err) {
+            Logger.warn('OnMessageHandler: failed to parse string message', err);
+        }
+    }
+    else if (e.data instanceof Blob) {
+        e.data
+            .text()
+            .then(handleData)
+            .catch((err) => Logger.warn('OnMessageHandler: failed to parse Blob message', err));
+    }
+}
+
+/**
+ * Open handler of the CIRRUS socket only (`addWsHandlers`), so
+ * `setCirrusConnected` now means what it says. It used to also send
+ * `requestStream` here, which made the flag fire on the orchestration control
+ * socket — a whole provisioning wait (`eta`, ~150 s) before any Cirrus existed.
+ * `requestStream` belongs to the control socket and is sent by
+ * `requestCirrusViaSocket`.
+ */
+function OnOpenHandler() {
+    this.store.dispatch(setCirrusConnected());
+}
+
+/**
+ * Keeps the max of numbers seen so far; resets to 0 whenever `reset$` emits.
+ */
+const keepMaxUntilReset = (reset$) => (source$) => merge(source$, reset$.pipe(map$1(() => null))).pipe(scan((max, value) => (value === null ? 0 : Math.max(max, value)), 0));
+
+// Reused across every inbound data-channel message — instantiating a
+// TextDecoder per call adds needless GC churn on a hot path.
+const utf16Decoder = new TextDecoder('utf-16');
+function decodeData(anyData) {
+    try {
+        return utf16Decoder.decode(anyData);
+    }
+    catch {
+        return '';
+    }
+}
+
+const dispatchResize = () => {
+    window.dispatchEvent(new Event('resize'));
+};
+
+const errorCodes = {
+    code404: 'Your asset is being synced on Metabox servers and is not yet available in Metabox Studio or Metabox Configurator. Please check again later after syncing is complete. ',
+};
+function getRtcErrorMessage(code) {
+    if (code === null) {
+        return undefined;
+    }
+    return errorCodes[`code${code}`];
+}
+
+const JUMP_THRESHOLD = 0.95;
+const MAX_TRANSITION_DURATION_MS = 200;
+/**
+ * Maps a 0..1 stream directly to a 0..100 integer percent stream.
+ * No animation — emits whatever the source emits, rounded and clamped.
+ */
+const floatToPercents = () => (source) => source.pipe(map((value) => clampf(0, 100, Math.round(value * 100))));
+/**
+ * Maps a 0..1 progress stream to a smoothed 0..100 integer percent stream.
+ * Animates between consecutive values over up to 200ms; jumps directly when
+ * the delta exceeds 0.95 (treated as a reset, not a real progression).
+ */
+const floatToSmoothPercents = () => (source) => source.pipe(timestamp(), startWith({ value: 0, timestamp: 0 }), pairwise(), concatMap(([prev, curr]) => {
+    const isJump = Math.abs(curr.value - prev.value) > JUMP_THRESHOLD;
+    const dt = prev.timestamp ? curr.timestamp - prev.timestamp : 0;
+    if (isJump || dt === 0) {
+        return of(curr.value);
+    }
+    return smoothTransition(prev.value, curr.value, Math.min(dt, MAX_TRANSITION_DURATION_MS));
+}), floatToPercents());
+/**
+ * Smoothly interpolates from `start` to `end` over `duration`ms using the
+ * animation frame scheduler. Completes when the transition finishes.
+ *
+ * NOTE: duplicates `smoothTransition` from `@3dsource/utils`. The utils version
+ * is missing `takeWhile(... < 1, true)` and never completes — which would
+ * deadlock the `concatMap` above. Keep this local copy until utils is fixed.
+ * Not exported: internal to `floatToSmoothPercents`.
+ */
+const smoothTransition = (start, end, duration) => {
+    const startTime = animationFrameScheduler.now();
+    return interval(0, animationFrameScheduler).pipe(map(() => clampf(0, 1, (animationFrameScheduler.now() - startTime) / duration)), distinctUntilChanged(), takeWhile((fraction) => fraction < 1, true), map((fraction) => lerp(start, end, fraction)));
+};
+
+const getImageFromVideoStream = (takeSizeFrom = 'video', imageOutput, sizes) => {
+    try {
+        const video = document.getElementById(STREAMING_VIDEO_ID);
+        const { canvas, ctx } = getCanvasCached('video');
+        canvas.width =
+            takeSizeFrom === 'video'
+                ? sizes?.width || video?.clientWidth || FULL_HD_WIDTH
+                : FULL_HD_WIDTH;
+        canvas.height =
+            takeSizeFrom === 'video'
+                ? sizes?.height || video?.clientHeight || FULL_HD_HEIGHT
+                : FULL_HD_HEIGHT;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        return getSnapshot(canvas, canvas.width, imageOutput);
+    }
+    catch {
+        return null;
+    }
+};
+
+/**
+ * Generator that cycles through `urls` indefinitely. Each call to
+ * `getActiveUrl(urls)` returns a fresh generator with its own counter,
+ * so concurrent generators (e.g., overlapping reconnect attempts) do
+ * not share state. The counter is initialized once per generator
+ * instance — before any `yield` — so each `.next()` call advances
+ * within that single generator.
+ */
+function* getActiveUrl(urls) {
+    let index = 0;
+    while (true) {
+        yield urls[index++ % urls.length];
+    }
+}
+
+class LatencyTimings {
+    constructor() {
+        this.TestStartTimeMs = null;
+        this.UEReceiptTimeMs = null;
+        this.UEEncodeMs = null;
+        this.UECaptureToSendMs = null;
+        this.UETransmissionTimeMs = null;
+        this.BrowserReceiptTimeMs = null;
+        this.FrameDisplayDeltaTimeMs = null;
+    }
+    Reset() {
+        this.TestStartTimeMs = null;
+        this.UEReceiptTimeMs = null;
+        this.UEEncodeMs = null;
+        this.UECaptureToSendMs = null;
+        this.UETransmissionTimeMs = null;
+        this.BrowserReceiptTimeMs = null;
+        this.FrameDisplayDeltaTimeMs = null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    SetUETimings(UETimings) {
+        this.UEReceiptTimeMs = UETimings.ReceiptTimeMs;
+        this.UEEncodeMs = UETimings.EncodeMs;
+        this.UECaptureToSendMs = UETimings.CaptureToSendMs;
+        this.UETransmissionTimeMs = UETimings.TransmissionTimeMs;
+        this.BrowserReceiptTimeMs = Date.now();
+    }
+    SetFrameDisplayDeltaTime(DeltaTimeMs) {
+        if (this.FrameDisplayDeltaTimeMs == null) {
+            this.FrameDisplayDeltaTimeMs = Math.round(DeltaTimeMs);
+        }
+    }
+}
+
+function qpToQuality(VideoEncoderQP) {
+    const orangeQP = 26;
+    const redQP = 35;
+    let quality = 'lime';
+    if (VideoEncoderQP > redQP) {
+        quality = 'red';
+    }
+    else if (VideoEncoderQP > orangeQP) {
+        quality = 'orange';
+    }
+    return quality;
+}
+
+/**
+ * Base64-encodes a byte array.
+ *
+ * Builds the intermediate binary string in fixed-size chunks instead of
+ * concatenating one character at a time. The naive `bytes.reduce((s, b) => s +
+ * String.fromCharCode(b), '')` is O(n²) (each `+` re-copies the growing string)
+ * and stalls the main thread for a full-resolution frame; chunking keeps it
+ * O(n). The chunk size stays under the argument-count limit of
+ * `String.fromCharCode.apply`/spread.
+ *
+ * @param bytes - The raw bytes to encode.
+ * @returns The Base64 representation of `bytes`.
+ */
+function uint8ToBase64(bytes) {
+    const CHUNK_SIZE = 0x8000;
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
     }
-    /**
-     * Either schedules the next peer-reconnect attempt or gives up with the
-     * supplied reason. Used in two `executePeerReconnect$` branches that share
-     * the same retry-or-fail decision.
-     */
-    scheduleRetryOrFail(attempt, maxAttempts, exhaustedReason) {
-        return attempt < maxAttempts
-            ? reconnectPeer({ attempt: attempt + 1, maxAttempts })
-            : reconnectPeerFailed({ reason: exhaustedReason });
+    return btoa(binary);
+}
+
+function fromResizeObserver(elem) {
+    return new Observable((subscriber) => {
+        const observer = new window.ResizeObserver((entries) => subscriber.next(entries));
+        observer.observe(elem);
+        return () => observer.unobserve(elem);
+    });
+}
+
+/*
+ * Copyright (c) 2026.
+ * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
+ */
+/**
+ * Rounds a number to the nearest even integer (rounding up for odd values).
+ *
+ * Video encoders (H.264/H.265) require even dimensions because chroma subsampling
+ * operates on 2×2 pixel blocks. Odd dimensions cause encoding artifacts or failures.
+ *
+ * @param value - The number to round to the nearest even integer.
+ * @returns The nearest even integer greater than or equal to the input.
+ *
+ * @example
+ * makeEven(1079) // 1080
+ * makeEven(1080) // 1080
+ * makeEven(1081) // 1082
+ */
+function makeEven(value) {
+    return Math.floor((value + 1) / 2) * 2;
+}
+
+const FULL_HD_PIXELS = FULL_HD_WIDTH * FULL_HD_HEIGHT;
+const UHD_PIXELS = FULL_HD_WIDTH * 2 * (FULL_HD_HEIGHT * 2);
+/**
+ * Calculates the optimal stream resolution for studio mode.
+ *
+ * Fits the studio aspect ratio into the container (scaled by pixelRatio), then
+ * caps the total pixel count to a budget (Full HD or 4K) to avoid overloading
+ * the GPU/encoder while maximizing visual quality.
+ *
+ * The pixel budget approach (instead of per-dimension caps) ensures that
+ * non-standard aspect ratios (portrait, ultra-wide, square) utilize available
+ * pixels efficiently — e.g. a tall 1080×1920 stream uses the same pixel budget
+ * as a wide 1920×1080 stream.
+ *
+ * Resolution is always capped at the studio dimensions — never upscaled beyond
+ * what the Unreal scene was designed for.
+ *
+ * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
+ * @param params.containerWidth - CSS width of the video container in pixels.
+ * @param params.containerHeight - CSS height of the video container in pixels.
+ * @param params.studioWidth - Target width of the MetaBox Studio scene.
+ * @param params.studioHeight - Target height of the MetaBox Studio scene.
+ * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
+ *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
+ * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
+ *   and `scale` factor relative to the container's device-pixel size.
+ */
+function getResizeStudioValues(params) {
+    const { pixelRatio, containerWidth, containerHeight, studioWidth, studioHeight, maxResolution, } = params;
+    const maxSpace = {
+        w: containerWidth * pixelRatio,
+        h: containerHeight * pixelRatio,
+    };
+    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
+    const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: studioWidth, h: studioHeight }, { x: 0, y: 0, ...maxSpace });
+    let w = videoSizePixelPerfect.w;
+    let h = videoSizePixelPerfect.h;
+    if (w * h > maxPixels) {
+        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
+        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
+        // Applying the same `s` to both dimensions preserves the aspect ratio.
+        const scaleFactor = Math.sqrt(maxPixels / (w * h));
+        w = w * scaleFactor;
+        h = h * scaleFactor;
     }
-    postToScreenLocker(text) {
-        try {
-            const el = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ??
-                SCREEN_LOCKER_CONTAINER_ID);
-            el?.contentWindow?.postMessage(text, '*');
-        }
-        catch {
-            // Fails silently if cross-origin
-        }
+    const out = fitIntoRectangle(videoSizePixelPerfect, {
+        x: videoSizePixelPerfect.x,
+        y: videoSizePixelPerfect.y,
+        w,
+        h,
+    });
+    out.w = makeEven(out.w);
+    out.h = makeEven(out.h);
+    return out;
+}
+/**
+ * Calculates the optimal stream resolution for configurator (non-studio) mode.
+ *
+ * Uses the full container area (scaled by pixelRatio) as the stream resolution,
+ * then caps total pixel count to a budget (Full HD or 4K) to prevent excessive
+ * GPU/encoder load while preserving the container's aspect ratio.
+ *
+ * Unlike {@link getResizeStudioValues}, there is no fixed studio resolution to
+ * fit into — the container itself defines the aspect ratio, and the stream fills
+ * it entirely (no letterboxing).
+ *
+ * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
+ * @param params.containerWidth - CSS width of the video container in pixels.
+ * @param params.containerHeight - CSS height of the video container in pixels.
+ * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
+ *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
+ * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
+ *   and `scale` factor (1 when no downscale needed, <1 when capped).
+ */
+function getResizeValuesUniversal(params) {
+    const { pixelRatio, containerWidth, containerHeight, maxResolution } = params;
+    const maxSpace = {
+        w: containerWidth * pixelRatio,
+        h: containerHeight * pixelRatio,
+    };
+    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
+    let w = maxSpace.w;
+    let h = maxSpace.h;
+    if (w * h > maxPixels) {
+        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
+        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
+        // Applying the same `s` to both dimensions preserves the aspect ratio.
+        const scaleFactor = Math.sqrt(maxPixels / (w * h));
+        w = w * scaleFactor;
+        h = h * scaleFactor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealEffects }); }
+    return { w: makeEven(w), h: makeEven(h), x: 0, y: 0, scale: w / maxSpace.w };
+}
+
+/**
+ * Picks the class that carries the decoration of a UI part: the host class when
+ * one is supplied, the built-in one otherwise. An empty string counts as "not
+ * supplied" so a part never ends up with no styling at all.
+ */
+function resolveSkin(classes, part, fallback) {
+    const custom = classes[part];
+    if (custom === undefined || custom === '') {
+        return fallback;
+    }
+    return custom;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealEffects, decorators: [{
-            type: Injectable
-        }] });
 
 class AFKService extends SubService {
     constructor() {
@@ -4667,10 +4680,10 @@ class AFKService extends SubService {
             }
         }, 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AFKService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AFKService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AFKService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AFKService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4720,10 +4733,10 @@ class LoadingProgressService {
     // `switchMap` cancels the inner subscription on every visibility change
     // so stale emissions can't leak through.
     #boundedProgress$;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingProgressService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoadingProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoadingProgressService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingProgressService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoadingProgressService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4809,10 +4822,10 @@ class FreezeFrameService extends SubService {
             progress: 1,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4857,6 +4870,121 @@ const deepEqual = (a, b) => {
     return false;
 };
 
+class FileReceiverService extends SubService {
+    constructor() {
+        super();
+        this.fileComplete$ = new Subject();
+        this.valid = false;
+        this.chunks = 0;
+        this.mimetype = '';
+        this.receiving = false;
+        this.extension = '';
+        this.data = [];
+        this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
+        this.init();
+    }
+    init() {
+        if (this.unrealConfig?.playwright) {
+            return;
+        }
+        this.store
+            .select(unrealFeature.selectViewportReady)
+            .pipe(filter(Truthy), takeUntil(this.destroy$))
+            .subscribe(() => this.reset());
+    }
+    reset() {
+        this.mimetype = '';
+        this.extension = '';
+        this.receiving = false;
+        this.valid = false;
+        this.chunks = 0;
+        this.data = [];
+    }
+    resetOnStart() {
+        this.reset();
+        this.receiving = true;
+    }
+    /**
+     * Processes a file extension when received over data channel
+     * @param view - the file extension data
+     */
+    setExtensionFromBytes(view) {
+        // Reset this if we got a file message and we are not "receiving" it yet
+        if (!this.receiving) {
+            this.resetOnStart();
+        }
+        //Logger.info(extensionAsString);
+        this.extension = decodeData(view.slice(1).buffer);
+    }
+    /**
+     * Processes a file mime type when received over data channel
+     * @param view - the file mime type data
+     */
+    setMimeTypeFromBytes(view) {
+        // Reset this if we got a file message and we are not "receiving" it yet
+        if (!this.receiving) {
+            this.resetOnStart();
+        }
+        const mimeAsString = decodeData(view.slice(1).buffer);
+        // Logger.info(mimeAsString);
+        this.mimetype = mimeAsString;
+    }
+    /*-------------------------------------------------------------------------------------------*/
+    setContentsFromBytes(view) {
+        // If we haven't received the initial setup instructions, return
+        if (!this.receiving)
+            return;
+        const typeSize = 1;
+        const intSize = 4;
+        const maxMessageSize = 16 * 1024;
+        const headerSize = typeSize + intSize;
+        const maxPayloadSize = maxMessageSize - headerSize;
+        // Calculate the total number of chunks from the total this size
+        this.chunks = Math.ceil(new DataView(view.slice(typeSize, headerSize).buffer).getInt32(0, true) /
+            maxPayloadSize);
+        // Get the file part of the payload
+        const thisBytes = view.slice(headerSize);
+        // Append to existing data that holds this
+        this.data.push(thisBytes);
+        // Uncomment for debug
+        // Logger.info(`Received this chunk: ${this.data.length}/${this.chunks}`);
+        if (this.data.length === this.chunks) {
+            this.receiving = false;
+            this.valid = true;
+            /*Logger.info('Received complete file');
+            const transferDuration = new Date().getTime() - this.timestampStart;
+            const transferBitrate = Math.round(
+              (this.chunks * maxMessageSize) / transferDuration,
+            );
+            Logger.info(
+              `Average transfer bitrate: ${transferBitrate}kb/s over ${transferDuration / 1000} seconds`,
+            );*/
+            /**
+             * Reconstruct the file
+             * This code reconstructs the received data into the original this based on the mime type and extension provided
+             */
+            const blob = new Blob([...this.data], { type: this.mimetype });
+            this.fileComplete$.next({
+                blob,
+                mimetype: this.mimetype,
+                extension: this.extension,
+                valid: this.valid,
+            });
+            this.reset();
+        }
+        else if (this.data.length > this.chunks) {
+            Logger.error(`Received bigger this than advertised: ${this.data.length}/${this.chunks}`);
+            this.reset();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileReceiverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileReceiverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileReceiverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 const filteredLogs = [
     {
         command: 'onChangeSequence',
@@ -4869,6 +4997,7 @@ class AggregatorService extends SubService {
         this.videoService = inject(VideoService);
         this.webrtcPlayer = inject(WebRtcPlayerService);
         this.freezeFrame = inject(FreezeFrameService);
+        this.fileReceiver = inject(FileReceiverService);
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
         this.responseEventListeners = new Map();
         this.init();
@@ -4983,12 +5112,17 @@ class AggregatorService extends SubService {
                 }
                 break;
             }
-            // DataChannel file transfer is recognized but deliberately ignored:
-            // nothing on the client consumes the reassembled file.
             case ToClientMessage.FileExtension:
+                Logger.colored(...COLOR_CODES.FROM_UNREAL, 'FileExtension');
+                this.fileReceiver.setExtensionFromBytes(view);
+                break;
             case ToClientMessage.FileMimeType:
+                Logger.colored(...COLOR_CODES.FROM_UNREAL, 'FileMimeType');
+                this.fileReceiver.setMimeTypeFromBytes(view);
+                break;
             case ToClientMessage.FileContents:
-                Logger.colored(...COLOR_CODES.FROM_UNREAL, 'File message ignored');
+                Logger.colored(...COLOR_CODES.FROM_UNREAL, 'FileContents');
+                this.fileReceiver.setContentsFromBytes(view);
                 break;
             case ToClientMessage.FreezeFrame:
                 Logger.colored(...COLOR_CODES.FROM_UNREAL, 'Freeze frame');
@@ -5025,10 +5159,10 @@ class AggregatorService extends SubService {
                 Logger.warn(`unrecognized data received, packet ID ${view[0]}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AggregatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AggregatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AggregatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AggregatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5174,7 +5308,7 @@ class ConsoleExtensionsService extends SubService {
         // `store.select` replays the current value synchronously, so if it already
         // equals `target` this resolves immediately; otherwise it waits for the
         // transition or falls back to `false` after `timeoutMs`.
-        return firstValueFrom(this.store.select(unrealFeature.selectDataChannelConnected).pipe(filter((connected) => connected === target), take(1), map(() => true), timeout$1({ first: timeoutMs, with: () => of(false) })));
+        return firstValueFrom(this.store.select(unrealFeature.selectDataChannelConnected).pipe(filter((connected) => connected === target), take(1), map$1(() => true), timeout$1({ first: timeoutMs, with: () => of(false) })));
     }
     sleep(ms) {
         return new Promise((resolve) => setTimeout(resolve, ms));
@@ -5189,10 +5323,10 @@ class ConsoleExtensionsService extends SubService {
         Logger.info('emitCommand(command) => send command to Unreal Engine.');
         Logger.info('stressTest({iterations}) => hammer reconnect: repeatedly drop DC/PC and assert recovery.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ConsoleExtensionsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConsoleExtensionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5271,8 +5405,8 @@ class InputService extends SubService {
         if (this.unrealConfig?.playwright) {
             return;
         }
-        const visibilityHiddenTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'hidden'), filter(Truthy));
-        const visibilityVisibleTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'visible'), filter(Truthy), startWith(true));
+        const visibilityHiddenTrigger$ = fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'hidden'), filter(Truthy));
+        const visibilityVisibleTrigger$ = fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'visible'), filter(Truthy), startWith(true));
         this.deactivatedVideoTrigger$ = merge(this.disconnect$, this.reInit$, visibilityHiddenTrigger$, this.destroy$);
         merge(visibilityVisibleTrigger$, this.store.select(unrealFeature.selectViewportReady).pipe(filter(Truthy)))
             .pipe(filter(() => !!this.video), takeUntil$1(this.destroy$))
@@ -5693,10 +5827,10 @@ class InputService extends SubService {
             this.sendInputData(data.buffer);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InputService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InputService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5726,7 +5860,7 @@ class StreamStatusTelemetryService extends SubService {
             return this.videoService.videoStats$.pipe(throttleTime(5000, asyncScheduler, {
                 leading: true,
                 trailing: true,
-            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), signalingReadyTime$, viewPortReadyTime$), map$1(([data, signalingServer, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
+            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), signalingReadyTime$, viewPortReadyTime$), map(([data, signalingServer, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
                 data,
                 signalingServer,
                 startTimeUtc,
@@ -5742,7 +5876,7 @@ class StreamStatusTelemetryService extends SubService {
      * Used with `withLatestFrom` so events carry a stable duration for the whole session.
      */
     readyTimeSince(readyState$, startedAt) {
-        return readyState$.pipe(filter(Boolean), take$1(1), map$1(() => Date.now() - startedAt), startWith$1(undefined));
+        return readyState$.pipe(filter(Boolean), take$1(1), map(() => Date.now() - startedAt), startWith$1(undefined));
     }
     mapEventData(params) {
         const { data, signalingServer, startTimeUtc, signalingReadyTime, viewPortReadyTime, } = params;
@@ -5765,10 +5899,10 @@ class StreamStatusTelemetryService extends SubService {
             VideoEncoderQP,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5893,7 +6027,7 @@ class StreamStatusTelemetryService2 {
          * `startWith(null)` seed makes `withLatestFrom` on this stream safe even
          * before the first video stat arrives (common at data-channel-open).
          */
-        this.selectedPair$ = this.videoService.videoStats$.pipe(map((s) => s.aggregatedStats.selectedPair ?? null), scan((acc, curr) => curr ?? acc, null), startWith(null));
+        this.selectedPair$ = this.videoService.videoStats$.pipe(map$1((s) => s.aggregatedStats.selectedPair ?? null), scan((acc, curr) => curr ?? acc, null), startWith(null));
         /**
          * Correlation-matched Observable: emits once when the first `loopBack`
          * command's corresponding `command completed` action fires. Built from
@@ -5963,7 +6097,7 @@ class StreamStatusTelemetryService2 {
                     // never ran or its cache expired.
                     {
                         id: 'region-resolved',
-                        event: this.actions$.pipe(ofType(regionResolved), take(1), map(({ region, pingsMs }) => ({
+                        event: this.actions$.pipe(ofType(regionResolved), take(1), map$1(({ region, pingsMs }) => ({
                             region,
                             pingsMs: pingsMs.length ? `${pingsMs.join(', ')} ms` : null,
                         }))),
@@ -6009,7 +6143,7 @@ class StreamStatusTelemetryService2 {
                     // is shipped under — see {@link SessionState.wireId}.
                     {
                         id: 'ssinfo-received',
-                        event: this.store.select(unrealFeature.selectSsData).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.store.select(unrealFeature.selectAwsInstance), this.store.select(selectCirrusConnectionId)), map(([ssData, aws, connectionId]) => ({
+                        event: this.store.select(unrealFeature.selectSsData).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.store.select(unrealFeature.selectAwsInstance), this.store.select(selectCirrusConnectionId)), map$1(([ssData, aws, connectionId]) => ({
                             client: aws.wsUrl,
                             instanceName: aws.instanceName,
                             ...ssData,
@@ -6054,7 +6188,7 @@ class StreamStatusTelemetryService2 {
                         id: 'datachannel-connected',
                         event: this.store
                             .select(unrealFeature.selectDataChannelConnected)
-                            .pipe(filter$1(Boolean), take(1), map(() => ({
+                            .pipe(filter$1(Boolean), take(1), map$1(() => ({
                             iceCandidateCount: this.session?.iceCandidateCount ?? 0,
                             handshakeFlow: this.session?.handshakeFlow ?? null,
                         }))),
@@ -6086,7 +6220,7 @@ class StreamStatusTelemetryService2 {
                     // fired at Unreal before the viewport was ready.
                     {
                         id: 'viewport-ready',
-                        event: this.store.select(unrealFeature.selectViewportReady).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.selectedPair$), map(([, selectedPair]) => ({
+                        event: this.store.select(unrealFeature.selectViewportReady).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.selectedPair$), map$1(([, selectedPair]) => ({
                             localCandidate: fmtCandidate(selectedPair?.local),
                             remoteCandidate: fmtCandidate(selectedPair?.remote),
                             commandCount: this.session?.commandCount ?? 0,
@@ -6870,10 +7004,10 @@ class StreamStatusTelemetryService2 {
     emit(event, data) {
         this.store.dispatch(trackTelemetryData({ event, data }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService2, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService2, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -6925,6 +7059,48 @@ function resolveOverlays(recipes, times, phaseStartMs, phaseEndMs) {
     return out;
 }
 
+const ReceivedMimeTypes = {
+    ApplicationJson: 'application/json',
+};
+
+class FileHandlerService {
+    constructor() {
+        this.fileService = inject(FileReceiverService);
+        this.fileHandlers = {
+            [ReceivedMimeTypes.ApplicationJson]: this.handleJsonFile.bind(this),
+        };
+    }
+    handleJsonFile(data, correlationId) {
+        const { blob } = data;
+        return from(blob.text()).pipe(map((text) => JSON.parse(text)), filter(({ commandCallback }) => {
+            return commandCallback.correlationId === correlationId;
+        }));
+    }
+    observeFileResponse(mimetype, data, sender, timeOut = 60000) {
+        const correlationId = generateUuid();
+        const out = { ...data, correlationId };
+        return defer(() => {
+            const observable = this.fileService.fileComplete$.pipe(switchMap((data) => {
+                if (data.valid && this.fileHandlers[mimetype]) {
+                    return this.fileHandlers[mimetype](data, correlationId).pipe(filter(Truthy));
+                }
+                return of(null);
+            }), timeout$1(timeOut), catchError((e) => {
+                Logger.error(e);
+                return of(null);
+            }), take(1));
+            setTimeout(() => sender(out), 0);
+            return observable;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileHandlerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class AnalyticsService extends SubService {
     #stopMouse$ = new Subject();
     constructor() {
@@ -7009,10 +7185,10 @@ class AnalyticsService extends SubService {
         Logger.log('Analytics Event:', name, params);
         this.store.dispatch(saveAnalyticsEvent({ event: { name, params } }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AnalyticsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AnalyticsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7379,10 +7555,10 @@ class FpsMonitorService extends SubService {
         }
         return { fps: fps / len, bitrate: bitrate / len, qp: qp / len };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FpsMonitorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FpsMonitorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FpsMonitorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FpsMonitorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7396,19 +7572,34 @@ class AfkTimeoutModalComponent {
         this.afkCountdown = this.#store.selectSignal(unrealFeature.selectAfkCountdown);
         this.isShowAfkPopup = computed(() => this.isAfkTimerVisible() && this.showAfkTimeoutPopup(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isShowAfkPopup" }] : /* istanbul ignore next */ []));
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.scrimSkin = computed(() => resolveSkin(this.uiClasses(), 'afkScrim', 'afk-scrim'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrimSkin" }] : /* istanbul ignore next */ []));
+        this.cardSkin = computed(() => resolveSkin(this.uiClasses(), 'afkCard', 'resume-box'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardSkin" }] : /* istanbul ignore next */ []));
+        this.buttonSkin = computed(() => resolveSkin(this.uiClasses(), 'afkButton', 'afk-button'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonSkin" }] : /* istanbul ignore next */ []));
+        // Created once: identity stays stable, reactivity lives in the signals.
+        this.slotContext = {
+            countdown: this.afkCountdown,
+            reset: () => this.resetAfk(),
+        };
     }
     #store;
     #afkService;
     resetAfk() {
         this.#afkService.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isShowAfkPopup()) {\r\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\r\n    <div class=\"resume-box\">\r\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\r\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\r\n      </div>\r\n      <div class=\"resume-box__text\">\r\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\r\n        <p>\r\n          No activity detected. Press 'Continue' if you wish to keep your\r\n          session active\r\n        </p>\r\n      </div>\r\n      <app-unreal-button\r\n        [fullWidth]=\"true\"\r\n        [data-testid]=\"'continue-session'\"\r\n        weight=\"primary\"\r\n        size=\"lg\"\r\n      >\r\n        Continue\r\n      </app-unreal-button>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:#1f2937;text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", inputs: { uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isShowAfkPopup()) {\n  <div\n    (click)=\"resetAfk()\"\n    [class]=\"scrimSkin()\"\n    class=\"afk-anchor clickableState\"\n    id=\"videoPlayOverlay\"\n  >\n    <div [class]=\"cardSkin()\">\n      @if (contentTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n        />\n      } @else {\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n        </div>\n        <div class=\"resume-box__text\">\n          <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n          <p>\n            No activity detected. Press 'Continue' if you wish to keep your\n            session active\n          </p>\n        </div>\n        <app-unreal-button\n          [fullWidth]=\"true\"\n          [data-testid]=\"'continue-session'\"\n          [class]=\"buttonSkin()\"\n          weight=\"primary\"\n          size=\"lg\"\n        >\n          Continue\n        </app-unreal-button>\n      }\n    </div>\n  </div>\n}\n", styles: [".afk-anchor{position:absolute;z-index:30;top:0;width:100%;height:100%}.afk-scrim{font-size:1.8em;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));background-color:var(--unreal-surface-scrim, rgba(100, 100, 100, .7))}.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(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.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}.text-number{color:var(--unreal-text-main, #1f2937);text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));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(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--unreal-text-secondary, var(--src-text-body-secondary, #6b7280))}.resume-box__text .resume-box__heading{color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "@if (isShowAfkPopup()) {\r\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\r\n    <div class=\"resume-box\">\r\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\r\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\r\n      </div>\r\n      <div class=\"resume-box__text\">\r\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\r\n        <p>\r\n          No activity detected. Press 'Continue' if you wish to keep your\r\n          session active\r\n        </p>\r\n      </div>\r\n      <app-unreal-button\r\n        [fullWidth]=\"true\"\r\n        [data-testid]=\"'continue-session'\"\r\n        weight=\"primary\"\r\n        size=\"lg\"\r\n      >\r\n        Continue\r\n      </app-unreal-button>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:#1f2937;text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
-        }] });
+            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent, NgTemplateOutlet], template: "@if (isShowAfkPopup()) {\n  <div\n    (click)=\"resetAfk()\"\n    [class]=\"scrimSkin()\"\n    class=\"afk-anchor clickableState\"\n    id=\"videoPlayOverlay\"\n  >\n    <div [class]=\"cardSkin()\">\n      @if (contentTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n        />\n      } @else {\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n        </div>\n        <div class=\"resume-box__text\">\n          <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n          <p>\n            No activity detected. Press 'Continue' if you wish to keep your\n            session active\n          </p>\n        </div>\n        <app-unreal-button\n          [fullWidth]=\"true\"\n          [data-testid]=\"'continue-session'\"\n          [class]=\"buttonSkin()\"\n          weight=\"primary\"\n          size=\"lg\"\n        >\n          Continue\n        </app-unreal-button>\n      }\n    </div>\n  </div>\n}\n", styles: [".afk-anchor{position:absolute;z-index:30;top:0;width:100%;height:100%}.afk-scrim{font-size:1.8em;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));background-color:var(--unreal-surface-scrim, rgba(100, 100, 100, .7))}.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(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.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}.text-number{color:var(--unreal-text-main, #1f2937);text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));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(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--unreal-text-secondary, var(--src-text-body-secondary, #6b7280))}.resume-box__text .resume-box__heading{color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
+        }], propDecorators: { uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
 
 class FreezeFrameComponent {
     constructor() {
@@ -7417,12 +7608,12 @@ class FreezeFrameComponent {
         this.combinedFreeze = this.#store.selectSignal(selectFreezeFrameCombinedDataUrl);
     }
     #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\r\n@let progress = freezeFrameProgressMessageFromVideo();\r\n\r\n<div class=\"freeze-images\">\r\n  @if (image) {\r\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\r\n  }\r\n\r\n  @if (progress) {\r\n    <div class=\"progress-status\">\r\n      {{ progress }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\r\n@let progress = freezeFrameProgressMessageFromVideo();\r\n\r\n<div class=\"freeze-images\">\r\n  @if (image) {\r\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\r\n  }\r\n\r\n  @if (progress) {\r\n    <div class=\"progress-status\">\r\n      {{ progress }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"] }]
         }] });
 
 class ImageLoadingSrcComponent {
@@ -7435,12 +7626,12 @@ class ImageLoadingSrcComponent {
     loadingImageError() {
         this.#store.dispatch(setLoadingImageSrc({ src: '' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\r\n@if (isLoaderScreenVisible()) {\r\n  <div class=\"preload\">\r\n    <div class=\"back\">\r\n      @if (image) {\r\n        <img\r\n          (error)=\"loadingImageError()\"\r\n          [ngSrc]=\"image\"\r\n          fill\r\n          loading=\"lazy\"\r\n          alt=\"image loading src\"\r\n        />\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:var(--unreal-surface-screen, #fff)}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\r\n@if (isLoaderScreenVisible()) {\r\n  <div class=\"preload\">\r\n    <div class=\"back\">\r\n      @if (image) {\r\n        <img\r\n          (error)=\"loadingImageError()\"\r\n          [ngSrc]=\"image\"\r\n          fill\r\n          loading=\"lazy\"\r\n          alt=\"image loading src\"\r\n        />\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"] }]
+            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:var(--unreal-surface-screen, #fff)}\n"] }]
         }] });
 
 class StatGraphComponent {
@@ -7521,17 +7712,60 @@ class StatGraphComponent {
         }
         this.draw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\r\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\r\n  <canvas #graph class=\"graph\"></canvas>\r\n</div>\r\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StatGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\r\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\r\n  <canvas #graph class=\"graph\"></canvas>\r\n</div>\r\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"] }]
+            args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], resize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
 
+class UnrealResumeSlotDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealResumeSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnrealResumeSlotDirective, isStandalone: true, selector: "ng-template[unrealResumeSlot]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealResumeSlotDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[unrealResumeSlot]' }]
+        }] });
+class UnrealAfkSlotDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealAfkSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnrealAfkSlotDirective, isStandalone: true, selector: "ng-template[unrealAfkSlot]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealAfkSlotDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[unrealAfkSlot]' }]
+        }] });
+class UnrealStatusSlotDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnrealStatusSlotDirective, isStandalone: true, selector: "ng-template[unrealStatusSlot]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusSlotDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[unrealStatusSlot]' }]
+        }] });
+
 class UnrealSpinnerComponent {
     constructor() {
         this.size = input(32, /* @ts-ignore */
@@ -7550,12 +7784,12 @@ class UnrealSpinnerComponent {
         this.viewBox = computed(() => `0 0 ${this.size()} ${this.size()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: UnrealSpinnerComponent, isStandalone: true, selector: "app-unreal-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  [attr.data-testid]=\"testID() || null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  class=\"unreal-spinner-container\"\r\n  role=\"status\"\r\n>\r\n  <svg\r\n    [attr.width]=\"size()\"\r\n    [attr.height]=\"size()\"\r\n    [attr.viewBox]=\"viewBox()\"\r\n    [style.--unrealSpinnerSize]=\"size()\"\r\n    class=\"unreal-spinner unreal-spinner--animation\"\r\n    version=\"1.1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    style=\"transform: rotate(-90deg)\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <circle\r\n      [attr.r]=\"radius()\"\r\n      [attr.cx]=\"center()\"\r\n      [attr.cy]=\"center()\"\r\n      [attr.stroke]=\"strokeColor()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      fill=\"transparent\"\r\n      stroke-linecap=\"round\"\r\n    ></circle>\r\n  </svg>\r\n</div>\r\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: UnrealSpinnerComponent, isStandalone: true, selector: "app-unreal-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  class=\"unreal-spinner-container\"\n  role=\"status\"\n>\n  <svg\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.--unrealSpinnerSize]=\"size()\"\n    class=\"unreal-spinner unreal-spinner--animation\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      [attr.r]=\"radius()\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.stroke]=\"strokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  [attr.data-testid]=\"testID() || null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  class=\"unreal-spinner-container\"\r\n  role=\"status\"\r\n>\r\n  <svg\r\n    [attr.width]=\"size()\"\r\n    [attr.height]=\"size()\"\r\n    [attr.viewBox]=\"viewBox()\"\r\n    [style.--unrealSpinnerSize]=\"size()\"\r\n    class=\"unreal-spinner unreal-spinner--animation\"\r\n    version=\"1.1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    style=\"transform: rotate(-90deg)\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <circle\r\n      [attr.r]=\"radius()\"\r\n      [attr.cx]=\"center()\"\r\n      [attr.cy]=\"center()\"\r\n      [attr.stroke]=\"strokeColor()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      fill=\"transparent\"\r\n      stroke-linecap=\"round\"\r\n    ></circle>\r\n  </svg>\r\n</div>\r\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"] }]
+            args: [{ selector: 'app-unreal-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  class=\"unreal-spinner-container\"\n  role=\"status\"\n>\n  <svg\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.--unrealSpinnerSize]=\"size()\"\n    class=\"unreal-spinner unreal-spinner--animation\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      [attr.r]=\"radius()\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.stroke]=\"strokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], strokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeColor", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class UnrealStatusComponent {
@@ -7568,16 +7802,29 @@ class UnrealStatusComponent {
         this.showLoadingProgress = this.#store.selectSignal(unrealFeature.selectShowLoadingProgress);
         this.isShowLoadingPercentsPopup = computed(() => this.showLoader() && this.showLoadingProgress(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isShowLoadingPercentsPopup" }] : /* istanbul ignore next */ []));
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.cardSkin = computed(() => resolveSkin(this.uiClasses(), 'statusCard', 'status-box'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardSkin" }] : /* istanbul ignore next */ []));
+        this.messageSkin = computed(() => resolveSkin(this.uiClasses(), 'statusMessage', 'status-box__message'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "messageSkin" }] : /* istanbul ignore next */ []));
+        // Created once: identity stays stable, reactivity lives in the signals.
+        this.slotContext = {
+            percents: this.smoothPercents,
+            message: computed(() => this.awsInstance()?.message),
+        };
     }
     #store;
     #loadingProgress;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (isShowLoadingPercentsPopup()) {\r\n  @let _awsInstance = awsInstance();\r\n  <div class=\"status-box\">\r\n    @if (_awsInstance?.message) {\r\n      <p>{{ _awsInstance?.message }}</p>\r\n    } @else {\r\n      <div class=\"status-box__message\">\r\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\r\n        {{ smoothPercents() }}%\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"], dependencies: [{ kind: "component", type: UnrealSpinnerComponent, selector: "app-unreal-spinner", inputs: ["size", "strokeWidth", "strokeColor", "data-testid", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", inputs: { uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div [class]=\"cardSkin()\" class=\"status-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div [class]=\"messageSkin()\">\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\n        {{ smoothPercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-anchor{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}.status-box{display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));border:none;border-radius:var(--unreal-radius-pill, var(--src-border-rounded-full, 9999px));box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814}.status-anchor p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"], dependencies: [{ kind: "component", type: UnrealSpinnerComponent, selector: "app-unreal-spinner", inputs: ["size", "strokeWidth", "strokeColor", "data-testid", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealSpinnerComponent], template: "@if (isShowLoadingPercentsPopup()) {\r\n  @let _awsInstance = awsInstance();\r\n  <div class=\"status-box\">\r\n    @if (_awsInstance?.message) {\r\n      <p>{{ _awsInstance?.message }}</p>\r\n    } @else {\r\n      <div class=\"status-box__message\">\r\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\r\n        {{ smoothPercents() }}%\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"] }]
-        }] });
+            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealSpinnerComponent, NgTemplateOutlet], template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div [class]=\"cardSkin()\" class=\"status-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div [class]=\"messageSkin()\">\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\n        {{ smoothPercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-anchor{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}.status-box{display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));border:none;border-radius:var(--unreal-radius-pill, var(--src-border-rounded-full, 9999px));box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814}.status-anchor p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"] }]
+        }], propDecorators: { uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
 
 class SafePipe {
     constructor() {
@@ -7607,10 +7854,10 @@ class SafePipe {
         // content instead of disabling framework security checks.
         return (this.sanitizer.sanitize(context, value) ?? '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SafePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SafePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safe',
@@ -7723,18 +7970,28 @@ class VideoStatsComponent {
             elements: this.elementsToShow(),
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\r\n  <div class=\"settings-container\">\r\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\r\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\r\n      <div class=\"forNerds\">\r\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"fpsTick()!\"\r\n              label=\"FPS (higher is better)\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"videoQP()!\"\r\n              label=\"QP (lower is better)\"\r\n              color=\"#D5ff07\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"bitrateTick()!\"\r\n              label=\"Bitrate\"\r\n              color=\"#D57F07\"\r\n            />\r\n          </li>\r\n        </div>\r\n        <div>\r\n          @for (graph of graphList(); track graph.key) {\r\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\r\n              <app-stat-graph\r\n                [label]=\"graph.key\"\r\n                [stat]=\"graph.stat()\"\r\n                [color]=\"graph.color\"\r\n              />\r\n            </li>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @for (el of videoStatus(); track el.key + $index) {\r\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\r\n          <span>{{ el.key }}: </span>{{ el.value | json }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (!collapsed()) {\r\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\r\n  }\r\n}\r\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"graph.stat()\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoStatsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoStatsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\r\n  <div class=\"settings-container\">\r\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\r\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\r\n      <div class=\"forNerds\">\r\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"fpsTick()!\"\r\n              label=\"FPS (higher is better)\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"videoQP()!\"\r\n              label=\"QP (lower is better)\"\r\n              color=\"#D5ff07\"\r\n            />\r\n          </li>\r\n          <li>\r\n            <app-stat-graph\r\n              [stat]=\"bitrateTick()!\"\r\n              label=\"Bitrate\"\r\n              color=\"#D57F07\"\r\n            />\r\n          </li>\r\n        </div>\r\n        <div>\r\n          @for (graph of graphList(); track graph.key) {\r\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\r\n              <app-stat-graph\r\n                [label]=\"graph.key\"\r\n                [stat]=\"graph.stat()\"\r\n                [color]=\"graph.color\"\r\n              />\r\n            </li>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @for (el of videoStatus(); track el.key + $index) {\r\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\r\n          <span>{{ el.key }}: </span>{{ el.value | json }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (!collapsed()) {\r\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\r\n  }\r\n}\r\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
+            args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"graph.stat()\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class ResumeStreamButtonComponent {
     #store;
     constructor() {
         this.#store = inject(Store);
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.cardSkin = computed(() => resolveSkin(this.uiClasses(), 'resumeCard', 'resume-box'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardSkin" }] : /* istanbul ignore next */ []));
+        this.textSkin = computed(() => resolveSkin(this.uiClasses(), 'resumeText', 'resume-box__text'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textSkin" }] : /* istanbul ignore next */ []));
+        this.buttonSkin = computed(() => resolveSkin(this.uiClasses(), 'resumeButton', 'connect-button'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonSkin" }] : /* istanbul ignore next */ []));
         this.streamConfig = this.#store.selectSignal(selectStreamConfig);
         this.isSecondStart = signal(this.streamConfig()?.autoStart && location.protocol === 'https:', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isSecondStart" }] : /* istanbul ignore next */ []));
@@ -7755,6 +8012,14 @@ class ResumeStreamButtonComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isAfkDisconnect" }] : /* istanbul ignore next */ []));
         this.cirrusConnected = this.#store.selectSignal(unrealFeature.selectCirrusConnected);
+        // Created once: the object identity must stay stable, reactivity lives in the
+        // signals it carries. Declared after the signals it references so field
+        // initialisation order holds.
+        this.slotContext = {
+            isSecondStart: this.isSecondStart,
+            isAfkDisconnect: this.isAfkDisconnect,
+            start: () => this.connect(),
+        };
         let wasConnected = this.cirrusConnected();
         effect(() => {
             const connected = this.cirrusConnected();
@@ -7770,13 +8035,13 @@ class ResumeStreamButtonComponent {
     disconnect() {
         this.isSecondStart.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\r\n  <div class=\"resume-box\">\r\n    @if (isSecondStart()) {\r\n      <div class=\"resume-box__text\">\r\n        Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\r\n        inactivity\r\n      </div>\r\n    }\r\n\r\n    <app-unreal-button\r\n      (clicked)=\"connect()\"\r\n      [fullWidth]=\"true\"\r\n      [data-testid]=\"'connect-button'\"\r\n      size=\"lg\"\r\n      weight=\"primary\"\r\n      class=\"connect-button\"\r\n    >\r\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\r\n    </app-unreal-button>\r\n  </div>\r\n}\r\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", inputs: { uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div [class]=\"cardSkin()\" class=\"resume-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else {\n      @if (isSecondStart()) {\n        <div [class]=\"textSkin()\">\n          Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\n          inactivity\n        </div>\n      }\n\n      <app-unreal-button\n        (clicked)=\"connect()\"\n        [fullWidth]=\"true\"\n        [data-testid]=\"'connect-button'\"\n        [class]=\"buttonSkin()\"\n        size=\"lg\"\n        weight=\"primary\"\n      >\n        {{ isSecondStart() ? 'Resume' : 'Start' }}\n      </app-unreal-button>\n    }\n  </div>\n}\n", styles: [".resume-anchor{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%);z-index:6}.resume-box{padding:16px;gap:12px;display:flex;flex-direction:column;align-items:center;border-radius:var(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.connect-button{width:100%}.resume-box__text{color:var(--unreal-text-secondary, var(--src-color-grey-500, #6b7280));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "@if (isShowResumeButton()) {\r\n  <div class=\"resume-box\">\r\n    @if (isSecondStart()) {\r\n      <div class=\"resume-box__text\">\r\n        Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\r\n        inactivity\r\n      </div>\r\n    }\r\n\r\n    <app-unreal-button\r\n      (clicked)=\"connect()\"\r\n      [fullWidth]=\"true\"\r\n      [data-testid]=\"'connect-button'\"\r\n      size=\"lg\"\r\n      weight=\"primary\"\r\n      class=\"connect-button\"\r\n    >\r\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\r\n    </app-unreal-button>\r\n  </div>\r\n}\r\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent, NgTemplateOutlet], template: "@if (isShowResumeButton()) {\n  <div [class]=\"cardSkin()\" class=\"resume-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else {\n      @if (isSecondStart()) {\n        <div [class]=\"textSkin()\">\n          Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\n          inactivity\n        </div>\n      }\n\n      <app-unreal-button\n        (clicked)=\"connect()\"\n        [fullWidth]=\"true\"\n        [data-testid]=\"'connect-button'\"\n        [class]=\"buttonSkin()\"\n        size=\"lg\"\n        weight=\"primary\"\n      >\n        {{ isSecondStart() ? 'Resume' : 'Start' }}\n      </app-unreal-button>\n    }\n  </div>\n}\n", styles: [".resume-anchor{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%);z-index:6}.resume-box{padding:16px;gap:12px;display:flex;flex-direction:column;align-items:center;border-radius:var(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.connect-button{width:100%}.resume-box__text{color:var(--unreal-text-secondary, var(--src-color-grey-500, #6b7280));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
 
 class IntroSrcComponent {
     #store;
@@ -7840,12 +8105,12 @@ class IntroSrcComponent {
         sourceElement.addEventListener('error', () => this.#store.dispatch(resetIntroSrc()));
         videoContainer.appendChild(videoElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\r\n@if (image) {\r\n  <div class=\"backImage\">\r\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\r\n  </div>\r\n} @else if (videoIntroSrc()) {\r\n  <div #videoPlayerCover class=\"backVideo\"></div>\r\n}\r\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IntroSrcComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IntroSrcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\r\n@if (image) {\r\n  <div class=\"backImage\">\r\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\r\n  </div>\r\n} @else if (videoIntroSrc()) {\r\n  <div #videoPlayerCover class=\"backVideo\"></div>\r\n}\r\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
         }], ctorParameters: () => [], propDecorators: { videoElement: [{ type: i0.ViewChild, args: ['videoPlayerCover', { isSignal: true }] }] } });
 
 class UnrealSceneComponent {
@@ -7879,6 +8144,15 @@ class UnrealSceneComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolutionSize" }] : /* istanbul ignore next */ []));
         this.changeMouseOverScene = output();
+        /** Host classes replacing the built-in decoration of the scene overlays. */
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.resumeSlot = contentChild(UnrealResumeSlotDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resumeSlot" }] : /* istanbul ignore next */ []));
+        this.afkSlot = contentChild(UnrealAfkSlotDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "afkSlot" }] : /* istanbul ignore next */ []));
+        this.statusSlot = contentChild(UnrealStatusSlotDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statusSlot" }] : /* istanbul ignore next */ []));
         this.videoElement = viewChild('videoContainer', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
         this.resolutionValues$ = toObservable(this.resolutionSize);
@@ -7976,7 +8250,7 @@ class UnrealSceneComponent {
             this.height = height;
         }));
         const resizeRequired$ = merge(this.actions$.pipe(ofType(videoStreamInitialized)), fromEvent(window, 'resize'));
-        const videoStreamSizeChanged$ = this.videoService.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
+        const videoStreamSizeChanged$ = this.videoService.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map((stats) => ({
             w: stats.aggregatedStats.frameWidth || 0,
             h: stats.aggregatedStats.frameHeight || 0,
         })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
@@ -7985,8 +8259,8 @@ class UnrealSceneComponent {
             .pipe(debounceTime(DEBOUNCE_TO_MANY_RESIZE_CALLS), switchMap(() => {
             const key = Math.random();
             // Poll 3 times to capture late-arriving DOM measurements after layout settles
-            return timer(0, 300).pipe(take(3), map$1(() => key));
-        }), map$1((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
+            return timer(0, 300).pipe(take(3), map(() => key));
+        }), map((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
             fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD) &&
             previous.key === current.key), tap((size) => this.adaptVideo(size)), 
         // Key excluded: only dispatch when actual pixel dimensions change
@@ -8065,10 +8339,10 @@ class UnrealSceneComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, resolutionSize: { classPropertyName: "resolutionSize", publicName: "resolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\r\n  <div #videoContainer id=\"player\"></div>\r\n\r\n  <app-intro-src />\r\n  <app-image-loading-src />\r\n  <app-resume-stream-button />\r\n  <app-unreal-status />\r\n  <app-freeze-frame />\r\n  <app-afk-timeout-modal />\r\n\r\n  <ng-content select=\"app-pdf\"></ng-content>\r\n  <ng-content select=\"app-show-case\"></ng-content>\r\n\r\n  @if (isDevMode) {\r\n    <app-video-stats />\r\n  }\r\n</div>\r\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0D%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, resolutionSize: { classPropertyName: "resolutionSize", publicName: "resolutionSize", isSignal: true, isRequired: false, transformFunction: null }, uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "contextmenu": "onContextMenu($event)" } }, queries: [{ propertyName: "resumeSlot", first: true, predicate: UnrealResumeSlotDirective, descendants: true, isSignal: true }, { propertyName: "afkSlot", first: true, predicate: UnrealAfkSlotDirective, descendants: true, isSignal: true }, { propertyName: "statusSlot", first: true, predicate: UnrealStatusSlotDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-freeze-frame />\n  <app-resume-stream-button\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"resumeSlot()?.template ?? null\"\n  />\n  <app-unreal-status\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"statusSlot()?.template ?? null\"\n  />\n  <app-afk-timeout-modal\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"afkSlot()?.template ?? null\"\n  />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal", inputs: ["uiClasses", "contentTemplate"] }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status", inputs: ["uiClasses", "contentTemplate"] }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button", inputs: ["uiClasses", "contentTemplate"] }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSceneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSceneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AfkTimeoutModalComponent,
@@ -8078,8 +8352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         ResumeStreamButtonComponent,
                         ImageLoadingSrcComponent,
                         IntroSrcComponent,
-                    ], template: "<div class=\"frame unreal-container\">\r\n  <div #videoContainer id=\"player\"></div>\r\n\r\n  <app-intro-src />\r\n  <app-image-loading-src />\r\n  <app-resume-stream-button />\r\n  <app-unreal-status />\r\n  <app-freeze-frame />\r\n  <app-afk-timeout-modal />\r\n\r\n  <ng-content select=\"app-pdf\"></ng-content>\r\n  <ng-content select=\"app-show-case\"></ng-content>\r\n\r\n  @if (isDevMode) {\r\n    <app-video-stats />\r\n  }\r\n</div>\r\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0D%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], resolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolutionSize", required: false }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], onMouseOver: [{
+                    ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-freeze-frame />\n  <app-resume-stream-button\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"resumeSlot()?.template ?? null\"\n  />\n  <app-unreal-status\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"statusSlot()?.template ?? null\"\n  />\n  <app-afk-timeout-modal\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"afkSlot()?.template ?? null\"\n  />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], resolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolutionSize", required: false }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], resumeSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UnrealResumeSlotDirective), { isSignal: true }] }], afkSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UnrealAfkSlotDirective), { isSignal: true }] }], statusSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UnrealStatusSlotDirective), { isSignal: true }] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
             }], onMouseOut: [{
@@ -8138,5 +8412,5 @@ function provideUnrealModule() {
  * Generated bundle index. Do not edit.
  */
 
-export { AFKService, AUTO_HIGH_RESOLUTION_IDLE_MS, AfkTimeoutModalComponent, AggregatorService, AnalyticsService, AnswerHandler, CommandTelemetryService, ConfigHandler, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DESTROY_DISCONNECT_REASONS, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, INNER_RETRY_LIMIT, INSTANCE_READY_TIMEOUT, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, LatencyTimings, LoadingProgressService, MINIMAL_FPS, MIN_CONTAINER_SIZE, MessageType, MouseButton, MouseButtonsMask, OUTER_RETRY_DELAY, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PlayerCountHandler, RECONNECT_CONFIG, REGION_PING_ACCURATE_SAMPLES, REGION_PING_BACKGROUND_REFRESH_DELAY_MS, REGION_PING_CACHE_KEY, REGION_PING_CACHE_TTL_MS, REGION_PING_WARMUP_DEADLINE_MS, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_AUDIO_ID, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamAdoptionService, StreamStatusTelemetryService, StreamStatusTelemetryService2, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, UnrealCommunicatorService, UnrealEffects, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_RETRY_PER_INSTANCE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, answerSent, changeStatusMainVideoOnScene, changeStreamResolutionAction, commandCompleted, commandStarted, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToPercents, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeValuesUniversal, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, isMetaboxMode, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, provideUnrealState, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetUserInactivityTimeout, resetWarnTimeout, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsFullyConnected, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectUserInactivityDetected, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setUserInactivityTimeout, setViewportNotReady, setViewportReady, showLoadingProgress, showResumeStreamPopup, showUnrealErrorMessage, showUserInactivityTimeoutPopup, signalingRetryAttempted, startStream, streamAdopted, trackMixpanelEvent, trackTelemetryData, uint8ToBase64, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
+export { AFKService, AUTO_HIGH_RESOLUTION_IDLE_MS, AfkTimeoutModalComponent, AggregatorService, AnalyticsService, AnswerHandler, CommandTelemetryService, ConfigHandler, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DESTROY_DISCONNECT_REASONS, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FileHandlerService, FileReceiverService, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, INNER_RETRY_LIMIT, INSTANCE_READY_TIMEOUT, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, LatencyTimings, LoadingProgressService, MINIMAL_FPS, MIN_CONTAINER_SIZE, MessageType, MouseButton, MouseButtonsMask, OUTER_RETRY_DELAY, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PlayerCountHandler, RECONNECT_CONFIG, REGION_PING_ACCURATE_SAMPLES, REGION_PING_BACKGROUND_REFRESH_DELAY_MS, REGION_PING_CACHE_KEY, REGION_PING_CACHE_TTL_MS, REGION_PING_WARMUP_DEADLINE_MS, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_AUDIO_ID, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamAdoptionService, StreamStatusTelemetryService, StreamStatusTelemetryService2, SubService, ToClientMessage, UNREAL_CONFIG, UnrealAfkSlotDirective, UnrealCallbackService, UnrealCommunicatorService, UnrealEffects, UnrealResumeSlotDirective, UnrealSceneComponent, UnrealStatusMessage, UnrealStatusSlotDirective, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_RETRY_PER_INSTANCE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, answerSent, changeStatusMainVideoOnScene, changeStreamResolutionAction, commandCompleted, commandStarted, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToPercents, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeValuesUniversal, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, isMetaboxMode, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, provideUnrealState, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetUserInactivityTimeout, resetWarnTimeout, resolveSkin, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsFullyConnected, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectUserInactivityDetected, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setUserInactivityTimeout, setViewportNotReady, setViewportReady, showLoadingProgress, showResumeStreamPopup, showUnrealErrorMessage, showUserInactivityTimeoutPopup, signalingRetryAttempted, startStream, streamAdopted, trackMixpanelEvent, trackTelemetryData, uint8ToBase64, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map