modules/gui/qt/Makefile.am

@@ -847,6 +847,7 @@ libqt_plugin_la_QML = \
 	gui/qt/util/qml/SelectableDelegateModel.qml \
 	gui/qt/util/qml/MultipleBinding.qml \
 	gui/qt/util/qml/FlickableScrollHandler.qml \
+	gui/qt/util/qml/ViewDragAutoScrollHandler.qml \
 	gui/qt/widgets/qml/ActionButtonOverlay.qml \
 	gui/qt/widgets/qml/ActionButtonPrimary.qml \
 	gui/qt/widgets/qml/BannerTabButton.qml \

modules/gui/qt/dialogs/toolbar/qml/EditorDNDDelegate.qml

@@ -56,11 +56,13 @@ Control {
 
         drag.onActiveChanged: {
             if (drag.active) {
+                dragAutoScrollHandler.dragItem = loader
                 root.dragStarted(controlId)
                 removeInfoRectVisible = true
                 drag.target.Drag.start()
 
             } else {
+                dragAutoScrollHandler.dragItem = null
                 drag.target.Drag.drop()
                 removeInfoRectVisible = false
                 root.dragStopped(controlId)
@@ -154,11 +156,6 @@ Control {
 
             Drag.source: control
 
-            onXChanged: {
-                if (Drag.active)
-                    root.handleScroll(this)
-            }
-
             onLoaded: {
                 item.paintOnly = true
                 item.enabled = false

modules/gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml

@@ -24,6 +24,7 @@ import org.videolan.vlc 0.1
 
 import "qrc:///style/"
 import "qrc:///widgets/" as Widgets
+import "qrc:///util/" as Util
 
 Rectangle{
     id: root
@@ -269,75 +270,14 @@ Rectangle{
         x: -1
         y: -1
 
-        onXChanged: {
-            if (Drag.active)
-                handleScroll(this)
+        Drag.onActiveChanged: {
+            dragAutoScrollHandler.dragItem = Drag.active ? this : null
         }
     }
 
-    function handleScroll(dragItem) {
-        var view = _viewThatContainsDrag
+    Util.ViewDragAutoScrollHandler {
+        id: dragAutoScrollHandler
 
-        if (view === undefined || view === null) {
-            if (!!scrollAnimation.target)
-                view = scrollAnimation.target
-            else
-                return
-        }
-
-        var dragItemX = dragItem.x
-        var viewPos   = view.mapToItem(root, view.x, view.y)
-
-        var margin = VLCStyle.dp(25, VLCStyle.scale)
-
-        var leftMark  = (viewPos.x + margin)
-        var rightMark = (viewPos.x + view.width - margin)
-
-        scrollAnimation.target = view
-        scrollAnimation.dragItem = dragItem
-
-        if (!view.contains(view.mapFromItem(root, dragItemX, dragItem.y))) {
-            scrollAnimation.direction = 0
-        } else {
-            if (!view.atXBeginning && dragItemX <= leftMark) {
-                scrollAnimation.direction = -1
-            } else if (!view.atXEnd && dragItemX >= rightMark) {
-                scrollAnimation.direction = 1
-            } else {
-                scrollAnimation.direction = 0
-            }
-        }
-    }
-
-    SmoothedAnimation {
-        id: scrollAnimation
-
-        property var dragItem
-        property int direction: 0 // -1: left, 0: stop, 1: right
-
-        onDirectionChanged: {
-            if (direction === 0)
-                stop()
-        }
-
-        to: {
-            if (direction === -1)
-                0
-            else if (direction === 1 && !!target)
-                target.contentWidth - target.width + target.footerItem.width
-            else
-                0
-        }
-
-        running: {
-            if (!!dragItem && (direction === -1 || direction === 1))
-                dragItem.Drag.active
-            else
-                false
-        }
-
-        property: "contentX"
-        velocity: VLCStyle.dp(150, VLCStyle.scale)
-        reversingMode: SmoothedAnimation.Immediate
+        view: _viewThatContainsDrag ? _viewThatContainsDrag : null
     }
 }

modules/gui/qt/dialogs/toolbar/qml/ToolbarEditorButtonList.qml

@@ -127,7 +127,7 @@ GridView {
 
         drag.onActiveChanged: {
             if (drag.active) {
-                root.dragStarted(mIndex)
+                dragStarted(mIndex)
 
                 buttonDragItem.text = PlayerControlbarControls.controlList[model.index].label
                 buttonDragItem.Drag.source = this
@@ -137,7 +137,7 @@ GridView {
             } else {
                 buttonDragItem.Drag.drop()
 
-                root.dragStopped(mIndex)
+                dragStopped(mIndex)
 
                 GridView.delayRemove = false
             }

modules/gui/qt/playlist/qml/PlaylistDelegate.qml

@@ -272,7 +272,7 @@ T.Control {
                 // FIXME: Override dragItem's position
                 var pos = mapToItem(dragItem.parent, mouseX, mouseY)
                 dragItem.x = pos.x + VLCStyle.dp(15)
-                dragItem.y = pos.y // y should be changed after x
+                dragItem.y = pos.y
             }
         }
     }

modules/gui/qt/playlist/qml/PlaylistListView.qml

@@ -162,45 +162,6 @@ Control {
                 return {"title": item.title, "cover": item.artwork}
             }))
         }
-
-        property int _scrollingDirection: 0
-
-        onYChanged: {
-            var dragItemY = dragItem.y
-            var viewY     = root.mapFromItem(listView, listView.x, listView.y).y
-
-            var margin = VLCStyle.dp(20, VLCStyle.scale)
-
-            var topDiff    = (viewY + margin) - dragItemY
-            var bottomDiff = dragItemY - (viewY + listView.height - toolbar.height - margin)
-
-            if (topDiff > 0)
-                _scrollingDirection = -1
-            else if (bottomDiff > 0)
-                _scrollingDirection = 1
-            else
-                _scrollingDirection = 0
-        }
-
-        SmoothedAnimation {
-            id: upAnimation
-            target: listView
-            property: "contentY"
-            to: 0
-            running: dragItem._scrollingDirection === -1 && dragItem.visible && !target.listView.atYBeginning
-
-            velocity: VLCStyle.dp(225, VLCStyle.scale)
-        }
-
-        SmoothedAnimation {
-            id: downAnimation
-            target: listView
-            property: "contentY"
-            to: target.contentHeight - target.height + target.footerItem.height
-            running: dragItem._scrollingDirection === 1 && dragItem.visible && !target.listView.atYEnd
-
-            velocity: VLCStyle.dp(225, VLCStyle.scale)
-        }
     }
 
     PlaylistContextMenu {
@@ -328,14 +289,11 @@ Control {
                 playlistId: MainCtx.mainPlaylist
             }
 
+            dragAutoScrollDragItem: dragItem
+
             fadeColor: background.usingAcrylic ? undefined
                                                : background.alternativeColor
 
-            Binding on fadeColor {
-                when: downAnimation.running || upAnimation.running
-                value: undefined
-            }
-
             property int shiftIndex: -1
 
             property PlaylistDelegate delegateContainsDrag: null

modules/gui/qt/util/qml/ViewDragAutoScrollHandler.qml

+/*****************************************************************************
+ * Copyright (C) 2021 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+
+import "qrc:///style/"
+
+QtObject {
+    id: root
+
+    property Flickable view: null
+    property Item dragItem: null
+
+    property int orientation: (view && view.orientation !== undefined) ? view.orientation
+                                                                       : Qt.Vertical
+    property real margin: VLCStyle.dp(20)
+
+    readonly property bool scrolling: animation.running // for convenience
+    property alias scrollingDirection: animation.direction
+
+    property alias velocity: animation.velocity
+
+    enum Direction {
+        Forward,
+        Backward,
+        None // not scrolling
+    }
+
+    readonly property SmoothedAnimation _animation: SmoothedAnimation {
+        id: animation
+        target: root.view
+        property: root.orientation === Qt.Vertical ? "contentY"
+                                                   : "contentX"
+        reversingMode: SmoothedAnimation.Immediate
+        easing.type: Easing.OutQuad
+
+        velocity: VLCStyle.dp(200)
+        maximumEasingTime: 1000
+
+        readonly property Timer _timer: Timer {
+            interval: 100
+        }
+
+        readonly property ScrollBar _scrollBar: (root.view) ? ((root.orientation === Qt.Vertical) ? root.view.ScrollBar.vertical
+                                                                                                  : root.view.ScrollBar.horizontal)
+                                                            : null
+
+        readonly property int direction: {
+            if (!root.dragItem || !root.view)
+                return ViewDragAutoScrollHandler.Direction.None
+
+            if (!root.dragItem.visible || !root.view.visible)
+                return ViewDragAutoScrollHandler.Direction.None
+
+            var pos = root.view.mapFromItem(root.dragItem.parent,
+                                            root.dragItem.x,
+                                            root.dragItem.y)
+
+            var size, mark
+            if (root.orientation === Qt.Vertical) {
+                size = root.view.height
+                mark = pos.y
+            } else {
+                size = root.view.width
+                mark = pos.x
+            }
+
+            if (size < root.margin * 2.5)
+                return ViewDragAutoScrollHandler.Direction.None
+
+            if (mark < root.margin)
+                return ViewDragAutoScrollHandler.Direction.Backward
+            else if (mark > (size - root.margin))
+                return ViewDragAutoScrollHandler.Direction.Forward
+            else
+                return ViewDragAutoScrollHandler.Direction.None
+        }
+
+        Component.onCompleted: {
+            // prevent direction to bounce
+            _timer.triggered.connect(directionChangedHandler)
+        }
+
+        onDirectionChanged: {
+            _timer.start()
+        }
+
+        function directionChangedHandler() {
+            if (direction === ViewDragAutoScrollHandler.Direction.None) {
+                running = false
+
+                if (_scrollBar)
+                    _scrollBar.active = false // TODO: Use Binding Qt >=5.14
+            } else if (!running) {
+                var _to
+
+                if (direction === ViewDragAutoScrollHandler.Direction.Backward) {
+                    _to = 0
+                } else if (direction === ViewDragAutoScrollHandler.Direction.Forward) {
+                    // FIXME: Is there a better way to calculate extents?
+                    _to = ((root.orientation === Qt.Vertical) ? root.view.contentHeight - root.view.height
+                                                              : root.view.contentWidth - root.view.width)
+                    if (root.view.footerItem !== undefined
+                            && root.view.footerItem
+                            && root.view.footerPositioning === 0 /* inline positioning */)
+                        _to += (root.orientation === Qt.Vertical) ? root.view.footerItem.height
+                                                                  : root.view.footerItem.width
+                    if (root.view.headerItem !== undefined
+                            && root.view.headerItem
+                            && root.view.headerPositioning === 0 /* inline positioning */)
+                        _to += (root.orientation === Qt.Vertical) ? root.view.headerItem.height
+                                                                  : root.view.headerItem.width
+                }
+
+                to = _to
+                running = true
+
+                if (_scrollBar)
+                    _scrollBar.active = true // TODO: Use Binding Qt >= 5.14
+            }
+        }
+    }
+}

