@hyperframes/core 0.9.20 → 0.9.21

package/dist/runtime/bridge.js

@@ -1,3 +1,4 @@
+import { wallSetTimeout } from "./wallClock.js";
 import { swallow } from "./diagnostics.js";
 import { inspectRuntimeProtocol, runtimeProtocolFpsToNumber, runtimeProtocolMetadata, } from "./protocol.js";
 let runtimeProtocolFps = 30;
@@ -134,7 +135,7 @@ function flashElements(selectors, duration) {
             const els = document.querySelectorAll(selector);
             els.forEach((el) => {
                 el.classList.add("__hf-flash");
-                setTimeout(() => el.classList.remove("__hf-flash"), duration);
+                wallSetTimeout(() => el.classList.remove("__hf-flash"), duration);
             });
         }
         catch (err) {

package/dist/runtime/clock.d.ts

@@ -30,6 +30,8 @@ export declare class TransportClock {
     private _lastReadMs;
     private _lastNow;
     private _audioStart;
+    private _reading;
+    private _ahead;
     constructor(opts?: {
         initialTime?: number;
         rate?: number;
@@ -38,6 +40,9 @@ export declare class TransportClock {
     });
     now(): number;
     private _elementTimeNeverBehind;
+    private _betweenUpdates;
+    private _runAhead;
+    aheadOf(el: HTMLMediaElement): number;
     private _heldUntilAudioOutputStarts;
     private _pendingAudioStart;
     /** Folds a >500ms gap since the last read into `_playStartMs` so it's never reported as played time. */

package/dist/runtime/clock.js

@@ -6,6 +6,15 @@ const STALL_ADJUSTED_LAG_MS = 33;
 const HAVE_FUTURE_DATA = 3;
 const AUDIO_START_WAIT_MS = 1500;
 const MEDIA_SYNC_STEER_TOLERANCE_SECONDS = 0.04;
+const MAX_MEDIA_STEP_SECONDS = 0.25;
+const MEDIA_STEPS_KEPT = 8;
+const furthestAhead = (reading) => reading ? Math.max(0, ...reading.steps) : 0;
+function noteStep(reading, time) {
+    const step = time - reading.time;
+    if (step > 0 && step <= MAX_MEDIA_STEP_SECONDS)
+        reading.steps = [...reading.steps.slice(1 - MEDIA_STEPS_KEPT), step];
+    reading.time = time;
+}
 export class TransportClock {
     _baseTime = 0;
     _playStartMs = null;
@@ -20,6 +29,8 @@ export class TransportClock {
     _lastReadMs = null;
     _lastNow = 0;
     _audioStart = null;
+    _reading = null;
+    _ahead = null;
     constructor(opts) {
         this._baseTime = opts?.initialTime ?? 0;
         this._rate = opts?.rate ?? 1;
@@ -27,6 +38,7 @@ export class TransportClock {
         this._nowMs = opts?.nowMs ?? (() => performance.now());
     }
     now() {
+        this._ahead = null;
         if (this._playStartMs === null)
             return this._baseTime;
         // Audio-master: drift is impossible because audio IS the clock. Clearing
@@ -63,13 +75,42 @@ export class TransportClock {
         const spec = rate ?? 1;
         const time = timeAtSourceTime(spec, el.currentTime - mediaStart) + compositionStart;
         const held = this._heldUntilAudioOutputStarts(el.seeking, time);
-        if (held !== undefined)
+        if (held !== undefined) {
+            this._reading = null;
             return held;
-        if (time >= this._lastNow)
-            return time;
+        }
+        const between = this._betweenUpdates(el, time);
+        if (between !== null)
+            return between;
         const wrapped = el.loop && this._lastNow - time > timeAtSourceTime(spec, el.duration) / 2;
         return !wrapped && el.readyState < HAVE_FUTURE_DATA ? this._lastNow : null;
     }
+    // Chromium moves currentTime in 10-50 ms steps, so reading it as is holds a frame, then jumps. Run on at the play
+    // rate, kept within [element time, element time + its largest recent step], never back; null when time is behind
+    // the playhead by more than that step (a late clip, not a step).
+    _betweenUpdates(el, time) {
+        const nowMs = this._nowMs();
+        const last = this._reading?.el === el ? this._reading : null;
+        if (time < this._lastNow - furthestAhead(last))
+            return null;
+        if (!last) {
+            this._reading = { el, time, steps: [], from: time, fromMs: nowMs };
+            return this._runAhead(el, time, Math.max(time, this._lastNow));
+        }
+        noteStep(last, time);
+        const run = last.from + ((nowMs - last.fromMs) / 1000) * this._rate;
+        const held = Math.min(Math.max(run, time), time + furthestAhead(last));
+        if (held !== run)
+            Object.assign(last, { from: held, fromMs: nowMs });
+        return this._runAhead(el, time, Math.max(held, this._lastNow));
+    }
+    _runAhead(el, time, now) {
+        this._ahead = { el, seconds: now - time };
+        return now;
+    }
+    aheadOf(el) {
+        return this._ahead?.el === el ? this._ahead.seconds : 0;
+    }
     _heldUntilAudioOutputStarts(seeking, time) {
         const pending = this._pendingAudioStart();
         if (seeking)
@@ -110,6 +151,7 @@ export class TransportClock {
         this._playStartMs = this._nowMs();
         this._audioStart = { sinceMs: this._playStartMs, at: this._baseTime, from: null };
         this._lastNow = this._baseTime;
+        this._reading = null;
         // Not a stall: the gap since the clock was last read (possibly a long
         // paused idle) says nothing about lost playback time, since none was
         // playing. `_applyStallCorrection` treats null as "nothing to compare
@@ -122,6 +164,7 @@ export class TransportClock {
             return false;
         this._baseTime = this.now();
         this._playStartMs = null;
+        this._reading = null;
         return true;
     }
     seek(timeSeconds) {
@@ -130,6 +173,7 @@ export class TransportClock {
             : Math.max(0, timeSeconds);
         this._baseTime = clamped;
         this._lastNow = clamped;
+        this._reading = null;
         if (this._playStartMs !== null) {
             this._playStartMs = this._nowMs();
             this._audioStart = { sinceMs: this._playStartMs, at: clamped, from: null };
@@ -143,6 +187,7 @@ export class TransportClock {
     }
     setRate(rate) {
         const safe = Number.isFinite(rate) && rate > 0 ? Math.max(0.1, Math.min(5, rate)) : 1;
+        this._reading = null;
         if (this._playStartMs !== null) {
             this._baseTime = this.now();
             this._playStartMs = this._nowMs();
@@ -189,6 +234,7 @@ export class TransportClock {
             this._lastReadMs = null;
         }
         this._audioSource = null;
+        this._reading = null;
     }
     /** The element the playhead currently follows, if the source is one. */
     // fallow-ignore-next-line unused-class-member

package/dist/runtime/mediaSteer.d.ts

@@ -3,7 +3,7 @@ export declare const MEDIA_SYNC_TOLERANCE_SECONDS = 0.04;
 export declare const MEDIA_HARD_SYNC_SECONDS = 0.5;
 export declare function markMediaRestarted(el: HTMLMediaElement): void;
 /** Rate or seek for media `offset` s behind (+) or ahead (-); a lag still growing (`settled` false) never seeks. */
-export declare function steerMedia(el: HTMLMediaElement, offset: number, baseRate: number, settled: boolean, audioOnly?: boolean, hidden?: boolean): {
+export declare function steerMedia(el: HTMLMediaElement, offset: number, baseRate: number, settled: boolean, audioOnly?: boolean): {
     rate: number;
     seek: boolean;
 };

package/dist/runtime/mediaSteer.js

@@ -13,8 +13,6 @@ const MEDIA_STEER_RELEASE_SECONDS = 0.01;
 const AUDIO_MAX_STEER = 0.1;
 const AUDIO_STEER_LIMIT_SECONDS = 0.1;
 const WEBKIT_AUDIO_START_LAG_SECONDS = 0.65;
-// A video nobody sees runs up to twice as fast (half as slow) to reach the playhead: the lag in seconds times this.
-const HIDDEN_GAIN = 5;
 /** Direction (+1 fast, -1 slow) an element is being steered in; absent when it plays at its authored rate. */
 const steering = new WeakMap();
 /** Started or seeked, not yet moving in tolerance: its lag is its own output latency, which a seek only renews. */
@@ -23,7 +21,7 @@ export function markMediaRestarted(el) {
     catchingUp.add(el);
 }
 /** Rate or seek for media `offset` s behind (+) or ahead (-); a lag still growing (`settled` false) never seeks. */
-export function steerMedia(el, offset, baseRate, settled, audioOnly = el.tagName === "AUDIO", hidden = false) {
+export function steerMedia(el, offset, baseRate, settled, audioOnly = el.tagName === "AUDIO") {
     const lag = Math.abs(offset);
     if (audioOnly && isWebKit()) {
         steering.delete(el);
@@ -38,8 +36,6 @@ export function steerMedia(el, offset, baseRate, settled, audioOnly = el.tagName
         return { rate: baseRate, seek: true };
     }
     const direction = Math.sign(offset);
-    if (hidden && lag > MEDIA_SYNC_TOLERANCE_SECONDS)
-        return steerHidden(el, direction, lag, baseRate);
     const current = steering.get(el);
     if (lag > MEDIA_SYNC_TOLERANCE_SECONDS)
         steering.set(el, direction);
@@ -51,11 +47,6 @@ export function steerMedia(el, offset, baseRate, settled, audioOnly = el.tagName
     const steer = audioOnly ? Math.min(step, AUDIO_MAX_STEER) : step;
     return { rate: baseRate * (1 + direction * steer), seek: false };
 }
-function steerHidden(el, direction, lag, baseRate) {
-    steering.set(el, direction);
-    const steer = Math.min(direction > 0 ? 1 : 0.5, lag * HIDDEN_GAIN);
-    return { rate: baseRate * (1 + direction * steer), seek: false };
-}
 /** Drop `el`'s steering: it was seeked, paused or replaced, so its old offset says nothing. */
 export function forgetSteering(el) {
     steering.delete(el);

package/dist/runtime/wallClock.d.ts

@@ -0,0 +1,8 @@
+type TimeoutId = ReturnType<typeof setTimeout>;
+type IntervalId = ReturnType<typeof setInterval>;
+type Handler = (...args: never[]) => void;
+export declare function wallSetTimeout(handler: Handler, timeout?: number, ...args: unknown[]): TimeoutId;
+export declare function wallClearTimeout(id: TimeoutId | null | undefined): void;
+export declare function wallSetInterval(handler: Handler, timeout?: number, ...args: unknown[]): IntervalId;
+export declare function wallClearInterval(id: IntervalId | null | undefined): void;
+export {};

package/dist/runtime/wallClock.js

@@ -0,0 +1,13 @@
+const shim = () => globalThis.__HF_VIRTUAL_TIME__;
+export function wallSetTimeout(handler, timeout, ...args) {
+    return (shim()?.originalSetTimeout ?? setTimeout)(handler, timeout, ...args);
+}
+export function wallClearTimeout(id) {
+    (shim()?.originalClearTimeout ?? clearTimeout)(id ?? undefined);
+}
+export function wallSetInterval(handler, timeout, ...args) {
+    return (shim()?.originalSetInterval ?? setInterval)(handler, timeout, ...args);
+}
+export function wallClearInterval(id) {
+    (shim()?.originalClearInterval ?? clearInterval)(id ?? undefined);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/core",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "description": "",
   "repository": {
     "type": "git",
@@ -437,9 +437,9 @@
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",
     "wawoff2": "^2.0.1",
-    "@hyperframes/lint": "0.9.20",
-    "@hyperframes/studio-server": "0.9.20",
-    "@hyperframes/parsers": "0.9.20"
+    "@hyperframes/lint": "0.9.21",
+    "@hyperframes/parsers": "0.9.21",
+    "@hyperframes/studio-server": "0.9.21"
   },
   "devDependencies": {
     "@fontsource/archivo-black": "^5.2.8",