From 281ec63d7e0dfe70534790deb790c5bbd6701502 Mon Sep 17 00:00:00 2001
From: Vlad <vlad.palacio@gmail.com>
Date: Wed, 30 Jul 2025 10:25:35 -0400
Subject: Fixed BUG Editor cursor does not stop at the end of an audio file

Get duration of content on the timeline to make sure the playhead moves until the end of the timeline content when the content is less than 10 seconds.
Originally it would go all the way to the 10 seconds when timeline content was less than that.
I checked how clipchamp does it and they have a min 10 sec timeline but video timeline plays at length of content, so we are doing it like the pros. timeline is jumpy though will probably work on that.
---
 apps/web/src/components/editor/preview-panel.tsx  | 22 ++++++++++++++---
 apps/web/src/components/editor/timeline/index.tsx | 30 ++++++++++++++++++-----
 2 files changed, 43 insertions(+), 9 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 639858d0..6cb06061 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -211,7 +211,7 @@ export function PreviewPanel() {
     setDragState({
       isDragging: true,
       elementId: element.id,
-      trackId: trackId,
+      trackId,
       startX: e.clientX,
       startY: e.clientY,
       initialElementX: element.x,
@@ -355,8 +355,24 @@ export function PreviewPanel() {
             handleTextMouseDown(e, element, elementData.track.id)
           }
           style={{
-            left: `${50 + ((dragState.isDragging && dragState.elementId === element.id ? dragState.currentX : element.x) / canvasSize.width) * 100}%`,
-            top: `${50 + ((dragState.isDragging && dragState.elementId === element.id ? dragState.currentY : element.y) / canvasSize.height) * 100}%`,
+            left: `${
+              50 +
+              (
+                (dragState.isDragging && dragState.elementId === element.id
+                  ? dragState.currentX
+                  : element.x) / canvasSize.width
+              ) *
+                100
+            }%`,
+            top: `${
+              50 +
+              (
+                (dragState.isDragging && dragState.elementId === element.id
+                  ? dragState.currentY
+                  : element.y) / canvasSize.height
+              ) *
+                100
+            }%`,
             transform: `translate(-50%, -50%) rotate(${element.rotation}deg) scale(${scaleRatio})`,
             opacity: element.opacity,
             zIndex: 100 + index, // Text elements on top
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index bdb4433c..7943af06 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -607,7 +607,11 @@ export function Timeline() {
                             : "border-l border-muted-foreground/20"
                         }`}
                         style={{
-                          left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
+                          left: `${
+                            time *
+                            TIMELINE_CONSTANTS.PIXELS_PER_SECOND *
+                            zoomLevel
+                          }px`,
                         }}
                       >
                         <span
@@ -624,10 +628,16 @@ export function Timeline() {
                               const secs = seconds % 60;
 
                               if (hours > 0) {
-                                return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
+                                return `${hours}:${minutes
+                                  .toString()
+                                  .padStart(2, "0")}:${Math.floor(secs)
+                                  .toString()
+                                  .padStart(2, "0")}`;
                               }
                               if (minutes > 0) {
-                                return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
+                                return `${minutes}:${Math.floor(secs)
+                                  .toString()
+                                  .padStart(2, "0")}`;
                               }
                               if (interval >= 1) {
                                 return `${Math.floor(secs)}s`;
@@ -710,7 +720,10 @@ export function Timeline() {
               <div
                 className="relative flex-1"
                 style={{
-                  height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,
+                  height: `${Math.max(
+                    200,
+                    Math.min(800, getTotalTracksHeight(tracks))
+                  )}px`,
                   width: `${dynamicTimelineWidth}px`,
                 }}
               >
@@ -724,7 +737,10 @@ export function Timeline() {
                           <div
                             className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
                             style={{
-                              top: `${getCumulativeHeightBefore(tracks, index)}px`,
+                              top: `${getCumulativeHeightBefore(
+                                tracks,
+                                index
+                              )}px`,
                               height: `${getTrackHeight(track.type)}px`,
                             }}
                             onClick={(e) => {
@@ -1092,7 +1108,9 @@ function TimelineToolbar({
             <TooltipTrigger asChild>
               <Button variant="text" size="icon" onClick={toggleRippleEditing}>
                 <Link
-                  className={`h-4 w-4 ${rippleEditingEnabled ? "text-primary" : ""}`}
+                  className={`h-4 w-4 ${
+                    rippleEditingEnabled ? "text-primary" : ""
+                  }`}
                 />
               </Button>
             </TooltipTrigger>
-- 
cgit v1.3.1