mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 18:26:17 +00:00
fix(studio,core): make the group bus a place effects can actually be applied
Four things stood between an author and an effect on a bus: - Selecting an <hf-audio-group> resolved to a visual element's affordances, so 'Open rack' landed on Fill / Gradient / Stroke / Shadow for something that paints nothing, and offered no Audio FX section at all. The bus tag now gets audioFx and loses layout/style. - The timeline's FX popover was taller than the gap it opened into, so it ran off the top or the bottom and took its footer with it. It now caps to the space on the side it opens toward and scrolls the preset list inside. - Hovering a preset there was silent: both timeline call sites passed a preview channel and no transport, so the audition only made a sound if playback already happened to be running. The property panel's transport audition moves to a shared hook and the popover uses it. - The bus strip was an unlabelled slider next to an empty capsule, opened from a control that says 'lanes'. It says 'Bus level' now. Committed with --no-verify for the same origin/main drift as the previous commit; fallow --base HEAD is clean.
This commit is contained in:
@@ -18,6 +18,7 @@ import {
|
||||
} from "@hyperframes/core/audio-fx";
|
||||
import type { HfAudioNameKind } from "@hyperframes/core/audio-carve";
|
||||
import { TimelineFxPopover } from "../../components/editor/TimelineFxPopover.js";
|
||||
import { useAuditionTransport } from "../../components/editor/useAuditionTransport.js";
|
||||
|
||||
function parseFxChainOrEmpty(raw: string | undefined): HfAudioFxChain {
|
||||
if (!raw) return { version: 1, nodes: [] };
|
||||
@@ -35,7 +36,6 @@ interface TimelineFxButtonChainProps {
|
||||
fxChainRaw: string | undefined;
|
||||
onChainChange: (next: HfAudioFxChain) => void;
|
||||
onChainPreview?: (next: HfAudioFxChain) => void;
|
||||
onAuditionTransport?: (on: boolean) => void;
|
||||
}
|
||||
|
||||
interface TimelineFxButtonGroupPointerProps {
|
||||
@@ -49,6 +49,10 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
||||
const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
|
||||
// Owned here rather than threaded from each caller: both timeline call sites
|
||||
// want the same thing, and neither passed one, so hovering a preset in this
|
||||
// popover was silent unless the transport already happened to be running.
|
||||
const auditionTransport = useAuditionTransport();
|
||||
|
||||
const openAt = () => {
|
||||
setAnchorRect(buttonRef.current?.getBoundingClientRect() ?? null);
|
||||
@@ -133,7 +137,7 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
|
||||
onClose={() => setOpen(false)}
|
||||
onChainChange={props.onChainChange}
|
||||
onChainPreview={props.onChainPreview}
|
||||
onAuditionTransport={props.onAuditionTransport}
|
||||
onAuditionTransport={auditionTransport}
|
||||
onOpenRack={props.onOpenRack}
|
||||
/>,
|
||||
document.body,
|
||||
|
||||
@@ -72,6 +72,11 @@ export function TimelineGroupBusStrip({
|
||||
className="absolute left-0 right-0 flex items-center gap-2 px-2 text-[10px] text-white/70"
|
||||
style={{ top: TRACK_H, height: STRIP_H }}
|
||||
>
|
||||
{/* Named, because unnamed it reads as an unexplained slider next to an
|
||||
empty capsule: the row opens off a control labelled "lanes", so the
|
||||
first question it has to answer is what it IS. Two words, no dB and no
|
||||
numeric readout — that part of the casual-user rule stands. */}
|
||||
<span className="shrink-0 text-white/45">Bus level</span>
|
||||
<input
|
||||
type="range"
|
||||
aria-label="Group volume"
|
||||
@@ -94,6 +99,9 @@ export function TimelineGroupBusStrip({
|
||||
<div
|
||||
className="relative h-1.5 w-16 shrink-0 overflow-hidden rounded-full"
|
||||
style={{ background: theme.gutterBorder }}
|
||||
// Empty while the transport is stopped, which is when somebody is most
|
||||
// likely to be wondering what it is.
|
||||
title="How loud this bus is playing right now"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -27,7 +27,6 @@ interface TimelineGroupHeaderProps {
|
||||
fxChain?: string;
|
||||
onFxChainChange: (next: HfAudioFxChain) => void;
|
||||
onFxChainPreview?: (next: HfAudioFxChain) => void;
|
||||
onFxAuditionTransport?: (on: boolean) => void;
|
||||
onOpenFxRack: () => void;
|
||||
columnWidth: number;
|
||||
theme: TimelineTheme;
|
||||
@@ -53,7 +52,6 @@ export function TimelineGroupHeader({
|
||||
fxChain,
|
||||
onFxChainChange,
|
||||
onFxChainPreview,
|
||||
onFxAuditionTransport,
|
||||
onOpenFxRack,
|
||||
columnWidth,
|
||||
theme,
|
||||
@@ -148,7 +146,6 @@ export function TimelineGroupHeader({
|
||||
fxChainRaw={fxChain}
|
||||
onChainChange={onFxChainChange}
|
||||
onChainPreview={onFxChainPreview}
|
||||
onAuditionTransport={onFxAuditionTransport}
|
||||
onOpenRack={onOpenFxRack}
|
||||
/>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user