modules/gui/qt/vlc.qrc

@@ -28,6 +28,7 @@
         <file alias="Helpers.js">util/qml/Helpers.js</file>
         <file alias="MultipleBinding.qml">util/qml/MultipleBinding.qml</file>
         <file alias="FlickableScrollHandler.qml">util/qml/FlickableScrollHandler.qml</file>
+        <file alias="ViewDragAutoScrollHandler.qml">util/qml/ViewDragAutoScrollHandler.qml</file>
     </qresource>
     <qresource prefix="/toolbar">
         <file alias="faster.svg">pixmaps/faster.svg</file>

modules/gui/qt/widgets/qml/KeyNavigableListView.qml

@@ -22,6 +22,7 @@ import QtGraphicalEffects 1.0
 import org.videolan.vlc 0.1
 
 import "qrc:///style/"
+import "qrc:///util/" as Util
 import "qrc:///util/Helpers.js" as Helpers
 import "qrc:///util/" as Util
 
@@ -99,6 +100,10 @@ FocusScope {
     property alias buttonLeft: buttonLeft
     property alias buttonRight: buttonRight
 
+    property alias dragAutoScrollDragItem: dragAutoScrollHandler.dragItem
+    property alias dragAutoScrollMargin: dragAutoScrollHandler.margin
+    property alias dragAutoScrolling: dragAutoScrollHandler.scrolling
+
     // Signals
 
     signal selectionUpdated(int keyModifiers, int oldIndex, int newIndex)
@@ -287,6 +292,12 @@ FocusScope {
             }
         }
 
