Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
9bea3945 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/ControlLayout: Add the 'contentWidth' property

- - - - -
a421045f by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/ControlLayout: Add the 'alignment' property

- - - - -
96e3f573 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/ControlLayout: Add the 'count' alias

- - - - -
44bc4d84 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/ControlLayout: Update the 'implicitWidth' property

- - - - -
3efc5ce6 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/ControlLayout: Add the 'preferredWidth' support

- - - - -
aec938f0 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/ArtworkInfoWidget: Add the 'preferredWidth' property

Co-authored-by: Fatih Uzunoglu <fuzu...@outlook.com>

- - - - -
a1f2bda7 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/PlayerControlLayout: Update resize and collpasing behavior

This patch adds dynamic scaling for the loaders based on their internal 
content. It's
notably useful to gain space when one of them is empty. We have that scenario 
for the
classic controls layout.

- - - - -
72c34ac1 by Benjamin Arnaud at 2023-04-07T12:11:27+00:00
qml/PlayerControlLayout: Update the 'layoutSpacing' property

The spacing between controls feels more optimal with the 
'margin_xlarge' value.

- - - - -


3 changed files:

- modules/gui/qt/player/qml/ControlLayout.qml
- modules/gui/qt/player/qml/PlayerControlLayout.qml
- modules/gui/qt/player/qml/controlbarcontrols/ArtworkInfoWidget.qml


Changes:

