[vlc-devel] [PATCH 3/3] qml: use HorizontalResizeHandle to make playlist horizontally resizable

[Prince Gupta]

---
 .../gui/qt/medialibrary/qml/MainDisplay.qml   | 139 ++++++------------
 1 file changed, 49 insertions(+), 90 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/MainDisplay.qml b/modules/gui/qt/medialibrary/qml/MainDisplay.qml
index cfd6f12189..e61a2bfe51 100644
--- a/modules/gui/qt/medialibrary/qml/MainDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MainDisplay.qml
@@ -46,16 +46,6 @@ Widgets.NavigableFocusScope {
         medialib.reload()
     }
 
-    /// playlist width properties used for binding after resize:
-    // Binding allows playlist to scale when root width changes *even after playlist is resized*
-    // New supposed width of the playlist = root.width / playlistColumn.__widthFactor
-    // Playlist width difference after playlist resize event: (playlistColumn.__newWidth - playlistColumn.__oldRootWidth / playlistColumn.__widthFactor)
-    // Width factor of the width difference for root width changes: (root.width / playlistColumn.__oldRootWidth)
-    readonly property real playlistDefaultWidth: root.width / playlistColumn.__widthFactor
-    readonly property real playlistBindingWidth: playlistDefaultWidth + ((playlistColumn.__newWidth - playlistColumn.__oldRootWidth / playlistColumn.__widthFactor) * root.width / playlistColumn.__oldRootWidth)
-    readonly property real playlistMinWidth: VLCStyle.dp(225)
-    readonly property real playlistMaxWidth: root.width / 2
-
     function loadView() {
         var found = stackView.loadView(root.pageModel, root.view, root.viewProperties)
 
@@ -223,61 +213,54 @@ Widgets.NavigableFocusScope {
                             right: parent.right
                             bottom: parent.bottom
                         }
-                        width: root.width / __widthFactor
-                        visible: false
                         focus: false
 
                         property bool expanded: mainInterface.playlistDocked && mainInterface.playlistVisible
-                        property double __widthFactor : mainInterface.playlistWidthFactor ? mainInterface.playlistWidthFactor : 4.0
-                        property int __newWidth : root.width / __widthFactor
-                        property int __oldRootWidth : root.width
-
-                        onExpandedChanged: {
-                            if (expanded) {
-                                animateExpand.start()
-                                playlistColumn.forceActiveFocus()
-                            }
-                            else {
-                                animateRetract.start()
-                                stackView.forceActiveFocus()
-                            }
-                        }
 
-                        PropertyAnimation {
-                            id: animateExpand;
-                            easing.type: Easing.InSine
-                            target: playlistColumn;
-                            properties: "width"
-                            duration: 150
-                            from: 0
-                            to: playlistBindingWidth
-                            onStarted: {
-                                playlistColumn.visible = true
+                        state: playlistColumn.expanded ? "expanded" : "collapsed"
+
+                        states: [
+                            State {
+                                name: "expanded"
+                                PropertyChanges {
+                                    target: playlistColumn
+                                    width: resizeHandle.clamp(root.width / resizeHandle.widthFactor,
+                                                              VLCStyle.dp(225),
+                                                              root.width / 2)
+                                    visible: true
+                                }
+                            },
+                            State {
+                                name: "collapsed"
+                                PropertyChanges {
+                                    target: playlistColumn
+                                    width: 0
+                                    visible: false
+                                }
                             }
+                        ]
 
-                            onStopped: {
-                                playlistColumn.width = Qt.binding(function() {
-                                    if (playlistBindingWidth < playlistMinWidth)
-                                        return playlistMinWidth
-                                    else if (playlistBindingWidth > playlistMaxWidth)
-                                        return playlistMaxWidth
-                                    else
-                                        return playlistBindingWidth
-                                })
-                            }
-                        }
+                        transitions: [
+                            Transition {
+                                from: "*"
+                                to: "collapsed"
 
-                        PropertyAnimation {
-                            id: animateRetract;
-                            easing.type: Easing.OutSine
-                            target: playlistColumn;
-                            properties: "width"
-                            duration: 150
-                            to: 0
-                            onStopped: {
-                                playlistColumn.visible = false
+                                SequentialAnimation {
+                                    SmoothedAnimation { target: playlistColumn; property: "width"; easing.type: Easing.OutSine; duration: 150; }
+                                    PropertyAction { target: playlistColumn; property: "visible" }
+                                }
+                            },
+
+                            Transition {
+                                from: "*"
+                                to: "expanded"
+
+                                SequentialAnimation {
+                                    PropertyAction { target: playlistColumn; property: "visible" }
+                                    SmoothedAnimation { target: playlistColumn; property: "width"; easing.type: Easing.OutSine; duration: 150; }
+                                }
                             }
-                        }
+                        ]
 
                         ColumnLayout {
                             anchors.fill: parent
@@ -333,44 +316,20 @@ Widgets.NavigableFocusScope {
                                         color: VLCStyle.colors.glowColor
                                     }
 
-                                    MouseArea {
-                                        id: dragArea
+                                    Widgets.HorizontalResizeHandle {
+                                        id: resizeHandle
                                         anchors {
                                             top: parent.top
                                             bottom: parent.bottom
-                                            horizontalCenter: parent.horizontalCenter
+                                            left: parent.left
                                         }
-                                        width: VLCStyle.dp(8)
-                                        property var _initialPos : playlistColumn.x
-                                        drag { target: parent; axis: Drag.XAxis }
-                                        onPositionChanged: {
-                                            if(drag.active){
-                                                var delta = mouseX - _initialPos
-                                                var newWidth = playlistColumn.width - delta
-                                                if (newWidth < playlistMaxWidth && newWidth > playlistMinWidth)
-                                                    playlistColumn.width -= delta
-                                            }
-                                        }
-                                        onPressed: {
-                                            // This is needed to break binding upon resizing, otherwise sizing glitches occur.
-                                            playlistColumn.width = Number(playlistColumn.width)
 
-                                            dragArea._initialPos = mouseX
-                                            playlistColumn.__oldRootWidth = root.width
-                                        }
-                                        onReleased: {
-                                            playlistColumn.__newWidth = playlistColumn.width
-                                            playlistColumn.width = Qt.binding(function() {
-                                                if (playlistBindingWidth < playlistMinWidth)
-                                                    return playlistMinWidth
-                                                else if (playlistBindingWidth > playlistMaxWidth)
-                                                    return playlistMaxWidth
-                                                else
-                                                    return playlistBindingWidth
-                                            })
-                                            mainInterface.setPlaylistWidthFactor(root.width / playlistColumn.width)
-                                        }
-                                        cursorShape: Qt.SizeHorCursor
+                                        atRight: false
+                                        targetWidth: playlistColumn.width
+                                        sourceWidth: root.width
+                                        widthFactor: mainInterface.playlistWidthFactor
+
+                                        onWidthFactorChanged: mainInterface.setPlaylistWidthFactor(widthFactor)
                                     }
                                 }
                             }
-- 
2.25.1