feat: add transitions, track mixing, and voiceover controls

1 files changed, 51 insertions, 26 deletions

diff --git a/apps/web/src/params/registry.ts b/apps/web/src/params/registry.ts
index 9e363c88..6456a360 100644
--- a/apps/web/src/params/registry.ts
+++ b/apps/web/src/params/registry.ts
@@ -1,20 +1,11 @@
-import type {
-	ParamDefinition,
-	ParamValue,
-	ParamValues,
-} from "@/params";
+import type { ParamDefinition, ParamValue, ParamValues } from "@/params";
 import { MIN_TRANSFORM_SCALE } from "@/animation/transform";
 import type { BlendMode } from "@/rendering";
-import type {
-	ElementType,
-	TimelineElement,
-} from "@/timeline";
+import { TRANSITION_KIND_OPTIONS } from "@/rendering/transition";
+import type { ElementType, TimelineElement } from "@/timeline";
 import { DEFAULTS } from "@/timeline/defaults";
 import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/timeline/audio-constants";
-import {
-	CORNER_RADIUS_MAX,
-	CORNER_RADIUS_MIN,
-} from "@/text/background";
+import { CORNER_RADIUS_MAX, CORNER_RADIUS_MIN } from "@/text/background";
 
 export type ElementParamDefinition<TKey extends string = string> =
 	ParamDefinition<TKey> & {
@@ -46,13 +37,7 @@ export class DefinitionRegistry<TKey extends string, TDefinition> {
 		this.entityName = entityName;
 	}
 
-	register({
-		key,
-		definition,
-	}: {
-		key: TKey;
-		definition: TDefinition;
-	}): void {
+	register({ key, definition }: { key: TKey; definition: TDefinition }): void {
 		this.definitions.set(key, definition);
 	}
 
@@ -153,6 +138,36 @@ const visualElementParams: ElementParamDefinition[] = [
 		options: BLEND_MODE_OPTIONS,
 	},
 ];
+const transitionElementParams: ElementParamDefinition[] = [
+	{
+		key: "transition.kind",
+		label: "Style",
+		type: "select",
+		default: DEFAULTS.element.transitionKind,
+		keyframable: false,
+		options: TRANSITION_KIND_OPTIONS,
+	},
+	{
+		key: "transition.inDuration",
+		label: "In",
+		type: "number",
+		default: DEFAULTS.element.transitionDuration,
+		min: 0,
+		max: 5,
+		step: 0.1,
+		keyframable: false,
+	},
+	{
+		key: "transition.outDuration",
+		label: "Out",
+		type: "number",
+		default: DEFAULTS.element.transitionDuration,
+		min: 0,
+		max: 5,
+		step: 0.1,
+		keyframable: false,
+	},
+];
 
 const audioElementParams: ElementParamDefinition[] = [
 	{
@@ -333,20 +348,31 @@ export const elementParamRegistry = new DefinitionRegistry<
 
 elementParamRegistry.register({
 	key: "video",
-	definition: [...visualElementParams, ...audioElementParams],
+	definition: [
+		...visualElementParams,
+		...transitionElementParams,
+		...audioElementParams,
+	],
+});
+elementParamRegistry.register({
+	key: "image",
+	definition: [...visualElementParams, ...transitionElementParams],
 });
-elementParamRegistry.register({ key: "image", definition: visualElementParams });
 elementParamRegistry.register({
 	key: "text",
-	definition: [...textElementParams, ...visualElementParams],
+	definition: [
+		...textElementParams,
+		...visualElementParams,
+		...transitionElementParams,
+	],
 });
 elementParamRegistry.register({
 	key: "sticker",
-	definition: visualElementParams,
+	definition: [...visualElementParams, ...transitionElementParams],
 });
 elementParamRegistry.register({
 	key: "graphic",
-	definition: visualElementParams,
+	definition: [...visualElementParams, ...transitionElementParams],
 });
 elementParamRegistry.register({ key: "audio", definition: audioElementParams });
 elementParamRegistry.register({ key: "effect", definition: [] });
@@ -435,4 +461,3 @@ export function buildElementParamValues({
 	}
 	return values;
 }
-