@hyperframes/studio 0.8.105 → 0.8.106

package/src/player/components/AudioWaveform.tsx

@@ -1,8 +1,10 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { fadeGain } from "@hyperframes/core/audio-fade";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
+import { ClipFadesContext, type ClipFadeShape } from "./TimelineClipFades";
 
 export interface AudioWaveformProps {
   audioUrl: string;
@@ -22,7 +24,10 @@ export interface AudioWaveformProps {
 
 const BAR_STEP = 3;
 
-type BarGeometry = { x: number; width: number; height: number };
+export const rendersWaveform = (el: { tag: string }) => el.tag === "audio";
+const FADE_GHOST_OPACITY = 0.27;
+
+type BarGeometry = { x: number; width: number; height: number; gain: number };
 
 function paintWaveformBars(
   context: CanvasRenderingContext2D,
@@ -33,11 +38,18 @@ function paintWaveformBars(
   amplitudes: readonly number[],
 ) {
   bars.forEach((bar, index) => {
-    const amplitude = amplitudes[index] ?? 0;
+    const opacity = loudnessToOpacity(amplitudes[index] ?? 0);
     context.fillStyle = `rgb(${waveformBaselineRgb})`;
     context.fillRect(bar.x, height - 2, bar.width, 2);
-    context.fillStyle = `rgba(${waveformBarRgb},${loudnessToOpacity(amplitude).toFixed(2)})`;
-    context.fillRect(bar.x, height - bar.height, bar.width, bar.height);
+    const paint = (alpha: number, top: number, barHeight: number) => {
+      context.fillStyle = `rgba(${waveformBarRgb},${alpha.toFixed(2)})`;
+      context.fillRect(bar.x, top, bar.width, barHeight);
+    };
+    const faded = bar.height * bar.gain;
+    if (faded > 0) paint(opacity, height - faded, faded);
+    if (faded < bar.height) {
+      paint(opacity * FADE_GHOST_OPACITY, height - bar.height, bar.height - faded);
+    }
   });
 }
 
@@ -47,6 +59,7 @@ export function drawWaveformCanvas(
   muted: boolean,
   trimStartFraction: number,
   trimEndFraction: number,
+  fades: ClipFadeShape | null = null,
 ) {
   const width = Math.max(1, canvas.clientWidth);
   const height = Math.max(1, canvas.clientHeight);
@@ -67,6 +80,9 @@ export function drawWaveformCanvas(
     x: (index * width) / amplitudes.length,
     width: Math.max(1, width / amplitudes.length),
     height: Math.max(3, amplitude * height),
+    gain: fades
+      ? fadeGain(((index + 0.5) / amplitudes.length) * fades.duration, fades.duration, fades)
+      : 1,
   }));
   const channelToken = muted ? "--timeline-waveform-muted-rgb" : "--timeline-waveform-bar-rgb";
   const waveformBarRgb = getComputedStyle(canvas).getPropertyValue(channelToken);
@@ -179,11 +195,12 @@ export const AudioWaveform = memo(function AudioWaveform({
   const peaks =
     snapshot.status === "ready" && snapshot.value.kind === "waveform" ? snapshot.value.peaks : null;
 
+  const fades = useContext(ClipFadesContext);
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas || !peaks) return;
-    drawWaveformCanvas(canvas, peaks, muted, trimStartFraction ?? 0, trimEndFraction ?? 1);
-  }, [muted, peaks, trimEndFraction, trimStartFraction]);
+    drawWaveformCanvas(canvas, peaks, muted, trimStartFraction ?? 0, trimEndFraction ?? 1, fades);
+  }, [fades, muted, peaks, trimEndFraction, trimStartFraction]);
 
   const setCanvasRef = useCallback(
     (canvas: HTMLCanvasElement | null) => {

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

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { TimelineClip } from "./TimelineClip";
+import { ClipFadesContext } from "./TimelineClipFades";
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { defaultTimelineTheme, type TimelineTheme } from "./timelineTheme";
 
@@ -67,6 +68,43 @@ function renderClip({
 }
 
 describe("TimelineClip", () => {
+  it("hands its content the clip's fades, and none to a clip the mixer does not hear", () => {
+    const seen: unknown[] = [];
+    function Probe() {
+      seen.push(React.useContext(ClipFadesContext));
+      return null;
+    }
+    const render = (element: TimelineElement) => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      act(() => {
+        root.render(
+          <TimelineClip
+            el={element}
+            pps={100}
+            clipY={0}
+            isSelected={false}
+            isHovered={false}
+            hasCustomContent
+            capabilities={capabilities}
+            isComposition={false}
+            onHoverStart={vi.fn()}
+            onHoverEnd={vi.fn()}
+            onClick={vi.fn()}
+            onDoubleClick={vi.fn()}
+          >
+            <Probe />
+          </TimelineClip>,
+        );
+      });
+      act(() => root.unmount());
+    };
+    render({ id: "music", tag: "audio", start: 0, duration: 4, track: 0, fadeIn: 1, fadeOut: 0.5 });
+    render({ id: "title", tag: "div", start: 0, duration: 4, track: 0, fadeIn: 1 });
+    expect(seen).toEqual([{ fadeIn: 1, fadeOut: 0.5, duration: 4 }, null]);
+  });
+
   it("renders the clip label above custom content without showing default timecode", () => {
     const { host, root } = renderClip({
       element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 1, track: 0 },

package/src/player/components/TimelineClip.tsx

@@ -9,7 +9,8 @@ import {
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { isAudioTimelineElement } from "../../utils/timelineInspector";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
-import { TimelineClipFades } from "./TimelineClipFades";
+import { ClipFadesContext, TimelineClipFades, useClipFadeDraft } from "./TimelineClipFades";
+import { rendersWaveform } from "./AudioWaveform";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -82,6 +83,8 @@ export const TimelineClip = memo(function TimelineClip({
     "--clip-handle": theme.handleColor,
   } as CSSProperties;
   const isAudioClip = isAudioTimelineElement(el);
+  const hasFades = (isAudioClip || Boolean(el.hasAudio)) && !isGestureActor;
+  const fade = useClipFadeDraft(el);
   const clipClassName = [
     "timeline-clip",
     "absolute",
@@ -206,16 +209,21 @@ export const TimelineClip = memo(function TimelineClip({
           {startLabel}-{endLabel}s
         </span>
       )}
-      {children}
-      {/* Fade handles + ramps for anything the mixer hears — audio clips and
-          videos marked data-has-audio. They write data-fade-in/out on the clip
-          and are the timeline half of the inspector's Fade rows. */}
-      {(isAudioClip || el.hasAudio) && !isGestureActor && (
+      <ClipFadesContext.Provider value={hasFades ? fade.shape : null}>
+        {children}
+      </ClipFadesContext.Provider>
+      {/* Fade handles for anything the mixer hears: audio clips and videos marked
+          data-has-audio. They write data-fade-in/out, the timeline half of the
+          inspector's Fade rows. */}
+      {hasFades && (
         <TimelineClipFades
           el={el}
           pps={pps}
           widthPx={widthPx}
           showHandles={(isHovered || isSelected) && !isDragging}
+          focusable={isSelected}
+          hasWaveform={rendersWaveform(el)}
+          fade={fade}
         />
       )}
     </button>