@3dsource/angular-unreal-module 0.0.78 → 0.0.79-dev.0
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, Injectable, signal, makeEnvironmentProviders, ChangeDetectionStrategy, Component, Pipe, ElementRef, input, HostListener, Input, ViewChild, DestroyRef, computed, viewChild, effect, untracked, output, afterNextRender } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, Injectable, signal, makeEnvironmentProviders, provideEnvironmentInitializer, ChangeDetectionStrategy, Component, Pipe, ElementRef, input, HostListener, Input, ViewChild, DestroyRef, computed, viewChild, effect, untracked, output, afterNextRender } from '@angular/core';
|
|
3
3
|
import { filter, withLatestFrom, distinctUntilChanged, switchMap, catchError, timeout, tap, map as map$1, takeUntil, exhaustMap, debounceTime, takeWhile, delay, skip as skip$1 } from 'rxjs/operators';
|
|
4
4
|
import { createAction, props, Store, provideState, createReducer, on, createFeature, createSelector } from '@ngrx/store';
|
|
5
5
|
import { Actions, ofType, provideEffects, createEffect } from '@ngrx/effects';
|
|
@@ -297,7 +297,7 @@ class SubService {
|
|
|
297
297
|
|
|
298
298
|
class AFKService extends SubService {
|
|
299
299
|
constructor() {
|
|
300
|
-
super(
|
|
300
|
+
super();
|
|
301
301
|
// Optionally detect if the user is not interacting (AFK) and disconnect them.
|
|
302
302
|
this.enabled = true; // Set to true to enable the AFK system.
|
|
303
303
|
this.closeTimeout = DEFAULT_AFK_TIMEOUT_PERIOD; // The time after the warning when we disconnect the user.
|
|
@@ -305,8 +305,10 @@ class AFKService extends SubService {
|
|
|
305
305
|
this.countdown = 0; // The inactivity warning overlay has a countdown to show time until disconnect.
|
|
306
306
|
this.selectWarnTimeout = this.store.selectSignal(selectWarnTimeout);
|
|
307
307
|
this.isViewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
|
|
308
|
+
this.init();
|
|
308
309
|
}
|
|
309
310
|
init() {
|
|
311
|
+
console.log('DEBUG: AFKService init');
|
|
310
312
|
merge(this.store.select(selectWarnTimeout), fromSignal(UnrealInternalSignalEvents.RestAfkTimer))
|
|
311
313
|
.pipe(withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady))
|
|
312
314
|
.subscribe(() => this.resetAfkWarningTimer());
|
|
@@ -398,21 +400,23 @@ class AFKService extends SubService {
|
|
|
398
400
|
}
|
|
399
401
|
}, 1000);
|
|
400
402
|
}
|
|
401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AFKService, deps:
|
|
403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
402
404
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AFKService }); }
|
|
403
405
|
}
|
|
404
406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AFKService, decorators: [{
|
|
405
407
|
type: Injectable
|
|
406
|
-
}] });
|
|
408
|
+
}], ctorParameters: () => [] });
|
|
407
409
|
|
|
408
410
|
class FreezeFrameService extends SubService {
|
|
409
411
|
constructor() {
|
|
410
|
-
super(
|
|
412
|
+
super();
|
|
411
413
|
this.receiving = false;
|
|
412
414
|
this.size = 0;
|
|
413
415
|
this.freezeFrameOverlay = new Image();
|
|
416
|
+
this.init();
|
|
414
417
|
}
|
|
415
418
|
init() {
|
|
419
|
+
console.log('DEBUG: FreezeFrameService init');
|
|
416
420
|
this.store
|
|
417
421
|
.select(unrealFeature.selectViewportReady)
|
|
418
422
|
.pipe(filter(Truthy))
|
|
@@ -476,12 +480,12 @@ class FreezeFrameService extends SubService {
|
|
|
476
480
|
progress: 1,
|
|
477
481
|
}));
|
|
478
482
|
}
|
|
479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FreezeFrameService, deps:
|
|
483
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
480
484
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FreezeFrameService }); }
|
|
481
485
|
}
|
|
482
486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FreezeFrameService, decorators: [{
|
|
483
487
|
type: Injectable
|
|
484
|
-
}] });
|
|
488
|
+
}], ctorParameters: () => [] });
|
|
485
489
|
|
|
486
490
|
class DataFlowMonitor {
|
|
487
491
|
/**
|
|
@@ -608,6 +612,7 @@ class VideoService extends SubService {
|
|
|
608
612
|
this.init();
|
|
609
613
|
}
|
|
610
614
|
init() {
|
|
615
|
+
console.log('DEBUG: VideoService init');
|
|
611
616
|
Signal.on('setKalmanParams').subscribe((data) => {
|
|
612
617
|
this.kalmanFilter1D.config(data);
|
|
613
618
|
BITRATE_MONITOR.config(data);
|
|
@@ -871,6 +876,7 @@ class CommandTelemetryService {
|
|
|
871
876
|
this.init();
|
|
872
877
|
}
|
|
873
878
|
init() {
|
|
879
|
+
console.log('DEBUG: CommandTelemetryService init');
|
|
874
880
|
if (!this.unrealInitialConfig?.commandTelemetryReceiver) {
|
|
875
881
|
return;
|
|
876
882
|
}
|
|
@@ -1196,6 +1202,7 @@ class SignallingService extends SubService {
|
|
|
1196
1202
|
this.init();
|
|
1197
1203
|
}
|
|
1198
1204
|
init() {
|
|
1205
|
+
console.log('DEBUG: SignallingService init');
|
|
1199
1206
|
this.setHandlersFromStream();
|
|
1200
1207
|
this.store
|
|
1201
1208
|
.select(unrealFeature.selectDataChannelConnected)
|
|
@@ -1507,6 +1514,7 @@ class WebRtcPlayerService extends SubService {
|
|
|
1507
1514
|
this.init();
|
|
1508
1515
|
}
|
|
1509
1516
|
init() {
|
|
1517
|
+
console.log('DEBUG: WebRtcPlayerService init');
|
|
1510
1518
|
const iceCandidateBuffer = [];
|
|
1511
1519
|
const processBuffer = () => {
|
|
1512
1520
|
iceCandidateBuffer.forEach((cnd) => {
|
|
@@ -1891,6 +1899,7 @@ class FileReceiverService extends SubService {
|
|
|
1891
1899
|
this.init();
|
|
1892
1900
|
}
|
|
1893
1901
|
init() {
|
|
1902
|
+
console.log('DEBUG: FileReceiverService init');
|
|
1894
1903
|
this.store
|
|
1895
1904
|
.select(unrealFeature.selectViewportReady)
|
|
1896
1905
|
.pipe(filter(Truthy))
|
|
@@ -1992,7 +2001,7 @@ const filteredLogs = [
|
|
|
1992
2001
|
];
|
|
1993
2002
|
class AggregatorService extends SubService {
|
|
1994
2003
|
constructor() {
|
|
1995
|
-
super(
|
|
2004
|
+
super();
|
|
1996
2005
|
this.selectStreamConfig = this.store.selectSignal(selectStreamConfig);
|
|
1997
2006
|
this.videoService = inject(VideoService);
|
|
1998
2007
|
this.webrtcPlayer = inject(WebRtcPlayerService);
|
|
@@ -2004,8 +2013,10 @@ class AggregatorService extends SubService {
|
|
|
2004
2013
|
* Never called for now
|
|
2005
2014
|
*/
|
|
2006
2015
|
this.destroy$ = new Subject();
|
|
2016
|
+
this.init();
|
|
2007
2017
|
}
|
|
2008
2018
|
init() {
|
|
2019
|
+
console.log('DEBUG: AggregatorService init');
|
|
2009
2020
|
this.listenWebRTC();
|
|
2010
2021
|
this.initialize();
|
|
2011
2022
|
}
|
|
@@ -2173,17 +2184,22 @@ class AggregatorService extends SubService {
|
|
|
2173
2184
|
Logger.warn(`unrecognized data received, packet ID ${view[0]}`);
|
|
2174
2185
|
}
|
|
2175
2186
|
}
|
|
2176
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregatorService, deps:
|
|
2187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2177
2188
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregatorService }); }
|
|
2178
2189
|
}
|
|
2179
2190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregatorService, decorators: [{
|
|
2180
2191
|
type: Injectable
|
|
2181
|
-
}] });
|
|
2192
|
+
}], ctorParameters: () => [] });
|
|
2182
2193
|
|
|
2183
2194
|
class ConsoleExtensionsService extends SubService {
|
|
2184
2195
|
#httpClient = inject(HttpClient);
|
|
2185
2196
|
#isDevMode = inject(DevModeService).isDevMode;
|
|
2197
|
+
constructor() {
|
|
2198
|
+
super();
|
|
2199
|
+
this.init();
|
|
2200
|
+
}
|
|
2186
2201
|
init() {
|
|
2202
|
+
console.log('DEBUG: ConsoleExtensionsService init');
|
|
2187
2203
|
if (!this.#isDevMode) {
|
|
2188
2204
|
return;
|
|
2189
2205
|
}
|
|
@@ -2225,12 +2241,12 @@ class ConsoleExtensionsService extends SubService {
|
|
|
2225
2241
|
Logger.info('setWarnTime() => set time to appear the AFK window.');
|
|
2226
2242
|
Logger.info('emitCommand(command) => send command to Unreal Engine.');
|
|
2227
2243
|
}
|
|
2228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsoleExtensionsService, deps:
|
|
2244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2229
2245
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsoleExtensionsService }); }
|
|
2230
2246
|
}
|
|
2231
2247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
|
|
2232
2248
|
type: Injectable
|
|
2233
|
-
}] });
|
|
2249
|
+
}], ctorParameters: () => [] });
|
|
2234
2250
|
|
|
2235
2251
|
class DevModeService {
|
|
2236
2252
|
get isDevMode() {
|
|
@@ -2416,15 +2432,11 @@ class UnrealCommunicatorService {
|
|
|
2416
2432
|
this.webRtcPlayerService = inject(WebRtcPlayerService);
|
|
2417
2433
|
this.videoService = inject(VideoService);
|
|
2418
2434
|
this.destroy$ = new Subject();
|
|
2419
|
-
this.afkService = inject(AFKService);
|
|
2420
|
-
this.consoleExtensionsService = inject(ConsoleExtensionsService);
|
|
2421
2435
|
this.cirrusConnected = this.store.selectSignal(unrealFeature.selectCirrusConnected);
|
|
2422
2436
|
this.init();
|
|
2423
2437
|
}
|
|
2424
2438
|
init() {
|
|
2425
|
-
|
|
2426
|
-
this.afkService.init();
|
|
2427
|
-
this.freezeFrameService.init();
|
|
2439
|
+
console.log('DEBUG: UnrealCommunicatorService init');
|
|
2428
2440
|
this.emitUIInteraction = this.commandTelemetryService.decorate(this.emitUIInteraction.bind(this));
|
|
2429
2441
|
this.listenVideo();
|
|
2430
2442
|
this.store
|
|
@@ -2529,7 +2541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2529
2541
|
|
|
2530
2542
|
class InputService extends SubService {
|
|
2531
2543
|
constructor() {
|
|
2532
|
-
super(
|
|
2544
|
+
super();
|
|
2533
2545
|
this.commandsSender = inject(UnrealCommunicatorService);
|
|
2534
2546
|
this.isDevMode = inject(DevModeService).isDevMode;
|
|
2535
2547
|
this.defaultKeys = [
|
|
@@ -2562,8 +2574,10 @@ class InputService extends SubService {
|
|
|
2562
2574
|
offsetByY: 0,
|
|
2563
2575
|
offsetByX: 0,
|
|
2564
2576
|
};
|
|
2577
|
+
this.init();
|
|
2565
2578
|
}
|
|
2566
2579
|
init() {
|
|
2580
|
+
console.log('DEBUG: InputService init');
|
|
2567
2581
|
const visibilityHiddenTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'hidden'), filter(Truthy));
|
|
2568
2582
|
const visibilityVisibleTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'visible'), filter(Truthy), startWith(true));
|
|
2569
2583
|
this.deactivatedVideoTrigger$ = merge(this.disconnect$, this.reInit$, visibilityHiddenTrigger$);
|
|
@@ -3115,7 +3129,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3115
3129
|
class StreamStatusTelemetryService {
|
|
3116
3130
|
#store = inject(Store);
|
|
3117
3131
|
#videoService = inject(VideoService);
|
|
3132
|
+
constructor() {
|
|
3133
|
+
this.init();
|
|
3134
|
+
}
|
|
3118
3135
|
init() {
|
|
3136
|
+
console.log('DEBUG: StreamStatusTelemetryService init');
|
|
3119
3137
|
this.#videoService.videoStats$
|
|
3120
3138
|
.pipe(withLatestFrom(this.#store.select(unrealFeature.selectAwsInstance), this.#store.select(unrealFeature.selectLowBandwidth), this.#store.select(unrealFeature.selectLowBandwidthStats), this.#store.select(unrealFeature.selectCirrusConnected)), auditTime(5000), filter(([, , , , cirrusConnected]) => cirrusConnected), map$1(([data, signalingServer, isLowBandwidth, lbmStats]) => this.mapEventData(data, signalingServer, isLowBandwidth, lbmStats)))
|
|
3121
3139
|
.subscribe((data) => this.trackEventToMixPanel(data));
|
|
@@ -3147,7 +3165,7 @@ class StreamStatusTelemetryService {
|
|
|
3147
3165
|
}
|
|
3148
3166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
|
|
3149
3167
|
type: Injectable
|
|
3150
|
-
}] });
|
|
3168
|
+
}], ctorParameters: () => [] });
|
|
3151
3169
|
|
|
3152
3170
|
class AfkPlaywrightService extends AFKService {
|
|
3153
3171
|
init() {
|
|
@@ -3164,6 +3182,9 @@ class SignallingPlaywrightService extends SignallingService {
|
|
|
3164
3182
|
constructor() {
|
|
3165
3183
|
super();
|
|
3166
3184
|
}
|
|
3185
|
+
init() {
|
|
3186
|
+
return;
|
|
3187
|
+
}
|
|
3167
3188
|
connectToSignaling() {
|
|
3168
3189
|
this.store.dispatch(setUnrealPlaywrightConfig());
|
|
3169
3190
|
this.store.dispatch(setDataChannelConnected({
|
|
@@ -3377,6 +3398,14 @@ function provideAngularUnrealModule(config) {
|
|
|
3377
3398
|
? FileReceiverPlaywrightService
|
|
3378
3399
|
: FileReceiverService,
|
|
3379
3400
|
},
|
|
3401
|
+
provideEnvironmentInitializer(() => {
|
|
3402
|
+
inject(UnrealCommunicatorService);
|
|
3403
|
+
inject(AggregatorService);
|
|
3404
|
+
inject(StreamStatusTelemetryService);
|
|
3405
|
+
inject(ConsoleExtensionsService);
|
|
3406
|
+
inject(AFKService);
|
|
3407
|
+
inject(FreezeFrameService);
|
|
3408
|
+
}),
|
|
3380
3409
|
]);
|
|
3381
3410
|
}
|
|
3382
3411
|
|
|
@@ -3672,7 +3701,7 @@ class UnrealEffects {
|
|
|
3672
3701
|
}), map(({ reason }) => destroyRemoteConnections({ reason })));
|
|
3673
3702
|
});
|
|
3674
3703
|
this.destroyConnections$ = createEffect(() => {
|
|
3675
|
-
return this.actions$.pipe(ofType(destroyUnrealScene), map(() => destroyRemoteConnections({
|
|
3704
|
+
return this.actions$.pipe(ofType(destroyUnrealScene), tap(() => this.commandsSender.destroy()), map(() => destroyRemoteConnections({
|
|
3676
3705
|
reason: DisconnectReason.Destroy,
|
|
3677
3706
|
})));
|
|
3678
3707
|
});
|
|
@@ -3835,9 +3864,6 @@ class UnrealEffects {
|
|
|
3835
3864
|
this.startStream$ = createEffect(() => {
|
|
3836
3865
|
return this.actions$.pipe(ofType(startStream), tapLog('Start Stream Pressed'), map(() => initSignalling()));
|
|
3837
3866
|
});
|
|
3838
|
-
this.setMatchUrls$ = createEffect(() => {
|
|
3839
|
-
return this.actions$.pipe(ofType(setOrchestrationContext), tapLog('Set Orchestration Context'), map(() => initSignalling()));
|
|
3840
|
-
});
|
|
3841
3867
|
this.listenUnrealCallbackByInitSignalling$ = createEffect(() => {
|
|
3842
3868
|
return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap$1(() => fromSignal(UnrealInternalSignalEvents.UnrealCallback).pipe(map(({ json }) => json?.commandCallback
|
|
3843
3869
|
?.correlationId), filter(Truthy), map((id) => commandCompleted({ id })))));
|
|
@@ -4842,9 +4868,7 @@ class UnrealSceneComponent {
|
|
|
4842
4868
|
this.width = FULL_HD_WIDTH;
|
|
4843
4869
|
this.height = FULL_HD_HEIGHT;
|
|
4844
4870
|
this.store = inject(Store);
|
|
4845
|
-
this.
|
|
4846
|
-
this.aggregatorService = inject(AggregatorService);
|
|
4847
|
-
this.inputService = inject(InputService);
|
|
4871
|
+
this.isExistMatchUrls = this.store.selectSignal(selectIsExistMatchUrls);
|
|
4848
4872
|
this.isDevMode = inject(DevModeService).isDevMode;
|
|
4849
4873
|
this.lightMode = this.store.selectSignal(unrealFeature.selectLowBandwidth);
|
|
4850
4874
|
this.isFreezeFrameLoading = this.store.selectSignal(selectIsFreezeFrameLoading);
|
|
@@ -4852,13 +4876,15 @@ class UnrealSceneComponent {
|
|
|
4852
4876
|
this.videoService = inject(VideoService);
|
|
4853
4877
|
this.element = inject(ElementRef);
|
|
4854
4878
|
this.destroyRef = inject(DestroyRef);
|
|
4855
|
-
this.destroyRef.onDestroy(() =>
|
|
4856
|
-
|
|
4857
|
-
this.
|
|
4879
|
+
this.destroyRef.onDestroy(() => this.store.dispatch(destroyUnrealScene()));
|
|
4880
|
+
effect(() => {
|
|
4881
|
+
const videoElement = this.videoElement();
|
|
4882
|
+
const isExistMatchUrls = this.isExistMatchUrls();
|
|
4883
|
+
if (videoElement && isExistMatchUrls) {
|
|
4884
|
+
console.log('DEBUG: Unreal scene is ready');
|
|
4885
|
+
this.store.dispatch(initSignalling());
|
|
4886
|
+
}
|
|
4858
4887
|
});
|
|
4859
|
-
this.streamStatusTelemetryService.init();
|
|
4860
|
-
this.aggregatorService.init();
|
|
4861
|
-
this.inputService.init();
|
|
4862
4888
|
afterNextRender({
|
|
4863
4889
|
read: () => {
|
|
4864
4890
|
const videoElement = this.videoElement();
|
|
@@ -4991,12 +5017,7 @@ class UnrealSceneComponent {
|
|
|
4991
5017
|
sendResize(size) {
|
|
4992
5018
|
this.commandsSender.sendCommandToUnreal({
|
|
4993
5019
|
command: MetaBoxCommand.FChangeResolutionCommand,
|
|
4994
|
-
payload: {
|
|
4995
|
-
resolution: {
|
|
4996
|
-
x: size.w,
|
|
4997
|
-
y: size.h,
|
|
4998
|
-
},
|
|
4999
|
-
},
|
|
5020
|
+
payload: { resolution: { x: size.w, y: size.h } },
|
|
5000
5021
|
});
|
|
5001
5022
|
}
|
|
5002
5023
|
makeEven(value) {
|
|
@@ -5107,7 +5128,7 @@ class LowBandwidthDetectorComponent {
|
|
|
5107
5128
|
this.dialog = inject(Dialog);
|
|
5108
5129
|
this.destroyRef = inject(DestroyRef);
|
|
5109
5130
|
this.videoService = inject(VideoService);
|
|
5110
|
-
this.
|
|
5131
|
+
this.isDevMode = inject(DevModeService).isDevMode;
|
|
5111
5132
|
this.viewportReady$ = this.store.select(unrealFeature.selectViewportReady);
|
|
5112
5133
|
this.isLowBandwidth$ = this.store.select(unrealFeature.selectLowBandwidth);
|
|
5113
5134
|
this.lowBandwidthTrigger$ = this.isLowBandwidth$.pipe(distinctUntilChanged$1(), filter(Truthy));
|
|
@@ -5202,11 +5223,11 @@ class LowBandwidthDetectorComponent {
|
|
|
5202
5223
|
});
|
|
5203
5224
|
}
|
|
5204
5225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LowBandwidthDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\n <div\n [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n class=\"lbm-indicator freeze-loader\"\n >\n <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path\n fill=\"#85888E\"\n d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n />\n <path\n fill=\"#fff\"\n fill-rule=\"evenodd\"\n d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n\n <div\n [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n class=\"lbm-message\"\n >\n <p class=\"lbm-description\">\n Fluid Interactivity Modes were disabled due to an unstable connection.\n\n <button\n (click)=\"openLBMDialog()\"\n [attr.data-testid]=\"'learn-more-lbm'\"\n type=\"button\"\n class=\"lbm-learn-more\"\n >\n Learn more\n </button>\n </p>\n <button\n (click)=\"toggleIndicator(false)\"\n [attr.data-testid]=\"'close-lbm-indicator'\"\n type=\"button\"\n class=\"lbm-close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n fill=\"white\"\n />\n </svg>\n </button>\n </div>\n </div>\n}\n\n@if (
|
|
5226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LowBandwidthDetectorComponent, isStandalone: true, selector: "app-low-bandwidth-detector", ngImport: i0, template: "@if (isReducedQuality() || isLowBandwidth()) {\n <div\n [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n class=\"lbm-indicator freeze-loader\"\n >\n <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path\n fill=\"#85888E\"\n d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n />\n <path\n fill=\"#fff\"\n fill-rule=\"evenodd\"\n d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n\n <div\n [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n class=\"lbm-message\"\n >\n <p class=\"lbm-description\">\n Fluid Interactivity Modes were disabled due to an unstable connection.\n\n <button\n (click)=\"openLBMDialog()\"\n [attr.data-testid]=\"'learn-more-lbm'\"\n type=\"button\"\n class=\"lbm-learn-more\"\n >\n Learn more\n </button>\n </p>\n <button\n (click)=\"toggleIndicator(false)\"\n [attr.data-testid]=\"'close-lbm-indicator'\"\n type=\"button\"\n class=\"lbm-close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n fill=\"white\"\n />\n </svg>\n </button>\n </div>\n </div>\n}\n\n@if (isDevMode) {\n <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"], dependencies: [{ kind: "component", type: FilterSettingsComponent, selector: "app-filter-settings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5206
5227
|
}
|
|
5207
5228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LowBandwidthDetectorComponent, decorators: [{
|
|
5208
5229
|
type: Component,
|
|
5209
|
-
args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\n <div\n [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n class=\"lbm-indicator freeze-loader\"\n >\n <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path\n fill=\"#85888E\"\n d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n />\n <path\n fill=\"#fff\"\n fill-rule=\"evenodd\"\n d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n\n <div\n [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n class=\"lbm-message\"\n >\n <p class=\"lbm-description\">\n Fluid Interactivity Modes were disabled due to an unstable connection.\n\n <button\n (click)=\"openLBMDialog()\"\n [attr.data-testid]=\"'learn-more-lbm'\"\n type=\"button\"\n class=\"lbm-learn-more\"\n >\n Learn more\n </button>\n </p>\n <button\n (click)=\"toggleIndicator(false)\"\n [attr.data-testid]=\"'close-lbm-indicator'\"\n type=\"button\"\n class=\"lbm-close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n fill=\"white\"\n />\n </svg>\n </button>\n </div>\n </div>\n}\n\n@if (
|
|
5230
|
+
args: [{ selector: 'app-low-bandwidth-detector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FilterSettingsComponent], template: "@if (isReducedQuality() || isLowBandwidth()) {\n <div\n [class.expanded]=\"isIndicatorExpanded() && isLowBandwidth()\"\n class=\"lbm-indicator freeze-loader\"\n >\n <div (click)=\"toggleIndicator(true)\" class=\"lbm-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\n <path\n fill=\"#85888E\"\n d=\"M7.189 3.605c-.73.145-1.438.35-2.126.614A14.412 14.412 0 0 0 .896 6.666a1.08 1.08 0 0 0-.375.844c0 .34.118.629.354.865s.524.36.865.375c.34.014.65-.09.927-.313a11.89 11.89 0 0 1 3.385-1.916 10.94 10.94 0 0 1 1.235-.375l-.098-2.541ZM7.385 8.708a9.107 9.107 0 0 0-2.906 1.48c-.264.194-.402.464-.416.812-.014.347.104.646.354.896.236.236.524.364.864.385.34.02.664-.073.97-.281.422-.29.878-.53 1.368-.721a2.545 2.545 0 0 1-.166-.814l-.068-1.757ZM12.386 11.267c.094-.25.15-.52.161-.802l.068-1.755a9.019 9.019 0 0 1 2.927 1.52c.264.193.4.46.406.801.007.34-.114.635-.364.885a1.213 1.213 0 0 1-.865.365A1.614 1.614 0 0 1 13.77 12a6.574 6.574 0 0 0-1.385-.733ZM12.713 6.146l.098-2.542c.73.146 1.438.351 2.127.615 1.541.59 2.93 1.406 4.166 2.447.25.223.379.5.386.834.007.333-.115.625-.365.875a1.253 1.253 0 0 1-.864.375c-.34.014-.65-.09-.927-.313a11.892 11.892 0 0 0-3.386-1.916 10.94 10.94 0 0 0-1.235-.375ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n />\n <path\n fill=\"#fff\"\n fill-rule=\"evenodd\"\n d=\"M10 .833c-.91 0-1.637.756-1.602 1.665l.304 7.92a1.299 1.299 0 0 0 2.596 0l.305-7.92A1.604 1.604 0 0 0 10 .833ZM8.813 16.187c.32.32.715.48 1.187.48.472 0 .868-.16 1.188-.48.32-.32.479-.715.479-1.187 0-.473-.16-.868-.48-1.188-.319-.32-.715-.479-1.187-.479-.472 0-.868.16-1.187.48-.32.319-.48.714-.48 1.187 0 .472.16.868.48 1.187Z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n\n <div\n [class.lbm-message--open]=\"isLowBandwidth() && isIndicatorExpanded()\"\n class=\"lbm-message\"\n >\n <p class=\"lbm-description\">\n Fluid Interactivity Modes were disabled due to an unstable connection.\n\n <button\n (click)=\"openLBMDialog()\"\n [attr.data-testid]=\"'learn-more-lbm'\"\n type=\"button\"\n class=\"lbm-learn-more\"\n >\n Learn more\n </button>\n </p>\n <button\n (click)=\"toggleIndicator(false)\"\n [attr.data-testid]=\"'close-lbm-indicator'\"\n type=\"button\"\n class=\"lbm-close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0001 11.2289L6.68618 14.5428C6.51951 14.7095 6.31818 14.7895 6.08218 14.7828C5.84618 14.7755 5.64485 14.6885 5.47818 14.5218C5.31151 14.3552 5.22818 14.1505 5.22818 13.9078C5.22818 13.6645 5.31151 13.4595 5.47818 13.2928L8.77107 9.99992L5.45718 6.68603C5.29051 6.51936 5.21051 6.3147 5.21718 6.07203C5.22451 5.8287 5.31151 5.6237 5.47818 5.45703C5.64485 5.29036 5.84951 5.20703 6.09218 5.20703C6.33551 5.20703 6.54051 5.29036 6.70718 5.45703L10.0001 8.77092L13.314 5.45703C13.4806 5.29036 13.6853 5.20703 13.928 5.20703C14.1713 5.20703 14.3763 5.29036 14.543 5.45703C14.7096 5.6237 14.793 5.8287 14.793 6.07203C14.793 6.3147 14.7096 6.51936 14.543 6.68603L11.2291 9.99992L14.543 13.3138C14.7096 13.4805 14.793 13.6818 14.793 13.9178C14.793 14.1538 14.7096 14.3552 14.543 14.5218C14.3763 14.6885 14.1713 14.7718 13.928 14.7718C13.6853 14.7718 13.4806 14.6885 13.314 14.5218L10.0001 11.2289Z\"\n fill=\"white\"\n />\n </svg>\n </button>\n </div>\n </div>\n}\n\n@if (isDevMode) {\n <app-filter-settings />\n}\n", styles: [".freeze-loader,.lbm-indicator{--lbmPositionTop: 18px;--lbmPositionLeft: 18px;--lbmPositionRight: 18px;--lbmIndicatorSize: 36px;--lbmIndicatorBorderRadius: 8px;--lbmIndicatorCloseSize: 20px;--lbmPadding: 10px;--lbmTextSize: 13px;--lbmLineHeight: 20px;--lbmTextColor: #ffffff;--lbmBackgroundColor: rgba(17, 24, 39, .7);position:absolute;top:var(--lbmPositionTop);left:var(--lbmPositionLeft);z-index:10;display:flex;justify-content:center;align-items:flex-start;min-width:var(--lbmIndicatorSize);min-height:var(--lbmIndicatorSize);overflow:hidden}.freeze-loader.expanded,.lbm-indicator.expanded{--lbmPositionTop: 8px;--lbmPositionLeft: 8px;--lbmPositionRight: 8px;width:auto;max-width:calc(100% - var(--lbmPositionLeft) - var(--lbmPositionRight));padding:var(--lbmPadding);background:var(--lbmBackgroundColor);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--lbmIndicatorBorderRadius);gap:12px}.freeze-loader .lbm-icon,.lbm-indicator .lbm-icon{display:flex;width:var(--lbmIndicatorSize);height:var(--lbmIndicatorSize);padding:8px;color:#fff;background-color:var(--lbmBackgroundColor);border-radius:50%;flex-shrink:0;cursor:pointer}.freeze-loader .lbm-icon svg,.freeze-loader .lbm-icon img,.lbm-indicator .lbm-icon svg,.lbm-indicator .lbm-icon img{width:100%;height:100%}.freeze-loader .lbm-close,.lbm-indicator .lbm-close{position:absolute;top:0;right:0;width:var(--lbmIndicatorCloseSize);height:var(--lbmIndicatorCloseSize);background-color:transparent;border:none;padding:0;cursor:pointer}.freeze-loader .lbm-message,.lbm-indicator .lbm-message{position:relative;opacity:0;height:0;max-width:0;padding-right:24px;pointer-events:none;visibility:hidden;animation:closeMessage .3s forwards}.freeze-loader .lbm-message--open,.lbm-indicator .lbm-message--open{position:relative;visibility:visible;display:flex;align-items:center;align-self:center;pointer-events:all;gap:12px;max-width:fit-content;height:auto;opacity:1;animation:openMessage .3s forwards}.freeze-loader .lbm-description,.lbm-indicator .lbm-description{margin:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor)}.freeze-loader .lbm-learn-more,.lbm-indicator .lbm-learn-more{display:inline-flex;padding:0;font-size:var(--lbmTextSize);font-weight:400;line-height:var(--lbmLineHeight);color:var(--lbmTextColor);-webkit-text-decoration-line:underline;text-decoration-line:underline;background-color:transparent;border:none;cursor:pointer}.freeze-loader .lbm-learn-more:hover,.lbm-indicator .lbm-learn-more:hover{text-decoration:none}@keyframes openMessage{0%{opacity:0;max-width:0;height:0}10%{height:auto;max-width:fit-content}to{opacity:1;height:auto;max-width:fit-content}}@keyframes closeMessage{0%{opacity:1;max-width:fit-content}to{opacity:0;max-width:0}}\n"] }]
|
|
5210
5231
|
}] });
|
|
5211
5232
|
|
|
5212
5233
|
/**
|