@3dsource/angular-unreal-module 0.0.158 → 0.0.159-dev.0

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

@@ -2464,10 +2464,57 @@ class VideoService extends SubService {
             ? interval(250).pipe(map(() => track.pcClient), switchMap$1((pcClient) => from(this.getStats(pcClient))), filter(Truthy))
             : of(null)), filter(Truthy), share());
         this.destroyAbort = new AbortController();
+        // Teardown is wired ONCE here instead of per `create()`. The per-create
+        // subscription added one more live handler for every session, and the
+        // `take(1)` that bounded it let the shared `disconnect$` refCount fall to
+        // zero between sessions — which re-armed its `skip(1)` and could swallow
+        // the next real disconnect. `destroy()` is idempotent, so reacting to every
+        // emission from a single subscription is equivalent but leak-free.
+        this.disconnect$
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(() => this.destroy());
         this.destroyRef.onDestroy(() => this.destroy());
     }
+    /**
+     * Sets (or replaces) the DOM target for the streaming `<video>`.
+     *
+     * Attaching is idempotent and order-independent on purpose: `create()` is
+     * driven by the network (`config`, or a synchronous prefetch adoption) while
+     * the container comes from the scene component's render pass, so either side
+     * can win the race. If `create()` got there first the element is detached —
+     * adopt it here instead of leaving it orphaned (which showed up as a white
+     * scene with an empty `#player` and no `videoStreamInitialized`).
+     */
     setContainer(container = null) {
         this.container = container;
+        this.attachVideoToContainer();
+    }
+    /**
+     * Moves `this.video` under the current container unless it is already there.
+     * `parentElement` (not `isConnected`) is the guard: it also covers a swap to a
+     * different container while the element sits in a still-live old one.
+     */
+    attachVideoToContainer() {
+        const container = this.container;
+        const video = this.video;
+        if (!container || !video || video.parentElement === container) {
+            return;
+        }
+        container.appendChild(video);
+        // Positive confirmation that the element the stream renders into actually
+        // exists in the document — the failure this guards against is silent
+        // (detached element, white scene), so the healthy path must be visible too.
+        Logger.info(`VideoService: <video id="${video.id}"> attached to #${container.id || '(container without id)'} | inDom=${video.isConnected} | hasStream=${!!video.srcObject}`);
+        // A detached element cannot start playing, so the play() issued by
+        // attachVideoStream before this point was lost — re-issue it now that the
+        // element is in the DOM. Deliberately NOT gated on `video.paused`: per spec
+        // play() clears `paused` synchronously, so a play that was accepted but
+        // never produced frames (detached element) is indistinguishable from a
+        // healthy one by that flag. play() on an already-playing element is a
+        // no-op, which makes the unconditional call the safe direction.
+        if (video.srcObject) {
+            void this.safePlay(video);
+        }
     }
     setLatencyTimings(latencyTimings) {
         this.latencyTestTimings.SetUETimings(latencyTimings);
@@ -2477,11 +2524,8 @@ class VideoService extends SubService {
     }
     create() {
         if (!this.container) {
-            Logger.warn('VideoService.create(): no container set; <video> will be built but never attached to the DOM, which suppresses autoplay.');
+            Logger.warn('VideoService.create(): no container set yet; <video> is built detached and will be attached (and replayed) by the next setContainer().');
         }
-        this.disconnect$
-            .pipe(take(1), takeUntil$1(this.destroy$))
-            .subscribe(() => this.destroy());
         this.destroy();
         this.createWebRtcVideo();
         this.createWebRtcAudio();
@@ -2529,10 +2573,10 @@ class VideoService extends SubService {
             return;
         }
         catch (error) {
-            if (error &&
-                typeof error === 'object' &&
-                'name' in error &&
-                error?.name !== 'NotAllowedError') {
+            // Only an autoplay block is worth retrying. Anything else (AbortError,
+            // a decode failure, a non-Error rejection value) is reported and left
+            // alone — retrying muted or on a gesture cannot fix those.
+            if (!isAutoplayBlocked(error)) {
                 Logger.warn('safePlay() rejected with non-autoplay error:', error);
                 return;
             }
@@ -2546,33 +2590,43 @@ class VideoService extends SubService {
             catch {
                 /* fall through */
             }
-            // Last resort: wait for the next real user gesture and play with/without sound
-            const resume = async () => {
-                try {
-                    // choose whether to unmute here
-                    // video.muted = false;
-                    await video.play();
-                }
-                catch {
-                    /* ignore, maybe another gesture needed */
-                }
-                finally {
-                    window.removeEventListener('pointerdown', resume, true);
-                    window.removeEventListener('keydown', resume, true);
-                }
-            };
-            window.addEventListener('pointerdown', resume, {
-                once: true,
-                capture: true,
-                signal: this.destroyAbort.signal,
-            });
-            window.addEventListener('keydown', resume, {
-                once: true,
-                capture: true,
-                signal: this.destroyAbort.signal,
-            });
+            // Last resort: wait for the next real user gesture.
+            // choose whether to unmute in armGestureRetry's caller
+            this.armGestureRetry(video);
         }
     }
+    /**
+     * Retries playback on the next real user gesture — the only thing that lifts
+     * a browser autoplay block. Shared by `safePlay()` and `playAudio()` so both
+     * media elements use one arming/cleanup path.
+     *
+     * Listeners are `once` + `capture` and bound to `destroyAbort.signal`, so a
+     * `destroy()` in this session drops them instead of leaking into the next one.
+     */
+    armGestureRetry(element) {
+        const resume = async () => {
+            try {
+                await element.play();
+            }
+            catch {
+                /* ignore — another gesture may be needed */
+            }
+            finally {
+                window.removeEventListener('pointerdown', resume, true);
+                window.removeEventListener('keydown', resume, true);
+            }
+        };
+        window.addEventListener('pointerdown', resume, {
+            once: true,
+            capture: true,
+            signal: this.destroyAbort.signal,
+        });
+        window.addEventListener('keydown', resume, {
+            once: true,
+            capture: true,
+            signal: this.destroyAbort.signal,
+        });
+    }
     async getStats(pcClient) {
         if (!pcClient || pcClient.connectionState === 'closed') {
             return null;
@@ -2603,47 +2657,7 @@ class VideoService extends SubService {
         stats.forEach((report) => {
             // Get the inbound-rtp for video
             if (report.type === 'inbound-rtp' && report.kind === 'video') {
-                Object.assign(newStat, report);
-                newStat.bytesReceivedStart =
-                    this.aggregatedStats && this.aggregatedStats.bytesReceivedStart
-                        ? this.aggregatedStats.bytesReceivedStart
-                        : report.bytesReceived;
-                newStat.framesDecodedStart =
-                    this.aggregatedStats && this.aggregatedStats.framesDecodedStart
-                        ? this.aggregatedStats.framesDecodedStart
-                        : report.framesDecoded;
-                newStat.timestampStart =
-                    this.aggregatedStats && this.aggregatedStats.timestampStart
-                        ? this.aggregatedStats.timestampStart
-                        : report.timestamp;
-                if (this.aggregatedStats && this.aggregatedStats.timestamp) {
-                    // Get the mimetype of the video codec being used
-                    if (report.codecId &&
-                        this.aggregatedStats.codecs &&
-                        Object.hasOwn(this.aggregatedStats.codecs, report.codecId)) {
-                        newStat.videoCodec = this.aggregatedStats.codecs[report.codecId];
-                    }
-                    if (this.aggregatedStats.bytesReceived) {
-                        // bitrate = bits received since last time / number of ms since last time
-                        // This is automatically in kbits (where k=1000) since time is in ms and stat we want is in seconds (so a '* 1000' then a '/ 1000' would negate each other)
-                        newStat.bitrate = Math.floor((8 *
-                            ((newStat.bytesReceived || 0) -
-                                this.aggregatedStats.bytesReceived)) /
-                            (newStat.timestamp - this.aggregatedStats.timestamp));
-                    }
-                    if (this.aggregatedStats.bytesReceivedStart) {
-                        newStat.avgBitrate = Math.floor((8 *
-                            ((newStat.bytesReceived || 0) -
-                                this.aggregatedStats.bytesReceivedStart)) /
-                            (newStat.timestamp - this.aggregatedStats.timestampStart));
-                    }
-                    if (this.aggregatedStats.framesDecodedStart) {
-                        newStat.avgFrameRate = Math.floor(((newStat.framesDecoded || 0) -
-                            this.aggregatedStats.framesDecodedStart) /
-                            ((newStat.timestamp - this.aggregatedStats.timestampStart) /
-                                1000));
-                    }
-                }
+                this.applyInboundVideoReport(newStat, report);
             }
             // Only read RTT from the *nominated* ICE candidate pair. The
             // stats report contains multiple `candidate-pair` entries (one
@@ -2662,15 +2676,7 @@ class VideoService extends SubService {
             }
             if (report.type === 'transport' &&
                 Object.hasOwn(report, 'selectedCandidatePairId')) {
-                const selectedPair = stats.get(report.selectedCandidatePairId);
-                if (selectedPair) {
-                    const local = stats.get(selectedPair.localCandidateId);
-                    const remote = stats.get(selectedPair.remoteCandidateId);
-                    newStat.selectedPair = {
-                        local: { type: local?.candidateType, url: local?.url },
-                        remote: { type: remote?.candidateType, url: remote?.url },
-                    };
-                }
+                this.applySelectedPair(newStat, stats, report.selectedCandidatePairId);
             }
             // Store mimetype of each codec
             if (Object.hasOwn(newStat, 'codecs') &&
@@ -2683,6 +2689,68 @@ class VideoService extends SubService {
                     .replace('audio/', '');
             }
         });
+        this.applySessionTotals(newStat);
+        this.aggregatedStats = newStat;
+        return this.onAggregatedStats(newStat);
+    }
+    /**
+     * Folds one `inbound-rtp` video report into the accumulator: copies the raw
+     * report, pins the per-session baselines on the first pass, then derives the
+     * deltas relative to the previous pass.
+     */
+    applyInboundVideoReport(newStat, report) {
+        Object.assign(newStat, report);
+        const previous = this.aggregatedStats;
+        newStat.bytesReceivedStart = pinBaseline(previous?.bytesReceivedStart, report.bytesReceived);
+        newStat.framesDecodedStart = pinBaseline(previous?.framesDecodedStart, report.framesDecoded);
+        newStat.timestampStart = pinBaseline(previous?.timestampStart, report.timestamp);
+        // Nothing to diff against on the first report of a session.
+        if (!previous?.timestamp) {
+            return;
+        }
+        // Get the mimetype of the video codec being used
+        if (report.codecId &&
+            previous.codecs &&
+            Object.hasOwn(previous.codecs, report.codecId)) {
+            newStat.videoCodec = previous.codecs[report.codecId];
+        }
+        if (previous.bytesReceived) {
+            // bitrate = bits received since last time / number of ms since last time
+            // This is automatically in kbits (where k=1000) since time is in ms and stat we want is in seconds (so a '* 1000' then a '/ 1000' would negate each other)
+            newStat.bitrate = Math.floor((8 * ((newStat.bytesReceived || 0) - previous.bytesReceived)) /
+                (newStat.timestamp - previous.timestamp));
+        }
+        if (previous.bytesReceivedStart) {
+            newStat.avgBitrate = Math.floor((8 * ((newStat.bytesReceived || 0) - previous.bytesReceivedStart)) /
+                (newStat.timestamp - previous.timestampStart));
+        }
+        if (previous.framesDecodedStart) {
+            newStat.avgFrameRate = Math.floor(((newStat.framesDecoded || 0) - previous.framesDecodedStart) /
+                ((newStat.timestamp - previous.timestampStart) / 1000));
+        }
+    }
+    /**
+     * Resolves the transport's selected candidate pair into the local/remote
+     * descriptors shown in the stats overlay. Silently skips when the pair (or
+     * either of its candidates) is missing from this report.
+     */
+    applySelectedPair(newStat, stats, selectedCandidatePairId) {
+        if (!selectedCandidatePairId) {
+            return;
+        }
+        const selectedPair = stats.get(selectedCandidatePairId);
+        if (!selectedPair) {
+            return;
+        }
+        const local = stats.get(selectedPair.localCandidateId);
+        const remote = stats.get(selectedPair.remoteCandidateId);
+        newStat.selectedPair = {
+            local: { type: local?.candidateType, url: local?.url },
+            remote: { type: remote?.candidateType, url: remote?.url },
+        };
+    }
+    /** Per-session values that do not come from a single report. */
+    applySessionTotals(newStat) {
         newStat.pixelRatio = +window.devicePixelRatio.toFixed(2);
         if (this.aggregatedStats.receiveToCompositeMs) {
             newStat.receiveToCompositeMs = this.aggregatedStats.receiveToCompositeMs;
@@ -2690,8 +2758,6 @@ class VideoService extends SubService {
         }
         // Calculate duration of run
         newStat.runTime = Math.floor((newStat.timestamp - newStat.timestampStart) / 1000);
-        this.aggregatedStats = newStat;
-        return this.onAggregatedStats(newStat);
     }
     onAggregatedStats(aggregatedStats) {
         return {
@@ -2716,6 +2782,11 @@ class VideoService extends SubService {
         // on to the RTCRtpReceiver until GC eventually clears srcObject.
         this.video.pause();
         this.video.srcObject = null;
+        // Remove exactly the element we own. Clearing every child of
+        // `this.container` instead would wipe DOM this service never created —
+        // including the children of a container that was swapped in after
+        // `create()`, since `container` always points at the newest one.
+        this.video.remove();
         if (this.audio) {
             this.audio.pause();
             this.audio.srcObject = null;
@@ -2723,12 +2794,12 @@ class VideoService extends SubService {
         this.video = null;
         this.audio = null;
         this.videoTrack$.next(null);
-        // Reset stat state to prevent stale deltas on next session
+        // Reset stat state to prevent stale deltas on next session — including the
+        // latency timings, which otherwise carry the previous session's UE/display
+        // deltas into the first measurements of the next one.
         this.aggregatedStats = {};
         this.VideoEncoderQP = 0;
-        while (this.container?.firstChild) {
-            this.container.removeChild(this.container.firstChild);
-        }
+        this.latencyTestTimings = new LatencyTimings();
     }
     changeStatusMainVideoOnScene(isVideoPlaying) {
         if (this.isVideoPlaying() === isVideoPlaying) {
@@ -2753,7 +2824,8 @@ class VideoService extends SubService {
         video.preload = 'auto';
         video.disablePictureInPicture = true;
         this.video = video;
-        this.container?.appendChild(this.video);
+        this.attachVideoToContainer();
+        Logger.info(`VideoService.create(): <video id="${video.id}"> created | inDom=${video.isConnected}`);
         fromEvent(this.video, 'play')
             .pipe(takeUntil$1(merge(this.disconnect$, this.destroy$)))
             .subscribe(() => this.changeStatusMainVideoOnScene(true));
@@ -2769,32 +2841,11 @@ class VideoService extends SubService {
     async playAudio(audio) {
         try {
             await audio.play();
-            return;
         }
         catch {
-            // Wait for the next real user gesture and retry.
-            const resume = async () => {
-                try {
-                    await audio.play();
-                }
-                catch {
-                    /* ignore — caller may need another gesture */
-                }
-                finally {
-                    window.removeEventListener('pointerdown', resume, true);
-                    window.removeEventListener('keydown', resume, true);
-                }
-            };
-            window.addEventListener('pointerdown', resume, {
-                once: true,
-                capture: true,
-                signal: this.destroyAbort.signal,
-            });
-            window.addEventListener('keydown', resume, {
-                once: true,
-                capture: true,
-                signal: this.destroyAbort.signal,
-            });
+            // Any rejection here is treated as "needs a gesture": unlike video, audio
+            // has no muted fallback left to try.
+            this.armGestureRetry(audio);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VideoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -2804,6 +2855,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
+/**
+ * Keeps a per-session baseline once it has been pinned, otherwise starts it from
+ * the current report. Mirrors the original `previous?.x ? previous.x : now`
+ * chain — `0` counts as "not pinned yet", which is what the deltas below expect.
+ */
+function pinBaseline(pinned, current) {
+    return (pinned || current);
+}
+/**
+ * Whether a rejected `play()` was blocked by the browser autoplay policy.
+ * Narrows an `unknown` rejection value without assuming it is an Error — a
+ * rejection with a non-object value must NOT be mistaken for an autoplay block,
+ * or it would trigger a pointless muted/gesture retry cycle.
+ */
+function isAutoplayBlocked(error) {
+    return (!!error &&
+        typeof error === 'object' &&
+        'name' in error &&
+        error.name === 'NotAllowedError');
+}
 
 class WebRtcPlayerService extends SubService {
     constructor() {
@@ -7493,6 +7564,12 @@ class UnrealSceneComponent {
             // keeps the next 3D route's connect unblocked (connectToSignaling$ gates
             // on `!cirrusConnected`).
             this.#store.dispatch(destroyUnrealScene());
+            // Drop the container reference last: `VideoService` is a root singleton
+            // that outlives this scene, so keeping the old `#player` wired would hold
+            // a detached subtree reachable and let a late `create()` attach the
+            // <video> to DOM nobody can see. The dispatch above already ran the
+            // teardown that removes the element itself.
+            this.videoService.setContainer(null);
         });
         effect(() => {
             const videoElement = this.videoElement();