format

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 631fe39a..712dd922 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 6d0d310b..b47edd8d 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>
+	);
+}