feat: implement media panel with tab navigation

4 files changed, 500 insertions, 0 deletions

diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
new file mode 100644
index 00000000..f855fa36
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -0,0 +1,56 @@
+"use client";

+

+import { TabBar } from "./tabbar";

+import { MediaView } from "./views/media";

+import { useMediaPanelStore, Tab } from "./store";

+

+export function MediaPanel() {

+  const { activeTab } = useMediaPanelStore();

+

+  const viewMap: Record<Tab, React.ReactNode> = {

+    media: <MediaView />,

+    audio: (

+      <div className="p-4 text-muted-foreground">Audio view coming soon...</div>

+    ),

+    text: (

+      <div className="p-4 text-muted-foreground">Text view coming soon...</div>

+    ),

+    stickers: (

+      <div className="p-4 text-muted-foreground">

+        Stickers view coming soon...

+      </div>

+    ),

+    effects: (

+      <div className="p-4 text-muted-foreground">

+        Effects view coming soon...

+      </div>

+    ),

+    transitions: (

+      <div className="p-4 text-muted-foreground">

+        Transitions view coming soon...

+      </div>

+    ),

+    captions: (

+      <div className="p-4 text-muted-foreground">

+        Captions view coming soon...

+      </div>

+    ),

+    filters: (

+      <div className="p-4 text-muted-foreground">

+        Filters view coming soon...

+      </div>

+    ),

+    adjustment: (

+      <div className="p-4 text-muted-foreground">

+        Adjustment view coming soon...

+      </div>

+    ),

+  };

+

+  return (

+    <div className="h-full flex flex-col">

+      <TabBar />

+      <div className="flex-1">{viewMap[activeTab]}</div>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
new file mode 100644
index 00000000..a9a1e688
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/store.ts
@@ -0,0 +1,73 @@
+import {

+  CaptionsIcon,

+  ArrowLeftRightIcon,

+  SparklesIcon,

+  StickerIcon,

+  TextIcon,

+  MusicIcon,

+  VideoIcon,

+  BlendIcon,

+  SlidersHorizontalIcon,

+  LucideIcon,

+} from "lucide-react";

+import { create } from "zustand";

+

+export type Tab =

+  | "media"

+  | "audio"

+  | "text"

+  | "stickers"

+  | "effects"

+  | "transitions"

+  | "captions"

+  | "filters"

+  | "adjustment";

+

+export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {

+  media: {

+    icon: VideoIcon,

+    label: "Media",

+  },

+  audio: {

+    icon: MusicIcon,

+    label: "Audio",

+  },

+  text: {

+    icon: TextIcon,

+    label: "Text",

+  },

+  stickers: {

+    icon: StickerIcon,

+    label: "Stickers",

+  },

+  effects: {

+    icon: SparklesIcon,

+    label: "Effects",

+  },

+  transitions: {

+    icon: ArrowLeftRightIcon,

+    label: "Transitions",

+  },

+  captions: {

+    icon: CaptionsIcon,

+    label: "Captions",

+  },

+  filters: {

+    icon: BlendIcon,

+    label: "Filters",

+  },

+  adjustment: {

+    icon: SlidersHorizontalIcon,

+    label: "Adjustment",

+  },

+};

+

+interface MediaPanelStore {

+  activeTab: Tab;

+  setActiveTab: (tab: Tab) => void;

+}

+

+export const useMediaPanelStore = create<MediaPanelStore>((set) => ({

+  activeTab: "media",

+  setActiveTab: (tab) => set({ activeTab: tab }),

+}));

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
new file mode 100644
index 00000000..90f8a70d
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -0,0 +1,29 @@
+"use client";

+

+import { cn } from "@/lib/utils";

+import { Tab, tabs, useMediaPanelStore } from "./store";

+

+export function TabBar() {

+  const { activeTab, setActiveTab } = useMediaPanelStore();

+

+  return (

+    <div className="h-12 bg-accent/50 px-3 flex justify-start items-center gap-6">

+      {(Object.keys(tabs) as Tab[]).map((tabKey) => {

+        const tab = tabs[tabKey];

+        return (

+          <div

+            className={cn(

+              "flex flex-col gap-0.5 items-center cursor-pointer",

+              activeTab === tabKey ? "text-primary" : "text-muted-foreground"

+            )}

+            onClick={() => setActiveTab(tabKey)}

+            key={tabKey}

+          >

+            <tab.icon className="!size-5" />

+            <span className="text-[0.65rem]">{tab.label}</span>

+          </div>

+        );

+      })}

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
new file mode 100644
index 00000000..e2c72106
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -0,0 +1,342 @@
+"use client";

+

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

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

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

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

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

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

+import { toast } from "sonner";

+import { AspectRatio } from "@/components/ui/aspect-ratio";

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

+import { DragOverlay } from "@/components/ui/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";

+

+export function MediaView() {

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

+  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;

+    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(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();

+

+    // Remove tracks automatically when delete media

+    const { tracks, removeTrack } = useTimelineStore.getState();

+    tracks.forEach((track) => {

+      const clipsToRemove = track.clips.filter((clip) => clip.mediaId === id);

+      clipsToRemove.forEach((clip) => {

+        useTimelineStore.getState().removeClipFromTrack(track.id, clip.id);

+      });

+      // Only remove track if it becomes empty and has no other clips

+      const updatedTrack = useTimelineStore

+        .getState()

+        .tracks.find((t) => t.id === track.id);

+      if (updatedTrack && updatedTrack.clips.length === 0) {

+        removeTrack(track.id);

+      }

+    });

+    await removeMediaItem(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 startDrag = (e: React.DragEvent, item: MediaItem) => {

+    // When dragging a media item, set drag data for timeline to read

+    e.dataTransfer.setData(

+      "application/x-media-item",

+      JSON.stringify({

+        id: item.id,

+        type: item.type,

+        name: item.name,

+      })

+    );

+    e.dataTransfer.effectAllowed = "copy";

+  };

+

+  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 rounded"

+            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}

+      >

+        {/* Show overlay when dragging files over the panel */}

+        <DragOverlay isVisible={isDragOver} />

+

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

+          {/* Button to add/upload media */}

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

+            {/* Search and filter controls */}

+            <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)}

+            />

+

+            {/* Add media button */}

+            <Button

+              variant="outline"

+              size="sm"

+              onClick={handleFileSelect}

+              disabled={isProcessing}

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

+            >

+              {isProcessing ? (

+                <>

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

+                  <span className="hidden md:inline ml-2">{progress}%</span>

+                </>

+              ) : (

+                <>

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

+                  <span className="hidden sm:inline ml-2" aria-label="Add file">

+                    Add

+                  </span>

+                </>

+              )}

+            </Button>

+          </div>

+        </div>

+

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

+          {/* Show message if no media, otherwise show media grid */}

+          {filteredMediaItems.length === 0 ? (

+            <div className="flex flex-col items-center justify-center py-8 text-center h-full">

+              <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">

+                <Image className="h-8 w-8 text-muted-foreground" />

+              </div>

+              <p className="text-sm text-muted-foreground">

+                No media in project

+              </p>

+              <p className="text-xs text-muted-foreground/70 mt-1">

+                Drag files here or use the button above

+              </p>

+            </div>

+          ) : (

+            <div

+              className="grid gap-2"

+              style={{

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

+              }}

+            >

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

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

+                <div key={item.id} className="relative group">

+                  <ContextMenu>

+                    <ContextMenuTrigger asChild>

+                      <Button

+                        variant="outline"

+                        className="flex flex-col gap-1 p-2 h-auto w-full relative border-none !bg-transparent cursor-default"

+                      >

+                        <AspectRatio

+                          ratio={16 / 9}

+                          className="bg-accent"

+                          draggable={true}

+                          onDragStart={(e: React.DragEvent) =>

+                            startDrag(e, item)

+                          }

+                        >

+                          {renderPreview(item)}

+                        </AspectRatio>

+                        <span

+                          className="text-[0.7rem] text-muted-foreground truncate w-full text-left"

+                          aria-label={item.name}

+                          title={item.name}

+                        >

+                          {item.name.length > 8

+                            ? `${item.name.slice(0, 4)}...${item.name.slice(-3)}`

+                            : item.name}

+                        </span>

+                      </Button>

+                    </ContextMenuTrigger>

+                    <ContextMenuContent>

+                      <ContextMenuItem>Export clips</ContextMenuItem>

+                      <ContextMenuItem

+                        variant="destructive"

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

+                      >

+                        Delete

+                      </ContextMenuItem>

+                    </ContextMenuContent>

+                  </ContextMenu>

+                </div>

+              ))}

+            </div>

+          )}

+        </div>

+      </div>

+    </>

+  );

+}