Initial commit of new Zoom Slider widget, to replace the previous +/- buttons and simple zoom slider. This new widget draws a mini timeline preview, allows the user to select any portion of the timeline, and also pan/scroll around the timeline with great accuracy.

Author: jonoomph

src/classes/query.py

@@ -311,6 +311,11 @@ def get(**kwargs):
         """ Take any arguments given as filters, and find the first matching object """
         return QueryObject.get(Track, **kwargs)
 
+    def __lt__(self, other):
+        return self.data.get('number', 0) < other.data.get('number', 0)
+
+    def __gt__(self, other):
+        return self.data.get('number', 0) > other.data.get('number', 0)
 
 class Effect(QueryObject):
     """ This class allows Effects to be queried, updated, and deleted from the project data. """

src/timeline/js/controllers.js

@@ -108,11 +108,6 @@ App.controller("TimelineCtrl", function ($scope) {
     var frames_per_second = $scope.project.fps.num / $scope.project.fps.den;
     var position_seconds = ((position_frames - 1) / frames_per_second);
 
-    // Center on the playhead if it has moved out of view and the timeline should follow it
-    if ($scope.enable_playhead_follow && !$scope.isTimeVisible(position_seconds)) {
-      $scope.centerOnTime(position_seconds);
-    }
-
     // Update internal scope (in seconds)
     $scope.movePlayhead(position_seconds);
   };
@@ -274,6 +269,13 @@ App.controller("TimelineCtrl", function ($scope) {
       cursor_time = parseFloat(horz_scroll_offset) / $scope.pixelsPerSecond;
     }
 
+    // Compare to previous scale (and ignore tiny differences)
+    if (Math.abs(parseFloat(scaleVal) - $scope.project.scale) < 0.00001) {
+      // Do not change scale if the value is this tiny
+      // This can cause the Ruler $watch to fail, and will leave the Ruler blank
+      return;
+    }
+
     $scope.$apply(function () {
       $scope.project.scale = parseFloat(scaleVal);
       $scope.pixelsPerSecond = parseFloat($scope.project.tick_pixels) / parseFloat($scope.project.scale);
@@ -284,6 +286,14 @@ App.controller("TimelineCtrl", function ($scope) {
     scrolling_tracks.scrollLeft(new_cursor_x);
   };
 
+  // Change the scale and apply to scope
+  $scope.setScroll = function (normalizedScrollValue) {
+    var timeline_length = Math.min(32767, $scope.getTimelineWidth(0));
+    var scrolling_tracks = $("#scrolling_tracks");
+    var horz_scroll_offset = normalizedScrollValue * timeline_length;
+    scrolling_tracks.scrollLeft(horz_scroll_offset);
+  };
+
   // Scroll the timeline horizontally of a certain amount (scrol_value)
   $scope.scrollLeft = function (scroll_value) {
     var scrolling_tracks = $("#scrolling_tracks");
@@ -949,22 +959,20 @@ App.controller("TimelineCtrl", function ($scope) {
     var scrolling_tracks = $("#scrolling_tracks");
     var vert_scroll_offset = scrolling_tracks.scrollTop();
 
-    $scope.$apply(function () {
-      // Loop through each layer
-      for (var layer_index = 0; layer_index < $scope.project.layers.length; layer_index++) {
-        var layer = $scope.project.layers[layer_index];
-
-        // Find element on screen (bound to this layer)
-        var layer_elem = $("#track_" + layer.number);
-        if (layer_elem.offset()) {
-          // Update the top offset
-          layer.y = layer_elem.offset().top + vert_scroll_offset;
-        }
+    // Loop through each layer
+    for (var layer_index = 0; layer_index < $scope.project.layers.length; layer_index++) {
+      var layer = $scope.project.layers[layer_index];
+
+      // Find element on screen (bound to this layer)
+      var layer_elem = $("#track_" + layer.number);
+      if (layer_elem.offset()) {
+        // Update the top offset
+        layer.y = layer_elem.offset().top + vert_scroll_offset;
       }
-      // Update playhead height
-      $scope.playhead_height = $("#track-container").height();
-      $(".playhead-line").height($scope.playhead_height);
-    });
+    }
+    // Update playhead height
+    $scope.playhead_height = $("#track-container").height();
+    $(".playhead-line").height($scope.playhead_height);
   };
 
   // Sort clips and transitions by position
@@ -1390,6 +1398,9 @@ App.controller("TimelineCtrl", function ($scope) {
     // Re-index Layer Y values
     $scope.updateLayerIndex();
 
+    // Force a scroll event (from 1 to 0, to send the geometry to zoom slider)
+    $("#scrolling_tracks").scrollLeft(1);
+
     // Scroll to top/left when loading a project
     $("#scrolling_tracks").animate({
       scrollTop: 0,

src/timeline/js/directives/clip.js

@@ -146,12 +146,13 @@ App.directive("tlClip", function ($timeout) {
             }
             // Resize timeline if it's too small to contain all clips
             scope.resizeTimeline();
-
-            // update clip in Qt (very important =)
-            if (scope.Qt) {
-              timeline.update_clip_data(JSON.stringify(scope.clip), true, true, false);
-            }
           });
+
+          // update clip in Qt (very important =)
+          if (scope.Qt) {
+            timeline.update_clip_data(JSON.stringify(scope.clip), true, true, false);
+          }
+
           //resize the audio canvas to match the new clip width
           if (scope.clip.show_audio) {
             //redraw audio as the resize cleared the canvas

src/timeline/js/directives/ruler.js

@@ -53,6 +53,18 @@ App.directive("tlScrollableTracks", function () {
         $("#track_controls").scrollTop(element.scrollTop());
         $("#scrolling_ruler").scrollLeft(element.scrollLeft());
         $("#progress_container").scrollLeft(element.scrollLeft());
+
+        // Send scrollbar position to Qt
+        if (scope.Qt) {
+           // Calculate scrollbar positions (left and right edge of scrollbar)
+           var timeline_length = Math.min(32767, scope.getTimelineWidth(0));
+           var left_scrollbar_edge = scroll_left_pixels / timeline_length;
+           var right_scrollbar_edge = (scroll_left_pixels + element.width()) / timeline_length;
+
+           // Send normalized scrollbar positions to Qt
+           timeline.ScrollbarChanged([left_scrollbar_edge, right_scrollbar_edge, timeline_length, element.width()]);
+        }
+
       });
 
       // Initialize panning when middle mouse is clicked

src/timeline/js/directives/transition.js

@@ -121,14 +121,13 @@ App.directive("tlTransition", function () {
               scope.transition.position = new_left;
               scope.transition.end -= delta_time;
             }
-
-            // update transition in Qt (very important =)
-            if (scope.Qt) {
-              timeline.update_transition_data(JSON.stringify(scope.transition), true, false);
-            }
-
           });
 
+          // update transition in Qt (very important =)
+          if (scope.Qt) {
+            timeline.update_transition_data(JSON.stringify(scope.transition), true, false);
+          }
+
           dragLoc = null;
 
         },

src/windows/main_window.py

@@ -109,6 +109,13 @@ class MainWindow(updates.UpdateWatcher, QMainWindow):
     FileUpdated = pyqtSignal(str)
     CaptionTextUpdated = pyqtSignal(str, object)
     CaptionTextLoaded = pyqtSignal(str, object)
+    TimelineZoom = pyqtSignal(float)     # Signal to zoom into timeline from zoom slider
+    TimelineScrolled = pyqtSignal(list)  # Scrollbar changed signal from timeline
+    TimelineScroll = pyqtSignal(float)   # Signal to force scroll timeline to specific point
+    TimelineCenter = pyqtSignal()        # Signal to force center scroll on playhead
+    SelectionAdded = pyqtSignal(str, str, bool)  # Signal to add a selection
+    SelectionRemoved = pyqtSignal(str, str)      # Signal to remove a selection
+    SelectionChanged = pyqtSignal()      # Signal after selections have been changed (added/removed)
 
     # Docks are closable, movable and floatable
     docks_frozen = False
@@ -1869,10 +1876,10 @@ def actionRemoveMarker_trigger(self):
                 m.delete()
 
     def actionTimelineZoomIn_trigger(self):
-        self.sliderZoom.setValue(self.sliderZoom.value() - self.sliderZoom.singleStep())
+        self.sliderZoomWidget.zoomIn()
 
     def actionTimelineZoomOut_trigger(self):
-        self.sliderZoom.setValue(self.sliderZoom.value() + self.sliderZoom.singleStep())
+        self.sliderZoomWidget.zoomOut()
 
     def actionFullscreen_trigger(self):
         # Toggle fullscreen state (current state mask XOR WindowFullScreen)
@@ -2287,6 +2294,9 @@ def addSelection(self, item_id, item_type, clear_existing=False):
             self.show_property_type = item_type
             self.show_property_timer.start()
 
+        # Notify UI that selection has been potentially changed
+        self.SelectionChanged.emit()
+
     # Remove from the selected items
     def removeSelection(self, item_id, item_type):
         # Remove existing selection (if any)
@@ -2321,6 +2331,9 @@ def removeSelection(self, item_id, item_type):
         # Change selected item in properties view
         self.show_property_timer.start()
 
+        # Notify UI that selection has been potentially changed
+        self.SelectionChanged.emit()
+
     def selected_files(self):
         """ Return a list of File objects for the Project Files dock's selection """
         return self.files_model.selected_files()
@@ -2558,27 +2571,16 @@ def setup_toolbars(self):
         self.caption_model_row = None
 
         # Get project's initial zoom value
-        initial_scale = get_app().project.get("scale") or 15
-        # Round non-exponential scale down to next lowest power of 2
-        initial_zoom = secondsToZoom(initial_scale)
-
-        # Setup Zoom slider
-        self.sliderZoom = QSlider(Qt.Horizontal, self)
-        self.sliderZoom.setPageStep(1)
-        self.sliderZoom.setRange(0, 30)
-        self.sliderZoom.setValue(initial_zoom)
-        self.sliderZoom.setInvertedControls(True)
-        self.sliderZoom.resize(100, 16)
-
-        self.zoomScaleLabel = QLabel(
-            _("{} seconds").format(zoomToSeconds(self.sliderZoom.value()))
-        )
+        initial_scale = get_app().project.get("scale") or 15.0
+
+        # Setup Zoom Slider widget
+        from windows.views.zoom_slider import ZoomSlider
+        self.sliderZoomWidget = ZoomSlider(self)
+        self.sliderZoomWidget.setMinimumSize(200, 20)
+        self.sliderZoomWidget.setZoomFactor(initial_scale)
 
         # add zoom widgets
-        self.timelineToolbar.addAction(self.actionTimelineZoomIn)
-        self.timelineToolbar.addWidget(self.sliderZoom)
-        self.timelineToolbar.addAction(self.actionTimelineZoomOut)
-        self.timelineToolbar.addWidget(self.zoomScaleLabel)
+        self.timelineToolbar.addWidget(self.sliderZoomWidget)
 
         # Add timeline toolbar to web frame
         self.frameWeb.addWidget(self.timelineToolbar)
@@ -2886,6 +2888,7 @@ def __init__(self, *args, mode=None):
         self.preview_parent = PreviewParent()
         self.preview_parent.Init(self, self.timeline_sync.timeline, self.videoPreview)
         self.preview_thread = self.preview_parent.worker
+        self.sliderZoomWidget.connect_playback()
 
         # Set pause callback
         self.PauseSignal.connect(self.handlePausedVideo)
@@ -2956,6 +2959,10 @@ def __init__(self, *args, mode=None):
         # Connect OpenProject Signal
         self.OpenProjectSignal.connect(self.open_project)
 
+        # Connect Selection signals
+        self.SelectionAdded.connect(self.addSelection)
+        self.SelectionRemoved.connect(self.removeSelection)
+
         # Show window
         if self.mode != "unittest":
             self.show()

src/windows/views/webview.py

@@ -225,8 +225,8 @@ def changed(self, action):
         # Reset the scale when loading new JSON
         if action.type == "load":
             # Set the scale again (to project setting)
-            initial_scale = get_app().project.get("scale") or 15
-            self.window.sliderZoom.setValue(secondsToZoom(initial_scale))
+            initial_scale = get_app().project.get("scale") or 15.0
+            self.window.sliderZoomWidget.setZoomFactor(initial_scale)
 
             # The setValue() above doesn't trigger update_zoom when a project file is
             # loaded on the command line (too early?), so also call the JS directly
@@ -436,7 +436,7 @@ def ShowEffectMenu(self, effect_id=None):
         log.debug('ShowEffectMenu: %s' % effect_id)
 
         # Set the selected clip (if needed)
-        self.window.addSelection(effect_id, 'effect', True)
+        self.addSelection(effect_id, 'effect', True)
 
         menu = QMenu(self)
         # Properties
@@ -492,7 +492,7 @@ def ShowClipMenu(self, clip_id=None):
 
         # Set the selected clip (if needed)
         if clip_id not in self.window.selected_clips:
-            self.window.addSelection(clip_id, 'clip')
+            self.addSelection(clip_id, 'clip')
         # Get list of selected clips
         clip_ids = self.window.selected_clips
         tran_ids = self.window.selected_transitions
@@ -2529,7 +2529,7 @@ def ShowTransitionMenu(self, tran_id=None):
 
         # Set the selected transition (if needed)
         if tran_id not in self.window.selected_transitions:
-            self.window.addSelection(tran_id, 'transition')
+            self.addSelection(tran_id, 'transition')
         # Get list of all selected transitions
         tran_ids = self.window.selected_transitions
         clip_ids = self.window.selected_clips
@@ -2733,16 +2733,12 @@ def SetPlayheadFollow(self, enable_follow):
     @pyqtSlot(str, str, bool)
     def addSelection(self, item_id, item_type, clear_existing=False):
         """ Add the selected item to the current selection """
-
-        # Add to main window
-        self.window.addSelection(item_id, item_type, clear_existing)
+        self.window.SelectionAdded.emit(item_id, item_type, clear_existing)
 
     @pyqtSlot(str, str)
     def removeSelection(self, item_id, item_type):
         """ Remove the selected clip from the selection """
-
-        # Remove from main window
-        self.window.removeSelection(item_id, item_type)
+        self.window.SelectionRemoved.emit(item_id, item_type)
 
     @pyqtSlot(str, str)
     def qt_log(self, level="INFO", message=None):
@@ -2759,16 +2755,15 @@ def qt_log(self, level="INFO", message=None):
             level = levels.get(level, logging.INFO)
         self.log_fn(level, message)
 
+    def update_scroll(self, newScroll):
+        """Force a scroll event on the timeline (i.e. the zoom slider is moving, so we need to scroll the timeline)"""
+        # Get access to timeline scope and set scale to new computed value
+        self.run_js(JS_SCOPE_SELECTOR + ".setScroll(" + str(newScroll) + ");")
+
     # Handle changes to zoom level, update js
-    def update_zoom(self, newValue):
+    def update_zoom(self, newScale):
         _ = get_app()._tr
 
-        # Convert slider value (passed in) to a scale (in seconds)
-        newScale = zoomToSeconds(newValue)
-
-        # Set zoom label
-        self.window.zoomScaleLabel.setText(_("{} seconds").format(newScale))
-
         # Determine X coordinate of cursor (to center zoom on)
         cursor_y = self.mapFromGlobal(self.cursor().pos()).y()
         if cursor_y >= 0:
@@ -2795,13 +2790,13 @@ def update_zoom(self, newValue):
     def wheelEvent(self, event):
         if event.modifiers() & Qt.ControlModifier:
             event.accept()
-            zoom = self.window.sliderZoom
-            # For each 120 (standard scroll unit) adjust the zoom slider
-            tick_scale = 120
-            steps = int(event.angleDelta().y() / tick_scale)
-            delta = zoom.pageStep() * steps
-            log.debug("Zooming by %d steps", -steps)
-            zoom.setValue(zoom.value() - delta)
+
+            # Modify zooms factor
+            if event.angleDelta().y() > 0:
+                get_app().window.sliderZoomWidget.zoomIn()
+            else:
+                get_app().window.sliderZoomWidget.zoomOut()
+
         else:
             super().wheelEvent(event)
 
@@ -2911,6 +2906,11 @@ def callback(self, data, callback_data):
         self.run_js(JS_SCOPE_SELECTOR + ".getJavaScriptPosition({}, {});"
             .format(event_position.x(), event_position.y()), partial(callback, self, data))
 
+    @pyqtSlot(list)
+    def ScrollbarChanged(self, new_positions):
+        """Timeline scrollbars changed"""
+        get_app().window.TimelineScrolled.emit(new_positions)
+
     # Resize timeline
     @pyqtSlot(float)
     def resizeTimeline(self, new_duration):
@@ -3180,7 +3180,9 @@ def __init__(self, window):
         app.updates.add_listener(self)
 
         # Connect zoom functionality
-        window.sliderZoom.valueChanged.connect(self.update_zoom)
+        window.TimelineZoom.connect(self.update_zoom)
+        window.TimelineScroll.connect(self.update_scroll)
+        window.TimelineCenter.connect(self.centerOnPlayhead)
 
         # Connect waveform generation signal
         window.WaveformReady.connect(self.Waveform_Ready)