fix(ci): scope LOC check to studio, split useTimelinePlayer + hyperframes-player under 500 LOC (#750)

* refactor: split useTimelinePlayer.ts and hyperframes-player.ts into focused modules (<500 LOC each) * fix(ci): scope 500 LOC check to packages/studio, add allowlist for grandfathered files * feat(cli): Linux ARM64 support — auto-install Chromium on DGX Spark / GB10 / Jetson Chrome Headless Shell has no Linux ARM64 binary. On arm64 Linux: - Detects the platform automatically - Tries to auto-install system Chromium via apt-get (works on Ubuntu/Debian ARM) - Falls back to clear manual instructions with exact commands - 'hyperframes browser ensure' guides through the setup interactively - After setup, all render commands work without any flags * fix(ci): disable Windows Defender real-time monitoring to prevent EPERM builds Path exclusions are insufficient — Defender re-scans new files created during bun install before the exclusion takes effect. Disable real-time monitoring for the entire job duration instead (standard CI practice). * refactor(studio): split all files >500 LOC + extract useToast, delete allowlist All 11 large files split into focused modules under 500 LOC. App.tsx extracted toast logic into useToast hook (493 LOC now). .filesize-allowlist deleted — no longer needed. * fix: remove unused imports from split files, extract useToast from App.tsx App.tsx: 504 → 493 lines (toast logic extracted to useToast hook) timelineDOM.ts: remove unused imports from re-export pattern MotionPanel.tsx: remove unused clampStudioCustomEasePoints import studioMotionOps.ts: remove unused StudioGsapMotionDirection import * fix(ci): use Set-MpPreference to fully disable Windows Defender (both jobs) * fix(producer): use node --experimental-strip-types instead of tsx for build:fonts Eliminates the tsx binary dependency that Windows Defender locks during bun install, causing EPERM errors. Node 22.6+ strips TypeScript types natively with no external binary. * chore: remove .filesize-allowlist — App.tsx is now 493 lines (<500) * fix(ci): disable Windows Defender before checkout to prevent all EPERM races * fix(producer): skip build:fonts if fontData.generated.ts already exists The generated file is tracked in git, so CI doesn't need to regenerate it. This avoids @fontsource/inter node_modules access on Windows which triggers EPERM from Defender scanning during bun install.
2026-09-10 22:20:14 +00:00 · 2026-05-13 01:48:12 +02:00
parent 03475d54c6
commit 91bdffffe6
74 changed files with 11760 additions and 9759 deletions
@@ -0,0 +1,96 @@
+/**
+ * rAF-based clock that polls a `DirectTimelineAdapter` for current time and
+ * drives the player's time/playback-ended callbacks.
+ *
+ * Used for same-origin standalone GSAP compositions that expose
+ * `window.__timelines` but have no runtime bridge — the player drives them
+ * directly through the adapter instead of going through postMessage.
+ */
+
+import type { DirectTimelineAdapter } from "./timeline-adapters.js";
+
+const UI_UPDATE_INTERVAL_MS = 100;
+
+export interface ClockCallbacks {
+  /** Called every ~100ms and on completion with the current time. */
+  onTimeUpdate: (currentTime: number, duration: number) => void;
+  /** Called when playback reaches the end. Return true to loop (seek+play). */
+  onEnded: () => boolean;
+  /** Get the current loop flag. */
+  getLoop: () => boolean;
+  /** Trigger a seek-then-play loop restart. */
+  restart: () => void;
+  /** Notify that playback has paused (from the timeline side). */
+  onPaused: () => void;
+}
+
+export class DirectTimelineClock {
+  private _raf: number | null = null;
+  private _lastUpdateMs = 0;
+
+  constructor(private readonly _callbacks: ClockCallbacks) {}
+
+  start(
+    timeline: DirectTimelineAdapter,
+    getCurrentTime: () => number,
+    getDuration: () => number,
+    isPaused: () => boolean,
+  ): void {
+    this.stop();
+
+    const tick = () => {
+      if (isPaused()) {
+        this._raf = null;
+        return;
+      }
+
+      let currentTime: number;
+      try {
+        currentTime = timeline.time();
+      } catch {
+        this._raf = null;
+        return;
+      }
+
+      const duration = getDuration();
+      if (duration > 0) currentTime = Math.min(currentTime, duration);
+
+      const completedPlayback = duration > 0 && currentTime >= duration;
+      const now = performance.now();
+
+      if (now - this._lastUpdateMs > UI_UPDATE_INTERVAL_MS || completedPlayback) {
+        this._lastUpdateMs = now;
+        this._callbacks.onTimeUpdate(currentTime, duration);
+      }
+
+      if (completedPlayback) {
+        if (this._callbacks.getLoop()) {
+          this._callbacks.restart();
+          return;
+        }
+        try {
+          timeline.pause();
+        } catch {
+          /* ignore */
+        }
+        this._callbacks.onPaused();
+        this._raf = null;
+        return;
+      }
+
+      this._raf = requestAnimationFrame(tick);
+    };
+
+    this._raf = requestAnimationFrame(tick);
+  }
+
+  stop(): void {
+    if (this._raf === null) return;
+    cancelAnimationFrame(this._raf);
+    this._raf = null;
+  }
+
+  get isRunning(): boolean {
+    return this._raf !== null;
+  }
+}