@3dsource/angular-unreal-module 0.0.110-dev.0 → 0.0.111

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

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectionStrategy, Component, Injectable, DestroyRef, signal, Pipe, input, ElementRef, viewChild, effect, untracked, afterNextRender, HostListener, computed, output, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectionStrategy, Component, Injectable, DestroyRef, effect, untracked, signal, Pipe, input, ElementRef, viewChild, afterNextRender, HostListener, computed, output, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
 import { SourceButtonComponent, SourceLoadingComponent } from '@3dsource/source-ui-native';
-import { map as map$1, distinctUntilChanged, takeWhile, filter, tap, withLatestFrom, exhaustMap, catchError, takeUntil, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1, delay, skip as skip$1 } from 'rxjs/operators';
-import { Logger, calculateMedian, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, whereNot, Truthy, Falsy, tapLog, generateUuid, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
 import { merge, map, scan, concatMap, of, animationFrameScheduler, interval, Observable, debounceTime, switchMap, take, fromEvent, EMPTY, timer, timeout, mergeMap, Subject, skip, share, from, throwError, defer, retry, tap as tap$1, startWith, takeUntil as takeUntil$1, throttleTime, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, pairwise, Subscription, bufferTime, BehaviorSubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
 import { createAction, props, createReducer, on, createFeature, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, createEffect, ofType, provideEffects } from '@ngrx/effects';
+import { map as map$1, distinctUntilChanged, takeWhile, filter, tap, withLatestFrom, exhaustMap, catchError, takeUntil, switchMap as switchMap$1, timeout as timeout$1, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1, delay, skip as skip$1 } from 'rxjs/operators';
+import { Logger, calculateMedian, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, whereNot, Truthy, Falsy, tapLog, generateUuid, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
 import { concatLatestFrom } from '@ngrx/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, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { v4 } from 'uuid';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgOptimizedImage, AsyncPipe, JsonPipe } from '@angular/common';
-import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -1657,29 +1657,42 @@ class SubService {
 class AFKService extends SubService {
     constructor() {
         super();
-        // Optionally detect if the user is not interacting (AFK) and disconnect them.
-        this.enabled = true; // Set to true to enable the AFK system.
-        this.closeTimeout = DEFAULT_AFK_TIMEOUT_PERIOD; // The time after the warning when we disconnect the user.
         this.active = false; // Whether the AFK system is currently looking for inactivity.
         this.countdown = 0; // The inactivity warning overlay has a countdown to show time until disconnect.
-        this.selectWarnTimeout = this.store.selectSignal(selectWarnTimeout);
+        this.warnTimeout = this.store.selectSignal(selectWarnTimeout);
         this.isViewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
+        /** Ticks every time warnTimeout changes or resetAfk action fires */
+        this.afkResetTrigger = toSignal(merge(this.store.select(selectWarnTimeout), this.actions$.pipe(ofType(resetAfk))));
+        /** Ticks when cirrus disconnects */
+        this.disconnected = toSignal(this.disconnect$);
         this.destroyRef.onDestroy(() => this.clearTimers());
-        this.init();
-    }
-    init() {
         if (this.unrealConfig?.playwright) {
             return;
         }
-        merge(this.store.select(selectWarnTimeout), this.actions$.pipe(ofType(resetAfk)))
-            .pipe(withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady), takeUntil(this.destroy$))
-            .subscribe(() => this.resetAfkWarningTimer());
-        this.store
-            .select(unrealFeature.selectViewportReady)
-            .pipe(distinctUntilChanged(), filter(Truthy), takeUntil(this.destroy$))
-            .subscribe(() => this.startAfkWarningTimer());
-        this.disconnect$.subscribe(() => this.stop());
+        // Reset AFK warning timer when warnTimeout changes or resetAfk action fires
+        effect(() => {
+            this.afkResetTrigger();
+            untracked(() => {
+                if (this.isViewportReady()) {
+                    this.resetAfkWarningTimer();
+                }
+            });
+        });
+        // Start AFK warning timer when viewport becomes ready
+        effect(() => {
+            const ready = this.isViewportReady();
+            if (ready) {
+                untracked(() => this.startAfkWarningTimer());
+            }
+        });
+        // Stop on disconnect
+        effect(() => {
+            const disconnected = this.disconnected();
+            if (disconnected !== undefined) {
+                untracked(() => this.stop());
+            }
+        });
     }
     hideOverlay() {
         this.store.dispatch(setAfkTimerHide());
@@ -1688,7 +1701,7 @@ class AFKService extends SubService {
      * Start a timer which when elapsed will warn the user they are inactive.
      */
     startAfkWarningTimer() {
-        this.active = this.enabled;
+        this.active = true;
         this.resetAfkWarningTimer();
     }
     /**
@@ -1699,7 +1712,7 @@ class AFKService extends SubService {
             this.clearTimers();
             this.warnTimer = setTimeout(() => {
                 this.showAfkOverlay();
-            }, (this.selectWarnTimeout() ?? 0) * 1000);
+            }, (this.warnTimeout() || DEFAULT_AFK_TIMEOUT) * 1000);
         }
     }
     /**
@@ -1728,7 +1741,7 @@ class AFKService extends SubService {
         }
         // Pause the timer while the user is looking at the inactivity warning overlay.
         this.active = false;
-        this.countdown = this.closeTimeout;
+        this.countdown = DEFAULT_AFK_TIMEOUT_PERIOD;
         this.store.dispatch(setAfkTimerVisible());
         this.updateCountDown(this.countdown);
         if (InputOptions.controlScheme === ControlScheme.LockedMouse) {
@@ -1741,7 +1754,7 @@ class AFKService extends SubService {
                 this.hideOverlay();
                 this.store.dispatch(disconnectStream({
                     reason: DisconnectReason.Afk,
-                    message: `AFK timeout:${this.selectWarnTimeout()} seconds, popup timeout:${this.closeTimeout} seconds`,
+                    message: `AFK timeout:${this.warnTimeout()} seconds, popup timeout:${DEFAULT_AFK_TIMEOUT_PERIOD} seconds`,
                 }));
                 clearInterval(this.countdownTimer);
             }
@@ -3936,6 +3949,8 @@ class UnrealCommunicatorService {
         this.unrealConfig = inject(UNREAL_CONFIG, { optional: true });
         this.destroy$ = new Subject();
         this.cirrusConnected = this.store.selectSignal(unrealFeature.selectCirrusConnected);
+        this.afkIgnoredCommands = new Set(['executeConsoleCommand']);
+        this.skipAfkReset = false;
         this.init();
     }
     init() {
@@ -3962,7 +3977,11 @@ class UnrealCommunicatorService {
             const uniqId = data?.correlationId ?? generateUuid();
             const sendData = { ...data, correlationId: uniqId };
             Logger.colored(...COLOR_CODES.TO_UNREAL, sendData);
+            if (this.afkIgnoredCommands.has(data.command)) {
+                this.skipAfkReset = true;
+            }
             this.emitUIInteraction(sendData);
+            this.skipAfkReset = false;
             this.store.dispatch(commandStarted({ id: uniqId, command: data.command }));
         }
     }
@@ -3986,7 +4005,9 @@ class UnrealCommunicatorService {
     sendInputData(data) {
         this.isPlaywrightMode();
         try {
-            this.store.dispatch(resetAfk());
+            if (!this.skipAfkReset) {
+                this.store.dispatch(resetAfk());
+            }
             this.webRtcPlayerService.send(data);
         }
         catch (error) {
@@ -4607,7 +4628,7 @@ class RegionsPingService {
     async fetchWithTimeout(url, options = {}, timeout) {
         const controller = new AbortController();
         options.signal = controller.signal;
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        const timeoutId = setTimeout(() => controller.abort(new DOMException('Request timed out', 'TimeoutError')), timeout);
         try {
             const response = await fetch(url, options);
             clearTimeout(timeoutId);
@@ -6068,12 +6089,15 @@ class ImageLoadingSrcComponent {
         this.imageLoadingSrc = this.#store.selectSignal(unrealFeature.selectImageLoadingSrc);
     }
     #store;
+    imageError() {
+        this.#store.dispatch(setLoadingImageSrc({ src: '' }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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)=\"imageError()\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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 [ngSrc]=\"image\" fill loading=\"lazy\" alt=\"image loading src\" />\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();\r\n@if (isLoaderScreenVisible()) {\r\n  <div class=\"preload\">\r\n    <div class=\"back\">\r\n      @if (image) {\r\n        <img\r\n          (error)=\"imageError()\"\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"] }]
         }] });
 
 class StatGraphComponent {
@@ -6447,7 +6471,10 @@ class IntroSrcComponent {
         });
     }
     createVideo(src, videoContainer) {
-        const matchAbsolutePath = !!src.match(/.*\.(mp4|WebM)(\?.*)?$/i);
+        if (typeof src !== 'string') {
+            return;
+        }
+        const matchAbsolutePath = /.*\.(mp4|WebM)(\?.*)?$/i.test(src);
         videoContainer.innerHTML = ''; // This will remove all existing content within the layout
         const videoElement = document.createElement('video');
         videoElement.autoplay = true;
@@ -6469,15 +6496,19 @@ class IntroSrcComponent {
         }
         sourceElement.type = 'video/mp4';
         videoElement.appendChild(sourceElement);
-        videoElement.innerHTML += 'Browser not supported';
+        videoElement.addEventListener('error', () => this.#store.dispatch(resetIntroSrc()));
+        sourceElement.addEventListener('error', () => this.#store.dispatch(resetIntroSrc()));
         videoContainer.appendChild(videoElement);
     }
+    imageError() {
+        this.#store.dispatch(resetIntroSrc());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 [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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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)=\"imageError()\" [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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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 [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();\r\n@if (image) {\r\n  <div class=\"backImage\">\r\n    <img (error)=\"imageError()\" [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"] }]
         }], ctorParameters: () => [], propDecorators: { videoElement: [{ type: i0.ViewChild, args: ['videoPlayerCover', { isSignal: true }] }] } });
 
 class UnrealSceneComponent {