summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components/editor')
-rw-r--r--apps/web/src/components/editor/properties-panel.tsx350
-rw-r--r--apps/web/src/components/editor/speed-control.tsx46
-rw-r--r--apps/web/src/components/editor/timeline.tsx32
3 files changed, 295 insertions, 133 deletions
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index 496550b7..2b211c21 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -1,132 +1,218 @@
-"use client";
-
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
-import { Slider } from "../ui/slider";
-import { ScrollArea } from "../ui/scroll-area";
-import { Separator } from "../ui/separator";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "../ui/select";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
-import { useState } from "react";
-
-export function PropertiesPanel() {
- const { tracks } = useTimelineStore();
- const { mediaItems } = useMediaStore();
- const [backgroundType, setBackgroundType] = useState<
- "blur" | "mirror" | "color"
- >("blur");
- const [backgroundColor, setBackgroundColor] = useState("#000000");
-
- // Get the first image clip for preview (simplified)
- const firstImageClip = tracks
- .flatMap((track) => track.clips)
- .find((clip) => {
- const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
- return mediaItem?.type === "image";
- });
-
- const firstImageItem = firstImageClip
- ? mediaItems.find((item) => item.id === firstImageClip.mediaId)
- : null;
-
- return (
- <ScrollArea className="h-full">
- <div className="space-y-6 p-5">
-
-
- {/* Transform */}
- <div className="space-y-4">
- <h3 className="text-sm font-medium">Transform</h3>
- <div className="space-y-2">
- <div className="grid grid-cols-2 gap-2">
- <div className="space-y-1">
- <Label htmlFor="x">X Position</Label>
- <Input id="x" type="number" defaultValue="0" />
- </div>
- <div className="space-y-1">
- <Label htmlFor="y">Y Position</Label>
- <Input id="y" type="number" defaultValue="0" />
- </div>
- </div>
- <div className="space-y-1">
- <Label htmlFor="rotation">Rotation</Label>
- <Slider
- id="rotation"
- max={360}
- step={1}
- defaultValue={[0]}
- className="mt-2"
- />
- </div>
- </div>
- </div>
-
- <Separator />
-
- {/* Effects */}
- <div className="space-y-4">
- <h3 className="text-sm font-medium">Effects</h3>
- <div className="space-y-4">
- <div className="space-y-1">
- <Label htmlFor="opacity">Opacity</Label>
- <Slider
- id="opacity"
- max={100}
- step={1}
- defaultValue={[100]}
- className="mt-2"
- />
- </div>
- <div className="space-y-1">
- <Label htmlFor="blur">Blur</Label>
- <Slider
- id="blur"
- max={20}
- step={0.5}
- defaultValue={[0]}
- className="mt-2"
- />
- </div>
- </div>
- </div>
-
- <Separator />
-
- {/* Timing */}
- <div className="space-y-4">
- <h3 className="text-sm font-medium">Timing</h3>
- <div className="space-y-2">
- <div className="space-y-1">
- <Label htmlFor="duration">Duration (seconds)</Label>
- <Input
- id="duration"
- type="number"
- min="0"
- step="0.1"
- defaultValue="5"
- />
- </div>
- <div className="space-y-1">
- <Label htmlFor="delay">Delay (seconds)</Label>
- <Input
- id="delay"
- type="number"
- min="0"
- step="0.1"
- defaultValue="0"
- />
- </div>
- </div>
- </div>
- </div>
- </ScrollArea>
- );
-}
+"use client";
+
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Slider } from "../ui/slider";
+import { ScrollArea } from "../ui/scroll-area";
+import { Separator } from "../ui/separator";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useMediaStore } from "@/stores/media-store";
+import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
+import { useState } from "react";
+import { SpeedControl } from "./speed-control";
+
+export function PropertiesPanel() {
+ const { tracks } = useTimelineStore();
+ const { mediaItems } = useMediaStore();
+ const [backgroundType, setBackgroundType] = useState<
+ "blur" | "mirror" | "color"
+ >("blur");
+ const [backgroundColor, setBackgroundColor] = useState("#000000");
+
+ // Get the first video clip for preview (simplified)
+ const firstVideoClip = tracks
+ .flatMap((track) => track.clips)
+ .find((clip) => {
+ const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+ return mediaItem?.type === "video";
+ });
+
+ const firstVideoItem = firstVideoClip
+ ? mediaItems.find((item) => item.id === firstVideoClip.mediaId)
+ : null;
+
+ // Get the first image clip for preview (simplified)
+ const firstImageClip = tracks
+ .flatMap((track) => track.clips)
+ .find((clip) => {
+ const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+ return mediaItem?.type === "image";
+ });
+
+ const firstImageItem = firstImageClip
+ ? mediaItems.find((item) => item.id === firstImageClip.mediaId)
+ : null;
+
+ return (
+ <ScrollArea className="h-full">
+ <div className="space-y-6 p-5">
+ {/* Image Treatment - only show if an image is selected */}
+ {firstImageItem && (
+ <>
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Image Treatment</h3>
+ <div className="space-y-4">
+ {/* Preview */}
+ <div className="space-y-2">
+ <Label>Preview</Label>
+ <div className="w-full aspect-video max-w-48">
+ <ImageTimelineTreatment
+ src={firstImageItem.url}
+ alt={firstImageItem.name}
+ targetAspectRatio={16 / 9}
+ className="rounded-sm border"
+ backgroundType={backgroundType}
+ backgroundColor={backgroundColor}
+ />
+ </div>
+ </div>
+
+ {/* Background Type */}
+ <div className="space-y-2">
+ <Label htmlFor="bg-type">Background Type</Label>
+ <Select
+ value={backgroundType}
+ onValueChange={(value: any) => setBackgroundType(value)}
+ >
+ <SelectTrigger>
+ <SelectValue placeholder="Select background type" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="blur">Blur</SelectItem>
+ <SelectItem value="mirror">Mirror</SelectItem>
+ <SelectItem value="color">Solid Color</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+
+ {/* Background Color - only show for color type */}
+ {backgroundType === "color" && (
+ <div className="space-y-2">
+ <Label htmlFor="bg-color">Background Color</Label>
+ <div className="flex gap-2">
+ <Input
+ id="bg-color"
+ type="color"
+ value={backgroundColor}
+ onChange={(e) => setBackgroundColor(e.target.value)}
+ className="w-16 h-10 p-1"
+ />
+ <Input
+ value={backgroundColor}
+ onChange={(e) => setBackgroundColor(e.target.value)}
+ placeholder="#000000"
+ className="flex-1"
+ />
+ </div>
+ </div>
+ )}
+ </div>
+ </div>
+
+ <Separator />
+ </>
+ )}
+
+ {/* Video Controls - only show if a video is selected */}
+ {firstVideoItem && (
+ <>
+ <SpeedControl />
+ <Separator />
+ </>
+ )}
+
+ {/* Transform */}
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Transform</h3>
+ <div className="space-y-2">
+ <div className="grid grid-cols-2 gap-2">
+ <div className="space-y-1">
+ <Label htmlFor="x">X Position</Label>
+ <Input id="x" type="number" defaultValue="0" />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="y">Y Position</Label>
+ <Input id="y" type="number" defaultValue="0" />
+ </div>
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="rotation">Rotation</Label>
+ <Slider
+ id="rotation"
+ max={360}
+ step={1}
+ defaultValue={[0]}
+ className="mt-2"
+ />
+ </div>
+ </div>
+ </div>
+
+ <Separator />
+
+ {/* Effects */}
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Effects</h3>
+ <div className="space-y-4">
+ <div className="space-y-1">
+ <Label htmlFor="opacity">Opacity</Label>
+ <Slider
+ id="opacity"
+ max={100}
+ step={1}
+ defaultValue={[100]}
+ className="mt-2"
+ />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="blur">Blur</Label>
+ <Slider
+ id="blur"
+ max={20}
+ step={0.5}
+ defaultValue={[0]}
+ className="mt-2"
+ />
+ </div>
+ </div>
+ </div>
+
+ <Separator />
+
+ {/* Timing */}
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Timing</h3>
+ <div className="space-y-2">
+ <div className="space-y-1">
+ <Label htmlFor="duration">Duration (seconds)</Label>
+ <Input
+ id="duration"
+ type="number"
+ min="0"
+ step="0.1"
+ defaultValue="5"
+ />
+ </div>
+ <div className="space-y-1">
+ <Label htmlFor="delay">Delay (seconds)</Label>
+ <Input
+ id="delay"
+ type="number"
+ min="0"
+ step="0.1"
+ defaultValue="0"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </ScrollArea>
+ );
+}
diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
new file mode 100644
index 00000000..39281a9a
--- /dev/null
+++ b/apps/web/src/components/editor/speed-control.tsx
@@ -0,0 +1,46 @@
+import { Slider } from "../ui/slider";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import { usePlaybackStore } from "@/stores/playback-store";
+
+const SPEED_PRESETS = [
+ { label: "0.5x", value: 0.5 },
+ { label: "1x", value: 1.0 },
+ { label: "1.5x", value: 1.5 },
+ { label: "2x", value: 2.0 },
+];
+
+export function SpeedControl() {
+ const { speed, setSpeed } = usePlaybackStore();
+
+ return (
+ <div className="space-y-4">
+ <h3 className="text-sm font-medium">Playback Speed</h3>
+ <div className="space-y-4">
+ <div className="flex gap-2">
+ {SPEED_PRESETS.map((preset) => (
+ <Button
+ key={preset.value}
+ variant={speed === preset.value ? "default" : "outline"}
+ className="flex-1"
+ onClick={() => setSpeed(preset.value)}
+ >
+ {preset.label}
+ </Button>
+ ))}
+ </div>
+ <div className="space-y-1">
+ <Label>Custom ({speed.toFixed(1)}x)</Label>
+ <Slider
+ value={[speed]}
+ min={0.1}
+ max={2.0}
+ step={0.1}
+ onValueChange={(value) => setSpeed(value[0])}
+ className="mt-2"
+ />
+ </div>
+ </div>
+ </div>
+ );
+} \ No newline at end of file
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 1120fbe0..d26752e6 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -28,6 +28,13 @@ import { usePlaybackStore } from "@/stores/playback-store";
import { processMediaFiles } from "@/lib/media-processing";
import { toast } from "sonner";
import { useState, useRef, useEffect } from "react";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips.
@@ -36,7 +43,7 @@ export function Timeline() {
const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips } =
useTimelineStore();
const { mediaItems, addMediaItem } = useMediaStore();
- const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore();
+ const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();
const [isDragOver, setIsDragOver] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [zoomLevel, setZoomLevel] = useState(1);
@@ -430,6 +437,29 @@ export function Timeline() {
</TooltipTrigger>
<TooltipContent>Delete clip (Delete)</TooltipContent>
</Tooltip>
+
+ <div className="w-px h-6 bg-border mx-1" />
+
+ {/* Speed Control */}
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Select
+ value={speed.toFixed(1)}
+ onValueChange={(value) => setSpeed(parseFloat(value))}
+ >
+ <SelectTrigger className="w-[90px] h-8">
+ <SelectValue placeholder="1.0x" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="0.5">0.5x</SelectItem>
+ <SelectItem value="1.0">1.0x</SelectItem>
+ <SelectItem value="1.5">1.5x</SelectItem>
+ <SelectItem value="2.0">2.0x</SelectItem>
+ </SelectContent>
+ </Select>
+ </TooltipTrigger>
+ <TooltipContent>Playback Speed</TooltipContent>
+ </Tooltip>
</TooltipProvider>
</div>
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 20:09:33 +0000