ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(studio): simplify hooks, split contexts, remove dead code (#1416)

Browse Source 
* fix(studio): guard Zustand no-op setters and fix useConsoleErrorCapture memory leak

- Guard setIsPlaying to skip set() when value unchanged (eliminates 60
  notifications/sec during reverse playback)
- Guard caption store selectGroup to bail before set() when group missing
  (prevents empty Zustand notifications)
- Guard clearSelection to skip when already empty
- Fix useConsoleErrorCapture: restore original console.error, remove error
  event listener, and delete __hfErrorCapture flag on cleanup

* fix(studio): delete dead files and unused exports

Remove 7 dead files (audioBeatDetection, keyframeSnapping,
timelineInspector, DopesheetStrip, StaggerControls,
TimelineLayerPanel, TimelineEditorNotice) and their test companions.

Delete unused computeFitToChildrenSize export from propertyPanelHelpers.

Fix re-export indirection: useDomEditCommits and studioMotionOps.test
now import patch builders directly from manualEditsDomPatches instead
of the re-export passthrough in manualEditsDom.

* fix(studio): eliminate effect-chain state mirroring for lint findings, hover, and GSAP fetch

Move lint findingsByElement sync from App.tsx into useLintModal where
the value is produced, removing the mirroring useEffect. Consolidate
4 hover-clearing effects in useDomSelection into 2 (one unconditional
on context change, one conditional combining caption mode, selection
match, and disconnected element checks). Fold the GSAP retry effect
into the fetch effect in useGsapTweenCache, scheduling a single retry
via setTimeout when the initial fetch returns 0 animations.

Eliminates 3 unnecessary render cycles from effect chains.

* fix(studio): memoize renderQueue, toolbar, and canvas rect to prevent re-render cascade

- Wrap renderQueue object in useMemo so StudioContext consumers don't
  re-render on every App render
- Memoize timelineToolbar JSX so NLELayout memo isn't defeated
- Move canvasRect getBoundingClientRect() from render-time IIFE to a
  useLayoutEffect-backed ref, eliminating layout thrashing
- Track and clear setTimeout handles in refreshPreviewDocumentVersion
  to prevent stale timer accumulation on rapid calls and unmount

* refactor(studio): consolidate GSAP shared primitives — defaults, iframe access, keyframe parsing

Extract duplicated PROPERTY_DEFAULTS, IframeGsap interface, iframe
accessors (getIframeGsap, queryIframeElement), percentage keyframe
parsing, and toAbsoluteTime into a single gsapShared.ts module.

Removes ~120 lines of copy-pasted logic across 8 hook files, reducing
drift risk between the duplicate implementations.

* fix(studio): remove dead store fields, dead file, duplicate helper, and unsafe assertions

* refactor(studio): deduplicate selector helpers, rounding utils, percentage computation, and iframe access

* fix(studio): split StudioContext into Shell + Playback to prevent cascade re-renders

* refactor(studio): decompose useGsapScriptCommits into focused mutation hooks

* refactor(studio): decompose useFileManager into focused file operation hooks

Extract useFileTree (tree loading, refresh, derived assets/compositions)
and useEditorSave (debounced save with history tracking) from the 508-LOC
useFileManager. The parent hook composes both and retains file I/O,
click-to-source, upload/import, and CRUD — preserving the same public
interface so no consumers change.

* refactor(studio): decompose useDomEditCommits into focused commit hooks

Extract geometry (path offset, box size, rotation) and element lifecycle
(delete, z-index reorder) into useDomGeometryCommits and
useElementLifecycleOps. Parent keeps persistDomEditOperations as core
and composes all sub-hooks — public interface unchanged.

* refactor(studio): simplify useAppHotkeys with declarative command table

* refactor(studio): simplify useAppHotkeys with declarative command table

Replace 15 individual useRef callback refs with a single cbRef object.
Extract keydown dispatch into pure dispatchModifierKey/dispatchPlainKey
functions. Merge duplicate undo/redo logic into shared applyHistory.
Extract cross-origin listener boilerplate into safeAddListener/safeRemoveListener.

Hook body: 204 LOC (down from 445). Public API unchanged.

* fix(studio): remove unused getDomEditTargetKey import

* refactor(studio): decompose useDomEditSession into focused editing hooks

Extract GSAP-aware geometry intercepts (move/resize/rotation) and
animated property commit into useGsapAwareEditing, and selection
wiring, GSAP cache management, preview sync, and selection handlers
into useDomEditWiring. The parent remains a pure composition shell.

* style(studio): fix formatting in 5 files

* fix(studio): trim App.tsx to 598 lines (under 600 limit)

---------

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>
This commit is contained in:
Miguel Ángel
2026-06-13 18:25:11 -04:00
committed by GitHub
co-authored by Miguel Ángel
parent 6f677292ae
commit 7bff49ecf0
77 changed files with 3165 additions and 3572 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/utils/timelineInspector.ts
-116
View File
@@ -1,116 +0,0 @@
import type { TimelineElement } from "../player";
const TIMELINE_INSPECTOR_BOUNDARY_EPSILON_SECONDS = 0.08;
const AUDIO_TIMELINE_TAGS = new Set(["audio", "music", "sfx", "sound", "narration"]);
const AUDIO_SOURCE_EXT_RE = /\.(aac|flac|m4a|mp3|ogg|opus|wav)(?:[?#].*)?$/i;
export function getTimelineElementKey(
element: Pick<TimelineElement, "id" | "key"> | null | undefined,
): string | null {
if (!element) return null;
return element.key ?? element.id;
}
export function isAudioTimelineElement(
element: Pick<TimelineElement, "tag" | "src"> | null | undefined,
): boolean {
if (!element) return false;
const tag = element.tag.trim().toLowerCase();
if (AUDIO_TIMELINE_TAGS.has(tag)) return true;
return Boolean(element.src && AUDIO_SOURCE_EXT_RE.test(element.src));
}
export function canInspectTimelineElement(
element: Pick<TimelineElement, "tag" | "src"> | null | undefined,
): boolean {
return !isAudioTimelineElement(element);
}
export function shouldShowTimelineInspectorBounds(
currentTime: number,
element: Pick<TimelineElement, "start" | "duration"> | null | undefined,
epsilonSeconds = TIMELINE_INSPECTOR_BOUNDARY_EPSILON_SECONDS,
): boolean {
if (!element) return false;
if (!Number.isFinite(currentTime)) return false;
if (!Number.isFinite(element.start) || !Number.isFinite(element.duration)) return false;
const start = Math.max(0, element.start);
const end = Math.max(start, start + Math.max(0, element.duration));
const epsilon = Math.max(0, epsilonSeconds);
return Math.abs(currentTime - start) <= epsilon || Math.abs(currentTime - end) <= epsilon;
}
export function isTimelineElementActiveAtTime(
currentTime: number,
element: Pick<TimelineElement, "start" | "duration"> | null | undefined,
epsilonSeconds = TIMELINE_INSPECTOR_BOUNDARY_EPSILON_SECONDS,
): boolean {
if (!element) return false;
if (!Number.isFinite(currentTime)) return false;
if (!Number.isFinite(element.start) || !Number.isFinite(element.duration)) return false;
const start = Math.max(0, element.start);
const end = Math.max(start, start + Math.max(0, element.duration));
const epsilon = Math.max(0, epsilonSeconds);
return currentTime >= start - epsilon && currentTime <= end + epsilon;
}
export interface TimelineLayerVisibility {
visible: boolean;
compositeOpacity: number;
hasBox: boolean;
inViewport: boolean;
}
export function getTimelineLayerVisibilityInPreview(
element: HTMLElement,
options: { minCompositeOpacity?: number } = {},
): TimelineLayerVisibility {
const hidden: TimelineLayerVisibility = {
visible: false,
compositeOpacity: 0,
hasBox: false,
inViewport: false,
};
if (!element.isConnected) return hidden;
const doc = element.ownerDocument;
const win = doc.defaultView;
if (!win) return hidden;
const minCompositeOpacity = options.minCompositeOpacity ?? 0.01;
let compositeOpacity = 1;
let current: HTMLElement | null = element;
while (current && current !== doc.body && current !== doc.documentElement) {
const style = win.getComputedStyle(current);
if (style.display === "none" || style.visibility === "hidden") {
return { ...hidden, compositeOpacity };
}
compositeOpacity *= Number.parseFloat(style.opacity || "1");
if (compositeOpacity <= minCompositeOpacity) {
return { ...hidden, compositeOpacity };
}
current = current.parentElement;
}
const rect = element.getBoundingClientRect();
const hasBox = rect.width > 0.5 && rect.height > 0.5;
if (!hasBox) return { visible: false, compositeOpacity, hasBox, inViewport: false };
const viewportWidth = win.innerWidth || doc.documentElement.clientWidth;
const viewportHeight = win.innerHeight || doc.documentElement.clientHeight;
const inViewport =
rect.right > 0 && rect.bottom > 0 && rect.left < viewportWidth && rect.top < viewportHeight;
return {
visible: inViewport,
compositeOpacity,
hasBox,
inViewport,
};
}
export function isTimelineLayerVisibleInPreview(
element: HTMLElement,
options: { minCompositeOpacity?: number } = {},
): boolean {
return getTimelineLayerVisibilityInPreview(element, options).visible;
}