From ed6ab6cd5b6fec5f8e7d7cbcaa5224393729164e Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Mon, 23 Jun 2025 09:18:15 +0300
Subject: feat: cleaned up video player, added functionality, zooming in/out,
 timeline position viewer, keyboard controls

---
 apps/web/src/components/editor/preview-panel.tsx |  92 +++++++-------------
 apps/web/src/components/editor/timeline.tsx      | 106 +++++++++++++++++------
 2 files changed, 109 insertions(+), 89 deletions(-)

(limited to 'apps/web/src/components/editor')

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 16c808f4..593758e1 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -2,57 +2,52 @@
 
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
 import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
+import { VideoPlayer } from "@/components/ui/video-player";
 import { Button } from "@/components/ui/button";
 import { Play, Pause } from "lucide-react";
-import { useState } from "react";
 
 export function PreviewPanel() {
   const { tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
-  const [isPlaying, setIsPlaying] = useState(false);
+  const { isPlaying, toggle } = usePlaybackStore();
 
-  // Get the first clip from the first track for preview (simplified for now)
   const firstClip = tracks[0]?.clips[0];
   const firstMediaItem = firstClip
     ? mediaItems.find((item) => item.id === firstClip.mediaId)
     : null;
 
-  // Calculate dynamic aspect ratio - default to 16:9 if no media
   const aspectRatio = firstMediaItem?.aspectRatio || 16 / 9;
 
-  const renderPreviewContent = () => {
+  const renderContent = () => {
     if (!firstMediaItem) {
       return (
-        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50 group-hover:text-muted-foreground/80 transition-colors">
-          Drop media here or click to import
+        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">
+          Drop media to start editing
         </div>
       );
     }
 
-    if (firstMediaItem.type === "image") {
+    if (firstMediaItem.type === "video") {
       return (
-        <ImageTimelineTreatment
+        <VideoPlayer
           src={firstMediaItem.url}
-          alt={firstMediaItem.name}
-          targetAspectRatio={aspectRatio}
-          className="w-full h-full rounded-lg"
-          backgroundType="blur"
+          poster={firstMediaItem.thumbnailUrl}
+          className="w-full h-full"
         />
       );
     }
 
-    if (firstMediaItem.type === "video") {
-      return firstMediaItem.thumbnailUrl ? (
-        <img
-          src={firstMediaItem.thumbnailUrl}
+    if (firstMediaItem.type === "image") {
+      return (
+        <ImageTimelineTreatment
+          src={firstMediaItem.url}
           alt={firstMediaItem.name}
-          className="w-full h-full object-cover rounded-lg"
+          targetAspectRatio={aspectRatio}
+          className="w-full h-full"
+          backgroundType="blur"
         />
-      ) : (
-        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">
-          Video Preview
-        </div>
       );
     }
 
@@ -62,6 +57,14 @@ export function PreviewPanel() {
           <div className="text-center">
             <div className="text-6xl mb-4">🎵</div>
             <p className="text-muted-foreground">{firstMediaItem.name}</p>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={toggle}
+            >
+              {isPlaying ? <Pause className="h-4 w-4 mr-2" /> : <Play className="h-4 w-4 mr-2" />}
+              {isPlaying ? "Pause" : "Play"}
+            </Button>
           </div>
         </div>
       );
@@ -73,7 +76,7 @@ export function PreviewPanel() {
   return (
     <div className="h-full flex flex-col items-center justify-center p-4 overflow-hidden">
       <div
-        className="bg-black/90 rounded-lg shadow-lg relative group overflow-hidden flex-shrink"
+        className="bg-black rounded-lg shadow-lg relative overflow-hidden flex-shrink-0"
         style={{
           aspectRatio: aspectRatio.toString(),
           width: aspectRatio > 1 ? "100%" : "auto",
@@ -82,49 +85,16 @@ export function PreviewPanel() {
           maxHeight: "100%",
         }}
       >
-        {renderPreviewContent()}
-
-        {/* Playback Controls Overlay */}
-        {firstMediaItem && (
-          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity">
-            <div className="flex items-center gap-2 bg-black/80 rounded-lg px-4 py-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-white hover:bg-white/20"
-                onClick={() => setIsPlaying(!isPlaying)}
-              >
-                {isPlaying ? (
-                  <Pause className="h-5 w-5" />
-                ) : (
-                  <Play className="h-5 w-5" />
-                )}
-              </Button>
-              <span className="text-white text-sm">
-                {firstClip?.name || "No clip selected"}
-              </span>
-            </div>
-          </div>
-        )}
+        {renderContent()}
       </div>
 
-      {/* Preview Info */}
       {firstMediaItem && (
         <div className="mt-4 text-center">
           <p className="text-sm text-muted-foreground">
-            Preview: {firstMediaItem.name}
-            {firstMediaItem.type === "image" &&
-              " (with CapCut-style treatment)"}
-            <br />
-            <span className="text-xs text-muted-foreground/70">
-              Aspect Ratio: {aspectRatio.toFixed(2)} (
-              {aspectRatio > 1
-                ? "Landscape"
-                : aspectRatio < 1
-                  ? "Portrait"
-                  : "Square"}
-              )
-            </span>
+            {firstMediaItem.name}
+          </p>
+          <p className="text-xs text-muted-foreground/70">
+            {aspectRatio.toFixed(2)} • {aspectRatio > 1 ? "Landscape" : aspectRatio < 1 ? "Portrait" : "Square"}
           </p>
         </div>
       )}
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 6b507b7d..f089cb73 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -20,6 +20,7 @@ import {
 import { DragOverlay } from "../ui/drag-overlay";
 import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
 import { processMediaFiles } from "@/lib/media-processing";
 import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
 import { toast } from "sonner";
@@ -28,9 +29,12 @@ import { useState, useRef } from "react";
 export function Timeline() {
   const { tracks, addTrack, addClipToTrack } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
+  const { currentTime, duration, seek } = usePlaybackStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [zoomLevel, setZoomLevel] = useState(1);
   const dragCounterRef = useRef(0);
+  const timelineRef = useRef<HTMLDivElement>(null);
 
   const handleDragEnter = (e: React.DragEvent) => {
     e.preventDefault();
@@ -171,6 +175,25 @@ export function Timeline() {
     }
   };
 
+  const handleTimelineClick = (e: React.MouseEvent) => {
+    const timeline = timelineRef.current;
+    if (!timeline || duration === 0) return;
+
+    const rect = timeline.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const timelineWidth = rect.width;
+    const visibleDuration = duration / zoomLevel;
+    const clickedTime = (x / timelineWidth) * visibleDuration;
+
+    seek(Math.max(0, Math.min(duration, clickedTime)));
+  };
+
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.05 : 0.05;
+    setZoomLevel(prev => Math.max(0.1, Math.min(10, prev + delta)));
+  };
+
   const dragProps = {
     onDragEnter: handleDragEnter,
     onDragOver: handleDragOver,
@@ -264,46 +287,73 @@ export function Timeline() {
 
       {/* Tracks Area */}
       <ScrollArea className="flex-1">
-        <div className="min-w-[800px]">
-          {/* Time Markers */}
-          <div className="py-2 pt-1 flex items-center">
-            {Array.from({ length: 16 }).map((_, i) => (
+        <div
+          ref={timelineRef}
+          className="min-w-[800px] relative cursor-pointer select-none"
+          onClick={handleTimelineClick}
+          onWheel={handleWheel}
+        >
+          {/* Timeline Header */}
+          <div className="py-3 relative bg-muted/30 border-b">
+            {/* Playhead */}
+            {duration > 0 && (
               <div
-                key={i}
-                className="w-[50px] flex items-end justify-center text-xs text-muted-foreground"
+                className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
+                style={{
+                  left: `${(currentTime / (duration / zoomLevel)) * 100}%`,
+                  transform: 'translateX(-50%)'
+                }}
               >
-                {i}s
+                <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
               </div>
-            ))}
+            )}
+
+            {/* Zoom indicator */}
+            <div className="absolute top-1 right-2 text-xs text-muted-foreground">
+              {zoomLevel.toFixed(1)}x
+            </div>
           </div>
 
           {/* Timeline Tracks */}
-          {tracks.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12 text-center">
-              <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
-                <SplitSquareHorizontal className="h-8 w-8 text-muted-foreground" />
+          <div className="relative">
+            {tracks.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
+                  <SplitSquareHorizontal className="h-8 w-8 text-muted-foreground" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  No tracks in timeline
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  Add a video or audio track to get started
+                </p>
               </div>
-              <p className="text-sm text-muted-foreground">
-                No tracks in timeline
-              </p>
-              <p className="text-xs text-muted-foreground/70 mt-1">
-                Add a video or audio track to get started
-              </p>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-2.5">
-              {tracks.map((track) => (
-                <TimelineTrackComponent key={track.id} track={track} />
-              ))}
-            </div>
-          )}
+            ) : (
+              <div className="flex flex-col gap-2.5">
+                {tracks.map((track) => (
+                  <TimelineTrackComponent key={track.id} track={track} zoomLevel={zoomLevel} />
+                ))}
+              </div>
+            )}
+
+            {/* Playhead for tracks area */}
+            {tracks.length > 0 && duration > 0 && (
+              <div
+                className="absolute top-0 bottom-0 w-0.5 bg-red-500/80 pointer-events-none z-10"
+                style={{
+                  left: `${(currentTime / (duration / zoomLevel)) * 100}%`,
+                  transform: 'translateX(-50%)'
+                }}
+              />
+            )}
+          </div>
         </div>
       </ScrollArea>
     </div>
   );
 }
 
-function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
+function TimelineTrackComponent({ track, zoomLevel }: { track: TimelineTrack, zoomLevel: number }) {
   const { mediaItems } = useMediaStore();
   const { moveClipToTrack, reorderClipInTrack } = useTimelineStore();
   const [isDropping, setIsDropping] = useState(false);
@@ -528,7 +578,7 @@ function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
                 key={clip.id}
                 className={`timeline-clip h-full rounded-sm border cursor-grab active:cursor-grabbing transition-colors ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden`}
                 style={{
-                  width: `${Math.max(80, clip.duration * 50)}px`,
+                  width: `${Math.max(80, clip.duration * 50 * zoomLevel)}px`,
                 }}
                 draggable={true}
                 onDragStart={(e) => handleClipDragStart(e, clip)}
-- 
cgit v1.3.1