From dc35619017ed7fbaa5e83151ba99c143da8cf1f1 Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Tue, 24 Jun 2025 08:10:11 +0300
Subject: [PATCH] clean up and simplifying more logic

---
 apps/web/src/app/editor/page.tsx              | 104 +++--
 apps/web/src/components/editor-provider.tsx   |  14 +-
 .../src/components/editor/preview-panel.tsx   | 407 +++---------------
 apps/web/src/components/ui/video-player.tsx   | 113 ++---
 apps/web/src/stores/panel-store.ts            |  62 +--
 5 files changed, 156 insertions(+), 544 deletions(-)

diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 64186a3..19df364 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -42,59 +42,71 @@ export default function Editor() {
 
   return (
     <EditorProvider>
-      <div className="h-screen w-screen flex flex-col bg-background">
+      <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel
-            defaultSize={mainContent}
-            minSize={30}
-            onResize={setMainContent}
-          >
-            {/* Main content area */}
-            <ResizablePanelGroup direction="horizontal">
-              {/* Tools Panel */}
-              <ResizablePanel
-                defaultSize={toolsPanel}
-                minSize={15}
-                onResize={setToolsPanel}
-              >
-                <MediaPanel />
-              </ResizablePanel>
+        <div className="flex-1 min-h-0 min-w-0">
+          <ResizablePanelGroup direction="vertical" className="h-full w-full">
+            <ResizablePanel
+              defaultSize={mainContent}
+              minSize={30}
+              maxSize={85}
+              onResize={setMainContent}
+              className="min-h-0"
+            >
+              {/* Main content area */}
+              <ResizablePanelGroup direction="horizontal" className="h-full w-full">
+                {/* Tools Panel */}
+                <ResizablePanel
+                  defaultSize={toolsPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setToolsPanel}
+                  className="min-w-0"
+                >
+                  <MediaPanel />
+                </ResizablePanel>
 
-              <ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-              {/* Preview Area */}
-              <ResizablePanel
-                defaultSize={previewPanel}
-                onResize={setPreviewPanel}
-              >
-                <PreviewPanel />
-              </ResizablePanel>
+                {/* Preview Area */}
+                <ResizablePanel
+                  defaultSize={previewPanel}
+                  minSize={30}
+                  onResize={setPreviewPanel}
+                  className="min-w-0 min-h-0 flex-1"
+                >
+                  <PreviewPanel />
+                </ResizablePanel>
 
-              <ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-              {/* Properties Panel */}
-              {/* <ResizablePanel
-                defaultSize={propertiesPanel}
-                minSize={15}
-                onResize={setPropertiesPanel}
-              >
-                <PropertiesPanel />
-              </ResizablePanel> */}
-            </ResizablePanelGroup>
-          </ResizablePanel>
+                {/* Properties Panel - Hidden for now but ready */}
+                {/* <ResizablePanel
+                  defaultSize={propertiesPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setPropertiesPanel}
+                  className="min-w-0"
+                >
+                  <PropertiesPanel />
+                </ResizablePanel> */}
+              </ResizablePanelGroup>
+            </ResizablePanel>
 
-          <ResizableHandle withHandle />
+            <ResizableHandle withHandle />
 
-          {/* Timeline */}
-          <ResizablePanel
-            defaultSize={timeline}
-            minSize={15}
-            onResize={setTimeline}
-          >
-            <Timeline />
-          </ResizablePanel>
-        </ResizablePanelGroup>
+            {/* Timeline */}
+            <ResizablePanel
+              defaultSize={timeline}
+              minSize={15}
+              maxSize={70}
+              onResize={setTimeline}
+              className="min-h-0"
+            >
+              <Timeline />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
       </div>
     </EditorProvider>
   );
diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx
index ab55c7d..3825595 100644
--- a/apps/web/src/components/editor-provider.tsx
+++ b/apps/web/src/components/editor-provider.tsx
@@ -3,7 +3,6 @@
 import { useEffect } from "react";
 import { Loader2 } from "lucide-react";
 import { useEditorStore } from "@/stores/editor-store";
-import { usePanelStore } from "@/stores/panel-store";
 
 interface EditorProviderProps {
   children: React.ReactNode;
@@ -11,19 +10,10 @@ interface EditorProviderProps {
 
 export function EditorProvider({ children }: EditorProviderProps) {
   const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();
-  const { setInitialized } = usePanelStore();
 
   useEffect(() => {
-    const initialize = async () => {
-      // Initialize the app
-      await initializeApp();
-
-      // Initialize panel store for future resize events
-      setInitialized();
-    };
-
-    initialize();
-  }, [initializeApp, setInitialized]);
+    initializeApp();
+  }, [initializeApp]);
 
   // Show loading screen while initializing
   if (isInitializing || !isPanelsReady) {
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 5d03e94..101f1ff 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -5,53 +5,25 @@ import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { VideoPlayer } from "@/components/ui/video-player";
 import { Button } from "@/components/ui/button";
-import { Play, Pause, Move, RotateCw, Crop, ZoomIn, ZoomOut } from "lucide-react";
-import { useState, useRef, useEffect, useCallback } from "react";
-
-interface ClipTransform {
-  x: number;
-  y: number;
-  scale: number;
-  rotation: number;
-  opacity: number;
-  width: number;
-  height: number;
-  blendMode: string;
-  cropTop: number;
-  cropBottom: number;
-  cropLeft: number;
-  cropRight: number;
-}
-
-interface DragState {
-  isDragging: boolean;
-  dragType: 'move' | 'resize-nw' | 'resize-ne' | 'resize-sw' | 'resize-se' | 'rotate' | 'scale' | 'crop-n' | 'crop-s' | 'crop-e' | 'crop-w';
-  startMouseX: number;
-  startMouseY: number;
-  startTransform: ClipTransform;
-  clipId: string;
-}
+import { Play, Pause } from "lucide-react";
+import { useState, useRef } from "react";
 
 export function PreviewPanel() {
   const { tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
   const { isPlaying, toggle, currentTime } = usePlaybackStore();
-
-  const [clipTransforms, setClipTransforms] = useState<Record<string, ClipTransform>>({});
-  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 }); // Default 16:9
-  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
   const previewRef = useRef<HTMLDivElement>(null);
 
-  // Get all active clips at current time (for overlaying)
+  // Get active clips at current time
   const getActiveClips = () => {
     const activeClips: Array<{
       clip: any;
       track: any;
       mediaItem: any;
-      layer: number;
     }> = [];
 
-    tracks.forEach((track, trackIndex) => {
+    tracks.forEach((track) => {
       track.clips.forEach((clip) => {
         const clipStart = clip.startTime;
         const clipEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
@@ -62,338 +34,78 @@ export function PreviewPanel() {
             : mediaItems.find((item) => item.id === clip.mediaId);
 
           if (mediaItem || clip.mediaId === "test") {
-            activeClips.push({
-              clip,
-              track,
-              mediaItem,
-              layer: trackIndex, // Track index determines layer order
-            });
+            activeClips.push({ clip, track, mediaItem });
           }
         }
       });
     });
 
-    // Sort by layer (track order) - higher index = on top
-    return activeClips.sort((a, b) => a.layer - b.layer);
+    return activeClips;
   };
 
   const activeClips = getActiveClips();
   const aspectRatio = canvasSize.width / canvasSize.height;
 
-  // Get or create transform for a clip
-  const getClipTransform = (clipId: string): ClipTransform => {
-    return clipTransforms[clipId] || {
-      x: 0,
-      y: 0,
-      scale: 1,
-      rotation: 0,
-      opacity: 1,
-      width: 100, // Percentage of canvas
-      height: 100,
-      blendMode: 'normal',
-      cropTop: 0,
-      cropBottom: 0,
-      cropLeft: 0,
-      cropRight: 0,
-    };
-  };
-
-  // Update clip transform
-  const updateClipTransform = useCallback((clipId: string, updates: Partial<ClipTransform>) => {
-    setClipTransforms(prev => {
-      const currentTransform = prev[clipId] || {
-        x: 0,
-        y: 0,
-        scale: 1,
-        rotation: 0,
-        opacity: 1,
-        width: 100,
-        height: 100,
-        blendMode: 'normal',
-        cropTop: 0,
-        cropBottom: 0,
-        cropLeft: 0,
-        cropRight: 0,
-      };
-
-      return {
-        ...prev,
-        [clipId]: { ...currentTransform, ...updates }
-      };
-    });
-  }, []);
-
-  // Mouse event handlers
-  const handleMouseDown = (e: React.MouseEvent, clipId: string, dragType: DragState['dragType']) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setDragState({
-      isDragging: true,
-      dragType,
-      startMouseX: e.clientX,
-      startMouseY: e.clientY,
-      startTransform: getClipTransform(clipId),
-      clipId
-    });
-  };
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!dragState || !dragState.isDragging) return;
-
-    const deltaX = e.clientX - dragState.startMouseX;
-    const deltaY = e.clientY - dragState.startMouseY;
-    const { startTransform, clipId, dragType } = dragState;
-
-    switch (dragType) {
-      case 'move':
-        updateClipTransform(clipId, {
-          x: Math.max(-100, Math.min(100, startTransform.x + deltaX * 0.3)),
-          y: Math.max(-100, Math.min(100, startTransform.y + deltaY * 0.3))
-        });
-        break;
-
-      case 'resize-nw':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width - deltaX * 0.5),
-          height: Math.max(20, startTransform.height - deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-ne':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width + deltaX * 0.5),
-          height: Math.max(20, startTransform.height - deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-sw':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width - deltaX * 0.5),
-          height: Math.max(20, startTransform.height + deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-se':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width + deltaX * 0.5),
-          height: Math.max(20, startTransform.height + deltaY * 0.5)
-        });
-        break;
-
-      case 'rotate':
-        updateClipTransform(clipId, {
-          rotation: (startTransform.rotation + deltaX * 2) % 360
-        });
-        break;
-
-      case 'scale':
-        updateClipTransform(clipId, {
-          scale: Math.max(0.1, Math.min(3, startTransform.scale + deltaX * 0.01))
-        });
-        break;
-
-      case 'crop-n':
-        updateClipTransform(clipId, {
-          cropTop: Math.max(0, Math.min(40, startTransform.cropTop + deltaY * 0.2))
-        });
-        break;
-
-      case 'crop-s':
-        updateClipTransform(clipId, {
-          cropBottom: Math.max(0, Math.min(40, startTransform.cropBottom - deltaY * 0.2))
-        });
-        break;
-
-      case 'crop-e':
-        updateClipTransform(clipId, {
-          cropRight: Math.max(0, Math.min(40, startTransform.cropRight - deltaX * 0.2))
-        });
-        break;
-
-      case 'crop-w':
-        updateClipTransform(clipId, {
-          cropLeft: Math.max(0, Math.min(40, startTransform.cropLeft + deltaX * 0.2))
-        });
-        break;
-    }
-  }, [dragState, updateClipTransform]);
-
-  const handleMouseUp = useCallback(() => {
-    setDragState(null);
-  }, []);
-
-  // Add global mouse event listeners
-  useEffect(() => {
-    if (dragState?.isDragging) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-    }
-  }, [dragState, handleMouseMove, handleMouseUp]);
-
-  // Initialize transforms for new clips
-  useEffect(() => {
-    const activeClips = getActiveClips();
-    const newTransforms: Record<string, ClipTransform> = {};
-    let hasNewClips = false;
-
-    activeClips.forEach(({ clip }) => {
-      if (!clipTransforms[clip.id]) {
-        hasNewClips = true;
-        newTransforms[clip.id] = {
-          x: 0,
-          y: 0,
-          scale: 1,
-          rotation: 0,
-          opacity: 1,
-          width: 100,
-          height: 100,
-          blendMode: 'normal',
-          cropTop: 0,
-          cropBottom: 0,
-          cropLeft: 0,
-          cropRight: 0,
-        };
-      }
-    });
-
-    if (hasNewClips) {
-      setClipTransforms(prev => ({ ...prev, ...newTransforms }));
-    }
-  }, [tracks, currentTime]); // Re-run when tracks or time changes
-
-
-
-  // Render a single clip layer
-  const renderClipLayer = (clipData: any, index: number) => {
+  // Render a clip
+  const renderClip = (clipData: any, index: number) => {
     const { clip, mediaItem } = clipData;
-    const transform = getClipTransform(clip.id);
 
-    const layerStyle = {
-      position: 'absolute' as const,
-      left: '50%',
-      top: '50%',
-      width: `${transform.width}%`,
-      height: `${transform.height}%`,
-      transform: `translate(-50%, -50%) translate(${transform.x}%, ${transform.y}%) scale(${transform.scale}) rotate(${transform.rotation}deg)`,
-      opacity: transform.opacity,
-      mixBlendMode: transform.blendMode as any,
-      clipPath: `inset(${transform.cropTop}% ${transform.cropRight}% ${transform.cropBottom}% ${transform.cropLeft}%)`,
-      zIndex: index + 10,
-      cursor: dragState?.isDragging && dragState.clipId === clip.id ? 'grabbing' : 'grab',
-      userSelect: 'none' as const,
-    };
-
-    const handleClipMouseDown = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      handleMouseDown(e, clip.id, 'move');
-    };
-
-    // Handle test clips
+    // Test clips
     if (!mediaItem || clip.mediaId === "test") {
       return (
         <div
           key={clip.id}
-          style={layerStyle}
-          onMouseDown={handleClipMouseDown}
-          className="bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center group"
+          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
         >
-          <div className="text-center pointer-events-none">
-            <div className="text-2xl">🎬</div>
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎬</div>
             <p className="text-xs text-white">{clip.name}</p>
           </div>
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
 
-    // Render video
+    // Video clips
     if (mediaItem.type === "video") {
       return (
-        <div key={clip.id} style={layerStyle} onMouseDown={handleClipMouseDown} className="group">
+        <div key={clip.id} className="absolute inset-0">
           <VideoPlayer
             src={mediaItem.url}
             poster={mediaItem.thumbnailUrl}
-            className="w-full h-full pointer-events-none"
             clipStartTime={clip.startTime}
             trimStart={clip.trimStart}
             trimEnd={clip.trimEnd}
             clipDuration={clip.duration}
           />
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
 
-    // Render image
+    // Image clips
     if (mediaItem.type === "image") {
       return (
-        <div key={clip.id} style={layerStyle} onMouseDown={handleClipMouseDown} className="group">
+        <div key={clip.id} className="absolute inset-0">
           <img
             src={mediaItem.url}
             alt={mediaItem.name}
-            className="w-full h-full object-cover rounded pointer-events-none"
+            className="w-full h-full object-cover"
             draggable={false}
           />
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
 
-    // Render audio (visual representation)
+    // Audio clips (visual representation)
     if (mediaItem.type === "audio") {
       return (
         <div
           key={clip.id}
-          style={layerStyle}
-          onMouseDown={handleClipMouseDown}
-          className="bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center group"
+          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
         >
-          <div className="text-center pointer-events-none">
-            <div className="text-2xl">🎵</div>
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎵</div>
             <p className="text-xs text-white">{mediaItem.name}</p>
           </div>
-
-          {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
         </div>
       );
     }
@@ -401,7 +113,7 @@ export function PreviewPanel() {
     return null;
   };
 
-  // Canvas size presets
+  // Canvas presets
   const canvasPresets = [
     { name: "16:9 HD", width: 1920, height: 1080 },
     { name: "16:9 4K", width: 3840, height: 2160 },
@@ -411,9 +123,9 @@ export function PreviewPanel() {
   ];
 
   return (
-    <div className="h-full flex flex-col">
-      {/* Canvas Controls */}
-      <div className="border-b p-2 flex items-center gap-2 text-xs">
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
+      {/* Controls */}
+      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
         <span className="text-muted-foreground">Canvas:</span>
         <select
           value={`${canvasSize.width}x${canvasSize.height}`}
@@ -421,7 +133,7 @@ export function PreviewPanel() {
             const preset = canvasPresets.find(p => `${p.width}x${p.height}` === e.target.value);
             if (preset) setCanvasSize({ width: preset.width, height: preset.height });
           }}
-          className="bg-background border rounded px-2 py-1"
+          className="bg-background border rounded px-2 py-1 text-xs"
         >
           {canvasPresets.map(preset => (
             <option key={preset.name} value={`${preset.width}x${preset.height}`}>
@@ -430,70 +142,49 @@ export function PreviewPanel() {
           ))}
         </select>
 
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={toggle}
-          className="ml-auto"
-        >
+        <Button variant="outline" size="sm" onClick={toggle} className="ml-auto">
           {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}
           {isPlaying ? "Pause" : "Play"}
         </Button>
       </div>
 
-      {/* Preview Area - Full Width */}
-      <div className="flex-1 flex items-center justify-center p-4 bg-gray-900">
+      {/* Preview Area */}
+      <div className="flex-1 flex items-center justify-center p-2 sm:p-4 bg-gray-900 min-h-0 min-w-0">
         <div
           ref={previewRef}
-          className="relative overflow-hidden"
+          className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border border-gray-600"
           style={{
             aspectRatio: aspectRatio.toString(),
-            width: aspectRatio > 1 ? "100%" : "auto",
-            height: aspectRatio <= 1 ? "100%" : "auto",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            background: '#000000',
-            border: '1px solid #374151'
+            width: "100%",
+            height: "100%",
           }}
-
         >
-
-
-          {/* Render all active clips as layers */}
           {activeClips.length === 0 ? (
             <div className="absolute inset-0 flex items-center justify-center text-white/50">
               {tracks.length === 0 ? "Drop media to start editing" : "No clips at current time"}
             </div>
           ) : (
-            activeClips.map((clipData, index) => renderClipLayer(clipData, index))
+            activeClips.map((clipData, index) => renderClip(clipData, index))
           )}
-
-
         </div>
       </div>
 
-      {/* Bottom Info Panel */}
-      <div className="border-t bg-background">
-        {/* Layer List */}
-        <div className="p-2 border-b">
-          <div className="text-xs font-medium mb-2">Active Layers ({activeClips.length})</div>
-          <div className="space-y-1 max-h-20 overflow-y-auto">
-            {activeClips.map((clipData, index) => (
-              <div
-                key={clipData.clip.id}
-                className="flex items-center gap-2 p-1 rounded text-xs hover:bg-muted/50"
-              >
-                <span className="w-4 h-4 bg-muted rounded text-center text-xs leading-4">
-                  {index + 1}
-                </span>
-                <span className="flex-1 truncate">{clipData.clip.name}</span>
-                <span className="text-muted-foreground">{clipData.track.name}</span>
-              </div>
-            ))}
-          </div>
+      {/* Info Panel */}
+      <div className="border-t bg-background p-2 flex-shrink-0">
+        <div className="text-xs font-medium mb-1">Active Clips ({activeClips.length})</div>
+        <div className="flex gap-2 overflow-x-auto">
+          {activeClips.map((clipData, index) => (
+            <div
+              key={clipData.clip.id}
+              className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
+            >
+              <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
+                {index + 1}
+              </span>
+              <span>{clipData.clip.name}</span>
+            </div>
+          ))}
         </div>
-
-
       </div>
     </div>
   );
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 8731e1a..f489f70 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { Button } from "./button";
-import { Play, Pause, Volume2 } from "lucide-react";
 import { usePlaybackStore } from "@/stores/playback-store";
 
 interface VideoPlayerProps {
@@ -25,128 +23,87 @@ export function VideoPlayer({
     clipDuration
 }: VideoPlayerProps) {
     const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, speed, play, pause, setVolume } = usePlaybackStore();
+    const { isPlaying, currentTime, volume, speed } = usePlaybackStore();
 
     // Calculate if we're within this clip's timeline range
     const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
     const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime;
 
-    // Calculate the video's internal time based on timeline position
-    const videoTime = Math.max(trimStart, Math.min(
-        clipDuration - trimEnd,
-        currentTime - clipStartTime + trimStart
-    ));
-
+    // Sync playback events
     useEffect(() => {
         const video = videoRef.current;
-        if (!video) return;
+        if (!video || !isInClipRange) return;
 
-        const handleSeekEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
+        const handleSeek = (e: CustomEvent) => {
             const timelineTime = e.detail.time;
-            const newVideoTime = Math.max(trimStart, Math.min(
+            const videoTime = Math.max(trimStart, Math.min(
                 clipDuration - trimEnd,
                 timelineTime - clipStartTime + trimStart
             ));
-            video.currentTime = newVideoTime;
+            video.currentTime = videoTime;
         };
 
-        const handleUpdateEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
+        const handleUpdate = (e: CustomEvent) => {
             const timelineTime = e.detail.time;
-            const targetVideoTime = Math.max(trimStart, Math.min(
+            const targetTime = Math.max(trimStart, Math.min(
                 clipDuration - trimEnd,
                 timelineTime - clipStartTime + trimStart
             ));
 
-            // Only sync if there's a significant difference to avoid micro-adjustments
-            if (Math.abs(video.currentTime - targetVideoTime) > 0.5) {
-                video.currentTime = targetVideoTime;
+            if (Math.abs(video.currentTime - targetTime) > 0.5) {
+                video.currentTime = targetTime;
             }
         };
 
-        const handleSpeedEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
-            // Set playbackRate directly without any additional checks
+        const handleSpeed = (e: CustomEvent) => {
             video.playbackRate = e.detail.speed;
         };
 
-        window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-        window.addEventListener("playback-update", handleUpdateEvent as EventListener);
-        window.addEventListener("playback-speed", handleSpeedEvent as EventListener);
+        window.addEventListener("playback-seek", handleSeek as EventListener);
+        window.addEventListener("playback-update", handleUpdate as EventListener);
+        window.addEventListener("playback-speed", handleSpeed as EventListener);
 
         return () => {
-            window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
-            window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
-            window.removeEventListener("playback-speed", handleSpeedEvent as EventListener);
+            window.removeEventListener("playback-seek", handleSeek as EventListener);
+            window.removeEventListener("playback-update", handleUpdate as EventListener);
+            window.removeEventListener("playback-speed", handleSpeed as EventListener);
         };
     }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
 
-    // Sync video playback state - only play if in clip range
+    // Sync playback state
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
 
         if (isPlaying && isInClipRange) {
-            video.play().catch(console.error);
+            video.play().catch(() => { });
         } else {
             video.pause();
         }
     }, [isPlaying, isInClipRange]);
 
-    // Sync volume
+    // Sync volume and speed
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
-        video.volume = volume;
-    }, [volume]);
 
-    // Sync speed immediately when it changes
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
+        video.volume = volume;
         video.playbackRate = speed;
-    }, [speed]);
+    }, [volume, speed]);
 
     return (
-        <div className={`relative group ${className}`}>
-            <video
-                ref={videoRef}
-                src={src}
-                poster={poster}
-                className="w-full h-full object-cover"
-                playsInline
-                preload="auto"
-            />
-
-            <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-
-            <div className="absolute bottom-2 left-2 right-2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
-                    onClick={isPlaying ? pause : play}
-                >
-                    {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
-                </Button>
-
-                <div className="flex-1 h-1 bg-white/30 rounded-full overflow-hidden">
-                    <div
-                        className="h-full bg-white transition-all duration-100"
-                        style={{ width: `${(currentTime / usePlaybackStore.getState().duration) * 100}%` }}
-                    />
-                </div>
-
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
-                    onClick={() => setVolume(volume > 0 ? 0 : 1)}
-                >
-                    <Volume2 className="h-4 w-4" />
-                </Button>
-            </div>
-        </div>
+        <video
+            ref={videoRef}
+            src={src}
+            poster={poster}
+            className={`w-full h-full object-cover ${className}`}
+            playsInline
+            preload="auto"
+            controls={false}
+            disablePictureInPicture
+            disableRemotePlayback
+            style={{ pointerEvents: 'none' }}
+            onContextMenu={(e) => e.preventDefault()}
+        />
     );
 } 
\ No newline at end of file
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index ea2dacb..7706417 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -2,78 +2,40 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 interface PanelState {
-  // Horizontal panel sizes
+  // Panel sizes as percentages
   toolsPanel: number;
   previewPanel: number;
   propertiesPanel: number;
-
-  // Vertical panel sizes
   mainContent: number;
   timeline: number;
 
-  // Flag to prevent initial overwrites
-  isInitialized: boolean;
-
   // Actions
   setToolsPanel: (size: number) => void;
   setPreviewPanel: (size: number) => void;
   setPropertiesPanel: (size: number) => void;
   setMainContent: (size: number) => void;
   setTimeline: (size: number) => void;
-  setInitialized: () => void;
 }
 
 export const usePanelStore = create<PanelState>()(
   persist(
-    (set, get) => ({
-      // Default sizes
-      toolsPanel: 20,
-      previewPanel: 60,
+    (set) => ({
+      // Default sizes - optimized for responsiveness
+      toolsPanel: 25,
+      previewPanel: 75,
       propertiesPanel: 20,
-      mainContent: 50,
-      timeline: 50,
-      isInitialized: false,
+      mainContent: 70,
+      timeline: 30,
 
       // Actions
-      setToolsPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ toolsPanel: size });
-      },
-      setPreviewPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ previewPanel: size });
-      },
-      setPropertiesPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ propertiesPanel: size });
-      },
-      setMainContent: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ mainContent: size });
-      },
-      setTimeline: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ timeline: size });
-      },
-      setInitialized: () => {
-        console.log("Panel store initialized for resize events");
-        set({ isInitialized: true });
-      },
+      setToolsPanel: (size) => set({ toolsPanel: size }),
+      setPreviewPanel: (size) => set({ previewPanel: size }),
+      setPropertiesPanel: (size) => set({ propertiesPanel: size }),
+      setMainContent: (size) => set({ mainContent: size }),
+      setTimeline: (size) => set({ timeline: size }),
     }),
     {
       name: "panel-sizes",
-      partialize: (state) => ({
-        toolsPanel: state.toolsPanel,
-        previewPanel: state.previewPanel,
-        propertiesPanel: state.propertiesPanel,
-        mainContent: state.mainContent,
-        timeline: state.timeline,
-      }),
     }
   )
 );