Merge pull request #4113 from OpenShot/zoom-slider

New Zoom Slider Widget - Modernizing and simplifying timeline scrolling, panning, and zooming 🥳

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/index.html

@@ -51,7 +51,7 @@
 				<div class="playhead-line-small"></div>
 			</div>
 			<!-- Ruler extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
-			<canvas tl-ruler id="ruler" width="{{canvasMaxWidth(getTimelineWidth(1024) + 50)}}px" height="39"></canvas>
+			<canvas tl-ruler id="ruler" width="{{canvasMaxWidth(getTimelineWidth(0) + 6)}}px" height="39"></canvas>
 
 			<!-- MARKERS --> 
 			<span class="ruler_marker" id="marker_for_{{marker.id}}">
@@ -76,9 +76,9 @@
 		</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(1024)}}px; padding-bottom: 2px;">
+			<div id="track-container" tl-track tl-multi-selectable style="width: {{getTimelineWidth(0) - 6}}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(1024)}}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) - 6}}px;">
 				</div>
 
 				<!-- CLIPS -->

src/timeline/js/controllers.js

@@ -107,11 +107,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);
   };
@@ -279,10 +274,19 @@ App.controller("TimelineCtrl", function ($scope) {
     });
 
     // Scroll back to correct cursor time (minus the difference of the cursor location)
-    var new_cursor_x = Math.round((cursor_time * $scope.pixelsPerSecond) - center_x);
+    var new_cursor_x = Math.max(0, Math.round((cursor_time * $scope.pixelsPerSecond) - center_x));
+    scrolling_tracks.scrollLeft(new_cursor_x + 1); // force scroll event
     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");
@@ -948,22 +952,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
@@ -1389,6 +1391,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
@@ -205,33 +217,3 @@ App.directive("tlRuler", function ($timeout) {
 
   };
 });
-
-
-// The HTML5 canvas ruler
-App.directive("tlRulertime", function () {
-  return {
-    restrict: "A",
-    link: function (scope, element, attrs) {
-      //on click of the ruler canvas, jump playhead to the clicked spot
-      element.on("mousedown", function () {
-        var playhead_seconds = 0.0;
-        // Update playhead
-        scope.movePlayhead(playhead_seconds);
-        scope.previewFrame(playhead_seconds);
-
-      });
-
-      // 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 = 0.0;
-          // Update playhead
-          scope.movePlayhead(playhead_seconds);
-          scope.previewFrame(playhead_seconds);
-        }
-      });
-
-
-    }
-  };
-});

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/timeline/media/css/main.css

@@ -1,7 +1,7 @@
 html {
     height: 100%;
 }
-body { 
+body {
 	height: 100%;
     margin: 0;
     background-repeat: no-repeat;
@@ -161,12 +161,12 @@ img {
 .snapping-line.ng-hide-add.ng-hide-add-active { opacity:0.0; }
 
 /* Scrollbar style */
-::-webkit-scrollbar { width: 0.9em; height: 0.9em; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-thumb { background-color: #4b92ad; border-radius: 0.45em; }
 
 ::-webkit-scrollbar-track {
   background: #000000;
-  box-shadow: inset 0 0 0.6em rgba(75,196,233,1.0); 
+  box-shadow: inset 0 0 0.6em rgba(75,196,233,1.0);
   border-radius: 0.45em;
 }
 

src/windows/main_window.py

@@ -29,7 +29,6 @@
 
 import os
 import shutil
-import sys
 import webbrowser
 from copy import deepcopy
 from time import sleep
@@ -46,12 +45,11 @@
     QMessageBox, QDialog, QFileDialog, QInputDialog,
     QAction, QActionGroup, QSizePolicy,
     QStatusBar, QToolBar, QToolButton,
-    QLineEdit, QSlider, QLabel, QComboBox, QTextEdit
+    QLineEdit, QComboBox, QTextEdit
 )
 
 from classes import exceptions, info, settings, qt_types, ui_util, updates
 from classes.app import get_app
-from classes.conversion import zoomToSeconds, secondsToZoom
 from classes.exporters.edl import export_edl
 from classes.exporters.final_cut_pro import export_xml
 from classes.importers.edl import import_edl
@@ -109,6 +107,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 +1874,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 +2292,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.selection_timer.start()
+
     # Remove from the selected items
     def removeSelection(self, item_id, item_type):
         # Remove existing selection (if any)
@@ -2318,8 +2326,14 @@ def removeSelection(self, item_id, item_type):
             self.show_property_id = self.selected_effects[0]
             self.show_property_type = item_type
 
-        # Change selected item in properties view
+        # Change selected item
         self.show_property_timer.start()
+        self.selection_timer.start()
+
+    def emit_selection_signal(self):
+        """Emit a signal for selection changed. Callback for selection timer."""
+        # 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 """
@@ -2550,35 +2564,24 @@ def setup_toolbars(self):
 
         # Hook up caption editor signal
         self.captionTextEdit.textChanged.connect(self.captionTextEdit_TextChanged)
-        self.caption_save_timer = QTimer()
+        self.caption_save_timer = QTimer(self)
         self.caption_save_timer.setInterval(100)
         self.caption_save_timer.setSingleShot(True)
         self.caption_save_timer.timeout.connect(self.caption_editor_save)
         self.CaptionTextLoaded.connect(self.caption_editor_load)
         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)
@@ -2866,11 +2869,19 @@ def __init__(self, *args, mode=None):
         # to update the property model hundreds of times)
         self.show_property_id = None
         self.show_property_type = None
-        self.show_property_timer = QTimer()
+        self.show_property_timer = QTimer(self)
         self.show_property_timer.setInterval(100)
         self.show_property_timer.setSingleShot(True)
         self.show_property_timer.timeout.connect(self.show_property_timeout)
 
+        # Selection timer
+        # Timer to use a delay before emitting selection signal (to prevent a mass selection from trying
+        # to update the zoom slider widget hundreds of times)
+        self.selection_timer = QTimer(self)
+        self.selection_timer.setInterval(100)
+        self.selection_timer.setSingleShot(True)
+        self.selection_timer.timeout.connect(self.emit_selection_signal)
+
         # Setup video preview QWidget
         self.videoPreview = VideoWidget()
         self.tabVideo.layout().insertWidget(0, self.videoPreview)
@@ -2886,6 +2897,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 +2968,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()