Playhead snapping support, when SHIFT is pressed. Improved timeline styling: Removed left+right borders on clips/transitions to fix invalid width and jitter while trimming/moving items. Added brightness to selected clips, and flipped gradient on tracks (to make clips pop more).

Author: jonoomph

src/timeline/js/controllers.js

@@ -1139,7 +1139,9 @@ App.controller("TimelineCtrl", function ($scope) {
       // Add playhead position to array
       var playhead_pixel_position = $scope.project.playhead_position * $scope.pixelsPerSecond;
       var playhead_diff = position - playhead_pixel_position;
-      diffs.push({"diff": playhead_diff, "position": playhead_pixel_position});
+      if (!ignore_ids.hasOwnProperty("playhead")) {
+        diffs.push({"diff": playhead_diff, "position": playhead_pixel_position});
+      }
 
       // Loop through diffs (and find the smallest one)
       for (var diff_index = 0; diff_index < diffs.length; diff_index++) {

src/timeline/js/directives/clip.js

@@ -131,12 +131,7 @@ App.directive("tlClip", function ($timeout) {
 
           //apply the new start, end and length to the clip's scope
           scope.$apply(function () {
-            // Get the nearest starting frame position to the clip position (this helps to prevent cutting
-            // in-between frames, and thus less likely to repeat or skip a frame).
-            new_position = (Math.round((new_position * scope.project.fps.num) / scope.project.fps.den) * scope.project.fps.den ) / scope.project.fps.num;
-            new_right = (Math.round((new_right * scope.project.fps.num) / scope.project.fps.den) * scope.project.fps.den ) / scope.project.fps.num;
-            new_left = (Math.round((new_left * scope.project.fps.num) / scope.project.fps.den) * scope.project.fps.den ) / scope.project.fps.num;
-
+            // Apply clip scope changes
             if (scope.clip.end !== new_right) {
               scope.clip.end = new_right;
             }
@@ -191,13 +186,12 @@ App.directive("tlClip", function ($timeout) {
             // changing the end of the clips
             new_right -= delta_time;
             if (new_right > scope.clip.duration) {
-
               // change back to actual duration (for the preview below)
               new_right = scope.clip.duration;
               ui.element.width(new_right * scope.pixelsPerSecond);
             }
             else {
-              ui.element.width(ui.size.width);
+              ui.element.width((new_right - new_left) * scope.pixelsPerSecond);
             }
           }
 
@@ -260,8 +254,7 @@ App.directive("tlClip", function ($timeout) {
           }
 
           // Apply scope up to this point
-          scope.$apply(function () {
-          });
+          scope.$apply(function () {});
 
           var scrolling_tracks = $("#scrolling_tracks");
           var vert_scroll_offset = scrolling_tracks.scrollTop();

src/timeline/js/directives/playhead.js

@@ -37,10 +37,30 @@ App.directive("tlPlayhead", function () {
       // get the default top position so we can lock it in place vertically
       playhead_y_max = element.position().top;
 
+      element.on("mousedown", function (e) {
+        // Set bounding box for the playhead
+        bounding_box = {};
+        setBoundingBox(scope, $(this), true);
+      });
+
       // Move playhead to new position (if it's not currently being animated)
       element.on("mousemove", function (e) {
         if (e.which === 1 && !scope.playhead_animating) { // left button
-          var playhead_seconds = (e.pageX - $("#ruler").offset().left) / scope.pixelsPerSecond;
+          // Calculate the playhead bounding box movement and apply snapping rules
+          var cursor_position = e.pageX - $("#ruler").offset().left;
+          var results = moveBoundingBox(scope, bounding_box.left, bounding_box.top,
+            cursor_position - bounding_box.left, cursor_position - bounding_box.top,
+            cursor_position, cursor_position, true);
+
+          // Only apply snapping when SHIFT is pressed
+          if (e.shiftKey) {
+            new_position = results.position.left;
+          } else {
+            new_position = cursor_position;
+          }
+
+          // Move playhead
+          var playhead_seconds = new_position / scope.pixelsPerSecond;
           scope.movePlayhead(playhead_seconds);
           scope.previewFrame(playhead_seconds);
         }

src/timeline/js/directives/transition.js

@@ -108,12 +108,6 @@ App.directive("tlTransition", function () {
 
           //apply the new start, end and length to the transition's scope
           scope.$apply(function () {
-
-            // Get the nearest starting frame position to the transition position (this helps to prevent cutting
-            // in-between frames, and thus less likely to repeat or skip a frame).
-            new_right = (Math.round((new_right * scope.project.fps.num) / scope.project.fps.den) * scope.project.fps.den ) / scope.project.fps.num;
-            new_left = (Math.round((new_left * scope.project.fps.num) / scope.project.fps.den) * scope.project.fps.den ) / scope.project.fps.num;
-
             if (dragLoc === "right") {
               scope.transition.end = new_right;
             }

src/timeline/js/functions.js

@@ -220,7 +220,7 @@ function hasLockedTrack(scope, top, bottom) {
 var bounding_box = Object();
 
 // Build bounding box (since multiple items can be selected)
-function setBoundingBox(scope, item) {
+function setBoundingBox(scope, item, is_playhead=false) {
   var scrolling_tracks = $("#scrolling_tracks");
   var vert_scroll_offset = scrolling_tracks.scrollTop();
   var horz_scroll_offset = scrolling_tracks.scrollLeft();
@@ -237,6 +237,11 @@ function setBoundingBox(scope, item) {
     bounding_box.right = item_right;
     bounding_box.height = item.height();
     bounding_box.width = item.width();
+    if (is_playhead) {
+      bounding_box.left += 13; // center
+      bounding_box.right = bounding_box.left;
+      bounding_box.width = 1;
+    }
   } else {
     //compare and change if item is a better fit for bounding box edges
     if (item_top < bounding_box.top) { bounding_box.top = item_top; }
@@ -252,28 +257,33 @@ function setBoundingBox(scope, item) {
   }
 
   // Get list of current selected ids (so we can ignore their snapping x coordinates)
+  // Unless playhead, where is don't want to ignore any selected clips
   bounding_box.selected_ids = {};
-  for (var clip_index = 0; clip_index < scope.project.clips.length; clip_index++) {
-    if (scope.project.clips[clip_index].selected) {
-      bounding_box.selected_ids[scope.project.clips[clip_index].id] = true;
+  if (!is_playhead) {
+    for (var clip_index = 0; clip_index < scope.project.clips.length; clip_index++) {
+      if (scope.project.clips[clip_index].selected) {
+        bounding_box.selected_ids[scope.project.clips[clip_index].id] = true;
+      }
     }
-  }
-  for (var effect_index = 0; effect_index < scope.project.effects.length; effect_index++) {
-    if (scope.project.effects[effect_index].selected) {
-      bounding_box.selected_ids[scope.project.effects[effect_index].id] = true;
+    for (var effect_index = 0; effect_index < scope.project.effects.length; effect_index++) {
+      if (scope.project.effects[effect_index].selected) {
+        bounding_box.selected_ids[scope.project.effects[effect_index].id] = true;
+      }
     }
+  } else {
+    bounding_box.selected_ids["playhead"] = true;
   }
 }
 
 // Move bounding box (apply snapping and constraints)
-function moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, left, top) {
+function moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, left, top, is_playhead=false) {
   // Store result of snapping logic (left, top)
   var snapping_result = Object();
   snapping_result.left = left;
   snapping_result.top = top;
 
   // Check for shift key
-  if (event.shiftKey) {
+  if (!is_playhead && event.shiftKey) {
     // freeze X movement
     x_offset = 0;
     snapping_result.left = previous_x;
@@ -309,8 +319,8 @@ function moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, left
   }
 
   // Find closest nearby object, if any (for snapping)
-  var bounding_box_padding = 3; // not sure why this is needed, but it helps line everything up
-  var results = scope.getNearbyPosition([bounding_box.left, bounding_box.right + bounding_box_padding], 10.0, bounding_box.selected_ids);
+  var results = scope.getNearbyPosition([bounding_box.left, bounding_box.right],
+    10.0, bounding_box.selected_ids);
   var nearby_offset = results[0];
   var snapline_position = results[1];
 

src/timeline/media/css/main.css

@@ -58,12 +58,12 @@ img {
 .track_menu:hover { background-image: url(../images/menu_hover.png); }
 .track_lock { float: left; background-image: url(../images/lock.png); width:14px;height:14px; margin-top: 2px; }
 .track_label { padding-top: 2px; padding-left: 2px; padding-left: 4px; text-shadow: 0 0 10px #ffffff; }
-.track_name { width: 140px; height: 64px; color: #fff; font-size: 9pt; margin-left: 5px; margin-bottom: 8px; background-color: #000; border: 1px solid #4B92AD; border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-shadow: 0px 0px 10px #000; }
+.track_name { width: 140px; height: 62px; color: #fff; font-size: 9pt; margin-left: 5px; margin-bottom: 8px; background-color: #000; border: 1px solid #4B92AD; border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-shadow: 0px 0px 10px #000; }
 .track_disabled { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,20,20,1)), color-stop(100%,rgba(6,6,6,1))) !important; }
-.track { height: 64px; background-color: #000; margin-bottom: 8px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(6,6,6,1))); 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: 0px 0px 10px #000; }
+.track { height: 62px; background-color: #000; margin-bottom: 8px; background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(6,6,6,1))); 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: 0px 0px 10px #000; }
 
 /* Playhead */
-.playhead-line { z-index: 9998; position: absolute; height:316px; top:0px; width:1px; background-color:#ff0024; opacity:1;}
+.playhead-line { z-index: 9999; position: absolute; height:316px; top:0px; width:1px; background-color:#ff0024; opacity:1;}
 .playhead-line-small { z-index: 9999; position: absolute; height:20px; top:32px;; margin-left: 12px; width:1px; background-color:#ff0024; opacity:1;}
 .playhead-top { cursor:move; z-index: 9999; position: absolute; margin-left: -12px; margin-top: 12px; width:25px; height:32px; background-image: url(../images/play_head.png); opacity:1;}
 .marker {position:absolute; top:30px;}
@@ -79,12 +79,12 @@ img {
 .effect_icon {margin-left:1px;margin-right:1px;}
 .razor_cursor { cursor: url(../images/razor_line_with_razor.png), default!important; }
 
-.clip { cursor: move; z-index:1000; color: #fff; min-width:0px; height: 64px; position: absolute; margin-top:0px; left: 100px; font-size: 9pt; background-color: #ef7f00; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(82,82,82,1)), color-stop(100%,rgba(34,38,40,1))); border-radius: 8px; border: 1px solid #4b92ad; border-left: 2px solid #4b92ad; border-right: 2px solid #4b92ad; box-shadow: 0px 0px 10px #000; opacity: 0.95; box-sizing: border-box;}
+.clip { cursor: move; z-index:1000; color: #fff; min-width:0px; height: 64px; position: absolute; margin-top:0px; left: 100px; font-size: 9pt; background-color: #ef7f00; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(82,82,82,1)), color-stop(100%,rgba(34,38,40,1))); border-radius: 8px; border: 1px solid #4b92ad; border-left: 0px solid #4b92ad; border-right: 0px solid #4b92ad; box-shadow: 0px 0px 10px #000; opacity: 0.95; box-sizing: border-box;}
 .left_edge_stop { border-left: 2px solid #4b92ad; }
 .right_edge_stop { border-right: 2px solid #4b92ad; }
 .highlight_clip { border-color: #32b7ea; }
-.ui-selecting { border: 1px solid yellow!important; border-left: 2px solid yellow!important; border-right: 2px solid yellow!important; box-sizing: border-box; }
-.ui-selected { border: 1px solid red!important; border-left: 2px solid red!important; border-right: 2px solid red!important; box-sizing: border-box; }
+.ui-selecting { border: 1px solid yellow!important; border-left: 0px solid yellow!important; border-right: 0px solid yellow!important; box-sizing: border-box; }
+.ui-selected { filter: brightness(1.3); border: 1px solid red!important; border-left: 0px solid red!important; border-right: 0px solid red!important; box-sizing: border-box; }
 .thumb { margin-left: 5px; width: 66px; height: 38px;}
 .thumb-start { float:left; }
 .thumb-end {float:right; }
@@ -152,7 +152,7 @@ img {
 }
 
 /* Snapping / snapline */
-.snapping-line { z-index: 9999; position: absolute; height:316px; top:0px; width:1px; background-color:#32b7ea; opacity:0.75; -webkit-transition: 0.3s linear all; }
+.snapping-line { z-index: 9998; position: absolute; height:316px; top:0px; width:1px; background-color:#32b7ea; opacity:0.75; }
 
 /* Snap line Animations */
 .snapping-line.ng-hide-add { display: block !important; }

src/windows/models/properties_model.py

@@ -160,7 +160,7 @@ def update_frame(self, frame_number, reload_model=True):
             if self.frame_number > max_frame_number:
                 self.frame_number = max_frame_number
 
-            log.info("Update frame to %s" % self.frame_number)
+            log.debug("Update frame to %s" % self.frame_number)
 
             # Update the model data
             if reload_model:

src/windows/preview_thread.py

@@ -199,7 +199,7 @@ def previewFrame(self, number):
         # Mark frame number for processing
         self.Seek(number)
 
-        log.info(
+        log.debug(
             "previewFrame: %s, player Position(): %s",
             number, self.player.Position())