feat: add transitions, track mixing, and voiceover controls

1 files changed, 36 insertions, 2 deletions

diff --git a/apps/web/src/components/editor/panels/properties/registry.tsx b/apps/web/src/components/editor/panels/properties/registry.tsx
index 15f010f7..805098f8 100644
--- a/apps/web/src/components/editor/panels/properties/registry.tsx
+++ b/apps/web/src/components/editor/panels/properties/registry.tsx
@@ -23,7 +23,10 @@ import {
 	DashboardSpeed02Icon,
 } from "@hugeicons/core-free-icons";
 import { ElementParamsTab } from "./components/element-params-tab";
-import { ClipEffectsTab, StandaloneEffectTab } from "@/effects/components/effects-tab";
+import {
+	ClipEffectsTab,
+	StandaloneEffectTab,
+} from "@/effects/components/effects-tab";
 import { MasksTab } from "@/masks/components/masks-tab";
 import { SpeedTab } from "@/speed/components/speed-tab";
 import { GraphicTab } from "@/graphics/components/graphic-tab";
@@ -40,6 +43,11 @@ const TRANSFORM_PARAM_KEYS = [
 
 const BLENDING_PARAM_KEYS = ["opacity", "blendMode"] as const;
 const AUDIO_PARAM_KEYS = ["volume", "muted"] as const;
+const TRANSITION_PARAM_KEYS = [
+	"transition.kind",
+	"transition.inDuration",
+	"transition.outDuration",
+] as const;
 const TEXT_PARAM_KEYS = [
 	"content",
 	"fontFamily",
@@ -135,6 +143,25 @@ function buildAudioTab({
 		),
 	};
 }
+function buildTransitionTab({
+	element,
+}: {
+	element: VisualElement;
+}): PropertiesTabDef {
+	return {
+		id: "transition",
+		label: "Transition",
+		icon: <HugeiconsIcon icon={MagicWand05Icon} size={16} />,
+		content: ({ trackId }) => (
+			<ElementParamsTab
+				element={element}
+				trackId={trackId}
+				paramKeys={TRANSITION_PARAM_KEYS}
+				sectionKey="transition"
+			/>
+		),
+	};
+}
 
 function buildSpeedTab({
 	element,
@@ -202,7 +229,9 @@ function buildGraphicTab({
 		id: "graphic",
 		label: "Graphic",
 		icon: <OcShapesIcon size={16} />,
-		content: ({ trackId }) => <GraphicTab element={element} trackId={trackId} />,
+		content: ({ trackId }) => (
+			<GraphicTab element={element} trackId={trackId} />
+		),
 	};
 }
 
@@ -232,6 +261,7 @@ function getTextConfig({
 			buildTextTab({ element }),
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
+			buildTransitionTab({ element }),
 		],
 	};
 }
@@ -251,6 +281,7 @@ function getVideoConfig({
 			...(showAudioTab ? [buildAudioTab({ element })] : []),
 			buildSpeedTab({ element }),
 			buildBlendingTab({ element }),
+			buildTransitionTab({ element }),
 			buildMasksTab({ element }),
 			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
@@ -267,6 +298,7 @@ function getImageConfig({
 		tabs: [
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
+			buildTransitionTab({ element }),
 			buildMasksTab({ element }),
 			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
@@ -283,6 +315,7 @@ function getStickerConfig({
 		tabs: [
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
+			buildTransitionTab({ element }),
 			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],
 	};
@@ -299,6 +332,7 @@ function getGraphicConfig({
 			buildGraphicTab({ element }),
 			buildTransformTab({ element }),
 			buildBlendingTab({ element }),
+			buildTransitionTab({ element }),
 			buildMasksTab({ element }),
 			...(FEATURES.effects ? [buildClipEffectsTab({ element })] : []),
 		],