feat: separate audio from elements

3 files changed, 155 insertions, 41 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>

+		</>

 	);

 }

diff --git a/apps/web/src/components/editor/panels/timeline/timeline-element.tsx b/apps/web/src/components/editor/panels/timeline/timeline-element.tsx
index f196da44..bb30b0b0 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-element.tsx
@@ -40,6 +40,11 @@ import type {
 import type { MediaAsset } from "@/lib/media/types";

 import { mediaSupportsAudio } from "@/lib/media/media-utils";

 import {

+	canToggleSourceAudio,

+	getSourceAudioActionLabel,

+	isSourceAudioSeparated,

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

+import {

 	getActionDefinition,

 	type TAction,

 	type TActionWithOptionalArgs,

@@ -61,7 +66,9 @@ import {
 	Search01Icon,

 	Exchange01Icon,

 	KeyframeIcon,

+	Link02Icon,

 	MagicWand05Icon,

+	Unlink02Icon,

 } from "@hugeicons/core-free-icons";

 import { HugeiconsIcon } from "@hugeicons/react";

 import { uppercase } from "@/utils/string";

@@ -280,6 +287,19 @@ export function TimelineElement({
 	};

 

 	const isMuted = canElementHaveAudio(element) && element.muted === true;

+	const canToggleCurrentSourceAudio =

+		selectedElements.length === 1 &&

+		isCurrentElementSelected &&

+		canToggleSourceAudio({

+			element,

+			mediaAsset,

+		});

+	const sourceAudioLabel =

+		element.type === "video"

+			? getSourceAudioActionLabel({ element })

+			: "Extract audio";

+	const isElementSourceAudioSeparated =

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

 

 	return (

 		<ContextMenu>

@@ -334,6 +354,21 @@ export function TimelineElement({
 						isMuted={isMuted}

 					/>

 				)}

+				{canToggleCurrentSourceAudio && (

+					<ContextMenuItem

+					icon={

+						<HugeiconsIcon

+							icon={isElementSourceAudioSeparated ? Unlink02Icon : Link02Icon}

+						/>

+					}

+						onClick={(event: React.MouseEvent) => {

+							event.stopPropagation();

+							invokeAction("toggle-source-audio");

+						}}

+					>

+						{sourceAudioLabel}

+					</ContextMenuItem>

+				)}

 				{canElementBeHidden(element) && (

 					<VisibilityMenuItem

 						element={element}

diff --git a/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
index f398264c..abe36f88 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
@@ -1,4 +1,5 @@
 import { useEditor } from "@/hooks/use-editor";
+import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 import {
 	TooltipProvider,
 	Tooltip,
@@ -6,7 +7,6 @@ import {
 	TooltipContent,
 } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
-import { SplitSquareHorizontal } from "lucide-react";
 import {
 	SplitButton,
 	SplitButtonLeft,
@@ -18,6 +18,12 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { sliderToZoom, zoomToSlider } from "@/lib/timeline/zoom-utils";
 import { ScenesView } from "@/components/editor/scenes-view";
 import { type TActionWithOptionalArgs, invokeAction } from "@/lib/actions";
+import {
+	canToggleSourceAudio,
+	getSourceAudioActionLabel,
+	isSourceAudioSeparated,
+} from "@/lib/timeline/audio-separation";
+import { hasMediaId } from "@/lib/timeline";
 import { cn } from "@/utils/ui";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -33,8 +39,10 @@ import {
 	Copy01Icon,
 	AlignLeftIcon,
 	AlignRightIcon,
+	Link02Icon,
 	Layers01Icon,
 	Chart03Icon,
+	Unlink02Icon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { OcRippleIcon } from "@/components/icons";
@@ -78,9 +86,47 @@ export function TimelineToolbar({
 }
 
 function ToolbarLeftSection() {
+	const editor = useEditor();
+	const mediaAssets = useEditor((currentEditor) => currentEditor.media.getAssets());
+	const { selectedElements } = useElementSelection();
 	const isCurrentlyBookmarked = useEditor((e) =>
 		e.scenes.isBookmarked({ time: e.playback.getCurrentTime() }),
 	);
+	const selectedElement =
+		selectedElements.length === 1
+			? (editor.timeline.getElementsWithTracks({
+					elements: selectedElements,
+				})[0] ?? null)
+			: null;
+	const selectedMediaAsset = (() => {
+		if (!selectedElement) {
+			return null;
+		}
+
+		const { element } = selectedElement;
+		if (!hasMediaId(element)) {
+			return null;
+		}
+
+		return mediaAssets.find((asset) => asset.id === element.mediaId) ?? null;
+	})();
+	const canToggleSelectedSourceAudio =
+		!!selectedElement &&
+		canToggleSourceAudio({
+			element: selectedElement.element,
+			mediaAsset: selectedMediaAsset,
+		});
+	const sourceAudioLabel =
+		selectedElement?.element.type === "video"
+			? getSourceAudioActionLabel({
+					element: selectedElement.element,
+				})
+			: "Extract audio";
+	const isSelectedSourceAudioSeparated =
+		selectedElement?.element.type === "video" &&
+		isSourceAudioSeparated({
+			element: selectedElement.element,
+		});
 
 	const handleAction = ({
 		action,
@@ -117,10 +163,16 @@ function ToolbarLeftSection() {
 				/>
 
 				<ToolbarButton
-					icon={<SplitSquareHorizontal />}
-					tooltip="Separate audio (coming soon)"
-					disabled={true}
-					onClick={({ event: _event }) => {}}
+			icon={
+					<HugeiconsIcon
+						icon={isSelectedSourceAudioSeparated ? Unlink02Icon : Link02Icon}
+					/>
+				}
+					tooltip={sourceAudioLabel}
+					disabled={!canToggleSelectedSourceAudio}
+					onClick={({ event }) =>
+						handleAction({ action: "toggle-source-audio", event })
+					}
 				/>
 
 				<ToolbarButton
@@ -275,6 +327,7 @@ function ToolbarButton({
 				<Button
 					variant={isActive ? "secondary" : "text"}
 					size="icon"
+					disabled={disabled}
 					onClick={(event) => onClick({ event })}
 					className={cn(
 						"rounded-sm",