=====================================
modules/gui/qt/player/qml/ControlLayout.qml
=====================================
@@ -32,27 +32,9 @@ FocusScope {
 
     // Properties
 
-    readonly property real minimumWidth: {
-        var count = repeater.count
+    property int contentWidth: 0
 
-        if (count === 0)
-            return 0
-
-        var size = 0
-
-        for (var i = 0; i < count; ++i) {
-            var item = repeater.itemAt(i)
-
-            if (item.minimumWidth === undefined)
-                size += item.implicitWidth
-            else
-                size += item.minimumWidth
-        }
-
-        return size + ((count - 1) * playerControlLayout.spacing)
-    }
-
-    property bool rightAligned: false
+    property int alignment: 0
 
     property var altFocusAction: Navigation.defaultNavigationUp
 
@@ -63,6 +45,8 @@ FocusScope {
 
     // Aliases
 
+    property alias count: repeater.count
+
     property alias model: repeater.model
 
     // Signals
@@ -71,7 +55,23 @@ FocusScope {
 
     // Settings
 
-    implicitWidth: minimumWidth
+    implicitWidth: {
+        if (count === 0)
+            return 0
+
+        var size = 0
+
+        for (var i = 0; i < count; ++i) {
+            size += repeater.itemAt(i).preferredWidth
+        }
+
+        if (alignment)
+            // NOTE: We provision the spacing induced by the alignment item.
+            return size + count * rowLayout.spacing
+        else
+            return size + (count - 1) * rowLayout.spacing
+    }
+
     implicitHeight: rowLayout.implicitHeight
 
     Navigation.navigable: {
@@ -102,6 +102,28 @@ FocusScope {
             altFocusAction()
     }
 
+    function _updateContentWidth() {
+        var size = 0
+
+        for (var i = 0; i < count; i++) {
+
+            var item = repeater.itemAt(i)
+
+            if (item === null || item.isActive === false)
+                continue
+
+            var width = item.width
+
+            if (width)
+                size += width + spacing
+        }
+
+        if (size)
+            contentWidth = size - spacing
+        else
+            contentWidth = size
+    }
+
     // Children
 
     RowLayout {
@@ -112,20 +134,26 @@ FocusScope {
         spacing: playerControlLayout.spacing
 
         Item {
-            Layout.fillWidth: rightAligned
+            Layout.fillWidth: (controlLayout.alignment === Qt.AlignRight)
         }
 
         Repeater {
             id: repeater
 
             // NOTE: We apply the 'navigation chain' after adding the item.
-            onItemAdded: item.applyNavigation()
+            onItemAdded: {
+                item.applyNavigation()
+
+                controlLayout._updateContentWidth()
+            }
 
             onItemRemoved: {
                 // NOTE: We update the 'navigation chain' after removing the 
item.
                 item.removeNavigation()
 
                 item.recoverFocus(index)
+
+                controlLayout._updateContentWidth()
             }
 
             delegate: Loader {
@@ -133,6 +161,9 @@ FocusScope {
 
                 // Properties
 
+                // NOTE: This is required for contentWidth because the visible 
property is delayed.
+                property bool isActive: (x + minimumWidth <= rowLayout.width)
+
                 property int minimumWidth: {
                     if (expandable)
                         return item.minimumWidth
@@ -142,6 +173,9 @@ FocusScope {
                         return 0
                 }
 
+                property int preferredWidth: (item && item.preferredWidth) ? 
item.preferredWidth
+                                                                           : 
minimumWidth
+
                 readonly property bool expandable: (item && item.minimumWidth 
!== undefined)
 
                 // Settings
@@ -154,22 +188,27 @@ FocusScope {
 
                 Layout.minimumWidth: minimumWidth
 
-                // NOTE: -1 resets to the implicit maximum width.
-                Layout.maximumWidth: (item) ? item.implicitWidth : -1
+                Layout.preferredWidth: preferredWidth
+
+                Layout.maximumWidth: preferredWidth
 
-                Layout.alignment: Qt.AlignVCenter | (rightAligned ? 
Qt.AlignRight : Qt.AlignLeft)
+                Layout.alignment: (Qt.AlignVCenter | controlLayout.alignment)
 
                 BindingCompat {
                     delayed: true // this is important
                     target: loader
                     property: "visible"
-                    value: (loader.x + minimumWidth <= rowLayout.width)
+                    value: isActive
                 }
 
                 // Events
 
                 Component.onCompleted: 
repeater.countChanged.connect(controlLayout._handleFocus)
 
+                onIsActiveChanged: controlLayout._updateContentWidth()
+
+                onWidthChanged: controlLayout._updateContentWidth()
+
                 onActiveFocusChanged: {
                     if (activeFocus && (!!item && !item.focus)) {
                         recoverFocus()
@@ -328,7 +367,7 @@ FocusScope {
         }
 
         Item {
-            Layout.fillWidth: !rightAligned
+            Layout.fillWidth: (controlLayout.alignment === Qt.AlignLeft)
         }
     }
 }


=====================================
modules/gui/qt/player/qml/PlayerControlLayout.qml
=====================================
@@ -32,7 +32,7 @@ FocusScope {
 
     property real spacing: VLCStyle.margin_normal // spacing between controls
 
-    property real layoutSpacing: VLCStyle.margin_xxlarge // spacing between 
layouts (left, center, and right)
+    property real layoutSpacing: VLCStyle.margin_xlarge // spacing between 
layouts (left, center, and right)
 
     property int identifier: -1
 
@@ -48,35 +48,96 @@ FocusScope {
         colorSet: ColorContext.Window
     }
 
+    // Private
+
+    property int _minimumSpacing: layoutSpacing - spacing
+
     // Signals
 
     signal requestLockUnlockAutoHide(bool lock)
 
     // Settings
 
-    implicitWidth: loaderLeft.implicitWidth + loaderCenter.implicitWidth
-                   + loaderRight.implicitWidth + 2 * layoutSpacing
-
     implicitHeight: VLCStyle.maxControlbarControlHeight
 
     // Events
 
-    Component.onCompleted: console.assert(identifier >= 0)
+    Component.onCompleted: {
+        console.assert(identifier >= 0)
+
+        _updateLayout()
+    }
+
+    onWidthChanged: _updateLayout()
+
+    // Functions
+
+    function _updateLayout() {
+        var item = loaderCenter.item
+
+        // NOTE: Sometimes this gets called before the item is loaded.
+        if (item === null)
+            return
+
+        if (item.count) {
+
+            loaderCenter.width = Math.min(loaderCenter.implicitWidth, width)
+
+            loaderLeft.width = loaderCenter.x - _minimumSpacing
+
+            loaderRight.width = width - loaderCenter.x - loaderCenter.width - 
_minimumSpacing
+
+        } else if (loaderRight.item.count) {
+
+            var implicitLeft = loaderLeft.implicitWidth
+            var implicitRight = loaderRight.implicitWidth
+
+            var total = implicitLeft + implicitRight
+
+            var size = total + _minimumSpacing
+
+            if (size > width) {
+                size = width - _minimumSpacing
+
+                // NOTE: When both sizes are equals we expand on the left.
+                if (implicitLeft >= implicitRight) {
+
+                    loaderRight.width = Math.round(size * (implicitRight / 
total))
+
+                    var contentWidth = loaderRight.item.contentWidth
+
+                    // NOTE: We assign the remaining width based on the 
contentWidth.
+                    if (contentWidth)
+                        loaderLeft.width = width - contentWidth - 
_minimumSpacing
+                    else
+                        loaderLeft.width = width
+                } else {
+                    loaderLeft.width = Math.round(size * (implicitLeft / 
total))
+
+                    var contentWidth = loaderLeft.item.contentWidth
+
+                    // NOTE: We assign the remaining width based on the 
contentWidth.
+                    if (contentWidth)
+                        loaderRight.width = width - contentWidth - 
_minimumSpacing
+                    else
+                        loaderRight.width = width
+                }
+            } else {
+                loaderLeft.width = implicitLeft
+                loaderRight.width = implicitRight
+            }
+        } else
+            loaderLeft.width = width
+    }
 
     // Children
 
     Loader {
         id: loaderLeft
 
-        anchors {
-            right: loaderCenter.left
-            left: parent.left
-            top: parent.top
-            bottom: parent.bottom
-
-            // Spacing for the filler item acts as padding
-            rightMargin: layoutSpacing - spacing
-        }
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
 
         active: !!playerControlLayout.model && !!playerControlLayout.model.left
 
@@ -90,6 +151,8 @@ FocusScope {
                 ctx: MainCtx
             }
 
+            alignment: Qt.AlignLeft
+
             focus: true
 
             altFocusAction: Navigation.defaultNavigationRight
@@ -97,6 +160,10 @@ FocusScope {
             Navigation.parentItem: playerControlLayout
             Navigation.rightItem: loaderCenter.item
 
+            onImplicitWidthChanged: playerControlLayout._updateLayout()
+
+            onCountChanged: playerControlLayout._updateLayout()
+
             onRequestLockUnlockAutoHide: 
playerControlLayout.requestLockUnlockAutoHide(lock)
         }
     }
@@ -104,16 +171,12 @@ FocusScope {
     Loader {
         id: loaderCenter
 
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            top: parent.top
-            bottom: parent.bottom
-        }
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
 
-        active: !!playerControlLayout.model && 
!!playerControlLayout.model.center
+        anchors.horizontalCenter: parent.horizontalCenter
 
-        width: (parent.width < implicitWidth) ? parent.width
-                                              : implicitWidth
+        active: !!playerControlLayout.model && 
!!playerControlLayout.model.center
 
         sourceComponent: ControlLayout {
             model: ControlListFilter {
@@ -131,6 +194,10 @@ FocusScope {
             Navigation.leftItem: loaderLeft.item
             Navigation.rightItem: loaderRight.item
 
+            onImplicitWidthChanged: playerControlLayout._updateLayout()
+
+            onCountChanged: playerControlLayout._updateLayout()
+
             onRequestLockUnlockAutoHide: 
playerControlLayout.requestLockUnlockAutoHide(lock)
         }
     }
@@ -138,15 +205,9 @@ FocusScope {
     Loader {
         id: loaderRight
 
-        anchors {
-            left: loaderCenter.right
-            right: parent.right
-            top: parent.top
-            bottom: parent.bottom
-
-            // Spacing for the filler item acts as padding
-            leftMargin: layoutSpacing - spacing
-        }
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
 
         active: !!playerControlLayout.model && 
!!playerControlLayout.model.right
 
@@ -158,7 +219,7 @@ FocusScope {
                 ctx: MainCtx
             }
 
-            rightAligned: true
+            alignment: Qt.AlignRight
 
             focus: true
 
@@ -167,6 +228,10 @@ FocusScope {
             Navigation.parentItem: playerControlLayout
             Navigation.leftItem: loaderCenter.item
 
+            onImplicitWidthChanged: playerControlLayout._updateLayout()
+
+            onCountChanged: playerControlLayout._updateLayout()
+
             onRequestLockUnlockAutoHide: 
playerControlLayout.requestLockUnlockAutoHide(lock)
         }
     }


=====================================
modules/gui/qt/player/qml/controlbarcontrols/ArtworkInfoWidget.qml
=====================================
@@ -33,6 +33,12 @@ AbstractButton {
     readonly property real minimumWidth: coverRect.implicitWidth +
                                          + (leftPadding + rightPadding)
 
+    readonly property int preferredWidth: minimumWidth + contentItem.spacing * 
2
+                                          +
+                                          Math.max(titleLabel.implicitWidth,
+                                                   artistLabel.implicitWidth,
+                                                   
progressIndicator.implicitWidth)
+
     property bool _keyPressed: false
 
     text: I18n.qtr("Open player")



View it on GitLab: 
https://code.videolan.org/videolan/vlc/-/compare/34e98057dd9dc50b5e33209072441cdc44d20e81...72c34ac178d835a549920ece08a0e4edefe12351

-- 
View it on GitLab: 
https://code.videolan.org/videolan/vlc/-/compare/34e98057dd9dc50b5e33209072441cdc44d20e81...72c34ac178d835a549920ece08a0e4edefe12351
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance
_______________________________________________
vlc-commits mailing list
vlc-commits@videolan.org
https://mailman.videolan.org/listinfo/vlc-commits

Reply via email to