+        Util.ViewDragAutoScrollHandler {
+            id: dragAutoScrollHandler
+
+            view: view
+        }
+
         // NOTE: We always want a valid 'currentIndex' by default.
         onCountChanged: if (count && currentIndex === -1) currentIndex = 0
 
@@ -399,7 +410,8 @@ FocusScope {
             readonly property bool requestShow: !view.firstVisibleItem ||
                                                 (!view.firstVisibleItem.activeFocus &&
                                                  // TODO: Qt >5.12 use HoverHandler within the fade:
-                                                 !Helpers.get(view.firstVisibleItem, "hovered", false))
+                                                 !Helpers.get(view.firstVisibleItem, "hovered", false)) &&
+                                                (dragAutoScrollHandler.scrollingDirection !== Util.ViewDragAutoScrollHandler.Backward)
 
             state: (!!listview_id.fadeColor &&
                     view._fadeRectEnoughSize &&
@@ -473,7 +485,8 @@ FocusScope {
             readonly property bool requestShow: !view.lastVisibleItem ||
                                                 (!view.lastVisibleItem.activeFocus &&
                                                  // TODO: Qt >5.12 use HoverHandler within the fade:
-                                                 !Helpers.get(view.lastVisibleItem, "hovered", false))
+                                                 !Helpers.get(view.lastVisibleItem, "hovered", false)) &&
+                                                (dragAutoScrollHandler.scrollingDirection !== Util.ViewDragAutoScrollHandler.Forward)
 
             state: (!!listview_id.fadeColor &&
                     view._fadeRectEnoughSize &&