handleResizeStart(e, element, track, "ne")} />
+
handleResizeStart(e, element, track, "sw")} />
+
handleResizeStart(e, element, track, "se")} />
+
+ {/* Rotation handle for text */}
+
handleRotationStart(e, element, track)}>
+
⟲
+
+
+
+ );
+ }
+
+ return null;
+ };
return (
<>
diff --git a/apps/web/src/components/editor/properties-panel/effects-properties.tsx b/apps/web/src/components/editor/properties-panel/effects-properties.tsx
new file mode 100644
index 000000000..49a64cccc
--- /dev/null
+++ b/apps/web/src/components/editor/properties-panel/effects-properties.tsx
@@ -0,0 +1,439 @@
+"use client";
+
+import { useEffectsStore } from "@/stores/effects-store";
+import { Slider } from "@/components/ui/slider";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Eye, EyeOff, Trash2, Settings, RotateCcw, Copy } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+export function EffectsProperties() {
+ const {
+ selectedEffect,
+ appliedEffects,
+ updateEffectParameters,
+ removeEffect,
+ toggleEffect,
+ setSelectedEffect,
+ } = useEffectsStore();
+
+ if (!selectedEffect) {
+ return (
+
+
+
Select an effect to adjust its properties
+
+ );
+ }
+
+ const handleParameterChange = (parameter: string, value: number[]) => {
+ updateEffectParameters(selectedEffect.id, {
+ [parameter]: value[0],
+ });
+ };
+
+ const handleReset = () => {
+ // Reset to default values based on effect type
+ const defaultParams = getDefaultParameters(selectedEffect.effectType);
+ updateEffectParameters(selectedEffect.id, defaultParams);
+ toast.success("Effect reset to default");
+ };
+
+ const handleDuplicate = () => {
+ // Create a copy of the current effect
+ const newEffect = {
+ ...selectedEffect,
+ id: crypto.randomUUID(),
+ name: `${selectedEffect.name} (Copy)`,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ };
+
+ // Add to applied effects (this would need to be implemented in the store)
+ toast.success("Effect duplicated");
+ };
+
+ const handleRemove = () => {
+ removeEffect(selectedEffect.id);
+ setSelectedEffect(null);
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
{selectedEffect.name}
+
+ Effect applied to timeline element
+
+
+
+
+
+
+
+
+
+
+
+ {/* Enable/Disable Toggle */}
+
+
+ toggleEffect(selectedEffect.id)}
+ />
+
+
+
+
+ {/* Parameters */}
+
+
+
Parameters
+
+
+
+ {/* Brightness */}
+ {selectedEffect.parameters.brightness !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.brightness}
+
+
+
+ handleParameterChange("brightness", value)
+ }
+ min={-100}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Contrast */}
+ {selectedEffect.parameters.contrast !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.contrast}
+
+
+
+ handleParameterChange("contrast", value)
+ }
+ min={-100}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Saturation */}
+ {selectedEffect.parameters.saturation !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.saturation}
+
+
+
+ handleParameterChange("saturation", value)
+ }
+ min={-100}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Hue */}
+ {selectedEffect.parameters.hue !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.hue}°
+
+
+
handleParameterChange("hue", value)}
+ min={-180}
+ max={180}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Blur */}
+ {selectedEffect.parameters.blur !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.blur}
+
+
+
handleParameterChange("blur", value)}
+ min={0}
+ max={50}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Sepia */}
+ {selectedEffect.parameters.sepia !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.sepia}%
+
+
+
handleParameterChange("sepia", value)}
+ min={0}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Grayscale */}
+ {selectedEffect.parameters.grayscale !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.grayscale}%
+
+
+
+ handleParameterChange("grayscale", value)
+ }
+ min={0}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Vignette */}
+ {selectedEffect.parameters.vignette !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.vignette}%
+
+
+
+ handleParameterChange("vignette", value)
+ }
+ min={0}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Grain */}
+ {selectedEffect.parameters.grain !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.grain}%
+
+
+
handleParameterChange("grain", value)}
+ min={0}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Sharpen */}
+ {selectedEffect.parameters.sharpen !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.sharpen}%
+
+
+
handleParameterChange("sharpen", value)}
+ min={0}
+ max={100}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+ {/* Pixelate */}
+ {selectedEffect.parameters.pixelate !== undefined && (
+
+
+
+
+ {selectedEffect.parameters.pixelate}
+
+
+
+ handleParameterChange("pixelate", value)
+ }
+ min={1}
+ max={50}
+ step={1}
+ className="w-full"
+ />
+
+ )}
+
+
+ {/* Applied Effects List */}
+ {appliedEffects.length > 1 && (
+ <>
+
+
+
Applied Effects
+
+ {appliedEffects
+ .filter(
+ (effect) => effect.elementId === selectedEffect.elementId
+ )
+ .map((effect) => (
+
setSelectedEffect(effect)}
+ >
+
+
+ {effect.name}
+
+ {!effect.enabled && }
+
+
+ ))}
+
+
+
+ )}
+
+ );
+}
+
+// Helper function to get default parameters for each effect type
+function getDefaultParameters(effectType: string) {
+ const defaults: Record
= {
+ "brightness-up": { brightness: 20 },
+ "brightness-down": { brightness: -20 },
+ "contrast-up": { contrast: 30 },
+ "saturation-up": { saturation: 40 },
+ "saturation-down": { saturation: -30 },
+ "sepia": { sepia: 80 },
+ "grayscale": { grayscale: 100 },
+ "invert": { invert: 100 },
+ "vintage": { vintage: 70, grain: 20, vignette: 30 },
+ "dramatic": { contrast: 40, brightness: -10, saturation: -20 },
+ "warm": { warm: 60, hue: 15 },
+ "cool": { cool: 60, hue: -15 },
+ "cinematic": { cinematic: 80, vignette: 40, contrast: 25 },
+ "gaussian-blur": { blur: 15, blurType: "gaussian" },
+ "motion-blur": { blur: 20, blurType: "motion" },
+ "vignette": { vignette: 50 },
+ "grain": { grain: 30 },
+ "sharpen": { sharpen: 40 },
+ "emboss": { emboss: 60 },
+ "edge": { edge: 70 },
+ "pixelate": { pixelate: 20 },
+ };
+
+ return defaults[effectType] || {};
+}
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 150f95124..2b752d3da 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -2,19 +2,26 @@
import { useMediaStore } from "@/stores/media-store";
import { useTimelineStore } from "@/stores/timeline-store";
+import { useEffectsStore } from "@/stores/effects-store";
import { ScrollArea } from "../../ui/scroll-area";
import { AudioProperties } from "./audio-properties";
import { MediaProperties } from "./media-properties";
import { TextProperties } from "./text-properties";
+import { EffectsProperties } from "./effects-properties";
import { SquareSlashIcon } from "lucide-react";
export function PropertiesPanel() {
const { selectedElements, tracks } = useTimelineStore();
const { mediaFiles } = useMediaStore();
+ const { selectedEffect } = useEffectsStore();
return (
<>
- {selectedElements.length > 0 ? (
+ {selectedEffect ? (
+
+
+
+ ) : selectedElements.length > 0 ? (
{selectedElements.map(({ trackId, elementId }) => {
const track = tracks.find((t) => t.id === trackId);
diff --git a/apps/web/src/components/editor/timeline/effects-timeline.tsx b/apps/web/src/components/editor/timeline/effects-timeline.tsx
new file mode 100644
index 000000000..6dd950d71
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/effects-timeline.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffectsStore } from "@/stores/effects-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { cn } from "@/lib/utils";
+import { Sparkles } from "lucide-react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface EffectsTimelineProps {
+ trackId: string;
+ elementId: string;
+}
+
+export function EffectsTimeline({ trackId, elementId }: EffectsTimelineProps) {
+ const { getEffectsForElement } = useEffectsStore();
+ const { tracks } = useTimelineStore();
+
+ const track = tracks.find((t) => t.id === trackId);
+ const element = track?.elements.find((e) => e.id === elementId);
+ const effects = getEffectsForElement(elementId);
+
+ if (!element || effects.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {effects.map((effect) => {
+ if (!effect.enabled) return null;
+
+ const effectStart = Math.max(0, effect.startTime - element.startTime);
+ const effectEnd = Math.min(
+ element.duration,
+ effect.endTime - element.startTime
+ );
+ const effectDuration = effectEnd - effectStart;
+
+ if (effectDuration <= 0) return null;
+
+ const left = (effectStart / element.duration) * 100;
+ const width = (effectDuration / element.duration) * 100;
+
+ return (
+
+
+ {
+ e.stopPropagation();
+ // TODO: Select effect for editing
+ }}
+ >
+
+
+
+
+
+
{effect.name}
+
+ {effect.startTime.toFixed(1)}s - {effect.endTime.toFixed(1)}s
+
+
+ );
+ })}
+
-
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index b24687a67..55707e1ae 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -181,15 +181,49 @@ export function SocialsIcon({
className={className}
>
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
);
}
@@ -230,4 +264,4 @@ export function TransitionUpIcon({
/>
);
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index dd6a500ba..159766deb 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -242,4 +242,4 @@ function EditableShortcutKey({
{children}
);
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/components/language-select.tsx b/apps/web/src/components/language-select.tsx
index 43ed632d6..d66aed647 100644
--- a/apps/web/src/components/language-select.tsx
+++ b/apps/web/src/components/language-select.tsx
@@ -1,204 +1,204 @@
-import { useState, useRef, useEffect } from "react";
-import { ChevronDown, Globe } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
-import ReactCountryFlag from "react-country-flag";
-
-export interface Language {
- code: string;
- name: string;
- flag?: string;
-}
-
-interface LanguageSelectProps {
- selectedCountry: string;
- onSelect: (country: string) => void;
- containerRef: React.RefObject
;
- languages: Language[];
-}
-
-function FlagPreloader({ languages }: { languages: Language[] }) {
- return (
-
- {languages.map((language) => (
-
- ))}
-
- );
-}
-
-export function LanguageSelect({
- selectedCountry,
- onSelect,
- containerRef,
- languages,
-}: LanguageSelectProps) {
- const [expanded, setExpanded] = useState(false);
- const [isTapping, setIsTapping] = useState(false);
- const [isClosing, setIsClosing] = useState(false);
- const collapsedHeight = "2.5rem";
- const expandHeight = "12rem";
- const buttonRef = useRef(null);
-
- const expand = () => {
- setIsTapping(true);
- setTimeout(() => setIsTapping(false), 600);
- setExpanded(true);
- buttonRef.current?.focus();
- };
-
- useEffect(() => {
- if (!expanded) return;
-
- const handleClickOutside = (event: MouseEvent) => {
- if (
- buttonRef.current &&
- !buttonRef.current.contains(event.target as Node)
- ) {
- setIsClosing(true);
- setTimeout(() => setIsClosing(false), 600);
- setExpanded(false);
- buttonRef.current?.blur();
- }
- };
-
- document.addEventListener("mousedown", handleClickOutside);
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- };
- }, [expanded]);
-
- const selectedLanguage = languages.find(
- (lang) => lang.code === selectedCountry
- );
-
- const handleSelect = ({
- code,
- e,
- }: {
- code: string;
- e: React.MouseEvent;
- }) => {
- e.stopPropagation();
- e.preventDefault();
- onSelect(code);
- setExpanded(false);
- };
-
- return (
-
-
-
- {!expanded ? (
-
-
- {selectedCountry === "auto" ? (
-
- ) : (
-
- )}
-
- {selectedCountry === "auto" ? "Auto" : selectedLanguage?.name}
-
-
-
-
- {languages.map((language) => (
-
- ))}
-
- )}
-
-
-
-
-
-
+ {languages.map((language) => (
+
+ ))}
+
+ );
+}
+
+export function LanguageSelect({
+ selectedCountry,
+ onSelect,
+ containerRef,
+ languages,
+}: LanguageSelectProps) {
+ const [expanded, setExpanded] = useState(false);
+ const [isTapping, setIsTapping] = useState(false);
+ const [isClosing, setIsClosing] = useState(false);
+ const collapsedHeight = "2.5rem";
+ const expandHeight = "12rem";
+ const buttonRef = useRef(null);
+
+ const expand = () => {
+ setIsTapping(true);
+ setTimeout(() => setIsTapping(false), 600);
+ setExpanded(true);
+ buttonRef.current?.focus();
+ };
+
+ useEffect(() => {
+ if (!expanded) return;
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ buttonRef.current &&
+ !buttonRef.current.contains(event.target as Node)
+ ) {
+ setIsClosing(true);
+ setTimeout(() => setIsClosing(false), 600);
+ setExpanded(false);
+ buttonRef.current?.blur();
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [expanded]);
+
+ const selectedLanguage = languages.find(
+ (lang) => lang.code === selectedCountry
+ );
+
+ const handleSelect = ({
+ code,
+ e,
+ }: {
+ code: string;
+ e: React.MouseEvent;
+ }) => {
+ e.stopPropagation();
+ e.preventDefault();
+ onSelect(code);
+ setExpanded(false);
+ };
+
+ return (
+
+
+
+ {!expanded ? (
+
+
+ {selectedCountry === "auto" ? (
+
+ ) : (
+
+ )}
+
+ {selectedCountry === "auto" ? "Auto" : selectedLanguage?.name}
+
+
+
+
+ {languages.map((language) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+