mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-09 12:00:26 +00:00
fix(studio): group rows survive a missing provider, a collapse, an edit and a reload
Findings 12-15 from the review. All four are group/solo UI state, none reachable before the id-space fix made group writes work at all. 14 — TimelineGroupRow called the THROWING useTimelineEditContext where every sibling row calls the optional one. Timeline.test.ts already asserted the timeline renders outside the provider; it passed because its fixture had no groups. One grouped clip took the whole timeline render down, not just the row. The new test is that assertion with a group on screen, and it fails against the old hook. 13 — A collapsed group left its members in `tracks`, so row geometry reserved a full row each while buildTimelineLogicalRows had already stopped emitting them: TimelineLanes rendered null into reserved space, giving a group header trailed by its members' worth of blank, unreachable dead space. Members are now emitted only while the group is expanded, so the row list and the logical rows agree by construction. (Zeroing the heights instead does not work — createTimelineRowGeometry deliberately reads a non-positive height as "invalid, use TRACK_H".) Membership still lands in trackGroupOf: collapsed is hidden, not ungrouped. 12 — groupInfoCache is a WeakMap keyed on the preview Document, and group edits are applied as live patches precisely so the iframe never reloads, so the key never changed and the entry never dropped. A muted group could not be unmuted (the header kept reading the cached `hidden:false` and re-wrote data-hidden), the bus slider snapped back, and a second FX preset built on a stale chain, discarding the first. Every live group write now drops the entry. 15 — Solo leaked two ways. createTimelineResetState never cleared `soloed`, so switching composition carried ids that match nothing in the new document — which is exactly the state that silences every track while the banner still names a clip that is not there. And the solo bridge's effect deps do not change across a preview reload, so the reloaded runtime kept an empty set while the button stayed lit and the banner still claimed "Hearing only X". Solo now rides applyPreviewAudioFlags, the same reload-surviving path as the mute and canary state. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
2a8e8f94dc
commit
86ef1ed33e
@@ -3,7 +3,7 @@
|
||||
import React, { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
|
||||
import { afterEach, describe, expect, it } from "vitest";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { usePlayerStore, type TimelineElement } from "../store/playerStore";
|
||||
import { LANE_H, TRACK_H } from "./timelineLayout";
|
||||
import { AUTOMATION_LANE_H } from "./automationLaneHeight";
|
||||
@@ -12,7 +12,13 @@ import { resolveTrackKeyframeClip, useTimelineTrackLayout } from "./useTimelineT
|
||||
|
||||
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
const enabledCanaries = new Set<string>();
|
||||
vi.mock("../../telemetry/canary", () => ({
|
||||
isCanaryEnabled: (name: string) => enabledCanaries.has(name),
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
enabledCanaries.clear();
|
||||
usePlayerStore.getState().reset();
|
||||
});
|
||||
|
||||
@@ -38,6 +44,61 @@ function renderTrackLayout(
|
||||
return { layout, unmount: () => act(() => root.unmount()) };
|
||||
}
|
||||
|
||||
describe("collapsed audio groups", () => {
|
||||
const member = (id: string, track: number): TimelineElement => ({
|
||||
id,
|
||||
domId: id,
|
||||
tag: "audio",
|
||||
start: 0,
|
||||
duration: 5,
|
||||
track,
|
||||
audioGroup: "voiceover",
|
||||
});
|
||||
|
||||
function renderGrouped(): {
|
||||
layout: ReturnType<typeof useTimelineTrackLayout>;
|
||||
unmount: () => void;
|
||||
} {
|
||||
enabledCanaries.add("audio-groups");
|
||||
const elements = [member("voice-1", 0), member("voice-2", 1)];
|
||||
let layout: ReturnType<typeof useTimelineTrackLayout> | undefined;
|
||||
function Probe() {
|
||||
layout = useTimelineTrackLayout(elements, new Map(), null, new Set());
|
||||
return null;
|
||||
}
|
||||
const root = createRoot(document.createElement("div"));
|
||||
act(() => root.render(React.createElement(Probe)));
|
||||
if (!layout) throw new Error("Timeline track layout did not render");
|
||||
return { layout, unmount: () => act(() => root.unmount()) };
|
||||
}
|
||||
|
||||
// buildTimelineLogicalRows stops emitting member rows once a group is
|
||||
// collapsed, so TimelineLanes renders null for them. Rows left in `tracks`
|
||||
// still reserve height, turning that null into visible dead space — the row
|
||||
// list and the logical rows have to agree.
|
||||
it("emits only the anchor row while the group is collapsed", () => {
|
||||
const { layout, unmount } = renderGrouped();
|
||||
expect(layout.groups).toHaveLength(1);
|
||||
expect(layout.groups[0]!.memberTracks).toEqual([0, 1]);
|
||||
// The anchor (0 - 0.5) and nothing else.
|
||||
expect(layout.trackOrder).toEqual([-0.5]);
|
||||
expect(layout.rowGeometry.rowHeights).toHaveLength(1);
|
||||
// Membership still resolves — collapsed is hidden, not ungrouped.
|
||||
expect(layout.trackGroupOf.get(0)?.id).toBe("voiceover");
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("emits the member rows once the group is expanded", () => {
|
||||
usePlayerStore.setState({ expandedGroupIds: new Set(["voiceover"]) });
|
||||
const { layout, unmount } = renderGrouped();
|
||||
expect(layout.trackOrder).toEqual([-0.5, 0, 1]);
|
||||
for (const track of layout.groups[0]!.memberTracks) {
|
||||
expect(layout.rowGeometry.getRowHeight(layout.rowGeometry.getRowIndex(track))).toBe(TRACK_H);
|
||||
}
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("useTimelineTrackLayout", () => {
|
||||
it("counts a flat tween lane and reserves its expanded row height", () => {
|
||||
const elements: TimelineElement[] = [
|
||||
|
||||
Reference in New Issue
Block a user