@hyperframes/studio 0.8.11 → 0.8.13

package/src/components/editor/propertyPanelAudioFxGroup.test.tsx

@@ -101,6 +101,37 @@ function mount(dataAttributes: Record<string, string>, alone = false, voices = 2
   return { host, onSetAttributeQuiet, onSetAttributeLive };
 }
 
+function mountGroup(memberStart: number) {
+  const bus = document.createElement("hf-audio-group");
+  bus.id = "voiceover";
+  document.body.append(bus);
+  const member = document.createElement("audio");
+  member.id = "vo-1";
+  member.setAttribute("data-audio-group", "voiceover");
+  member.setAttribute("data-start", String(memberStart));
+  member.setAttribute("data-duration", "5");
+  document.body.append(member);
+
+  const host = document.createElement("div");
+  document.body.append(host);
+  const selection = {
+    dataAttributes: { "fx-chain": CHAIN },
+    id: "voiceover",
+    element: bus,
+    tagName: "hf-audio-group",
+  } as unknown as DomEditSelection;
+  act(() => {
+    createRoot(host).render(
+      <AudioFxGroup
+        element={selection}
+        onSetAttributeQuiet={vi.fn()}
+        onSetAttributeLive={vi.fn()}
+      />,
+    );
+  });
+  return host;
+}
+
 const rowFor = (host: HTMLElement, label: string): HTMLElement | null => {
   for (const row of Array.from(host.querySelectorAll<HTMLElement>(".hf-fx-row"))) {
     if (row.querySelector(".hf-fx-label")?.textContent === label) return row;
@@ -565,6 +596,20 @@ describe("AudioFxGroup dynamic carve", () => {
       expect(store().playbackRequest?.returnTo).toBe(42);
     });
 
+    it("seeks a group audition to the next member span", () => {
+      act(() =>
+        usePlayerStore.setState({
+          isPlaying: false,
+          currentTime: 2,
+          requestedSeekTime: null,
+        }),
+      );
+      const host = mountGroup(10);
+      hoverPreset(host);
+      expect(store().requestedSeekTime).toBe(10);
+      leaveShelf(host);
+    });
+
     it("leaves a transport the author started alone", () => {
       // Stopping their playback because they passed over a preset would be the
       // panel taking a decision nobody offered it.
@@ -1341,6 +1386,62 @@ describe("AudioFxGroup carve by default", () => {
     expect(onSetAttributeQuiet.mock.calls.some((c) => c[0] === "data-fx-carve")).toBe(false);
     expect(host.querySelector(".hf-fx-carve-module")).toBeNull();
   });
+
+  /**
+   * Mount a track of the test's own naming as the selection, with siblings.
+   *
+   * `mount` always calls the selected track `bed`, which is what let the near-end
+   * hole go unnoticed: nothing ever selected a track whose NAME said voice.
+   */
+  const mountNamed = (id: string, siblings: string[]) => {
+    const onSetAttributeQuiet = vi.fn();
+    const selected = document.createElement("audio");
+    selected.id = id;
+    document.body.append(selected);
+    for (const other of siblings) {
+      const el = document.createElement("audio");
+      el.id = other;
+      document.body.append(el);
+    }
+    const host = document.createElement("div");
+    document.body.append(host);
+    act(() => {
+      createRoot(host).render(
+        <AudioFxGroup
+          element={
+            {
+              dataAttributes: { "fx-chain": "" },
+              id,
+              element: selected,
+            } as unknown as DomEditSelection
+          }
+          onSetAttributeQuiet={onSetAttributeQuiet}
+          onSetAttributeLive={vi.fn()}
+        />,
+      );
+    });
+    return { host, onSetAttributeQuiet };
+  };
+
+  // The reported bug. A carve makes room in a bed for a voice, so a voice track
+  // is the one thing that can never be the bed — `couldBeCarveSource` has said
+  // as much since it was written, and nothing called it. Selecting a narration
+  // clip offered it the module, found one candidate, and applied a carve nobody
+  // asked for.
+  it("never offers the carve on a track whose name says voice", () => {
+    const { host, onSetAttributeQuiet } = mountNamed("vo-2", ["music-bed"]);
+    expect(onSetAttributeQuiet.mock.calls.some((c) => c[0] === "data-fx-carve")).toBe(false);
+    expect(host.querySelector(".hf-fx-carve-module")).toBeNull();
+  });
+
+  // Offering is a suggestion, applying is a decision. An unnamed track keeps the
+  // module — the author may know better than the name does — but nothing is
+  // written until they say so.
+  it("offers but does not apply on a track whose name says nothing", () => {
+    const { host, onSetAttributeQuiet } = mountNamed("a1", ["vo-1"]);
+    expect(host.querySelector(".hf-fx-carve-module")).not.toBeNull();
+    expect(onSetAttributeQuiet.mock.calls.some((c) => c[0] === "data-fx-carve")).toBe(false);
+  });
 });
 
 describe("AudioFxGroup carve source list", () => {

package/src/components/editor/propertyPanelAudioFxGroup.tsx

@@ -7,7 +7,7 @@
  * budget, and self-contained enough to test on its own.
  */
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   HF_AUDIO_FX_ATTR,
   HF_AUDIO_FX_DATA_KEY,
@@ -40,12 +40,47 @@ import {
 } from "./propertyPanelAutomation";
 import type { DomEditSelection } from "./domEditingTypes";
 import { useLivePlayheadTime } from "../../hooks/useLivePlayheadTime";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { isRevealedAudioFxRequestCurrent } from "../../player/store/keyframeSlice";
 import { FxSection } from "./propertyPanelFxSection.js";
 import { clipStart } from "./propertyPanelAudioFxGroupUtils.js";
 import { useFxChainObserved } from "./useFxChainObserved.js";
 import { useFxCarve } from "./useFxCarve.js";
+import { audioFxSignalPath } from "./audioFxSignalPath.js";
+import type { AuditionSpan } from "./useAuditionTransport.js";
+import {
+  HF_AUDIO_GROUP_ATTR,
+  HF_AUDIO_GROUP_TAG,
+  resolveAudioGroups,
+} from "@hyperframes/core/audio-groups";
 import { useFxLevelling } from "./useFxLevelling.js";
 
+function auditionSpan(startRaw: string | undefined, durationRaw: string | undefined) {
+  const start = Number.parseFloat(startRaw ?? "");
+  const duration = Number.parseFloat(durationRaw ?? "");
+  return Number.isFinite(start) && Number.isFinite(duration) && duration > 0
+    ? { start, duration }
+    : null;
+}
+
+/** The selected clip, or every current member when the selected rack is a bus. */
+function auditionSpansFor(element: DomEditSelection): AuditionSpan[] {
+  const own = auditionSpan(element.dataAttributes?.["start"], element.dataAttributes?.["duration"]);
+  if (own) return [own];
+  if (element.tagName?.toLowerCase() !== HF_AUDIO_GROUP_TAG || !element.id) return [];
+  const doc = element.element?.ownerDocument;
+  if (!doc) return [];
+  return [...doc.querySelectorAll(`audio[${HF_AUDIO_GROUP_ATTR}]`)]
+    .filter((member) => member.getAttribute(HF_AUDIO_GROUP_ATTR) === element.id)
+    .flatMap((member) => {
+      const span = auditionSpan(
+        member.getAttribute("data-start") ?? undefined,
+        member.getAttribute("data-duration") ?? undefined,
+      );
+      return span ? [span] : [];
+    });
+}
+
 /**
  * Bridges the FX panel to the element/attribute world. Chain and carve are
  * serialised onto the element the way colour grading carries its config, so
@@ -112,6 +147,9 @@ export function AudioFxGroup({
    * came under the playhead.
    */
   const playhead = useLivePlayheadTime();
+  const revealRequest = usePlayerStore((s) => s.revealedAudioFxTarget);
+  const timelineProjectId = usePlayerStore((s) => s.timelineProjectId);
+  const timelineSessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
   const localTime = playhead - clipStart(element.dataAttributes?.["start"]);
   const liveAutomationValues = ((): Map<string, number> => {
     const values = new Map<string, number>();
@@ -226,6 +264,31 @@ export function AudioFxGroup({
 
   const [analysing, setAnalysing] = useState(false);
 
+  // The rack's In/Out lines. Resolved from the live document because a group's
+  // membership lives on the members, so neither end of the routing can be read
+  // off the selected element alone.
+  // Keyed on the store's element array as well as the selection: membership is
+  // held by the MEMBERS, so a clip joining or leaving this group changes neither
+  // `element` nor its attributes, and the path went stale — "OUT to mix" on a
+  // clip that had just been grouped. `syncStoredGroupAttribute` and
+  // `updateElement` both replace the array, so its identity is the cheap signal
+  // that membership may have moved.
+  const storeElements = usePlayerStore((s) => s.elements);
+  const signalPath = useMemo(() => {
+    const doc = element.element?.ownerDocument;
+    return audioFxSignalPath(
+      element.tagName?.toLowerCase(),
+      element.id ?? undefined,
+      doc ? resolveAudioGroups(doc) : [],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, storeElements]);
+
+  // A bus has no span of its own, so resolve the live members. The
+  // `storeElements` subscription above rerenders this panel when membership
+  // changes without changing the selection.
+  const auditionSpans = auditionSpansFor(element);
+
   const { carvedAgainstBy, sourceOptions, setCarve } = useFxCarve(
     element,
     chain,
@@ -249,6 +312,32 @@ export function AudioFxGroup({
 
   return (
     <FxSection
+      // A lane's reveal request, but only when it names THIS element: the rack
+      // shows one element, and a request aimed at another must not reopen
+      // whatever happens to be mounted. Stale requests (other project, pre-
+      // reload session) are refused by the same check.
+      revealTarget={
+        revealRequest &&
+        revealRequest.elementKey === element.id &&
+        isRevealedAudioFxRequestCurrent(revealRequest, {
+          timelineProjectId,
+          timelineSessionEpoch,
+        })
+          ? revealRequest.automationTarget
+          : null
+      }
+      // Forwarded, not dropped: the section consumes by nonce, so without it a
+      // request never fires and a second click on the same lane is inert.
+      revealNonce={
+        revealRequest &&
+        revealRequest.elementKey === element.id &&
+        isRevealedAudioFxRequestCurrent(revealRequest, {
+          timelineProjectId,
+          timelineSessionEpoch,
+        })
+          ? revealRequest.nonce
+          : null
+      }
       // Locked while the carve is measuring. `analyse` captures the chain and
       // the automation BEFORE its fetch and decode, then rewrites the whole
       // attribute from that snapshot — so an effect added, or a knob committed,
@@ -273,7 +362,8 @@ export function AudioFxGroup({
           next.nodes.length ? serializeAudioFxChain(next) : null,
         )
       }
-      onAuditionTransport={auditionTransport}
+      signalPath={signalPath}
+      onAuditionTransport={(on) => auditionTransport(on, auditionSpans)}
       onChainPreview={(next) =>
         // Live writes skip the preview refresh entirely, so dragging a knob no
         // longer reloads the composition and restarts playback on every pixel.

package/src/components/editor/propertyPanelFlatClosedGroup.tsx

@@ -0,0 +1,46 @@
+/**
+ * A collapsed group's header row in the flat inspector.
+ *
+ * Its own module so `PropertyPanelFlat.tsx` stays under the studio's 600-line
+ * cap; it reads only its arguments, which is what makes it separable.
+ */
+
+import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
+import { slugifyDesignInput } from "../../utils/designInputTracking";
+import { FlatGroupHeader } from "./propertyPanelFlatPrimitives";
+import type { FlatGroupDescriptor } from "./propertyPanelFlatDescriptors";
+
+/** Its title, its one-line summary, and the entrance animation only the group
+ *  just toggled gets. */
+export function closedGroupHeader(
+  group: FlatGroupDescriptor,
+  toggleOpen: (id: string) => void,
+  justToggledIds: readonly string[],
+) {
+  return (
+    <DesignPanelInputProvider key={group.id} section={slugifyDesignInput(group.title)}>
+      <FlatGroupHeader
+        title={group.title}
+        isOpen={false}
+        onToggleOpen={() => toggleOpen(group.id)}
+        summary={group.summary}
+        animateEntrance={justToggledIds.includes(group.id)}
+      />
+    </DesignPanelInputProvider>
+  );
+}
+
+/**
+ * Is the selection hidden RIGHT NOW.
+ *
+ * `selectedElementHidden` is derived from `timelineElements`, and an
+ * `<hf-audio-group>` is not one — it is a mixer bus, and the runtime no longer
+ * stamps timing on it, so it has no timeline row to carry a `hidden` flag. Its
+ * `data-hidden` lives only on the element, so the attribute is the fallback.
+ */
+export function isSelectionHidden(
+  fromTimeline: boolean,
+  element: { dataAttributes?: Record<string, string | undefined> } | null | undefined,
+): boolean {
+  return fromTimeline || element?.dataAttributes?.["hidden"] != null;
+}

package/src/components/editor/propertyPanelFlatMotionSection.tsx

@@ -172,3 +172,34 @@ export function FlatMotionSection({
     </div>
   );
 }
+
+/**
+ * What the Motion section is called, and what its collapsed line says.
+ *
+ * "Motion" names the tween editor. On audio the section is Start/Duration/End
+ * and nothing else, so the label would promise what it no longer offers — and
+ * "Motion: 0 effects" on a sound is a category error, hence the span instead of
+ * a count.
+ *
+ * Keyed on the TAG by its caller, not on whether the effects half is showing:
+ * that half also disappears when a host simply has not wired the GSAP handlers,
+ * and a div in that state is still a thing that moves — renaming its section
+ * would be describing the host's wiring rather than the element.
+ */
+export function motionSectionLabel(args: {
+  timingOnly: boolean;
+  start: number;
+  duration: number;
+  effectCount: number;
+}): { title: string; summary: string } {
+  if (args.timingOnly) {
+    return {
+      title: "Timing",
+      summary: `${formatTimingValue(args.start)} – ${formatTimingValue(args.start + args.duration)}`,
+    };
+  }
+  return {
+    title: "Motion",
+    summary: `${args.effectCount} effect${args.effectCount === 1 ? "" : "s"}`,
+  };
+}