@hyperframes/studio 0.8.7 → 0.8.9

package/src/player/components/TimelineTrackPlainHeader.test.tsx

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+
+/**
+ * The visibility control's accessible contract.
+ *
+ * The audio wording ran behind the `audio-track-mute` canary at 0%, so it had
+ * never rendered in any suite: it returned "Muted" / "Mute", which named the
+ * CURRENT state rather than the action, and dropped the track suffix so every
+ * audio row shared one accessible name. Music plus VO is the ordinary case, so
+ * that is two identical buttons. Pinned here because the label and the icon are
+ * the whole identity of this control.
+ */
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PlainTrackHeader, VisibilityButton } from "./TimelineTrackPlainHeader";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderButton(props: {
+  hidden: boolean;
+  isAudioTrack?: boolean;
+  trackDisplayNumber: number | null;
+}): { host: HTMLElement; unmount: () => void; onToggle: ReturnType<typeof vi.fn> } {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const onToggle = vi.fn();
+  act(() =>
+    root.render(
+      React.createElement(VisibilityButton, {
+        hidden: props.hidden,
+        trackNumber: 7,
+        trackDisplayNumber: props.trackDisplayNumber,
+        visible: true,
+        isAudioTrack: props.isAudioTrack,
+        onToggle,
+      }),
+    ),
+  );
+  return { host, unmount: () => act(() => root.unmount()), onToggle };
+}
+
+const labelOf = (host: HTMLElement) => host.querySelector("button")?.getAttribute("aria-label");
+
+describe("VisibilityButton", () => {
+  it("names the action, not the state, on an audible audio track", () => {
+    const view = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 2 });
+    expect(labelOf(view.host)).toBe("Mute track 2");
+    view.unmount();
+  });
+
+  // The half that was wrong: a muted row read "Muted", so nothing told a
+  // screen-reader user that activating it would unmute.
+  it("promises the un-mute when the audio track is already muted", () => {
+    const view = renderButton({ hidden: true, isAudioTrack: true, trackDisplayNumber: 2 });
+    expect(labelOf(view.host)).toBe("Unmute track 2");
+    view.unmount();
+  });
+
+  it("keeps each audio row's name unique, so two tracks are distinguishable", () => {
+    const first = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 1 });
+    const second = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 3 });
+    expect(labelOf(first.host)).toBe("Mute track 1");
+    expect(labelOf(second.host)).toBe("Mute track 3");
+    expect(labelOf(first.host)).not.toBe(labelOf(second.host));
+    first.unmount();
+    second.unmount();
+  });
+
+  it("still says Hide/Show on a visual track", () => {
+    const shown = renderButton({ hidden: false, trackDisplayNumber: 2 });
+    expect(labelOf(shown.host)).toBe("Hide track 2");
+    shown.unmount();
+    const hiddenRow = renderButton({ hidden: true, trackDisplayNumber: 2 });
+    expect(labelOf(hiddenRow.host)).toBe("Show track 2");
+    hiddenRow.unmount();
+  });
+
+  // The callback acts on the REAL track key; the display row rides along so the
+  // undo-history label announces the same row this button just did, instead of
+  // re-deriving it from an ordering that has no group anchors in it.
+  it("toggles the real track number and passes the row it announced", () => {
+    const view = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 2 });
+    view.host.querySelector("button")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(view.onToggle).toHaveBeenCalledWith(7, true, 2);
+    view.unmount();
+  });
+});
+
+describe("PlainTrackHeader", () => {
+  function renderHeader(overrides: Partial<Parameters<typeof PlainTrackHeader>[0]> = {}) {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const onToggleSolo = vi.fn();
+    act(() =>
+      root.render(
+        React.createElement(PlainTrackHeader, {
+          trackNumber: 0,
+          trackDisplayNumber: 1,
+          trackLabel: "Voiceover",
+          clipCount: 1,
+          isTrackHidden: false,
+          isAudioTrack: true,
+          onToggleTrackHidden: vi.fn(),
+          showTrackLabel: true,
+          isGroupMuted: false,
+          isSoloed: false,
+          onToggleSolo,
+          ...overrides,
+        }),
+      ),
+    );
+    return { host, unmount: () => act(() => root.unmount()), onToggleSolo };
+  }
+
+  const soloButton = (host: HTMLElement) =>
+    host.querySelector('button[aria-label="Hear only this"]');
+  const labelSpan = (host: HTMLElement) => host.querySelector("span.min-w-0");
+
+  it("offers solo on an audio track and reports its pressed state", () => {
+    const view = renderHeader({ isSoloed: true });
+    expect(soloButton(view.host)?.getAttribute("aria-pressed")).toBe("true");
+    view.unmount();
+  });
+
+  it("withholds solo from a visual track", () => {
+    const view = renderHeader({ isAudioTrack: false });
+    expect(soloButton(view.host)).toBeNull();
+    view.unmount();
+  });
+
+  // A group-muted member is silent without being hidden itself, so the strike
+  // is the only thing that says so — and the title has to explain why, since a
+  // user who never touched THIS row's mute is looking for the reason.
+  it("strikes the label through when the row's own mute is on", () => {
+    const view = renderHeader({ isTrackHidden: true });
+    expect(labelSpan(view.host)?.className).toContain("line-through");
+    view.unmount();
+  });
+
+  it("strikes it through for a group mute too, and says which", () => {
+    const view = renderHeader({ isGroupMuted: true });
+    expect(labelSpan(view.host)?.className).toContain("line-through");
+    expect(labelSpan(view.host)?.getAttribute("title")).toBe("Voiceover (group muted)");
+    view.unmount();
+  });
+
+  it("leaves an audible row unstruck", () => {
+    const view = renderHeader();
+    expect(labelSpan(view.host)?.className).not.toContain("line-through");
+    expect(labelSpan(view.host)?.getAttribute("title")).toBe("Voiceover");
+    view.unmount();
+  });
+});

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -1,15 +1,24 @@
 import { Eye, EyeSlash, SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
-import { isCanaryEnabled } from "../../telemetry/canary";
 import { Music } from "../../icons/SystemIcons";
 import { TimelineSoloButton } from "./TimelineSoloButton";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { TrackClipCount } from "./TrackClipCount";
 import { trackDisplaySuffix } from "./timelineTrackDisplay";
 
-// Audio tracks say "Mute", not "Hide" — the eye IS mute for sound-only rows.
-// Gated: the relabel ships behind the canary, unlike the preview fix.
+/**
+ * Audio tracks say "Mute", not "Hide" — the eye IS mute for sound-only rows.
+ *
+ * Action-phrased and per-track, like the visual branch: `hidden` here is the
+ * CURRENT state, so the name has to promise the opposite. It read "Muted" /
+ * "Mute" until the rollout, which named the state instead of the action (a
+ * screen-reader user could not tell that activating an already-muted row would
+ * unmute it) and dropped `suffix`, so every audio row shared one accessible
+ * name — music plus VO being the ordinary case. The wording matches the undo
+ * entry `timelineTrackVisibility` writes for the same click, where `hidden` is
+ * the INCOMING state and the two therefore read inverted.
+ */
 function visibilityButtonLabel(showAsMute: boolean, hidden: boolean, suffix: string): string {
-  if (showAsMute) return hidden ? "Muted" : "Mute";
+  if (showAsMute) return hidden ? `Unmute track${suffix}` : `Mute track${suffix}`;
   return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
 }
 
@@ -37,7 +46,7 @@ export function VisibilityButton({
   // Display number in the text, real key in the callback. The two must not be
   // conflated in either direction.
   const suffix = trackDisplaySuffix(trackDisplayNumber);
-  const showAsMute = Boolean(isAudioTrack) && isCanaryEnabled("audio-track-mute");
+  const showAsMute = Boolean(isAudioTrack);
   const label = visibilityButtonLabel(showAsMute, hidden, suffix);
   return (
     <button
@@ -50,7 +59,7 @@ export function VisibilityButton({
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
-        void onToggle?.(trackNumber, !hidden);
+        void onToggle?.(trackNumber, !hidden, trackDisplayNumber);
       }}
     >
       {visibilityButtonIcon(showAsMute, hidden)}
@@ -93,9 +102,7 @@ export function PlainTrackHeader({
       {showTrackLabel && (
         <span
           className={`min-w-0 flex-1 truncate text-[11px] ${
-            isAudioTrack && (isTrackHidden || isGroupMuted) && isCanaryEnabled("audio-track-mute")
-              ? "line-through"
-              : ""
+            isAudioTrack && (isTrackHidden || isGroupMuted) ? "line-through" : ""
           }`}
           title={isGroupMuted && !isTrackHidden ? `${trackLabel} (group muted)` : trackLabel}
         >
@@ -111,7 +118,7 @@ export function PlainTrackHeader({
         isAudioTrack={isAudioTrack}
         onToggle={onToggleTrackHidden}
       />
-      {isAudioTrack && isCanaryEnabled("audio-track-mute") && onToggleSolo && (
+      {isAudioTrack && onToggleSolo && (
         <TimelineSoloButton isSoloed={isSoloed} onToggle={onToggleSolo} />
       )}
     </>

package/src/player/components/TrackGapContextMenu.tsx

@@ -75,7 +75,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
       onPointerLeave={() => onHoverAction(null)}
     >

package/src/player/components/timelineCallbacks.ts

@@ -67,7 +67,20 @@ export interface TimelineEditCallbacks {
     }>,
     options?: { coalesceKey?: string },
   ) => Promise<void> | void;
-  onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
+  /**
+   * `displayNumber` is the row the CLICKED control announced. It travels with
+   * the click because the header and the undo-history label derive the row from
+   * two different orderings: the header's comes from the group-aware row list
+   * (synthetic anchor rows, members pulled contiguous), the history's from a
+   * plain ascending sort of element-bearing keys. Once a group exists those
+   * disagree, so the same click said "Mute track 2" and recorded "Mute track 1".
+   * Passing the rendered number keeps one answer instead of two derivations.
+   */
+  onToggleTrackHidden?: (
+    track: number,
+    hidden: boolean,
+    displayNumber?: number | null,
+  ) => Promise<void> | void;
   /** B7's bus strip: live-write the group's own attribute while dragging. */
   onSetAudioGroupAttributeLive?: (groupId: string, attr: string, value: string | null) => void;
   /** ...and persist one undo entry on release. */

package/src/player/components/useTimelineTrackDerivations.test.ts

@@ -0,0 +1,103 @@
+// @vitest-environment happy-dom
+
+/**
+ * Row derivation for audio groups.
+ *
+ * This ran behind the `audio-groups` canary at 0% until the rollout, so it had
+ * never executed in the enabled state in any suite — the off-cohort branch
+ * returned raw tracks and stopped. Now it reorders rows and emits synthetic
+ * anchor rows for every user, which is exactly the pair of invariants pinned
+ * here: an ungrouped project is untouched, and a group's members become
+ * contiguous under an anchor at `memberTracks[0] - 0.5`.
+ */
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePlayerStore.getState().reset();
+});
+
+function clip(id: string, track: number, extra: Partial<TimelineElement> = {}): TimelineElement {
+  return { id, label: id, tag: "audio", start: 0, duration: 1, track, ...extra };
+}
+
+function derive(elements: TimelineElement[]): ReturnType<typeof useTimelineTrackDerivations> {
+  let result: ReturnType<typeof useTimelineTrackDerivations> | undefined;
+  function Probe() {
+    result = useTimelineTrackDerivations(elements);
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(React.createElement(Probe)));
+  act(() => root.unmount());
+  if (!result) throw new Error("derivations did not render");
+  return result;
+}
+
+describe("useTimelineTrackDerivations", () => {
+  it("leaves an ungrouped project in raw ascending order", () => {
+    const { tracks, groups, trackGroupOf } = derive([clip("b", 2), clip("a", 0), clip("c", 1)]);
+
+    expect(tracks.map(([track]) => track)).toEqual([0, 1, 2]);
+    expect(tracks.map(([, els]) => els.map((el) => el.id))).toEqual([["a"], ["c"], ["b"]]);
+    expect(groups).toEqual([]);
+    expect(trackGroupOf.size).toBe(0);
+  });
+
+  // The reordering case: track 1 sits between the group's two members in raw
+  // order and must not be dragged into the group.
+  it("pulls interleaved members contiguous under a synthetic anchor row", () => {
+    const { tracks, groups, trackGroupOf } = derive([
+      clip("vo-1", 0, { audioGroup: "voiceover", audioGroupLabel: "Voiceover" }),
+      clip("music", 1),
+      clip("vo-2", 2, { audioGroup: "voiceover" }),
+    ]);
+
+    // Anchor immediately above the lowest member, then both members, then the
+    // ungrouped track keeps its own position after them.
+    expect(tracks.map(([track]) => track)).toEqual([-0.5, 0, 2, 1]);
+    // The anchor row owns no clips of its own.
+    expect(tracks[0]?.[1]).toEqual([]);
+
+    expect(groups).toHaveLength(1);
+    expect(groups[0]).toMatchObject({
+      id: "voiceover",
+      label: "Voiceover",
+      anchorKey: -0.5,
+      memberTracks: [0, 2],
+    });
+
+    expect(trackGroupOf.get(0)?.id).toBe("voiceover");
+    expect(trackGroupOf.get(2)?.id).toBe("voiceover");
+    expect(trackGroupOf.has(1)).toBe(false);
+  });
+
+  it("carries the group element's own label, volume and mute onto the row", () => {
+    const { groups } = derive([
+      clip("vo-1", 3, {
+        audioGroup: "vo",
+        audioGroupLabel: "VO bus",
+        audioGroupVolume: 0.5,
+        audioGroupHidden: true,
+      }),
+    ]);
+
+    expect(groups[0]).toMatchObject({
+      label: "VO bus",
+      anchorKey: 2.5,
+      volume: 0.5,
+      hidden: true,
+    });
+  });
+
+  it("falls back to the group id and unity volume when the bus carries neither", () => {
+    const { groups } = derive([clip("sfx-1", 0, { audioGroup: "sfx" })]);
+    expect(groups[0]).toMatchObject({ id: "sfx", label: "sfx", volume: 1, hidden: false });
+  });
+});

package/src/player/components/useTimelineTrackDerivations.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import type { TimelineElement } from "../store/playerStore";
-import { isCanaryEnabled } from "../../telemetry/canary";
 import { getTrackStyle, type TrackVisualStyle } from "./timelineIcons";
 
 /** One resolved audio group, positioned in the row order. */
@@ -157,16 +156,10 @@ export function useTimelineTrackDerivations(expandedElements: TimelineElement[])
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
   }, [expandedElements]);
 
-  const { tracks, groups, trackGroupOf } = useMemo(() => {
-    if (!isCanaryEnabled("audio-groups")) {
-      return {
-        tracks: rawTracks,
-        groups: [],
-        trackGroupOf: new Map<number, TimelineTrackGroupInfo>(),
-      };
-    }
-    return groupTimelineTracks(rawTracks);
-  }, [rawTracks]);
+  const { tracks, groups, trackGroupOf } = useMemo(
+    () => groupTimelineTracks(rawTracks),
+    [rawTracks],
+  );
 
   const trackStyles = useMemo(() => {
     const map = new Map<number, TrackVisualStyle>();