Merge pull request #4178 from OpenShot/fix-zoom-slider-web-engine

Prevent feedback loop when scrolling timeline on WebEngine backend

Author: jonoomph

src/timeline/js/controllers.js

@@ -69,6 +69,7 @@ App.controller("TimelineCtrl", function ($scope) {
   $scope.track_label = "Track %s";
   $scope.enable_sorting = true;
   $scope.ThumbServer = "http://127.0.0.1/";
+  $scope.ignore_scroll = false;
 
   // Method to set if Qt is detected (which clears demo data
   // and updates the document_is_ready variable in openshot-qt)
@@ -285,13 +286,19 @@ App.controller("TimelineCtrl", function ($scope) {
     var scrolling_tracks = $("#scrolling_tracks");
     var horz_scroll_offset = normalizedScrollValue * timeline_length;
     scrolling_tracks.scrollLeft(horz_scroll_offset);
+
+    $scope.ignore_scroll = true;
+    $("#scrolling_ruler").scrollLeft(horz_scroll_offset);
   };
 
-  // Scroll the timeline horizontally of a certain amount (scrol_value)
+  // Scroll the timeline horizontally of a certain amount
   $scope.scrollLeft = function (scroll_value) {
     var scrolling_tracks = $("#scrolling_tracks");
     var horz_scroll_offset = scrolling_tracks.scrollLeft();
     scrolling_tracks.scrollLeft(horz_scroll_offset + scroll_value);
+
+    $scope.ignore_scroll = true;
+    $("#scrolling_ruler").scrollLeft(horz_scroll_offset + scroll_value);
   };
 
   // Center the timeline on a given time position

src/timeline/js/directives/ruler.js

@@ -54,6 +54,22 @@ App.directive("tlScrollableTracks", function () {
         $("#scrolling_ruler").scrollLeft(element.scrollLeft());
         $("#progress_container").scrollLeft(element.scrollLeft());
 
+        if (scope.ignore_scroll == true) {
+          // Reset flag and ignore scroll propagation
+          scope.$apply( () => {
+            scope.ignore_scroll = false;
+            scope.scrollLeft = element[0].scrollLeft;
+          })
+          // exit at this point
+          return;
+
+        } else {
+          // Only update scroll position
+          scope.$apply( () => {
+            scope.scrollLeft = element[0].scrollLeft;
+          })
+        }
+
         // Send scrollbar position to Qt
         if (scope.Qt) {
            // Calculate scrollbar positions (left and right edge of scrollbar)

src/windows/views/webview.py

@@ -2750,6 +2750,10 @@ def update_scroll(self, newScroll):
         # Get access to timeline scope and set scale to new computed value
         self.run_js(JS_SCOPE_SELECTOR + ".setScroll(" + str(newScroll) + ");")
 
+        # This seems to make web-engine zoom slider scroll events go smoother
+        # TODO: remove this if we can find a better approach.
+        QCoreApplication.processEvents()
+
     # Handle changes to zoom level, update js
     def update_zoom(self, newScale):
         _ = get_app()._tr