@3dsource/angular-unreal-module 0.0.17 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Copyright (c) 2025 3dsource
|
|
2
|
+
All Rights Reserved.
|
|
3
|
+
|
|
4
|
+
This software and associated documentation files (the “Software”) are proprietary
|
|
5
|
+
and confidential. Unauthorized copying, modification, distribution, or any other
|
|
6
|
+
use of the Software, in whole or in part, without the prior written consent of
|
|
7
|
+
the copyright holder is strictly prohibited.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
10
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
11
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
12
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
13
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
14
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,36 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @3dsource/angular-unreal-module
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
### An unreal scene standalone component for a metabox studio and configurators for communicate with unreal applications
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
### peer dependencies
|
|
8
|
+
|
|
9
|
+
_List of peer dependencies_
|
|
10
|
+
|
|
11
|
+
```json
|
|
12
|
+
{
|
|
13
|
+
"@3dsource/source-ui-native": "^1.0.7",
|
|
14
|
+
"@3dsource/types-unreal": "^0.0.1",
|
|
15
|
+
"@3dsource/utils": "^1.0.13",
|
|
16
|
+
"@angular/cdk": "^19.2.0",
|
|
17
|
+
"@angular/common": "^19.2.0",
|
|
18
|
+
"@angular/core": "^19.2.0",
|
|
19
|
+
"@angular/forms": "^19.2.0",
|
|
20
|
+
"@ngrx/effects": "^19.1.0",
|
|
21
|
+
"@ngrx/operators": "^19.1.0",
|
|
22
|
+
"@ngrx/store": "^19.1.0"
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```shell
|
|
27
|
+
npx install-peerdeps @3dsource/angular-unreal-module
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### library
|
|
31
|
+
|
|
32
|
+
```shell
|
|
33
|
+
npm i @3dsource/angular-unreal-module
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
@@ -5,7 +5,7 @@ import { createAction, props, createReducer, on, createFeature, Store, createSel
|
|
|
5
5
|
import { Actions, createEffect, ofType } from '@ngrx/effects';
|
|
6
6
|
import { skip, share, merge, timer, of, Subject, combineLatest, switchMap, timeout, retryWhen, take, fromEvent, from, tap as tap$1, interval, startWith, combineLatestWith, takeUntil as takeUntil$1, auditTime, map as map$1, EMPTY, debounceTime as debounceTime$1, scan, Observable, BehaviorSubject, first as first$1, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
|
|
7
7
|
import { concatLatestFrom } from '@ngrx/operators';
|
|
8
|
-
import { Falsy, Truthy, Logger, generateUuid, tapLog, COLOR_CODES, Signal, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, isEmpty, lerp,
|
|
8
|
+
import { Falsy, Truthy, Logger, generateUuid, tapLog, COLOR_CODES, calculateMedian, clampf, Signal, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, isEmpty, lerp, smoothTransition, getCanvasCached, getSnapshot, whereNot, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB, fitIntoRectangle } from '@3dsource/utils';
|
|
9
9
|
import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
10
10
|
import { HttpClient } from '@angular/common/http';
|
|
11
11
|
import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
@@ -1564,6 +1564,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
1564
1564
|
type: Injectable
|
|
1565
1565
|
}] });
|
|
1566
1566
|
|
|
1567
|
+
class DataFlowMonitor {
|
|
1568
|
+
/**
|
|
1569
|
+
* Initializes the DataFlowMonitor monitor.
|
|
1570
|
+
* @param yellowFlagThresholdPercentage - The percentage drop to trigger a YELLOW warning (default: 15%).
|
|
1571
|
+
* @param redFlagThresholdPercentage - The percentage drop to trigger a RED warning (default: 30%).
|
|
1572
|
+
* @param historyBufferLength - buffer length (default: 100).
|
|
1573
|
+
* @param splitPoint - The point at which to split the history buffer into two halves (default: 0.5).
|
|
1574
|
+
*/
|
|
1575
|
+
constructor(yellowFlagThresholdPercentage = 15, redFlagThresholdPercentage = 30, historyBufferLength = 100, splitPoint = 0.5) {
|
|
1576
|
+
this.yellowFlagThresholdPercentage = yellowFlagThresholdPercentage;
|
|
1577
|
+
this.redFlagThresholdPercentage = redFlagThresholdPercentage;
|
|
1578
|
+
this.historyBufferLength = historyBufferLength;
|
|
1579
|
+
this.splitPoint = splitPoint;
|
|
1580
|
+
this.dataHistory = [];
|
|
1581
|
+
}
|
|
1582
|
+
reset() {
|
|
1583
|
+
this.dataHistory.length = 0;
|
|
1584
|
+
}
|
|
1585
|
+
config(data) {
|
|
1586
|
+
this.reset();
|
|
1587
|
+
this.yellowFlagThresholdPercentage = data.yellowFlag;
|
|
1588
|
+
this.redFlagThresholdPercentage = data.redFlag;
|
|
1589
|
+
}
|
|
1590
|
+
/**
|
|
1591
|
+
* Adds a new bitrate measurement and checks for significant drops.
|
|
1592
|
+
* @param currentValue - The current bitrate in kbps.
|
|
1593
|
+
* @returns BitrateCheckResult indicating if a drop was detected.
|
|
1594
|
+
*/
|
|
1595
|
+
addValue(currentValue) {
|
|
1596
|
+
if (isNaN(currentValue) || currentValue < 1) {
|
|
1597
|
+
return {};
|
|
1598
|
+
}
|
|
1599
|
+
const historyLength = this.dataHistory.length;
|
|
1600
|
+
if (historyLength > this.historyBufferLength) {
|
|
1601
|
+
this.dataHistory.shift();
|
|
1602
|
+
}
|
|
1603
|
+
this.dataHistory.push(currentValue);
|
|
1604
|
+
if (historyLength < this.historyBufferLength) {
|
|
1605
|
+
this.dataHistory.length = this.historyBufferLength;
|
|
1606
|
+
this.dataHistory.fill(currentValue, 0, this.historyBufferLength);
|
|
1607
|
+
}
|
|
1608
|
+
const splitIndex = Math.floor(historyLength * this.splitPoint);
|
|
1609
|
+
const firstHalf = this.dataHistory.slice(0, splitIndex);
|
|
1610
|
+
const secondHalf = this.dataHistory.slice(splitIndex);
|
|
1611
|
+
const firstHalfMedian = calculateMedian(firstHalf);
|
|
1612
|
+
const secondHalfMedian = calculateMedian(secondHalf);
|
|
1613
|
+
const dropPercentage = clampf(0, 100, ((firstHalfMedian - secondHalfMedian) / firstHalfMedian) * 100);
|
|
1614
|
+
const isRedFlag = dropPercentage >= this.redFlagThresholdPercentage;
|
|
1615
|
+
if (dropPercentage >= this.yellowFlagThresholdPercentage) {
|
|
1616
|
+
return {
|
|
1617
|
+
config: {
|
|
1618
|
+
yellowFlagThresholdPercentage: this.yellowFlagThresholdPercentage,
|
|
1619
|
+
redFlagThresholdPercentage: this.redFlagThresholdPercentage,
|
|
1620
|
+
historyBufferLength: this.historyBufferLength,
|
|
1621
|
+
splitPoint: this.splitPoint,
|
|
1622
|
+
},
|
|
1623
|
+
isDropDetected: true,
|
|
1624
|
+
dropPercentage,
|
|
1625
|
+
dataHistory: [...this.dataHistory],
|
|
1626
|
+
activeMedian: secondHalfMedian,
|
|
1627
|
+
quality: isRedFlag ? 'red' : 'orange',
|
|
1628
|
+
message: `Significant flow drop detected: ${dropPercentage.toFixed(2)}% (from ${firstHalfMedian} to ${secondHalfMedian})`,
|
|
1629
|
+
};
|
|
1630
|
+
}
|
|
1631
|
+
return {
|
|
1632
|
+
config: {
|
|
1633
|
+
yellowFlagThresholdPercentage: this.yellowFlagThresholdPercentage,
|
|
1634
|
+
redFlagThresholdPercentage: this.redFlagThresholdPercentage,
|
|
1635
|
+
historyBufferLength: this.historyBufferLength,
|
|
1636
|
+
splitPoint: this.splitPoint,
|
|
1637
|
+
},
|
|
1638
|
+
isDropDetected: false,
|
|
1639
|
+
dropPercentage,
|
|
1640
|
+
dataHistory: [...this.dataHistory],
|
|
1641
|
+
activeMedian: secondHalfMedian,
|
|
1642
|
+
quality: 'lime',
|
|
1643
|
+
message: 'Stable flow',
|
|
1644
|
+
};
|
|
1645
|
+
}
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1567
1648
|
/**
|
|
1568
1649
|
* Default LBM Filter Parameters
|
|
1569
1650
|
*/
|
|
@@ -1856,7 +1937,8 @@ class AggregatorService extends SubService {
|
|
|
1856
1937
|
}
|
|
1857
1938
|
removeLoadScreen() {
|
|
1858
1939
|
document
|
|
1859
|
-
.getElementById(this.#unrealInitialConfig?.screenLockerContainerId ||
|
|
1940
|
+
.getElementById(this.#unrealInitialConfig?.screenLockerContainerId ||
|
|
1941
|
+
SCREEN_LOCKER_CONTAINER_ID)
|
|
1860
1942
|
?.remove();
|
|
1861
1943
|
}
|
|
1862
1944
|
startListenCallbacks() {
|
|
@@ -3006,7 +3088,7 @@ class UnrealErrorModalComponent {
|
|
|
3006
3088
|
this.dialogRef.close();
|
|
3007
3089
|
}
|
|
3008
3090
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3009
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\n <div class=\"src-modal__header\">\n <div\n class=\"src-modal__title\"\n [attr.data-testid]=\"'unreal-error-header-title'\"\n >\n Warning\n </div>\n </div>\n <div class=\"src-modal__body\">\n <div>{{ dialogData.content }}</div>\n </div>\n <div class=\"src-modal__footer\">\n <src-button [colorScheme]=\"'secondary'\" (onClick)=\"close()\">\n Ok\n </src-button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "
|
|
3091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"src-modal src-modal--small\">\n <div class=\"src-modal__header\">\n <div\n class=\"src-modal__title\"\n [attr.data-testid]=\"'unreal-error-header-title'\"\n >\n Warning\n </div>\n </div>\n <div class=\"src-modal__body\">\n <div>{{ dialogData.content }}</div>\n </div>\n <div class=\"src-modal__footer\">\n <src-button [colorScheme]=\"'secondary'\" (onClick)=\"close()\">\n Ok\n </src-button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3010
3092
|
}
|
|
3011
3093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
|
|
3012
3094
|
type: Component,
|
|
@@ -3312,87 +3394,6 @@ function decodeData(anyData) {
|
|
|
3312
3394
|
}
|
|
3313
3395
|
}
|
|
3314
3396
|
|
|
3315
|
-
class DataFlowMonitor {
|
|
3316
|
-
/**
|
|
3317
|
-
* Initializes the DataFlowMonitor monitor.
|
|
3318
|
-
* @param yellowFlagThresholdPercentage - The percentage drop to trigger a YELLOW warning (default: 15%).
|
|
3319
|
-
* @param redFlagThresholdPercentage - The percentage drop to trigger a RED warning (default: 30%).
|
|
3320
|
-
* @param historyBufferLength - buffer length (default: 100).
|
|
3321
|
-
* @param splitPoint - The point at which to split the history buffer into two halves (default: 0.5).
|
|
3322
|
-
*/
|
|
3323
|
-
constructor(yellowFlagThresholdPercentage = 15, redFlagThresholdPercentage = 30, historyBufferLength = 100, splitPoint = 0.5) {
|
|
3324
|
-
this.yellowFlagThresholdPercentage = yellowFlagThresholdPercentage;
|
|
3325
|
-
this.redFlagThresholdPercentage = redFlagThresholdPercentage;
|
|
3326
|
-
this.historyBufferLength = historyBufferLength;
|
|
3327
|
-
this.splitPoint = splitPoint;
|
|
3328
|
-
this.dataHistory = [];
|
|
3329
|
-
}
|
|
3330
|
-
reset() {
|
|
3331
|
-
this.dataHistory.length = 0;
|
|
3332
|
-
}
|
|
3333
|
-
config(data) {
|
|
3334
|
-
this.reset();
|
|
3335
|
-
this.yellowFlagThresholdPercentage = data.yellowFlag;
|
|
3336
|
-
this.redFlagThresholdPercentage = data.redFlag;
|
|
3337
|
-
}
|
|
3338
|
-
/**
|
|
3339
|
-
* Adds a new bitrate measurement and checks for significant drops.
|
|
3340
|
-
* @param currentValue - The current bitrate in kbps.
|
|
3341
|
-
* @returns BitrateCheckResult indicating if a drop was detected.
|
|
3342
|
-
*/
|
|
3343
|
-
addValue(currentValue) {
|
|
3344
|
-
if (isNaN(currentValue) || currentValue < 1) {
|
|
3345
|
-
return {};
|
|
3346
|
-
}
|
|
3347
|
-
const historyLength = this.dataHistory.length;
|
|
3348
|
-
if (historyLength > this.historyBufferLength) {
|
|
3349
|
-
this.dataHistory.shift();
|
|
3350
|
-
}
|
|
3351
|
-
this.dataHistory.push(currentValue);
|
|
3352
|
-
if (historyLength < this.historyBufferLength) {
|
|
3353
|
-
this.dataHistory.length = this.historyBufferLength;
|
|
3354
|
-
this.dataHistory.fill(currentValue, 0, this.historyBufferLength);
|
|
3355
|
-
}
|
|
3356
|
-
const splitIndex = Math.floor(historyLength * this.splitPoint);
|
|
3357
|
-
const firstHalf = this.dataHistory.slice(0, splitIndex);
|
|
3358
|
-
const secondHalf = this.dataHistory.slice(splitIndex);
|
|
3359
|
-
const firstHalfMedian = calculateMedian(firstHalf);
|
|
3360
|
-
const secondHalfMedian = calculateMedian(secondHalf);
|
|
3361
|
-
const dropPercentage = clampf(0, 100, ((firstHalfMedian - secondHalfMedian) / firstHalfMedian) * 100);
|
|
3362
|
-
const isRedFlag = dropPercentage >= this.redFlagThresholdPercentage;
|
|
3363
|
-
if (dropPercentage >= this.yellowFlagThresholdPercentage) {
|
|
3364
|
-
return {
|
|
3365
|
-
config: {
|
|
3366
|
-
yellowFlagThresholdPercentage: this.yellowFlagThresholdPercentage,
|
|
3367
|
-
redFlagThresholdPercentage: this.redFlagThresholdPercentage,
|
|
3368
|
-
historyBufferLength: this.historyBufferLength,
|
|
3369
|
-
splitPoint: this.splitPoint,
|
|
3370
|
-
},
|
|
3371
|
-
isDropDetected: true,
|
|
3372
|
-
dropPercentage,
|
|
3373
|
-
dataHistory: [...this.dataHistory],
|
|
3374
|
-
activeMedian: secondHalfMedian,
|
|
3375
|
-
quality: isRedFlag ? 'red' : 'orange',
|
|
3376
|
-
message: `Significant flow drop detected: ${dropPercentage.toFixed(2)}% (from ${firstHalfMedian} to ${secondHalfMedian})`,
|
|
3377
|
-
};
|
|
3378
|
-
}
|
|
3379
|
-
return {
|
|
3380
|
-
config: {
|
|
3381
|
-
yellowFlagThresholdPercentage: this.yellowFlagThresholdPercentage,
|
|
3382
|
-
redFlagThresholdPercentage: this.redFlagThresholdPercentage,
|
|
3383
|
-
historyBufferLength: this.historyBufferLength,
|
|
3384
|
-
splitPoint: this.splitPoint,
|
|
3385
|
-
},
|
|
3386
|
-
isDropDetected: false,
|
|
3387
|
-
dropPercentage,
|
|
3388
|
-
dataHistory: [...this.dataHistory],
|
|
3389
|
-
activeMedian: secondHalfMedian,
|
|
3390
|
-
quality: 'lime',
|
|
3391
|
-
message: 'Stable flow',
|
|
3392
|
-
};
|
|
3393
|
-
}
|
|
3394
|
-
}
|
|
3395
|
-
|
|
3396
3397
|
/**
|
|
3397
3398
|
* UnrealInternalSignalEvents commands list wrapper listener
|
|
3398
3399
|
* @param event
|
|
@@ -3850,7 +3851,7 @@ class ClickableOverlayComponent {
|
|
|
3850
3851
|
this.state = toSignal(fromSignal(UnrealInternalSignalEvents.ClickableOverlay).pipe(map((data) => (typeof data === 'object' ? data : null))));
|
|
3851
3852
|
}
|
|
3852
3853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ClickableOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ClickableOverlayComponent, isStandalone: true, selector: "app-clickable-overlay", ngImport: i0, template: "@if (state()) {\n <div\n (click)=\"state()?.onOverlayClick()\"\n [ngClass]=\"state()?.className\"\n id=\"videoPlayOverlay\"\n >\n @if (state()?.isActivityDetected) {\n <div class=\"resume-box\">\n <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n <div [innerHTML]=\"state()?.message\" class=\"text-number\"></div>\n </div>\n <div class=\"resume-box__text\">\n <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n <p>\n No activity detected. Press 'Continue' if you wish to keep your\n session active\n </p>\n </div>\n <src-button\n [colorScheme]=\"'primary'\"\n [isFullWidth]=\"true\"\n [size]=\"'large'\"\n [data-testid]=\"'continue-session'\"\n >\n Continue\n </src-button>\n </div>\n }\n </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--inputFont);color:var(--colour4);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--colors-text-default, #1f2937);text-align:center;font-family:var(--font-family-sans);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px;color:var(--colors-gray-color-gray-500, #6b7280)}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "
|
|
3854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ClickableOverlayComponent, isStandalone: true, selector: "app-clickable-overlay", ngImport: i0, template: "@if (state()) {\n <div\n (click)=\"state()?.onOverlayClick()\"\n [ngClass]=\"state()?.className\"\n id=\"videoPlayOverlay\"\n >\n @if (state()?.isActivityDetected) {\n <div class=\"resume-box\">\n <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n <div [innerHTML]=\"state()?.message\" class=\"text-number\"></div>\n </div>\n <div class=\"resume-box__text\">\n <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n <p>\n No activity detected. Press 'Continue' if you wish to keep your\n session active\n </p>\n </div>\n <src-button\n [colorScheme]=\"'primary'\"\n [isFullWidth]=\"true\"\n [size]=\"'large'\"\n [data-testid]=\"'continue-session'\"\n >\n Continue\n </src-button>\n </div>\n }\n </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--inputFont);color:var(--colour4);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:var(--colors-text-default, #1f2937);text-align:center;font-family:var(--font-family-sans);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--font-family-sans);font-size:var(--fs-base);font-style:normal;font-weight:400;line-height:24px;color:var(--colors-gray-color-gray-500, #6b7280)}.resume-box__text .resume-box__heading{color:var(--color-text-default, #1f2937);text-align:center;font-family:var(--font-family-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3854
3855
|
}
|
|
3855
3856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ClickableOverlayComponent, decorators: [{
|
|
3856
3857
|
type: Component,
|
|
@@ -3913,7 +3914,7 @@ class LowBandwidthModalComponent {
|
|
|
3913
3914
|
this.dialogRef.close(value || false);
|
|
3914
3915
|
}
|
|
3915
3916
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LowBandwidthModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3916
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n <header class=\"src-modal__header\">\n <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n Unstable Connection\n </h6>\n </header>\n <section class=\"src-modal__body\">\n <div\n [innerHtml]=\"\n 'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n | safe: 'html'\n \"\n class=\"src-modal__scroll-box\"\n ></div>\n </section>\n <footer class=\"src-modal__footer\">\n <div class=\"src-modal__buttons\">\n <src-button\n (onClick)=\"close(true)\"\n [data-testid]=\"'switch-to-interactive-mode'\"\n >\n Switch\n </src-button>\n\n <src-button\n (onClick)=\"close()\"\n [data-testid]=\"'close-lbm-modal'\"\n colorScheme=\"primary\"\n >\n Ok\n </src-button>\n </div>\n </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"], dependencies: [{ kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "
|
|
3917
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: LowBandwidthModalComponent, isStandalone: true, selector: "app-low-bandwidth-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'low-bandwidth'\" class=\"src-modal src-modal--lbm\">\n <header class=\"src-modal__header\">\n <h6 [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n Unstable Connection\n </h6>\n </header>\n <section class=\"src-modal__body\">\n <div\n [innerHtml]=\"\n 'Fluid Interactivity Modes were disabled due to an unstable connection. Showcase Gallery Mode is enabled. To regain full functionality, switch to Interactive Mode.'\n | safe: 'html'\n \"\n class=\"src-modal__scroll-box\"\n ></div>\n </section>\n <footer class=\"src-modal__footer\">\n <div class=\"src-modal__buttons\">\n <src-button\n (onClick)=\"close(true)\"\n [data-testid]=\"'switch-to-interactive-mode'\"\n >\n Switch\n </src-button>\n\n <src-button\n (onClick)=\"close()\"\n [data-testid]=\"'close-lbm-modal'\"\n colorScheme=\"primary\"\n >\n Ok\n </src-button>\n </div>\n </footer>\n</div>\n", styles: [".src-modal--lbm{width:360px}.src-modal--lbm .src-modal__body{font-size:14px;line-height:24px}.src-modal--lbm .src-modal__buttons{display:flex;gap:8px}\n"], dependencies: [{ kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3917
3918
|
}
|
|
3918
3919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LowBandwidthModalComponent, decorators: [{
|
|
3919
3920
|
type: Component,
|
|
@@ -3957,7 +3958,7 @@ class AfkRestartScreenLockerComponent {
|
|
|
3957
3958
|
this.playCallBack = null;
|
|
3958
3959
|
}
|
|
3959
3960
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AfkRestartScreenLockerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AfkRestartScreenLockerComponent, isStandalone: true, selector: "app-afk-restart-screen-locker", ngImport: i0, template: "@if (!isViewportReady()) {\n <div class=\"preload\">\n <div class=\"back\">\n @if (imageLoadingSrc()) {\n <img\n [ngSrc]=\"imageLoadingSrc()!\"\n fill\n loading=\"lazy\"\n alt=\"image loading src\"\n />\n }\n </div>\n\n @if (showReconnectPopup()) {\n <div class=\"stream-message-wrapper\">\n <div class=\"resume-box\">\n @if (isSecondStart()) {\n <div class=\"resume-box__text\">\n Your stream has been paused due to inactivity\n </div>\n }\n\n <src-button\n (onClick)=\"connect()\"\n [isFullWidth]=\"true\"\n [size]=\"'large'\"\n [colorScheme]=\"'primary'\"\n [data-testid]=\"'connect-button'\"\n class=\"connect-button\"\n >\n {{ isSecondStart() ? 'Resume' : 'Start' }}\n </src-button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .stream-message-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:3;display:flex;align-items:center;justify-content:center}.resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box__text{color:var(--color-gray-500, #6b7280);text-align:center;font-family:var(--font-family-sans);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.preload .message-loader{position:absolute;bottom:20px;left:50%;display:block;margin:auto;transform:translate(-50%)}.preload .message-loader>p{margin:0;line-height:1;transition:all ease .35s}.preload .message-loader>p span{font-size:10px;transition:all ease .35s}@media (min-width: 1900px){.preload .message-loader{bottom:40px}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "
|
|
3961
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AfkRestartScreenLockerComponent, isStandalone: true, selector: "app-afk-restart-screen-locker", ngImport: i0, template: "@if (!isViewportReady()) {\n <div class=\"preload\">\n <div class=\"back\">\n @if (imageLoadingSrc()) {\n <img\n [ngSrc]=\"imageLoadingSrc()!\"\n fill\n loading=\"lazy\"\n alt=\"image loading src\"\n />\n }\n </div>\n\n @if (showReconnectPopup()) {\n <div class=\"stream-message-wrapper\">\n <div class=\"resume-box\">\n @if (isSecondStart()) {\n <div class=\"resume-box__text\">\n Your stream has been paused due to inactivity\n </div>\n }\n\n <src-button\n (onClick)=\"connect()\"\n [isFullWidth]=\"true\"\n [size]=\"'large'\"\n [colorScheme]=\"'primary'\"\n [data-testid]=\"'connect-button'\"\n class=\"connect-button\"\n >\n {{ isSecondStart() ? 'Resume' : 'Start' }}\n </src-button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .stream-message-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:3;display:flex;align-items:center;justify-content:center}.resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--br-medium, 8px);background:var(--color-bg-default, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box__text{color:var(--color-gray-500, #6b7280);text-align:center;font-family:var(--font-family-sans);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.preload .message-loader{position:absolute;bottom:20px;left:50%;display:block;margin:auto;transform:translate(-50%)}.preload .message-loader>p{margin:0;line-height:1;transition:all ease .35s}.preload .message-loader>p span{font-size:10px;transition:all ease .35s}@media (min-width: 1900px){.preload .message-loader{bottom:40px}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3961
3962
|
}
|
|
3962
3963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AfkRestartScreenLockerComponent, decorators: [{
|
|
3963
3964
|
type: Component,
|
|
@@ -4226,7 +4227,8 @@ class UnrealStatusComponent {
|
|
|
4226
4227
|
* or any other relevant information that the iframe needs to process.
|
|
4227
4228
|
*/
|
|
4228
4229
|
sendMessageToIndex(text) {
|
|
4229
|
-
const objectElement = document.getElementById(this.#unrealInitialConfig?.screenLockerContainerId ||
|
|
4230
|
+
const objectElement = document.getElementById(this.#unrealInitialConfig?.screenLockerContainerId ||
|
|
4231
|
+
SCREEN_LOCKER_CONTAINER_ID);
|
|
4230
4232
|
try {
|
|
4231
4233
|
const objectDocument = objectElement.contentWindow;
|
|
4232
4234
|
objectDocument?.postMessage(text, '*');
|
|
@@ -4521,11 +4523,11 @@ class WebrtcErrorModalComponent {
|
|
|
4521
4523
|
});
|
|
4522
4524
|
}
|
|
4523
4525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n <header class=\"src-modal__header\">\n <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n WebRTC error\n </div>\n </header>\n <section class=\"src-modal__body\">\n <div style=\"text-align: left\">\n An internet connection type (WebRTC) appears to be blocked either by your\n browser settings or your current network. If WebRTC is blocked on your\n browser you may be able to adjust these settings yourself based on\n instructions here:\n <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n >https://myownconference.com/blog/en/webrtc/</a\n >\n <br /><br />\n Trying a different web browser may help confirm this as well. If WebRTC is\n blocked by your network, try switching to a different network if possible\n or contact your network administrator.<br /><br />\n WebRTC is common, safe and increasingly utilised method for streaming real\n time 3D experiences via a web browser. It typically consumes no more\n bandwidth than streaming an HD video.\n </div>\n </section>\n <footer class=\"src-modal__footer\">\n <src-button\n (onClick)=\"closeModalWithCirrusDisconnect()\"\n [data-testid]=\"'close-webrtc-error-modal'\"\n [colorScheme]=\"'primary'\"\n >\n Ok\n </src-button>\n </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--color-text-default, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "
|
|
4526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n <header class=\"src-modal__header\">\n <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n WebRTC error\n </div>\n </header>\n <section class=\"src-modal__body\">\n <div style=\"text-align: left\">\n An internet connection type (WebRTC) appears to be blocked either by your\n browser settings or your current network. If WebRTC is blocked on your\n browser you may be able to adjust these settings yourself based on\n instructions here:\n <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n >https://myownconference.com/blog/en/webrtc/</a\n >\n <br /><br />\n Trying a different web browser may help confirm this as well. If WebRTC is\n blocked by your network, try switching to a different network if possible\n or contact your network administrator.<br /><br />\n WebRTC is common, safe and increasingly utilised method for streaming real\n time 3D experiences via a web browser. It typically consumes no more\n bandwidth than streaming an HD video.\n </div>\n </section>\n <footer class=\"src-modal__footer\">\n <src-button\n (onClick)=\"closeModalWithCirrusDisconnect()\"\n [data-testid]=\"'close-webrtc-error-modal'\"\n [colorScheme]=\"'primary'\"\n >\n Ok\n </src-button>\n </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--color-text-default, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "formID", "srcButtonConfig", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4525
4527
|
}
|
|
4526
4528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
|
|
4527
4529
|
type: Component,
|
|
4528
|
-
args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent
|
|
4530
|
+
args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SourceButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"src-modal\">\n <header class=\"src-modal__header\">\n <div [attr.data-testid]=\"'title'\" class=\"src-modal__title\">\n WebRTC error\n </div>\n </header>\n <section class=\"src-modal__body\">\n <div style=\"text-align: left\">\n An internet connection type (WebRTC) appears to be blocked either by your\n browser settings or your current network. If WebRTC is blocked on your\n browser you may be able to adjust these settings yourself based on\n instructions here:\n <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n >https://myownconference.com/blog/en/webrtc/</a\n >\n <br /><br />\n Trying a different web browser may help confirm this as well. If WebRTC is\n blocked by your network, try switching to a different network if possible\n or contact your network administrator.<br /><br />\n WebRTC is common, safe and increasingly utilised method for streaming real\n time 3D experiences via a web browser. It typically consumes no more\n bandwidth than streaming an HD video.\n </div>\n </section>\n <footer class=\"src-modal__footer\">\n <src-button\n (onClick)=\"closeModalWithCirrusDisconnect()\"\n [data-testid]=\"'close-webrtc-error-modal'\"\n [colorScheme]=\"'primary'\"\n >\n Ok\n </src-button>\n </footer>\n</div>\n", styles: [".src-modal{--modalBodyPadding: 20px 8px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.src-modal ::ng-deep .ng-scroll-content{--_scrollbar-content-width: initial;--_viewport-padding-right: 12px}.src-modal__body{width:100%}.src-modal__body p{color:var(--color-text-default, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.src-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
|
|
4529
4531
|
}] });
|
|
4530
4532
|
|
|
4531
4533
|
class FilterSettingsComponent {
|