mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
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.
This commit is contained in:
Miguel Ángel
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* Keyboard shortcut handler for playback (Space/JKL/Arrow keys) and
|
||||
* iframe shortcut listener setup.
|
||||
*
|
||||
* Accepts stable playback callbacks and returns the keyboard event handlers
|
||||
* and iframe listener setup function. Has no side effects of its own.
|
||||
*/
|
||||
|
||||
import { useRef, useCallback } from "react";
|
||||
import { useCaptionStore } from "../../captions/store";
|
||||
import { shouldIgnorePlaybackShortcutEvent, SHUTTLE_SPEEDS } from "../lib/playbackShortcuts";
|
||||
import { usePlayerStore } from "../store/playerStore";
|
||||
import { stepFrameTime, STUDIO_PREVIEW_FPS } from "../lib/time";
|
||||
import type { PlaybackAdapter } from "../lib/playbackTypes";
|
||||
|
||||
interface UsePlaybackKeyboardParams {
|
||||
iframeRef: React.RefObject<HTMLIFrameElement | null>;
|
||||
shuttleDirectionRef: React.MutableRefObject<"forward" | "backward" | null>;
|
||||
shuttleSpeedIndexRef: React.MutableRefObject<number>;
|
||||
iframeShortcutCleanupRef: React.MutableRefObject<(() => void) | null>;
|
||||
getAdapter: () => PlaybackAdapter | null;
|
||||
play: () => void;
|
||||
playBackward: (rate: number) => void;
|
||||
pause: () => void;
|
||||
seek: (time: number) => void;
|
||||
}
|
||||
|
||||
export function usePlaybackKeyboard({
|
||||
iframeRef,
|
||||
shuttleDirectionRef,
|
||||
shuttleSpeedIndexRef,
|
||||
iframeShortcutCleanupRef,
|
||||
getAdapter,
|
||||
play,
|
||||
playBackward,
|
||||
pause,
|
||||
seek,
|
||||
}: UsePlaybackKeyboardParams) {
|
||||
const pressedCodesRef = useRef(new Set<string>());
|
||||
const playbackKeyDownRef = useRef<(e: KeyboardEvent) => void>(() => {});
|
||||
const playbackKeyUpRef = useRef<(e: KeyboardEvent) => void>(() => {});
|
||||
|
||||
const stepFrames = useCallback(
|
||||
(deltaFrames: number) => {
|
||||
const adapter = getAdapter();
|
||||
const currentTime = adapter?.getTime() ?? usePlayerStore.getState().currentTime;
|
||||
seek(stepFrameTime(currentTime, deltaFrames, STUDIO_PREVIEW_FPS));
|
||||
},
|
||||
[getAdapter, seek],
|
||||
);
|
||||
|
||||
const shuttle = useCallback(
|
||||
(direction: "forward" | "backward") => {
|
||||
if (shuttleDirectionRef.current === direction) {
|
||||
shuttleSpeedIndexRef.current = Math.min(
|
||||
shuttleSpeedIndexRef.current + 1,
|
||||
SHUTTLE_SPEEDS.length - 1,
|
||||
);
|
||||
} else {
|
||||
shuttleSpeedIndexRef.current = 0;
|
||||
}
|
||||
const speed = SHUTTLE_SPEEDS[shuttleSpeedIndexRef.current];
|
||||
usePlayerStore.getState().setPlaybackRate(speed);
|
||||
if (direction === "forward") {
|
||||
play();
|
||||
} else {
|
||||
playBackward(speed);
|
||||
}
|
||||
},
|
||||
[play, playBackward, shuttleDirectionRef, shuttleSpeedIndexRef],
|
||||
);
|
||||
|
||||
const togglePlay = useCallback(() => {
|
||||
if (usePlayerStore.getState().isPlaying) {
|
||||
pause();
|
||||
} else {
|
||||
play();
|
||||
}
|
||||
}, [play, pause]);
|
||||
|
||||
const handlePlaybackKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.defaultPrevented) return;
|
||||
const captionState = useCaptionStore.getState();
|
||||
if (
|
||||
shouldIgnorePlaybackShortcutEvent(e, {
|
||||
isCaptionEditMode: captionState.isEditMode,
|
||||
selectedCaptionSegmentCount: captionState.selectedSegmentIds.size,
|
||||
})
|
||||
) {
|
||||
return;
|
||||
}
|
||||
pressedCodesRef.current.add(e.code);
|
||||
if (e.code === "Space") {
|
||||
e.preventDefault();
|
||||
togglePlay();
|
||||
return;
|
||||
}
|
||||
if (e.code === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
stepFrames(e.shiftKey ? -10 : -1);
|
||||
return;
|
||||
}
|
||||
if (e.code === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
stepFrames(e.shiftKey ? 10 : 1);
|
||||
return;
|
||||
}
|
||||
if (e.repeat) return;
|
||||
if (e.code === "KeyK") {
|
||||
e.preventDefault();
|
||||
pause();
|
||||
return;
|
||||
}
|
||||
if (e.code === "KeyJ") {
|
||||
e.preventDefault();
|
||||
if (pressedCodesRef.current.has("KeyK")) {
|
||||
stepFrames(-1);
|
||||
return;
|
||||
}
|
||||
shuttle("backward");
|
||||
return;
|
||||
}
|
||||
if (e.code === "KeyL") {
|
||||
e.preventDefault();
|
||||
if (pressedCodesRef.current.has("KeyK")) {
|
||||
stepFrames(1);
|
||||
return;
|
||||
}
|
||||
shuttle("forward");
|
||||
}
|
||||
},
|
||||
[pause, shuttle, stepFrames, togglePlay],
|
||||
);
|
||||
|
||||
const handlePlaybackKeyUp = useCallback((e: KeyboardEvent) => {
|
||||
pressedCodesRef.current.delete(e.code);
|
||||
}, []);
|
||||
|
||||
playbackKeyDownRef.current = handlePlaybackKeyDown;
|
||||
playbackKeyUpRef.current = handlePlaybackKeyUp;
|
||||
|
||||
const attachIframeShortcutListeners = useCallback(() => {
|
||||
iframeShortcutCleanupRef.current?.();
|
||||
iframeShortcutCleanupRef.current = null;
|
||||
|
||||
const iframeWin = iframeRef.current?.contentWindow;
|
||||
const iframeDoc = iframeRef.current?.contentDocument;
|
||||
if (!iframeWin && !iframeDoc) return;
|
||||
|
||||
const handleIframeKeyDown = (e: KeyboardEvent) => playbackKeyDownRef.current(e);
|
||||
const handleIframeKeyUp = (e: KeyboardEvent) => playbackKeyUpRef.current(e);
|
||||
iframeWin?.addEventListener("keydown", handleIframeKeyDown, true);
|
||||
iframeWin?.addEventListener("keyup", handleIframeKeyUp, true);
|
||||
iframeDoc?.addEventListener("keydown", handleIframeKeyDown, true);
|
||||
iframeDoc?.addEventListener("keyup", handleIframeKeyUp, true);
|
||||
iframeShortcutCleanupRef.current = () => {
|
||||
iframeWin?.removeEventListener("keydown", handleIframeKeyDown, true);
|
||||
iframeWin?.removeEventListener("keyup", handleIframeKeyUp, true);
|
||||
iframeDoc?.removeEventListener("keydown", handleIframeKeyDown, true);
|
||||
iframeDoc?.removeEventListener("keyup", handleIframeKeyUp, true);
|
||||
};
|
||||
}, [iframeRef, iframeShortcutCleanupRef]);
|
||||
|
||||
return {
|
||||
playbackKeyDownRef,
|
||||
playbackKeyUpRef,
|
||||
attachIframeShortcutListeners,
|
||||
togglePlay,
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,288 @@
|
||||
/**
|
||||
* React callbacks for synchronising the player store from iframe runtime data.
|
||||
*
|
||||
* Covers four related concerns:
|
||||
* - processTimelineMessage — turn a clip-manifest postMessage into TimelineElements
|
||||
* - enrichMissingCompositions — fill gaps the manifest misses (element-ref starts)
|
||||
* - initializeAdapter — called after iframe load: seek, set duration, read elements
|
||||
* - onIframeLoad — orchestrates initializeAdapter with a message-based fallback
|
||||
*/
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { usePlayerStore } from "../store/playerStore";
|
||||
import type { TimelineElement } from "../store/playerStore";
|
||||
import type { PlaybackAdapter, ClipManifestClip, IframeWindow } from "../lib/playbackTypes";
|
||||
import {
|
||||
parseTimelineFromDOM,
|
||||
createTimelineElementFromManifestClip,
|
||||
findTimelineDomNodeForClip,
|
||||
createImplicitTimelineLayersFromDOM,
|
||||
buildStandaloneRootTimelineElement,
|
||||
mergeTimelineElementsPreservingDowngrades,
|
||||
getTimelineElementSelector,
|
||||
} from "../lib/timelineDOM";
|
||||
import {
|
||||
normalizePreviewViewport,
|
||||
autoHealMissingCompositionIds,
|
||||
unmutePreviewMedia,
|
||||
buildMissingCompositionElements,
|
||||
} from "../lib/timelineIframeHelpers";
|
||||
import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
|
||||
|
||||
interface UseTimelineSyncCallbacksParams {
|
||||
iframeRef: React.RefObject<HTMLIFrameElement | null>;
|
||||
probeIntervalRef: React.MutableRefObject<ReturnType<typeof setInterval> | undefined>;
|
||||
pendingSeekRef: React.MutableRefObject<number | null>;
|
||||
isRefreshingRef: React.MutableRefObject<boolean>;
|
||||
getAdapter: () => PlaybackAdapter | null;
|
||||
syncTimelineElements: (elements: TimelineElement[], nextDuration?: number) => void;
|
||||
setDuration: (v: number) => void;
|
||||
setCurrentTime: (v: number) => void;
|
||||
setTimelineReady: (v: boolean) => void;
|
||||
setIsPlaying: (v: boolean) => void;
|
||||
attachIframeShortcutListeners: () => void;
|
||||
}
|
||||
|
||||
export function useTimelineSyncCallbacks({
|
||||
iframeRef,
|
||||
probeIntervalRef,
|
||||
pendingSeekRef,
|
||||
isRefreshingRef,
|
||||
getAdapter,
|
||||
syncTimelineElements,
|
||||
setDuration,
|
||||
setCurrentTime,
|
||||
setTimelineReady,
|
||||
setIsPlaying,
|
||||
attachIframeShortcutListeners,
|
||||
}: UseTimelineSyncCallbacksParams) {
|
||||
// Convert a runtime timeline message (from iframe postMessage) into TimelineElements
|
||||
const processTimelineMessage = useCallback(
|
||||
(data: {
|
||||
clips: ClipManifestClip[];
|
||||
durationInFrames: number;
|
||||
scenes?: Array<{ id: string; label: string; start: number; duration: number }>;
|
||||
}) => {
|
||||
if (!data.clips || data.clips.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show root-level clips: no parentCompositionId, OR parent is a "phantom wrapper"
|
||||
const clipCompositionIds = new Set(data.clips.map((c) => c.compositionId).filter(Boolean));
|
||||
const filtered = data.clips.filter(
|
||||
(clip) => !clip.parentCompositionId || !clipCompositionIds.has(clip.parentCompositionId),
|
||||
);
|
||||
let iframeDoc: Document | null = null;
|
||||
try {
|
||||
iframeDoc = iframeRef.current?.contentDocument ?? null;
|
||||
} catch {
|
||||
iframeDoc = null;
|
||||
}
|
||||
const usedHostEls = new Set<Element>();
|
||||
const els: TimelineElement[] = filtered.map((clip, index) => {
|
||||
const hostEl = iframeDoc
|
||||
? findTimelineDomNodeForClip(iframeDoc, clip, index, usedHostEls)
|
||||
: null;
|
||||
if (hostEl) usedHostEls.add(hostEl);
|
||||
return createTimelineElementFromManifestClip({
|
||||
clip,
|
||||
fallbackIndex: index,
|
||||
doc: iframeDoc,
|
||||
hostEl,
|
||||
});
|
||||
});
|
||||
const rawDuration = data.durationInFrames / 30;
|
||||
// Clamp non-finite or absurdly large durations — the runtime can emit
|
||||
// Infinity when it detects a loop-inflated GSAP timeline without an
|
||||
// explicit data-duration on the root composition.
|
||||
const newDuration = Number.isFinite(rawDuration) && rawDuration < 7200 ? rawDuration : 0;
|
||||
const effectiveDuration = newDuration > 0 ? newDuration : usePlayerStore.getState().duration;
|
||||
const clampedEls =
|
||||
effectiveDuration > 0
|
||||
? els
|
||||
.filter((element) => element.start < effectiveDuration)
|
||||
.map((element) => ({
|
||||
...element,
|
||||
duration: Math.min(element.duration, effectiveDuration - element.start),
|
||||
}))
|
||||
.filter((element) => element.duration > 0)
|
||||
: els;
|
||||
const timelineEls =
|
||||
iframeDoc && effectiveDuration > 0
|
||||
? [
|
||||
...clampedEls,
|
||||
...createImplicitTimelineLayersFromDOM(iframeDoc, effectiveDuration, clampedEls),
|
||||
]
|
||||
: clampedEls;
|
||||
if (timelineEls.length > 0) {
|
||||
syncTimelineElements(timelineEls, newDuration > 0 ? newDuration : undefined);
|
||||
}
|
||||
},
|
||||
[iframeRef, syncTimelineElements],
|
||||
);
|
||||
|
||||
const enrichMissingCompositions = useCallback(() => {
|
||||
try {
|
||||
const iframe = iframeRef.current;
|
||||
const doc = iframe?.contentDocument;
|
||||
const iframeWin = iframe?.contentWindow as IframeWindow | null;
|
||||
if (!doc || !iframeWin) return;
|
||||
|
||||
const currentEls = usePlayerStore.getState().elements;
|
||||
const rootDuration = usePlayerStore.getState().duration;
|
||||
const { missing, updatedEls, patched } = buildMissingCompositionElements(
|
||||
doc,
|
||||
iframeWin,
|
||||
currentEls,
|
||||
rootDuration,
|
||||
);
|
||||
|
||||
if (missing.length > 0 || patched) {
|
||||
// Dedup: ensure no missing element duplicates an existing one
|
||||
const finalIds = new Set(updatedEls.map((e) => e.id));
|
||||
const dedupedMissing = missing.filter((m) => !finalIds.has(m.id));
|
||||
syncTimelineElements([...updatedEls, ...dedupedMissing]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("[useTimelinePlayer] enrichMissingCompositions failed", err);
|
||||
}
|
||||
}, [iframeRef, syncTimelineElements]);
|
||||
|
||||
const initializeAdapter = useCallback(() => {
|
||||
const adapter = getAdapter();
|
||||
if (!adapter || adapter.getDuration() <= 0) return false;
|
||||
|
||||
adapter.pause();
|
||||
const seekTo = pendingSeekRef.current;
|
||||
pendingSeekRef.current = null;
|
||||
const startTime = seekTo != null ? Math.min(seekTo, adapter.getDuration()) : 0;
|
||||
|
||||
adapter.seek(startTime);
|
||||
const adapterDur = adapter.getDuration();
|
||||
if (
|
||||
Number.isFinite(adapterDur) &&
|
||||
adapterDur > 0 &&
|
||||
adapterDur < 7200 &&
|
||||
adapterDur !== usePlayerStore.getState().duration
|
||||
) {
|
||||
setDuration(adapterDur);
|
||||
}
|
||||
setCurrentTime(startTime);
|
||||
if (!isRefreshingRef.current) {
|
||||
setTimelineReady(true);
|
||||
}
|
||||
isRefreshingRef.current = false;
|
||||
setIsPlaying(false);
|
||||
|
||||
try {
|
||||
const iframe = iframeRef.current;
|
||||
const doc = iframe?.contentDocument;
|
||||
const iframeWin = iframe?.contentWindow as IframeWindow | null;
|
||||
if (doc && iframeWin) {
|
||||
normalizePreviewViewport(doc, iframeWin);
|
||||
autoHealMissingCompositionIds(doc);
|
||||
attachIframeShortcutListeners();
|
||||
}
|
||||
|
||||
const manifest = iframeWin?.__clipManifest;
|
||||
if (manifest && manifest.clips.length > 0) {
|
||||
processTimelineMessage(manifest);
|
||||
}
|
||||
enrichMissingCompositions();
|
||||
|
||||
if (usePlayerStore.getState().elements.length === 0 && doc) {
|
||||
const els = parseTimelineFromDOM(doc, adapter.getDuration());
|
||||
if (els.length > 0) syncTimelineElements(els);
|
||||
}
|
||||
if (usePlayerStore.getState().elements.length === 0 && doc) {
|
||||
const rootComp = doc.querySelector("[data-composition-id]");
|
||||
const rootDuration = adapter.getDuration();
|
||||
if (rootComp && rootDuration > 0) {
|
||||
const fallbackElement = buildStandaloneRootTimelineElement({
|
||||
compositionId: rootComp.getAttribute("data-composition-id") || "composition",
|
||||
tagName: (rootComp as HTMLElement).tagName || "div",
|
||||
rootDuration,
|
||||
iframeSrc: iframe?.src || "",
|
||||
selector: getTimelineElementSelector(rootComp),
|
||||
});
|
||||
if (fallbackElement) syncTimelineElements([fallbackElement]);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("[useTimelinePlayer] Could not read timeline elements from iframe", err);
|
||||
}
|
||||
return true;
|
||||
}, [
|
||||
getAdapter,
|
||||
setDuration,
|
||||
setCurrentTime,
|
||||
setTimelineReady,
|
||||
setIsPlaying,
|
||||
processTimelineMessage,
|
||||
enrichMissingCompositions,
|
||||
syncTimelineElements,
|
||||
attachIframeShortcutListeners,
|
||||
iframeRef,
|
||||
isRefreshingRef,
|
||||
pendingSeekRef,
|
||||
]);
|
||||
|
||||
const onIframeLoad = useCallback(() => {
|
||||
unmutePreviewMedia(iframeRef.current);
|
||||
if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
|
||||
|
||||
// Fast path: adapter already available (in-place reloads, cached compositions)
|
||||
if (initializeAdapter()) return;
|
||||
|
||||
// The runtime posts "state" or "timeline" messages once ready.
|
||||
// Listen for those instead of polling.
|
||||
const iframe = iframeRef.current;
|
||||
let settled = false;
|
||||
|
||||
const trySettle = () => {
|
||||
if (settled) return;
|
||||
if (initializeAdapter()) {
|
||||
settled = true;
|
||||
window.removeEventListener("message", onMessage);
|
||||
if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
|
||||
}
|
||||
};
|
||||
|
||||
const onMessage = (e: MessageEvent) => {
|
||||
if (e.source && iframe && e.source !== iframe.contentWindow) return;
|
||||
const data = e.data;
|
||||
if (data?.source === "hf-preview" && (data?.type === "state" || data?.type === "timeline")) {
|
||||
trySettle();
|
||||
}
|
||||
};
|
||||
window.addEventListener("message", onMessage);
|
||||
|
||||
// Safety net: if no message arrives within 5s, try one last time then give up.
|
||||
probeIntervalRef.current = setTimeout(() => {
|
||||
if (!settled) {
|
||||
trySettle();
|
||||
if (!settled) {
|
||||
console.warn("[useTimelinePlayer] Runtime did not signal readiness within 5s");
|
||||
}
|
||||
}
|
||||
window.removeEventListener("message", onMessage);
|
||||
}, 5000) as unknown as ReturnType<typeof setInterval>;
|
||||
}, [initializeAdapter, iframeRef, probeIntervalRef]);
|
||||
|
||||
// Stable refs so mount-effect closures always call the latest version
|
||||
const processTimelineMessageRef = { current: processTimelineMessage };
|
||||
const enrichMissingCompositionsRef = { current: enrichMissingCompositions };
|
||||
|
||||
return {
|
||||
processTimelineMessage,
|
||||
processTimelineMessageRef,
|
||||
enrichMissingCompositions,
|
||||
enrichMissingCompositionsRef,
|
||||
initializeAdapter,
|
||||
onIframeLoad,
|
||||
};
|
||||
}
|
||||
|
||||
// Re-export the merge helper so the hook can use it via this module (avoids
|
||||
// adding another import line to the already-large useTimelinePlayer.ts).
|
||||
export { mergeTimelineElementsPreservingDowngrades, getTimelineElementIdentity };
|
||||
Reference in New Issue
Block a user