feat: add transitions, track mixing, and voiceover controls

1 files changed, 20 insertions, 1 deletions

diff --git a/apps/web/src/components/editor/panels/properties/index.tsx b/apps/web/src/components/editor/panels/properties/index.tsx
index d946027d..f4ce9651 100644
--- a/apps/web/src/components/editor/panels/properties/index.tsx
+++ b/apps/web/src/components/editor/panels/properties/index.tsx
@@ -14,13 +14,32 @@ import { usePropertiesStore } from "./stores/properties-store";
 import { getPropertiesConfig } from "./registry";
 import { cn } from "@/utils/ui";
 import { EmptyView } from "./empty-view";
+import { TrackAudioProperties } from "./components/track-audio-properties";
 
 export function PropertiesPanel() {
 	const editor = useEditor();
 	useEditor((e) => e.scenes.getActiveSceneOrNull());
 	useEditor((e) => e.media.getAssets());
 	const { selectedElements } = useElementSelection();
-	const { activeTabPerType, setActiveTab } = usePropertiesStore();
+	const { activeTabPerType, setActiveTab, selectedTrackId } =
+		usePropertiesStore();
+	const selectedTrack = selectedTrackId
+		? editor.timeline.getTrackById({ trackId: selectedTrackId })
+		: null;
+
+	if (
+		selectedElements.length === 0 &&
+		selectedTrack &&
+		(selectedTrack.type === "audio" || selectedTrack.type === "video")
+	) {
+		return (
+			<div className="panel bg-background flex h-full overflow-hidden rounded-sm border">
+				<ScrollArea className="flex-1 scrollbar-hidden">
+					<TrackAudioProperties key={selectedTrack.id} track={selectedTrack} />
+				</ScrollArea>
+			</div>
+		);
+	}
 
 	if (selectedElements.length === 0) {
 		return (