@3dsource/angular-unreal-module 0.0.50 → 0.0.52

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, ChangeDetectionStrategy, Component, Pipe, DestroyRef, signal, ElementRef, input, HostListener, Input, ViewChild, computed, output } from '@angular/core';
+import { InjectionToken, inject, Injectable, ChangeDetectionStrategy, Component, Pipe, DestroyRef, signal, ElementRef, input, HostListener, Input, ViewChild, computed, output, viewChild, effect, untracked } from '@angular/core';
 import { filter, withLatestFrom, distinctUntilChanged, switchMap, first, catchError, timeout, map as map$1, tap, takeUntil, exhaustMap, debounceTime, takeWhile, skip as skip$1, delay } from 'rxjs/operators';
 import { createAction, props, Store, provideState, createReducer, on, createFeature, createSelector } from '@ngrx/store';
 import { Actions, ofType, provideEffects, createEffect } from '@ngrx/effects';
-import { skip, share, merge, Subject, interval, of, map, from, take, fromEvent, timer, throwError, defer, Observable, switchMap as switchMap$1, retry, timeout as timeout$1, tap as tap$1, startWith, combineLatestWith, takeUntil as takeUntil$1, auditTime, debounceTime as debounceTime$1, EMPTY, mergeMap, scan, concatMap, animationFrameScheduler, BehaviorSubject, combineLatest, first as first$1, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
+import { skip, share, merge, Subject, interval, of, map, from, take, fromEvent, timer, throwError, defer, Observable, switchMap as switchMap$1, retry, timeout as timeout$1, tap as tap$1, startWith, combineLatestWith, takeUntil as takeUntil$1, auditTime, debounceTime as debounceTime$1, EMPTY, mergeMap, scan, concatMap, animationFrameScheduler, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, concat } from 'rxjs';
 import { Falsy, Truthy, Logger, calculateMedian, clampf, Signal, tapLog, generateUuid, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, Semaphore, lerp, getCanvasCached, getSnapshot, whereNot, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB, fitIntoRectangle } from '@3dsource/utils';
 import { HttpClient } from '@angular/common/http';
 import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -3412,7 +3412,7 @@ const selectIsExistMatchUrls = createSelector(unrealFeature.selectMatchUrls, (ur
 const selectIsAutostart = createSelector(selectStreamConfig, (config) => config?.autoStart);
 const showPopupWithoutAutoStart = createSelector(selectStreamConfig, unrealFeature.selectWasInitialized, (config, wasInitialized) => !config.autoStart && !wasInitialized);
 const selectShowReconnectPopup = createSelector(unrealFeature.selectCirrusConnected, unrealFeature.selectEstablishingConnection, (connected, establishing) => !connected && !establishing);
-const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, (showPopup, viewPortReady) => !showPopup && !viewPortReady);
+const selectShowLoader = createSelector(selectShowReconnectPopup, unrealFeature.selectViewportReady, (showPopup, viewportReady) => !showPopup && !viewportReady);
 const selectIsVideoPlayingAndDataChannelConnected = createSelector(unrealFeature.selectIsVideoPlaying, unrealFeature.selectDataChannelConnected, (isVideoPlaying, isDataChannelConnected) => isVideoPlaying && isDataChannelConnected);
 const selectSignalingParameters = createSelector(unrealFeature.selectSsData, unrealFeature.selectAwsInstance, unrealFeature.selectSsInfo, (data, instance, ssInfo) => {
     const info = [];
@@ -4657,41 +4657,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class VideoLockerComponent {
     constructor() {
+        this.videoElement = viewChild('videoPlayerCover', ...(ngDevMode ? [{ debugName: "videoElement" }] : []));
         this.store = inject(Store);
-        this.destroyRef = inject(DestroyRef);
-        this.videoIntroSrc$ = this.store.select(unrealFeature.selectVideoIntroSrc);
-        this.imageIntroSrc$ = this.store
-            .select(unrealFeature.selectImageIntroSrc)
-            .pipe(map((src) => {
-            // TODO need for demos site and need to delete this and move to demos
-            if (!src) {
-                return null;
-            }
-            const matchAbsolutePath = !!src.match(/.*\.(png|avif|jpg|webp|svg)(\?.*)?$/i);
-            if (matchAbsolutePath) {
-                return src;
+        this.imageIntroSrc = this.store.selectSignal(unrealFeature.selectImageIntroSrc);
+        this.videoIntroSrc = this.store.selectSignal(unrealFeature.selectVideoIntroSrc);
+        this.viewportReady = this.store.selectSignal(unrealFeature.selectViewportReady);
+        effect(() => {
+            const viewportReady = this.viewportReady();
+            const videoIntroSrc = this.videoIntroSrc();
+            const imageIntroSrc = this.imageIntroSrc();
+            untracked(() => {
+                if (viewportReady && (videoIntroSrc || imageIntroSrc)) {
+                    this.store.dispatch(resetIntroSrc());
+                }
+            });
+        });
+        effect(() => {
+            const videoIntroSrc = this.videoIntroSrc();
+            const videoElement = this.videoElement();
+            if (!videoIntroSrc || !videoElement) {
+                return;
             }
-            return src;
-        }));
-    }
-    ngOnInit() {
-        combineLatest([
-            this.store.select(unrealFeature.selectViewportReady),
-            this.videoIntroSrc$,
-            this.imageIntroSrc$,
-        ])
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(([viewportReady, videoSrc, imageSrc]) => viewportReady && (!!videoSrc || !!imageSrc)), first$1())
-            .subscribe(() => this.store.dispatch(resetIntroSrc()));
-    }
-    ngAfterViewInit() {
-        this.videoIntroSrc$
-            .pipe(filter(Truthy), takeUntilDestroyed(this.destroyRef))
-            .subscribe((src) => this.createVideo(src));
+            untracked(() => this.createVideo(videoIntroSrc, videoElement.nativeElement));
+        });
     }
-    createVideo(src) {
+    createVideo(src, videoContainer) {
         const matchAbsolutePath = !!src.match(/.*\.(mp4|WebM)(\?.*)?$/i);
         // Select the parent layout where the video will be inserted
-        const videoContainer = this.videoElement.nativeElement;
         videoContainer.innerHTML = ''; // This will remove all existing content within the layout
         // Create the video element
         const videoElement = document.createElement('video');
@@ -4721,15 +4713,12 @@ class VideoLockerComponent {
         videoContainer.appendChild(videoElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: VideoLockerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: VideoLockerComponent, isStandalone: true, selector: "app-video-locker", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true }], ngImport: i0, template: "@if (imageIntroSrc$ | async; as url) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"url\" fill alt=\"Loading...\" />\n  </div>\n} @else if (videoIntroSrc$ | async) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.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%}.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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: VideoLockerComponent, isStandalone: true, selector: "app-video-locker", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let imageSrc = imageIntroSrc();\n@if (imageSrc) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"imageSrc\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.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%}.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: "20.2.4", ngImport: i0, type: VideoLockerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-video-locker', imports: [AsyncPipe, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (imageIntroSrc$ | async; as url) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"url\" fill alt=\"Loading...\" />\n  </div>\n} @else if (videoIntroSrc$ | async) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.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%}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
-        }], propDecorators: { videoElement: [{
-                type: ViewChild,
-                args: ['videoPlayerCover', { static: false }]
-            }] } });
+            args: [{ selector: 'app-video-locker', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let imageSrc = imageIntroSrc();\n@if (imageSrc) {\n  <div class=\"backImage\">\n    <img [ngSrc]=\"imageSrc\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.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%}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [] });
 
 class WebrtcErrorModalComponent {
     constructor() {