Merge branch 'staging'

2 files changed, 351 insertions, 351 deletions

diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 712dd922..631fe39a 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -1,298 +1,298 @@
-"use client";
-
-import { useDragDrop } from "@/hooks/use-drag-drop";
-import { processMediaFiles } from "@/lib/media-processing";
-import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { Image, Loader2, Music, Plus, Video } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-
-export function MediaView() {
-	const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
-	const { activeProject } = useProjectStore();
-	const fileInputRef = useRef<HTMLInputElement>(null);
-	const [isProcessing, setIsProcessing] = useState(false);
-	const [progress, setProgress] = useState(0);
-	const [searchQuery, setSearchQuery] = useState("");
-	const [mediaFilter, setMediaFilter] = useState("all");
-
-	const processFiles = async (files: FileList | File[]) => {
-		if (!files || files.length === 0) return;
-		if (!activeProject) {
-			toast.error("No active project");
-			return;
-		}
-
-		setIsProcessing(true);
-		setProgress(0);
-		try {
-			// Process files (extract metadata, generate thumbnails, etc.)
-			const processedItems = await processMediaFiles(files, (p) =>
-				setProgress(p),
-			);
-			// Add each processed media item to the store
-			for (const item of processedItems) {
-				await addMediaItem(activeProject.id, item);
-			}
-		} catch (error) {
-			// Show error toast if processing fails
-			console.error("Error processing files:", error);
-			toast.error("Failed to process files");
-		} finally {
-			setIsProcessing(false);
-			setProgress(0);
-		}
-	};
-
-	const { isDragOver, dragProps } = useDragDrop({
-		// When files are dropped, process them
-		onDrop: processFiles,
-	});
-
-	const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker
-
-	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		// When files are selected via file picker, process them
-		if (e.target.files) processFiles(e.target.files);
-		e.target.value = ""; // Reset input
-	};
-
-	const handleRemove = async (e: React.MouseEvent, id: string) => {
-		// Remove a media item from the store
-		e.stopPropagation();
-
-		if (!activeProject) {
-			toast.error("No active project");
-			return;
-		}
-
-		// Media store now handles cascade deletion automatically
-		await removeMediaItem(activeProject.id, id);
-	};
-
-	const formatDuration = (duration: number) => {
-		// Format seconds as mm:ss
-		const min = Math.floor(duration / 60);
-		const sec = Math.floor(duration % 60);
-		return `${min}:${sec.toString().padStart(2, "0")}`;
-	};
-
-	const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems);
-
-	useEffect(() => {
-		const filtered = mediaItems.filter((item) => {
-			if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
-				return false;
-			}
-
-			if (
-				searchQuery &&
-				!item.name.toLowerCase().includes(searchQuery.toLowerCase())
-			) {
-				return false;
-			}
-
-			return true;
-		});
-
-		setFilteredMediaItems(filtered);
-	}, [mediaItems, mediaFilter, searchQuery]);
-
-	const renderPreview = (item: MediaItem) => {
-		// Render a preview for each media type (image, video, audio, unknown)
-		if (item.type === "image") {
-			return (
-				<div className="w-full h-full flex items-center justify-center">
-					<img
-						src={item.url}
-						alt={item.name}
-						className="max-w-full max-h-full object-contain"
-						loading="lazy"
-					/>
-				</div>
-			);
-		}
-
-		if (item.type === "video") {
-			if (item.thumbnailUrl) {
-				return (
-					<div className="relative w-full h-full">
-						<img
-							src={item.thumbnailUrl}
-							alt={item.name}
-							className="w-full h-full object-cover rounded"
-							loading="lazy"
-						/>
-						<div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
-							<Video className="h-6 w-6 text-white drop-shadow-md" />
-						</div>
-						{item.duration && (
-							<div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
-								{formatDuration(item.duration)}
-							</div>
-						)}
-					</div>
-				);
-			}
-			return (
-				<div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-					<Video className="h-6 w-6 mb-1" />
-					<span className="text-xs">Video</span>
-					{item.duration && (
-						<span className="text-xs opacity-70">
-							{formatDuration(item.duration)}
-						</span>
-					)}
-				</div>
-			);
-		}
-
-		if (item.type === "audio") {
-			return (
-				<div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
-					<Music className="h-6 w-6 mb-1" />
-					<span className="text-xs">Audio</span>
-					{item.duration && (
-						<span className="text-xs opacity-70">
-							{formatDuration(item.duration)}
-						</span>
-					)}
-				</div>
-			);
-		}
-
-		return (
-			<div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-				<Image className="h-6 w-6" />
-				<span className="text-xs mt-1">Unknown</span>
-			</div>
-		);
-	};
-
-	return (
-		<>
-			{/* Hidden file input for uploading media */}
-			<input
-				ref={fileInputRef}
-				type="file"
-				accept="image/*,video/*,audio/*"
-				multiple
-				className="hidden"
-				onChange={handleFileChange}
-			/>
-
-			<div
-				className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
-				{...dragProps}
-			>
-				<div className="p-3 pb-2">
-					{/* Search and filter controls */}
-					<div className="flex gap-2">
-						<Select value={mediaFilter} onValueChange={setMediaFilter}>
-							<SelectTrigger className="w-[80px] h-full text-xs">
-								<SelectValue />
-							</SelectTrigger>
-							<SelectContent className="">
-								<SelectItem value="all">All</SelectItem>
-								<SelectItem value="video">Video</SelectItem>
-								<SelectItem value="audio">Audio</SelectItem>
-								<SelectItem value="image">Image</SelectItem>
-							</SelectContent>
-						</Select>
-						<Input
-							type="text"
-							placeholder="Search media..."
-							className="min-w-[60px] flex-1 h-full text-xs"
-							value={searchQuery}
-							onChange={(e) => setSearchQuery(e.target.value)}
-						/>
-						<Button
-							variant="outline"
-							size="lg"
-							onClick={handleFileSelect}
-							disabled={isProcessing}
-							className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
-						>
-							{isProcessing ? (
-								<Loader2 className="h-4 w-4 animate-spin" />
-							) : (
-								<Plus className="h-4 w-4" />
-							)}
-						</Button>
-					</div>
-				</div>
-
-				<div className="flex-1 overflow-y-auto p-3 pt-0">
-					{isDragOver || filteredMediaItems.length === 0 ? (
-						<MediaDragOverlay
-							isVisible={true}
-							isProcessing={isProcessing}
-							progress={progress}
-							onClick={handleFileSelect}
-							isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
-						/>
-					) : (
-						<div
-							className="grid gap-2"
-							style={{
-								gridTemplateColumns: "repeat(auto-fill, 160px)",
-							}}
-						>
-							{/* Render each media item as a draggable button */}
-							{filteredMediaItems.map((item) => (
-								<ContextMenu key={item.id}>
-									<ContextMenuTrigger>
-										<DraggableMediaItem
-											name={item.name}
-											preview={renderPreview(item)}
-											dragData={{
-												id: item.id,
-												type: item.type,
-												name: item.name,
-											}}
-											showPlusOnDrag={false}
-											onAddToTimeline={(currentTime) =>
-												useTimelineStore
-													.getState()
-													.addMediaAtTime(item, currentTime)
-											}
-											rounded={false}
-										/>
-									</ContextMenuTrigger>
-									<ContextMenuContent>
-										<ContextMenuItem>Export clips</ContextMenuItem>
-										<ContextMenuItem
-											variant="destructive"
-											onClick={(e) => handleRemove(e, item.id)}
-										>
-											Delete
-										</ContextMenuItem>
-									</ContextMenuContent>
-								</ContextMenu>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
-		</>
-	);
-}
+"use client";

+

+import { useDragDrop } from "@/hooks/use-drag-drop";

+import { processMediaFiles } from "@/lib/media-processing";

+import { useMediaStore, type MediaItem } from "@/stores/media-store";

+import { Image, Loader2, Music, Plus, Video } from "lucide-react";

+import { useEffect, useRef, useState } from "react";

+import { toast } from "sonner";

+import { Button } from "@/components/ui/button";

+import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";

+import {

+  ContextMenu,

+  ContextMenuContent,

+  ContextMenuItem,

+  ContextMenuTrigger,

+} from "@/components/ui/context-menu";

+import { Input } from "@/components/ui/input";

+import {

+  Select,

+  SelectContent,

+  SelectItem,

+  SelectTrigger,

+  SelectValue,

+} from "@/components/ui/select";

+import { DraggableMediaItem } from "@/components/ui/draggable-item";

+import { useProjectStore } from "@/stores/project-store";

+import { useTimelineStore } from "@/stores/timeline-store";

+

+export function MediaView() {

+  const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();

+  const { activeProject } = useProjectStore();

+  const fileInputRef = useRef<HTMLInputElement>(null);

+  const [isProcessing, setIsProcessing] = useState(false);

+  const [progress, setProgress] = useState(0);

+  const [searchQuery, setSearchQuery] = useState("");

+  const [mediaFilter, setMediaFilter] = useState("all");

+

+  const processFiles = async (files: FileList | File[]) => {

+    if (!files || files.length === 0) return;

+    if (!activeProject) {

+      toast.error("No active project");

+      return;

+    }

+

+    setIsProcessing(true);

+    setProgress(0);

+    try {

+      // Process files (extract metadata, generate thumbnails, etc.)

+      const processedItems = await processMediaFiles(files, (p) =>

+        setProgress(p)

+      );

+      // Add each processed media item to the store

+      for (const item of processedItems) {

+        await addMediaItem(activeProject.id, item);

+      }

+    } catch (error) {

+      // Show error toast if processing fails

+      console.error("Error processing files:", error);

+      toast.error("Failed to process files");

+    } finally {

+      setIsProcessing(false);

+      setProgress(0);

+    }

+  };

+

+  const { isDragOver, dragProps } = useDragDrop({

+    // When files are dropped, process them

+    onDrop: processFiles,

+  });

+

+  const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker

+

+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {

+    // When files are selected via file picker, process them

+    if (e.target.files) processFiles(e.target.files);

+    e.target.value = ""; // Reset input

+  };

+

+  const handleRemove = async (e: React.MouseEvent, id: string) => {

+    // Remove a media item from the store

+    e.stopPropagation();

+

+    if (!activeProject) {

+      toast.error("No active project");

+      return;

+    }

+

+    // Media store now handles cascade deletion automatically

+    await removeMediaItem(activeProject.id, id);

+  };

+

+  const formatDuration = (duration: number) => {

+    // Format seconds as mm:ss

+    const min = Math.floor(duration / 60);

+    const sec = Math.floor(duration % 60);

+    return `${min}:${sec.toString().padStart(2, "0")}`;

+  };

+

+  const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems);

+

+  useEffect(() => {

+    const filtered = mediaItems.filter((item) => {

+      if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {

+        return false;

+      }

+

+      if (

+        searchQuery &&

+        !item.name.toLowerCase().includes(searchQuery.toLowerCase())

+      ) {

+        return false;

+      }

+

+      return true;

+    });

+

+    setFilteredMediaItems(filtered);

+  }, [mediaItems, mediaFilter, searchQuery]);

+

+  const renderPreview = (item: MediaItem) => {

+    // Render a preview for each media type (image, video, audio, unknown)

+    if (item.type === "image") {

+      return (

+        <div className="w-full h-full flex items-center justify-center">

+          <img

+            src={item.url}

+            alt={item.name}

+            className="max-w-full max-h-full object-contain"

+            loading="lazy"

+          />

+        </div>

+      );

+    }

+

+    if (item.type === "video") {

+      if (item.thumbnailUrl) {

+        return (

+          <div className="relative w-full h-full">

+            <img

+              src={item.thumbnailUrl}

+              alt={item.name}

+              className="w-full h-full object-cover rounded"

+              loading="lazy"

+            />

+            <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">

+              <Video className="h-6 w-6 text-white drop-shadow-md" />

+            </div>

+            {item.duration && (

+              <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">

+                {formatDuration(item.duration)}

+              </div>

+            )}

+          </div>

+        );

+      }

+      return (

+        <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">

+          <Video className="h-6 w-6 mb-1" />

+          <span className="text-xs">Video</span>

+          {item.duration && (

+            <span className="text-xs opacity-70">

+              {formatDuration(item.duration)}

+            </span>

+          )}

+        </div>

+      );

+    }

+

+    if (item.type === "audio") {

+      return (

+        <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">

+          <Music className="h-6 w-6 mb-1" />

+          <span className="text-xs">Audio</span>

+          {item.duration && (

+            <span className="text-xs opacity-70">

+              {formatDuration(item.duration)}

+            </span>

+          )}

+        </div>

+      );

+    }

+

+    return (

+      <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">

+        <Image className="h-6 w-6" />

+        <span className="text-xs mt-1">Unknown</span>

+      </div>

+    );

+  };

+

+  return (

+    <>

+      {/* Hidden file input for uploading media */}

+      <input

+        ref={fileInputRef}

+        type="file"

+        accept="image/*,video/*,audio/*"

+        multiple

+        className="hidden"

+        onChange={handleFileChange}

+      />

+

+      <div

+        className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}

+        {...dragProps}

+      >

+        <div className="p-3 pb-2">

+          {/* Search and filter controls */}

+          <div className="flex gap-2">

+            <Select value={mediaFilter} onValueChange={setMediaFilter}>

+              <SelectTrigger className="w-[80px] h-full text-xs">

+                <SelectValue />

+              </SelectTrigger>

+              <SelectContent className="">

+                <SelectItem value="all">All</SelectItem>

+                <SelectItem value="video">Video</SelectItem>

+                <SelectItem value="audio">Audio</SelectItem>

+                <SelectItem value="image">Image</SelectItem>

+              </SelectContent>

+            </Select>

+            <Input

+              type="text"

+              placeholder="Search media..."

+              className="min-w-[60px] flex-1 h-full text-xs"

+              value={searchQuery}

+              onChange={(e) => setSearchQuery(e.target.value)}

+            />

+            <Button

+              variant="outline"

+              size="lg"

+              onClick={handleFileSelect}

+              disabled={isProcessing}

+              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"

+            >

+              {isProcessing ? (

+                <Loader2 className="h-4 w-4 animate-spin" />

+              ) : (

+                <Plus className="h-4 w-4" />

+              )}

+            </Button>

+          </div>

+        </div>

+

+        <div className="flex-1 overflow-y-auto p-3 pt-0">

+          {isDragOver || filteredMediaItems.length === 0 ? (

+            <MediaDragOverlay

+              isVisible={true}

+              isProcessing={isProcessing}

+              progress={progress}

+              onClick={handleFileSelect}

+              isEmptyState={filteredMediaItems.length === 0 && !isDragOver}

+            />

+          ) : (

+            <div

+              className="grid gap-2"

+              style={{

+                gridTemplateColumns: "repeat(auto-fill, 160px)",

+              }}

+            >

+              {/* Render each media item as a draggable button */}

+              {filteredMediaItems.map((item) => (

+                <ContextMenu key={item.id}>

+                  <ContextMenuTrigger>

+                    <DraggableMediaItem

+                      name={item.name}

+                      preview={renderPreview(item)}

+                      dragData={{

+                        id: item.id,

+                        type: item.type,

+                        name: item.name,

+                      }}

+                      showPlusOnDrag={false}

+                      onAddToTimeline={(currentTime) =>

+                        useTimelineStore

+                          .getState()

+                          .addMediaAtTime(item, currentTime)

+                      }

+                      rounded={false}

+                    />

+                  </ContextMenuTrigger>

+                  <ContextMenuContent>

+                    <ContextMenuItem>Export clips</ContextMenuItem>

+                    <ContextMenuItem

+                      variant="destructive"

+                      onClick={(e) => handleRemove(e, item.id)}

+                    >

+                      Delete

+                    </ContextMenuItem>

+                  </ContextMenuContent>

+                </ContextMenu>

+              ))}

+            </div>

+          )}

+        </div>

+      </div>

+    </>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index b47edd8d..6d0d310b 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/apps/web/src/components/editor/media-panel/views/text.tsx
@@ -1,53 +1,53 @@
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { type TextElement } from "@/types/timeline";
-
-let textData: TextElement = {
-	id: "default-text",
-	type: "text",
-	name: "Default text",
-	content: "Default text",
-	fontSize: 48,
-	fontFamily: "Arial",
-	color: "#ffffff",
-	backgroundColor: "transparent",
-	textAlign: "center" as const,
-	fontWeight: "normal" as const,
-	fontStyle: "normal" as const,
-	textDecoration: "none" as const,
-	x: 0,
-	y: 0,
-	rotation: 0,
-	opacity: 1,
-	duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-	startTime: 0,
-	trimStart: 0,
-	trimEnd: 0,
-};
-
-export function TextView() {
-	return (
-		<div className="p-4">
-			<DraggableMediaItem
-				name="Default text"
-				preview={
-					<div className="flex items-center justify-center w-full h-full bg-accent rounded">
-						<span className="text-xs select-none">Default text</span>
-					</div>
-				}
-				dragData={{
-					id: textData.id,
-					type: textData.type,
-					name: textData.name,
-					content: textData.content,
-				}}
-				aspectRatio={1}
-				onAddToTimeline={(currentTime) =>
-					useTimelineStore.getState().addTextAtTime(textData, currentTime)
-				}
-				showLabel={false}
-			/>
-		</div>
-	);
-}
+import { DraggableMediaItem } from "@/components/ui/draggable-item";

+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

+import { useTimelineStore } from "@/stores/timeline-store";

+import { type TextElement } from "@/types/timeline";

+

+let textData: TextElement = {

+  id: "default-text",

+  type: "text",

+  name: "Default text",

+  content: "Default text",

+  fontSize: 48,

+  fontFamily: "Arial",

+  color: "#ffffff",

+  backgroundColor: "transparent",

+  textAlign: "center" as const,

+  fontWeight: "normal" as const,

+  fontStyle: "normal" as const,

+  textDecoration: "none" as const,

+  x: 0,

+  y: 0,

+  rotation: 0,

+  opacity: 1,

+  duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,

+  startTime: 0,

+  trimStart: 0,

+  trimEnd: 0,

+};

+

+export function TextView() {

+  return (

+    <div className="p-4">

+      <DraggableMediaItem

+        name="Default text"

+        preview={

+          <div className="flex items-center justify-center w-full h-full bg-accent rounded">

+            <span className="text-xs select-none">Default text</span>

+          </div>

+        }

+        dragData={{

+          id: textData.id,

+          type: textData.type,

+          name: textData.name,

+          content: textData.content,

+        }}

+        aspectRatio={1}

+        onAddToTimeline={(currentTime) =>

+          useTimelineStore.getState().addTextAtTime(textData, currentTime)

+        }

+        showLabel={false}

+      />

+    </div>

+  );

+}