Merge branch 'staging' into pr/vishesh711/284

3 files changed, 119 insertions, 46 deletions

diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
new file mode 100644
index 00000000..3f3820db
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
@@ -0,0 +1,57 @@
+import { Upload, Plus, Image } from "lucide-react";

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

+

+interface MediaDragOverlayProps {

+  isVisible: boolean;

+  isProcessing?: boolean;

+  progress?: number;

+  onClick?: () => void;

+  isEmptyState?: boolean;

+}

+

+export function MediaDragOverlay({

+  isVisible,

+  isProcessing = false,

+  progress = 0,

+  onClick,

+  isEmptyState = false,

+}: MediaDragOverlayProps) {

+  if (!isVisible) return null;

+

+  const handleClick = (e: React.MouseEvent) => {

+    if (isProcessing || !onClick) return;

+    e.preventDefault();

+    e.stopPropagation();

+    onClick();

+  };

+

+  return (

+    <div

+      className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"

+      onClick={handleClick}

+    >

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

+        <Upload className="h-10 w-10 text-foreground" />

+      </div>

+

+      <div className="space-y-2">

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

+          {isProcessing

+            ? `Processing your files (${progress}%)`

+            : "Drag and drop videos, photos, and audio files here"}

+        </p>

+      </div>

+

+      {isProcessing && (

+        <div className="w-full max-w-xs">

+          <div className="w-full bg-muted/50 rounded-full h-2">

+            <div

+              className="bg-primary h-2 rounded-full transition-all duration-300"

+              style={{ width: `${progress}%` }}

+            />

+          </div>

+        </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
index 5438737f..631fe39a 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -3,11 +3,11 @@
 import { useDragDrop } from "@/hooks/use-drag-drop";

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

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

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

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

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

 import {

   ContextMenu,

   ContextMenuContent,

@@ -24,6 +24,7 @@ import {
 } 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();

@@ -203,9 +204,6 @@ export function MediaView() {
         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">

           {/* Search and filter controls */}

           <div className="flex gap-2">

@@ -227,47 +225,31 @@ export function MediaView() {
               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">

-          {/* 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 below

-              </p>

-              <Button

-                variant="outline"

-                size="sm"

-                onClick={handleFileSelect}

-                disabled={isProcessing}

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

-              >

-                {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>

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

+            <MediaDragOverlay

+              isVisible={true}

+              isProcessing={isProcessing}

+              progress={progress}

+              onClick={handleFileSelect}

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

+            />

           ) : (

             <div

               className="grid gap-2"

@@ -288,6 +270,11 @@ export function MediaView() {
                         name: item.name,

                       }}

                       showPlusOnDrag={false}

+                      onAddToTimeline={(currentTime) =>

+                        useTimelineStore

+                          .getState()

+                          .addMediaAtTime(item, currentTime)

+                      }

                       rounded={false}

                     />

                   </ContextMenuTrigger>

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 bec32c85..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,4 +1,30 @@
 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 (

@@ -11,12 +37,15 @@ export function TextView() {
           </div>

         }

         dragData={{

-          id: "default-text",

-          type: "text",

-          name: "Default text",

-          content: "Default text",

+          id: textData.id,

+          type: textData.type,

+          name: textData.name,

+          content: textData.content,

         }}

         aspectRatio={1}

+        onAddToTimeline={(currentTime) =>

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

+        }

         showLabel={false}

       />

     </div>