[vlc-commits] qml: dynamically populate the toolbar editor

Fatih Uzunoglu git at videolan.org
Tue Apr 6 09:55:09 UTC 2021


vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Fri Apr  2 01:22:36 2021 +0300| [53e11113ae6020a6fb78f84dabcfe2815ac6b196] | committer: Pierre Lamot

qml: dynamically populate the toolbar editor

Thanks to MOC, the PlayerIdentifier enum is iteratively
converted to a JavaScript object and passed to the QML-side
through the singleton type "PlayerlistModel" which is
registered with qmlRegisterSingletonType in mainui.cpp.
The new toolbar editor handles the returned object as
 a model and dynamically populates itself per player.

If there is a need to add a new player, just
add a new entry to the PlayerIdentifier enum and
set its identifier accordingly. With the new
approach the new player will automatically
appear in the toolbar editor.

Signed-off-by: Pierre Lamot <pierre at videolabs.io>

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

 .../gui/qt/dialogs/toolbar/qml/EditorTabButton.qml |   1 -
 .../gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml   | 394 +++++++++------------
 2 files changed, 158 insertions(+), 237 deletions(-)

diff --git a/modules/gui/qt/dialogs/toolbar/qml/EditorTabButton.qml b/modules/gui/qt/dialogs/toolbar/qml/EditorTabButton.qml
index c26be0eca0..fe25eb41c5 100644
--- a/modules/gui/qt/dialogs/toolbar/qml/EditorTabButton.qml
+++ b/modules/gui/qt/dialogs/toolbar/qml/EditorTabButton.qml
@@ -24,7 +24,6 @@ import "qrc:///widgets/" as Widgets
 TabButton {
     id: mainPlayerControl
 
-    property int index: 0
     property bool active: index == bar.currentIndex
 
     implicitWidth: VLCStyle.button_width_large
diff --git a/modules/gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml b/modules/gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml
index fbd4e63ac9..4417d11cdd 100644
--- a/modules/gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml
+++ b/modules/gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml
@@ -34,6 +34,8 @@ Rectangle{
 
     property alias removeInfoRectVisible: buttonList.removeInfoRectVisible
 
+    property var _viewThatContainsDrag: undefined
+
     MouseArea {
         anchors.fill: parent
         z: -1
@@ -49,30 +51,19 @@ Rectangle{
 
         TabBar {
             id: bar
-            Layout.preferredHeight: VLCStyle.heightBar_normal
-
             z: 1
 
             background: Item { }
 
-            EditorTabButton {
-                id: mainPlayerTab
-
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
-
-                index: 0
-                text: i18n.qtr("Mainplayer")
-            }
+            Repeater {
+                model: PlayerListModel.model
 
-            EditorTabButton {
-                id: miniPlayerTab
+                delegate: EditorTabButton {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
 
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
-
-                index: 1
-                text: i18n.qtr("Miniplayer")
+                    text: modelData.name
+                }
             }
         }
 
@@ -89,222 +80,172 @@ Rectangle{
                 anchors.fill: parent
                 currentIndex: bar.currentIndex
 
-                RowLayout {
-                    id: mainPlayerLayout
-
-                    Layout.preferredHeight: VLCStyle.heightBar_large * 1.25
-                    Layout.fillWidth: true
-
-                    TextMetrics {
-                        id: leftMetric
-                        text: i18n.qtr("L   E   F   T")
-                        font.pixelSize: VLCStyle.fontSize_xxlarge
-                    }
-
-                    TextMetrics {
-                        id: centerMetric
-                        text: i18n.qtr("C   E   N   T   E   R")
-                        font.pixelSize: VLCStyle.fontSize_xxlarge
-                    }
-
-                    TextMetrics {
-                        id: rightMetric
-                        text: i18n.qtr("R   I   G   H   T")
-                        font.pixelSize: VLCStyle.fontSize_xxlarge
-                    }
-
-                    readonly property int identifier: PlayerControlbarModel.MainPlayer
-                    property var model: mainInterface.controlbarProfileModel.currentModel.getModel(identifier)
-
-                    EditorDNDView {
-                        id : playerBtnDND_left
-                        Layout.fillHeight: true
+                Repeater {
+                    model: PlayerListModel.model
 
-                        Layout.fillWidth: count > 0 || (playerBtnDND_left.count === 0 && playerBtnDND_center.count === 0 && playerBtnDND_right.count === 0)
-                        Layout.minimumWidth: centerMetric.width * 1.25
-                        Layout.leftMargin: VLCStyle.margin_xsmall
-                        Layout.rightMargin: VLCStyle.margin_xsmall
+                    delegate: RowLayout {
+                        id: layout
 
-                        model: mainPlayerLayout.model.left
-
-                        Text {
-                            anchors.fill: parent
-
-                            text: leftMetric.text
-                            verticalAlignment: Text.AlignVCenter
-                            font.pixelSize: VLCStyle.fontSize_xxlarge
-                            color: VLCStyle.colors.menuCaption
-                            horizontalAlignment: Text.AlignHCenter
-                            visible: (parent.count === 0)
+                        readonly property int identifier: modelData.identifier
+                        readonly property var model: {
+                            if (!!mainInterface.controlbarProfileModel.currentModel)
+                                return mainInterface.controlbarProfileModel.currentModel.getModel(identifier)
+                            else
+                                return undefined
                         }
-                    }
-
-                    Rectangle {
-                        Layout.preferredWidth: VLCStyle.margin_small
-
-                        Layout.fillHeight: true
-                        Layout.topMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.bottomMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.alignment: Qt.AlignVCenter
-
-                        color: VLCStyle.colors.bg
-                    }
-
-                    EditorDNDView {
-                        id : playerBtnDND_center
-                        Layout.fillHeight: true
 
-                        Layout.fillWidth: count > 0 || (playerBtnDND_left.count === 0 && playerBtnDND_center.count === 0 && playerBtnDND_right.count === 0)
-                        Layout.minimumWidth: centerMetric.width * 1.25
-                        Layout.leftMargin: VLCStyle.margin_xsmall
-                        Layout.rightMargin: VLCStyle.margin_xsmall
-
-                        model: mainPlayerLayout.model.center
-
-                        Text {
-                            anchors.fill: parent
-
-                            text: centerMetric.text
-                            verticalAlignment: Text.AlignVCenter
+                        TextMetrics {
+                            id: leftMetric
+                            text: i18n.qtr("L   E   F   T")
                             font.pixelSize: VLCStyle.fontSize_xxlarge
-                            color: VLCStyle.colors.menuCaption
-                            horizontalAlignment: Text.AlignHCenter
-                            visible: (parent.count === 0)
                         }
-                    }
-
-                    Rectangle {
-                        Layout.preferredWidth: VLCStyle.margin_small
-
-                        Layout.fillHeight: true
-                        Layout.topMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.bottomMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.alignment: Qt.AlignVCenter
-
-                        color: VLCStyle.colors.bg
-                    }
 
-                    EditorDNDView {
-                        id : playerBtnDND_right
-                        Layout.fillHeight: true
-
-                        Layout.fillWidth: count > 0 || (playerBtnDND_left.count === 0 && playerBtnDND_center.count === 0 && playerBtnDND_right.count === 0)
-                        Layout.minimumWidth: centerMetric.width * 1.25
-                        Layout.leftMargin: VLCStyle.margin_xsmall
-                        Layout.rightMargin: VLCStyle.margin_xsmall
-
-                        model: mainPlayerLayout.model.right
-
-                        Text {
-                            anchors.fill: parent
-
-                            text: rightMetric.text
-                            verticalAlignment: Text.AlignVCenter
+                        TextMetrics {
+                            id: centerMetric
+                            text: i18n.qtr("C   E   N   T   E   R")
                             font.pixelSize: VLCStyle.fontSize_xxlarge
-                            color: VLCStyle.colors.menuCaption
-                            horizontalAlignment: Text.AlignHCenter
-                            visible: (parent.count === 0)
                         }
-                    }
-                }
-
-                RowLayout {
-                    id: miniPlayerLayout
-
-                    Layout.preferredHeight: VLCStyle.heightBar_large * 1.25
-                    Layout.fillWidth: true
 
-                    readonly property int identifier: PlayerControlbarModel.MiniPlayer
-                    property var model: mainInterface.controlbarProfileModel.currentModel.getModel(identifier)
-
-                    EditorDNDView {
-                        id : miniPlayerBtnDND_left
-                        Layout.fillHeight: true
-
-                        Layout.fillWidth: count > 0 || (miniPlayerBtnDND_left.count === 0 && miniPlayerBtnDND_center.count === 0 && miniPlayerBtnDND_right.count === 0)
-                        Layout.minimumWidth: centerMetric.width
-                        Layout.leftMargin: VLCStyle.margin_xsmall
-                        Layout.rightMargin: VLCStyle.margin_xsmall
-
-                        model: miniPlayerLayout.model.left
-
-                        Text {
-                            anchors.fill: parent
-
-                            text: leftMetric.text
-                            verticalAlignment: Text.AlignVCenter
+                        TextMetrics {
+                            id: rightMetric
+                            text: i18n.qtr("R   I   G   H   T")
                             font.pixelSize: VLCStyle.fontSize_xxlarge
-                            color: VLCStyle.colors.menuCaption
-                            horizontalAlignment: Text.AlignHCenter
-                            visible: (parent.count === 0)
                         }
-                    }
-
-                    Rectangle {
-                        Layout.preferredWidth: VLCStyle.margin_small
-
-                        Layout.fillHeight: true
-                        Layout.topMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.bottomMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.alignment: Qt.AlignVCenter
 
-                        color: VLCStyle.colors.bg
-                    }
-
-                    EditorDNDView {
-                        id : miniPlayerBtnDND_center
-                        Layout.fillHeight: true
-
-                        Layout.fillWidth: count > 0 || (miniPlayerBtnDND_left.count === 0 && miniPlayerBtnDND_center.count === 0 && miniPlayerBtnDND_right.count === 0)
-                        Layout.minimumWidth: centerMetric.width
-                        Layout.leftMargin: VLCStyle.margin_xsmall
-                        Layout.rightMargin: VLCStyle.margin_xsmall
-
-                        model: miniPlayerLayout.model.center
-
-                        Text {
-                            anchors.fill: parent
-
-                            text: centerMetric.text
-                            verticalAlignment: Text.AlignVCenter
-                            font.pixelSize: VLCStyle.fontSize_xxlarge
-                            color: VLCStyle.colors.menuCaption
-                            horizontalAlignment: Text.AlignHCenter
-                            visible: (parent.count === 0)
+                        Loader {
+                            id : playerBtnDND_left
+                            active: !!layout.model && !!layout.model.left
+
+                            Layout.fillHeight: true
+                            Layout.fillWidth: count > 0 || (playerBtnDND_left.count === 0 && playerBtnDND_center.count === 0 && playerBtnDND_right.count === 0)
+                            Layout.minimumWidth: centerMetric.width * 1.25
+                            Layout.leftMargin: VLCStyle.margin_xsmall
+                            Layout.rightMargin: VLCStyle.margin_xsmall
+
+                            readonly property int count: {
+                                if (status === Loader.Ready)
+                                    return item.count
+                                else
+                                    return 0
+                            }
+
+                            sourceComponent: EditorDNDView {
+                                model: layout.model.left
+
+                                onContainsDragChanged: {
+                                    if (containsDrag)
+                                        _viewThatContainsDrag = this
+                                }
+
+                                Text {
+                                    anchors.fill: parent
+
+                                    text: leftMetric.text
+                                    verticalAlignment: Text.AlignVCenter
+                                    font.pixelSize: VLCStyle.fontSize_xxlarge
+                                    color: VLCStyle.colors.menuCaption
+                                    horizontalAlignment: Text.AlignHCenter
+                                    visible: (parent.count === 0)
+                                }
+                            }
                         }
-                    }
 
-                    Rectangle {
-                        Layout.preferredWidth: VLCStyle.margin_small
+                        Rectangle {
+                            Layout.preferredWidth: VLCStyle.margin_small
 
-                        Layout.fillHeight: true
-                        Layout.topMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.bottomMargin: VLCStyle.dp(1, VLCStyle.scale)
-                        Layout.alignment: Qt.AlignVCenter
+                            Layout.fillHeight: true
+                            Layout.topMargin: VLCStyle.dp(1, VLCStyle.scale)
+                            Layout.bottomMargin: VLCStyle.dp(1, VLCStyle.scale)
+                            Layout.alignment: Qt.AlignVCenter
 
-                        color: VLCStyle.colors.bg
-                    }
+                            color: VLCStyle.colors.bg
+                        }
 
-                    EditorDNDView {
-                        id : miniPlayerBtnDND_right
-                        Layout.fillHeight: true
+                        Loader {
+                            id : playerBtnDND_center
+                            active: !!layout.model && !!layout.model.center
+
+                            Layout.fillHeight: true
+                            Layout.fillWidth: count > 0 || (playerBtnDND_left.count === 0 && playerBtnDND_center.count === 0 && playerBtnDND_right.count === 0)
+                            Layout.minimumWidth: centerMetric.width * 1.25
+                            Layout.leftMargin: VLCStyle.margin_xsmall
+                            Layout.rightMargin: VLCStyle.margin_xsmall
+
+                            readonly property int count: {
+                                if (status === Loader.Ready)
+                                    return item.count
+                                else
+                                    return 0
+                            }
+
+                            sourceComponent: EditorDNDView {
+                                model: layout.model.center
+
+                                onContainsDragChanged: {
+                                    if (containsDrag)
+                                        _viewThatContainsDrag = this
+                                }
+
+                                Text {
+                                    anchors.fill: parent
+
+                                    text: centerMetric.text
+                                    verticalAlignment: Text.AlignVCenter
+                                    font.pixelSize: VLCStyle.fontSize_xxlarge
+                                    color: VLCStyle.colors.menuCaption
+                                    horizontalAlignment: Text.AlignHCenter
+                                    visible: (parent.count === 0)
+                                }
+                            }
+                        }
 
-                        Layout.fillWidth: count > 0 || (miniPlayerBtnDND_left.count === 0 && miniPlayerBtnDND_center.count === 0 && miniPlayerBtnDND_right.count === 0)
-                        Layout.minimumWidth: centerMetric.width
-                        Layout.leftMargin: VLCStyle.margin_xsmall
-                        Layout.rightMargin: VLCStyle.margin_xsmall
+                        Rectangle {
+                            Layout.preferredWidth: VLCStyle.margin_small
 
-                        model: miniPlayerLayout.model.right
+                            Layout.fillHeight: true
+                            Layout.topMargin: VLCStyle.dp(1, VLCStyle.scale)
+                            Layout.bottomMargin: VLCStyle.dp(1, VLCStyle.scale)
+                            Layout.alignment: Qt.AlignVCenter
 
-                        Text {
-                            anchors.fill: parent
+                            color: VLCStyle.colors.bg
+                        }
 
-                            text: rightMetric.text
-                            verticalAlignment: Text.AlignVCenter
-                            font.pixelSize: VLCStyle.fontSize_xxlarge
-                            color: VLCStyle.colors.menuCaption
-                            horizontalAlignment: Text.AlignHCenter
-                            visible: (parent.count === 0)
+                        Loader {
+                            id : playerBtnDND_right
+                            active: !!layout.model && !!layout.model.right
+
+                            Layout.fillHeight: true
+                            Layout.fillWidth: count > 0 || (playerBtnDND_left.count === 0 && playerBtnDND_center.count === 0 && playerBtnDND_right.count === 0)
+                            Layout.minimumWidth: centerMetric.width * 1.25
+                            Layout.leftMargin: VLCStyle.margin_xsmall
+                            Layout.rightMargin: VLCStyle.margin_xsmall
+
+                            readonly property int count: {
+                                if (status === Loader.Ready)
+                                    return item.count
+                                else
+                                    return 0
+                            }
+
+                            sourceComponent: EditorDNDView {
+                                model: layout.model.right
+
+                                onContainsDragChanged: {
+                                    if (containsDrag)
+                                        _viewThatContainsDrag = this
+                                }
+
+                                Text {
+                                    anchors.fill: parent
+
+                                    text: rightMetric.text
+                                    verticalAlignment: Text.AlignVCenter
+                                    font.pixelSize: VLCStyle.fontSize_xxlarge
+                                    color: VLCStyle.colors.menuCaption
+                                    horizontalAlignment: Text.AlignHCenter
+                                    visible: (parent.count === 0)
+                                }
+                            }
                         }
                     }
                 }
@@ -362,25 +303,8 @@ Rectangle{
 
     property int _scrollingDirection: 0
 
-    function getHoveredListView() {
-        if (playerBtnDND_left.containsDrag)
-            return playerBtnDND_left
-        else if (playerBtnDND_center.containsDrag)
-            return playerBtnDND_center
-        else if (playerBtnDND_right.containsDrag)
-            return playerBtnDND_right
-        else if (miniPlayerBtnDND_left.containsDrag)
-            return miniPlayerBtnDND_left
-        else if (miniPlayerBtnDND_center.containsDrag)
-            return miniPlayerBtnDND_center
-        else if (miniPlayerBtnDND_right.containsDrag)
-            return miniPlayerBtnDND_right
-        else
-            return undefined
-    }
-
     function handleScroll(dragItem) {
-        var view = root.getHoveredListView()
+        var view = _viewThatContainsDrag
 
         if (view === undefined) {
             upAnimation.target = null
@@ -396,18 +320,16 @@ Rectangle{
         downAnimation.to = Qt.binding(function() { return view.contentWidth - view.width; })
 
         var dragItemX = root.mapToGlobal(dragItem.x, dragItem.y).x
-        var viewX     = root.mapToGlobal(view.x, view.y).x
+        var viewX     = view.mapToGlobal(view.x, view.y).x
 
         var leftDiff  = (viewX + VLCStyle.dp(20, VLCStyle.scale)) - dragItemX
         var rightDiff = dragItemX - (viewX + view.width - VLCStyle.dp(20, VLCStyle.scale))
 
-        if( !view.atXBeginning && leftDiff > 0 ) {
+        if (!view.atXBeginning && leftDiff > 0) {
             _scrollingDirection = -1
-        }
-        else if( !view.atXEnd && rightDiff > 0 ) {
+        } else if (!view.atXEnd && rightDiff > 0) {
             _scrollingDirection = 1
-        }
-        else {
+        } else {
             _scrollingDirection = 0
         }
     }



More information about the vlc-commits mailing list