Fixed many issues with track resizing, and playhead becoming detacthe…

…d from playhead line. Also, added a new snap target for end of timeline.

src/timeline/index.html

@@ -52,7 +52,7 @@
 			<!-- PLAYHEAD TOP -->
 			<div tl-playhead class="playhead playhead-top" id="playhead" ng-right-click="showPlayheadMenu(project.playhead_position)" style="left:{{project.playhead_position * pixelsPerSecond}}px;"></div>
 			<!-- Ruler is width of the timeline -->
-			<div tl-ruler id="ruler" style="width: {{project.duration * pixelsPerSecond}}px;"></div>
+			<div tl-ruler id="ruler" style="width:{{getTimelineWidth(0) + 8}}px;"></div>
 
 			<!-- MARKERS --> 
 			<span class="ruler_marker" id="marker_for_{{marker.id}}">
@@ -78,10 +78,11 @@
 		</div>
 		<!-- TRACKS CONTAINER (right of screen) -->
 		<div tl-scrollable-tracks id="scrolling_tracks">
-			<div id="track-container" tl-track tl-multi-selectable style="width: {{getTimelineWidth(0) - 6}}px; padding-bottom: 2px;">
+			<div id="track-container" tl-track tl-multi-selectable style="width: {{getTimelineWidth(0)}}px; padding-bottom: 2px;">
 				<!-- TRACKS -->
-				<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)"  class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(0) - 6}}px;">
+				<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)"  class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(0)}}px;">
 					<div class="banding-overlay"></div>
+					<div class="resize-handle"></div>
 				</div>
 
 				<!-- CLIPS -->

src/timeline/js/controllers.js

@@ -1339,6 +1339,11 @@ $scope.updateLayerIndex = function () {
         }
       }
 
+      // Add end of timeline position
+      var end_of_track = $scope.project.duration * $scope.pixelsPerSecond;
+      var end_of_track_diff = position - end_of_track;
+      diffs.push({"diff": end_of_track_diff, "position": end_of_track});
+
       // Loop through diffs (and find the smallest one)
       for (var diff_index = 0; diff_index < diffs.length; diff_index++) {
         var diff = diffs[diff_index].diff;

src/timeline/js/directives/clip.js

@@ -394,7 +394,7 @@ App.directive("tlMultiSelectable", function () {
       element.selectable({
         filter: ".droppable",
         distance: 0,
-        cancel: ".effect-container,.transition_menu,.clip_menu,.point",
+        cancel: ".effect-container,.transition_menu,.clip_menu,.point,.resize-handle",
         selected: function (event, ui) {
           // Identify the selected ID and TYPE
           var id = ui.selected.id;

src/timeline/js/directives/track.js

@@ -29,60 +29,64 @@
 App.directive('tlTrack', function () {
     return {
         restrict: 'A',
-        link: function (scope, element, attrs) {
-            var newDuration = null;  // Define the variable in a higher scope
-            var minimumWidth = 0;    // Define the minimum width based on furthest right edge
+        link: function (scope, element) {
+            var startX, startWidth, isResizing = false, newDuration, minimumWidth;
 
             // Function to calculate the furthest right edge of any clip
             var getFurthestRightEdge = function() {
-                var furthest_right_edge = 0;
+                return scope.project.clips.reduce((max, clip) =>
+                    Math.max(max, clip.position + (clip.end - clip.start)), 0);
+            };
 
-                for (var clip_index = 0; clip_index < scope.project.clips.length; clip_index++) {
-                    var clip = scope.project.clips[clip_index];
-                    var right_edge = clip.position + (clip.end - clip.start);
-                    if (right_edge > furthest_right_edge) {
-                        furthest_right_edge = right_edge;
-                    }
-                }
+            // Delegate the mousedown event to the parent element for dynamically created resize-handle
+            element.on('mousedown', '.resize-handle', function(event) {
+                // Start resizing logic
+                isResizing = true;
+                startX = event.pageX;
+                startWidth = element.width();
 
-                return furthest_right_edge;
-            };
+                // Calculate the minimum width based on the furthest right edge of clips
+                minimumWidth = getFurthestRightEdge() * scope.pixelsPerSecond;
+
+                // Attach document-wide mousemove and mouseup events
+                $(document).on('mousemove', resizeTrack);
+                $(document).on('mouseup', stopResizing);
+                event.preventDefault();
+            });
+
+            // Function to handle resizing as mouse moves
+            function resizeTrack(event) {
+                if (!isResizing) return;
 
-            // Make the track resizable using jQuery UI, but restrict resizing to the right side
-            element.resizable({
-                handles: 'e', // right edge
-                minWidth: 0,  // Set minimum width (optional)
-                distance: 5,  // threshold for resizing to avoid small movements
+                // Calculate the new width (ensure it doesn't go below the minimum width)
+                var newWidth = Math.max(startWidth + (event.pageX - startX), minimumWidth);
 
-                // Event triggered when resizing starts
-                start: function (event, ui) {
-                    // Calculate the furthest right edge once, at the start of resizing
-                    var furthestRightEdge = getFurthestRightEdge();
-                    minimumWidth = furthestRightEdge * scope.pixelsPerSecond;
-                },
+                // Update the track's new duration based on the resized width
+                newDuration = snapToFPSGridTime(scope, pixelToTime(scope, newWidth));
 
-                // Event triggered while resizing
-                resize: function (event, ui) {
-                    // Get the new width of the track in pixels
-                    var newWidth = Math.max(ui.size.width, minimumWidth);
+                // Update the element's width dynamically
+                element.width(newWidth);
 
-                    // Update the track duration based on the new constrained width and pixels per second
-                    newDuration = snapToFPSGridTime(scope, pixelToTime(scope, newWidth));
+                // Apply the new duration to the scope
+                scope.$apply(function () {
+                    scope.project.duration = newDuration;
+                });
+            }
 
-                    // Apply the new duration to the scope
-                    scope.$apply(function () {
-                        scope.project.duration = newDuration;
-                    });
-                },
+            // Function to stop resizing when the mouse button is released
+            function stopResizing() {
+                if (!isResizing) return;
+                isResizing = false;
 
-                // Event triggered when resizing ends (mouse released)
-                stop: function (event, ui) {
-                    // Use the newDuration variable defined in the resize event
-                    if (newDuration !== null) {
-                        timeline.resizeTimeline(newDuration);
-                    }
+                // Clean up the document-wide event listeners
+                $(document).off('mousemove', resizeTrack);
+                $(document).off('mouseup', stopResizing);
+
+                // Finalize the new duration on the timeline (if valid)
+                if (newDuration !== null) {
+                    timeline.resizeTimeline(newDuration);
                 }
-            });
+            }
         }
     };
 });

src/timeline/media/css/main.css

@@ -193,13 +193,25 @@ img {
   border-top: 1px solid #4b92ad;
   border-bottom: 1px solid #4b92ad;
   border-right: 1px solid #4b92ad;
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
   box-shadow: 0 0 10px #000;
   position: relative;
   z-index: 1;
 }
 
+.resize-handle {
+    position: absolute;
+    right: -8px; /* To the right of the track right edge */
+    top: 0;
+    width: 8px;
+    height: 100%;
+    cursor: ew-resize;
+    background-color: silver;
+}
+
+.resize-handle:hover {
+    background-color: red;
+}
+
 .banding-overlay {
   position: absolute;
   top: 0;