feat(studio): audio pills show real peaks and loudness (#4282)

* feat(studio): audio clips draw real peaks shaded by loudness

The pill fill is the track tint at 70 percent, and each bar's opacity follows the cached server peaks. Muting greys the pill in place. Linked video audio shows a 1px tick.

* style(studio): format the audio waveform markup

* fix(studio): map audio peaks across the full clip width

* fix(studio): keep waveform visible through fade wedges

* fix(studio): keep silent waveform bins visible

* fix(studio): keep waveform baseline visible edge to edge

* fix(studio): keep waveform visible over fades

* fix(studio): keep quiet waveform bars visible

* fix(studio): paint waveform above fade wedges

* fix(studio): fit waveform inside audio clip

* fix(studio): preserve waveform contrast tokens

* test(studio): ratchet waveform color literals

* fix(studio): keep loudness floor internal

* chore(studio): document intentional fallow findings

* refactor(studio): share fade handle rendering

* fix(studio): pass fade handle styles explicitly

* refactor(studio): split waveform drawing stages

* test(studio): cover waveform canvas painting
This commit is contained in:
Miguel Ángel
2026-09-22 08:58:21 -04:00
committed by GitHub
parent 9f19d9d325
commit 94609daf44
14 changed files with 491 additions and 109 deletions
+1 -3
View File
@@ -9,7 +9,5 @@
"dark/hovered-handle": 2.1777784316890663,
"dark/active-hovered-handle": 1.8873389821795008,
"dark/dragging-handle": 2.7718581542466456,
"dark/active-dragging-handle": 2.3310570156777346,
"dark/quiet-waveform": 2.1687299852625723,
"dark/active-quiet-waveform": 1.7915634653703223
"dark/active-dragging-handle": 2.3310570156777346
}
+48 -2
View File
@@ -236,7 +236,7 @@
"packages/studio/src/player/components/AudioWaveform.tsx:139",
"packages/studio/src/player/components/AudioWaveform.tsx:145"
],
"opacity": 0.45,
"opacity": 0.64,
"format": "rgb-channels"
},
{
@@ -255,7 +255,53 @@
"packages/studio/src/player/components/AudioWaveform.tsx:139",
"packages/studio/src/player/components/AudioWaveform.tsx:145"
],
"opacity": 0.45,
"opacity": 0.64,
"format": "rgb-channels"
},
{
"id": "quiet-muted-waveform",
"foreground": "--timeline-waveform-muted-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-muted-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/studio.css:246",
"packages/studio/src/player/components/AudioWaveform.tsx:144"
],
"opacity": 0.64,
"format": "rgb-channels"
}
]
},
{
"id": "paper",
"selector": ":root[data-theme=\"paper\"]",
"canvas": "--timeline-shell-bg",
"pairs": [
{
"id": "quiet-waveform",
"foreground": "--timeline-waveform-bar-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/theme.css:336",
"packages/studio/src/player/components/AudioWaveform.tsx:144"
],
"opacity": 0.64,
"format": "rgb-channels"
},
{
"id": "quiet-muted-waveform",
"foreground": "--timeline-waveform-muted-rgb",
"background": ["--timeline-row-bg", "--timeline-clip-audio-muted-bg"],
"role": "graphic",
"minimum": 3,
"sources": [
"packages/studio/src/styles/theme.css:340",
"packages/studio/src/player/components/AudioWaveform.tsx:144"
],
"opacity": 0.64,
"format": "rgb-channels"
}
]