feat: separate audio from elements

1 files changed, 62 insertions, 36 deletions

diff --git a/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx
index 4dbc1a17..5ac0fbb7 100644
--- a/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx
+++ b/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx
@@ -1,5 +1,7 @@
+import { Button } from "@/components/ui/button";

 import { NumberField } from "@/components/ui/number-field";

 import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/lib/timeline/audio-constants";

+import { isSourceAudioSeparated } from "@/lib/timeline/audio-separation";

 import { DEFAULTS } from "@/lib/timeline/defaults";

 import {

 	clamp,

@@ -10,6 +12,7 @@ import {
 } from "@/utils/math";

 import type { AudioElement, VideoElement } from "@/lib/timeline";

 import { resolveNumberAtTime } from "@/lib/animation";

+import { useEditor } from "@/hooks/use-editor";

 import { useElementPlayhead } from "../hooks/use-element-playhead";

 import { useKeyframedNumberProperty } from "../hooks/use-keyframed-number-property";

 import { KeyframeToggle } from "../components/keyframe-toggle";

@@ -34,6 +37,7 @@ export function AudioTab({
 	element: AudioElement | VideoElement;

 	trackId: string;

 }) {

+	const editor = useEditor();

 	const { localTime, isPlayheadWithinElementRange } = useElementPlayhead({

 		startTime: element.startTime,

 		duration: element.duration,

@@ -80,46 +84,68 @@ export function AudioTab({
 					rightValue: DEFAULTS.element.volume,

 				})

 			: (element.volume ?? DEFAULTS.element.volume) === DEFAULTS.element.volume;

+	const isSeparated =

+		element.type === "video" && isSourceAudioSeparated({ element });

 

 	return (

-		<Section collapsible sectionKey={`${element.id}:audio`}>

-			<SectionHeader>

-				<SectionTitle>Audio</SectionTitle>

-			</SectionHeader>

-			<SectionContent>

-				<SectionFields>

-					<SectionField

-						label="Volume"

-						beforeLabel={

-							<KeyframeToggle

-								isActive={volume.isKeyframedAtTime}

-								isDisabled={!isPlayheadWithinElementRange}

-								title="Toggle volume keyframe"

-								onToggle={volume.toggleKeyframe}

-							/>

+		<>

+			{isSeparated && (

+				<div className="mx-4 mt-4 rounded-md border bg-muted/30 p-3">

+					<p className="text-sm">Audio has been separated.</p>

+					<Button

+						className="mt-3"

+						size="sm"

+						variant="secondary"

+						onClick={() =>

+							editor.timeline.toggleSourceAudioSeparation({

+								trackId,

+								elementId: element.id,

+							})

 						}

 					>

-						<NumberField

-							icon={<HugeiconsIcon icon={VolumeHighIcon} />}

-							value={volume.displayValue}

-							onFocus={volume.onFocus}

-							onChange={volume.onChange}

-							onBlur={volume.onBlur}

-							dragSensitivity="slow"

-							scrubClamp={{ min: VOLUME_DB_MIN, max: VOLUME_DB_MAX }}

-							onScrub={volume.scrubTo}

-							onScrubEnd={volume.commitScrub}

-							onReset={() =>

-								volume.commitValue({

-									value: DEFAULTS.element.volume,

-								})

+						Recover audio

+					</Button>

+				</div>

+			)}

+			<Section collapsible sectionKey={`${element.id}:audio`}>

+				<SectionHeader>

+					<SectionTitle>Audio</SectionTitle>

+				</SectionHeader>

+				<SectionContent>

+					<SectionFields>

+						<SectionField

+							label="Volume"

+							beforeLabel={

+								<KeyframeToggle

+									isActive={volume.isKeyframedAtTime}

+									isDisabled={!isPlayheadWithinElementRange}

+									title="Toggle volume keyframe"

+									onToggle={volume.toggleKeyframe}

+								/>

 							}

-							isDefault={isDefault}

-							suffix="dB"

-						/>

-					</SectionField>

-				</SectionFields>

-			</SectionContent>

-		</Section>

+						>

+							<NumberField

+								icon={<HugeiconsIcon icon={VolumeHighIcon} />}

+								value={volume.displayValue}

+								onFocus={volume.onFocus}

+								onChange={volume.onChange}

+								onBlur={volume.onBlur}

+								dragSensitivity="slow"

+								scrubClamp={{ min: VOLUME_DB_MIN, max: VOLUME_DB_MAX }}

+								onScrub={volume.scrubTo}

+								onScrubEnd={volume.commitScrub}

+								onReset={() =>

+									volume.commitValue({

+										value: DEFAULTS.element.volume,

+									})

+								}

+								isDefault={isDefault}

+								suffix="dB"

+							/>

+						</SectionField>

+					</SectionFields>

+				</SectionContent>

+			</Section>

+		</>

 	);

 }