[vlc-commits] qml: added scaling ability to maindisplay playlist after resize

[Fatih Uzunoglu]

vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Thu Jul 30 00:04:24 2020 +0300| [41eae6db612b112f89ca33c553074ae1f0f266a0] | committer: Pierre Lamot

qml: added scaling ability to maindisplay playlist after resize

Previously, playlist could not scale after it was resized.
With this patch, following are changed:
* There is a fixed minimum width of dp(225) for maindisplay playlist instead of window width / 8. With a fixed value we can eliminate the problem of playlist getting too small while window width getting smaller.
* After resizing the playlist and closing it, reopening it will set the size that the user set instead of window width / 4 (the default width).
* After resizing the playlist, its width will be adjusted relative to the window width so that scaling will happen properly. Previously, after resize, its width remained constant even when window width changes.

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=41eae6db612b112f89ca33c553074ae1f0f266a0
---

 modules/gui/qt/medialibrary/qml/MainDisplay.qml | 43 +++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/MainDisplay.qml b/modules/gui/qt/medialibrary/qml/MainDisplay.qml
index 89a26979de..781c5f4f3c 100644
--- a/modules/gui/qt/medialibrary/qml/MainDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MainDisplay.qml
@@ -46,6 +46,16 @@ Widgets.NavigableFocusScope {
         medialib.reload()
     }
 
+    /// playlist width properties used for binding after resize:
+    // This binding allows playlist to scale when root width changes *even after playlist is resized*
+    // New supposed width of the playlist = root.width / 4
+    // Playlist width difference after playlist resize event: (playlistColumn.__newWidth - playlistColumn.__oldRootWidth / 4)
+    // Scaling factor of the width difference for root width changes: (root.width / playlistColumn.__oldRootWidth)
+    readonly property real playlistDefaultWidth: root.width / 4
+    readonly property real playlistBindingWidth: playlistDefaultWidth + ((playlistColumn.__newWidth - playlistColumn.__oldRootWidth / 4) * 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)
 
@@ -218,6 +228,8 @@ Widgets.NavigableFocusScope {
                         focus: false
 
                         property bool expanded: mainInterface.playlistDocked && mainInterface.playlistVisible
+                        property int __newWidth : root.width / 4
+                        property int __oldRootWidth : root.width
 
                         onExpandedChanged: {
                             if (expanded) {
@@ -235,10 +247,21 @@ Widgets.NavigableFocusScope {
                             properties: "width"
                             duration: 150
                             from: 0
-                            to: root.width / 4
+                            to: playlistBindingWidth
                             onStarted: {
                                 playlistColumn.visible = true
                             }
+
+                            onStopped: {
+                                playlistColumn.width = Qt.binding(function() {
+                                    if (playlistBindingWidth < playlistMinWidth)
+                                        return playlistMinWidth
+                                    else if (playlistBindingWidth > playlistMaxWidth)
+                                        return playlistMaxWidth
+                                    else
+                                        return playlistBindingWidth
+                                })
+                            }
                         }
 
                         PropertyAnimation {
@@ -321,13 +344,27 @@ Widgets.NavigableFocusScope {
                                             if(drag.active){
                                                 var delta = mouseX - _initialPos
                                                 var newWidth = playlistColumn.width - delta
-
-                                                if (newWidth < root.width / 2 && newWidth > root.width / 8)
+                                                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
+                                            })
                                         }
                                         cursorShape: Qt.SizeHorCursor
                                     }