[vlc-commits] qml: make aligned controlbar setup reusable

Fatih Uzunoglu git at videolan.org
Mon Dec 7 10:08:24 UTC 2020


vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Fri Dec  4 02:01:43 2020 +0300| [6d3a884b8ce3243766263a0ab6f04b45d4f57e41] | committer: Pierre Lamot

qml: make aligned controlbar setup reusable

Instead of creating separate left, center, and right button layouts in players; use PlayerButtonsLayout.
With this patch PlayerButtonsLayout.qml content is moved to ButtonsLayout.qml. And PlayerButtonsLayout.qml now handles three separate button layouts itself.

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

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

 modules/gui/qt/Makefile.am                        |   1 +
 modules/gui/qt/player/qml/ButtonsLayout.qml       | 110 +++++++++++++++
 modules/gui/qt/player/qml/ControlBar.qml          |  91 ++-----------
 modules/gui/qt/player/qml/MiniPlayer.qml          | 104 +--------------
 modules/gui/qt/player/qml/PlayerButtonsLayout.qml | 155 +++++++++++++---------
 modules/gui/qt/vlc.qrc                            |   1 +
 6 files changed, 219 insertions(+), 243 deletions(-)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 35c8e6223d..668af1f625 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -673,6 +673,7 @@ libqt_plugin_la_QML = \
 	gui/qt/player/qml/TopBar.qml \
 	gui/qt/player/qml/TrackInfo.qml \
 	gui/qt/player/qml/VolumeWidget.qml \
+	gui/qt/player/qml/ButtonsLayout.qml \
 	gui/qt/playlist/qml/PLItem.qml \
 	gui/qt/playlist/qml/PlaylistListView.qml \
 	gui/qt/playlist/qml/PlaylistMenu.qml \
diff --git a/modules/gui/qt/player/qml/ButtonsLayout.qml b/modules/gui/qt/player/qml/ButtonsLayout.qml
new file mode 100644
index 0000000000..b3a596b167
--- /dev/null
+++ b/modules/gui/qt/player/qml/ButtonsLayout.qml
@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * Copyright (C) 2019 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 QtQuick.Layouts 1.3
+import QtQml.Models 2.11
+
+import org.videolan.vlc 0.1
+
+import "qrc:///style/"
+import "qrc:///widgets/" as Widgets
+
+Widgets.NavigableFocusScope {
+    id: buttonsLayout
+
+    property alias model: buttonsRepeater.model
+    property var defaultSize: VLCStyle.icon_normal
+    property bool forceColors: false
+
+    implicitWidth: buttonrow.implicitWidth
+    implicitHeight: buttonrow.implicitHeight
+
+    visible: model.count > 0
+
+    Keys.priority: Keys.AfterItem
+    Keys.onPressed: {
+        if (!event.accepted)
+            defaultKeyAction(event, 0)
+    }
+
+    RowLayout {
+        id: buttonrow
+        property bool _focusGiven: false
+
+        anchors.fill: parent
+
+        spacing: VLCStyle.margin_normal
+
+        VLCColors {
+            id: vlcNightColors
+            state: "night"
+        }
+
+        Repeater {
+            id: buttonsRepeater
+
+            onItemRemoved: {
+                if (item.focus) {
+                    buttonrow._focusGiven = false
+                }
+            }
+
+            delegate: Loader {
+                id: buttonloader
+
+                sourceComponent: controlmodelbuttons.returnbuttondelegate(
+                                     model.id)
+                onLoaded: {
+                    if (!buttonrow._focusGiven) {
+                        buttonloader.focus = true
+                        buttonrow._focusGiven = true
+                    }
+                    buttonloader.item.focus = true
+
+                    if (buttonloader.item instanceof Widgets.IconToolButton)
+                        buttonloader.item.size = buttonsLayout.defaultSize
+
+                    //force buttons color
+                    if (buttonsLayout.forceColors) {
+                        if (buttonloader.item._colors) {
+                            buttonloader.item._colors = vlcNightColors
+                        } else {
+                            if (buttonloader.item.color)
+                                buttonloader.item.color = VLCStyle.colors.playerFg
+                            if (buttonloader.item.bgColor)
+                                buttonloader.item.bgColor = VLCStyle.colors.setColorAlpha(
+                                            VLCStyle.colors.playerBg, 0.8)
+                            if (buttonloader.item.borderColor)
+                                buttonloader.item.borderColor = VLCStyle.colors.playerBorder
+                        }
+                    }
+
+                    if (index > 0)
+                        buttonloader.item.KeyNavigation.left = buttonrow.children[index].item
+
+                    if (buttonloader.item.navigationRight !== undefined)
+                        buttonloader.item.navigationRight = buttonsLayout.navigationRight
+
+                    if (buttonloader.item.navigationLeft !== undefined)
+                        buttonloader.item.navigationLeft = buttonsLayout.navigationLeft
+                }
+            }
+        }
+    }
+}
diff --git a/modules/gui/qt/player/qml/ControlBar.qml b/modules/gui/qt/player/qml/ControlBar.qml
index d02503b3af..47506f5afc 100644
--- a/modules/gui/qt/player/qml/ControlBar.qml
+++ b/modules/gui/qt/player/qml/ControlBar.qml
@@ -84,7 +84,7 @@ Widgets.NavigableFocusScope {
             Layout.alignment: Qt.AlignLeft | Qt.AlignTop
             Layout.fillWidth: true
             enabled: player.playingState == PlayerController.PLAYING_STATE_PLAYING || player.playingState == PlayerController.PLAYING_STATE_PAUSED
-            Keys.onDownPressed: buttons_left.focus = true
+            Keys.onDownPressed: playerButtonsLayout.focus = true
 
             parentWindow: mainInterfaceRect
         }
@@ -92,91 +92,27 @@ Widgets.NavigableFocusScope {
         Item {
             Layout.fillWidth: true
             Layout.bottomMargin: VLCStyle.margin_xsmall
-            Layout.preferredHeight: Math.max(buttons_left.implicitHeight, buttons_center.implicitHeight, buttons_right.implicitHeight)
+            Layout.preferredHeight: playerButtonsLayout.implicitHeight
 
             PlayerButtonsLayout {
-                id: buttons_left
+                id: playerButtonsLayout
 
-                model: playerControlBarModel_left
-                forceColors: true
-
-                focus: true
-
-                anchors.left: parent.left
-
-                visible: model.count > 0 && (playerControlBarModel_center.count > 0 ? ((x+width) < buttons_center.x) : true)
-
-                navigationParent: root
-                navigationUp: function(index) {
-                    if (trackPositionSlider.enabled)
-                        trackPositionSlider.focus = true
-                    else
-                        root.navigationUp(index)
-                }
-
-                navigationRightItem: buttons_center
-
-                Keys.priority: Keys.AfterItem
-                Keys.onPressed: defaultKeyAction(event, 0)
-            }
-
-            PlayerButtonsLayout {
-                id: buttons_center
-
-                model: playerControlBarModel_center
-                forceColors: true
-
-                focus: true
-
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors {
+                    fill: parent
 
-                navigationParent: root
-                navigationUp: function(index) {
-                    if (trackPositionSlider.enabled)
-                        trackPositionSlider.focus = true
-                    else
-                        root.navigationUp(index)
+                    leftMargin: VLCStyle.applicationHorizontalMargin
+                    rightMargin: VLCStyle.applicationHorizontalMargin
+                    bottomMargin: VLCStyle.applicationVerticalMargin
                 }
 
-                navigationLeftItem: buttons_left
-                navigationRightItem: buttons_right
+                models: [playerControlBarModel_left, playerControlBarModel_center, playerControlBarModel_right]
 
-                Keys.priority: Keys.AfterItem
-                Keys.onPressed: defaultKeyAction(event, 0)
-            }
-
-            PlayerButtonsLayout {
-                id: buttons_right
+                navigationUpItem: trackPositionSlider.enabled ? trackPositionSlider : root.navigationUpItem
 
-                model: playerControlBarModel_right
                 forceColors: true
-
-                focus: true
-
-                anchors.right: parent.right
-
-                visible: model.count > 0 && (playerControlBarModel_center.count > 0 ? ((buttons_center.x + buttons_center.width) < x)
-                                                                              : !(((buttons_left.x + buttons_left.width) > x) && playerControlBarModel_left.count > 0))
-
-                navigationParent: root
-                navigationUp: function(index) {
-                    if (trackPositionSlider.enabled)
-                        trackPositionSlider.focus = true
-                    else
-                        root.navigationUp(index)
-                }
-
-                navigationLeftItem: buttons_center
-
-                Keys.priority: Keys.AfterItem
-                Keys.onPressed: defaultKeyAction(event, 0)
             }
         }
     }
-    Connections{
-        target: mainInterface
-        onToolBarConfUpdated: playerControlBarModel.reloadModel()
-    }
 
     PlayerControlBarModel{
         id:playerControlBarModel_left
@@ -195,11 +131,4 @@ Widgets.NavigableFocusScope {
         mainCtx: mainctx
         configName: "MainPlayerToolbar-right"
     }
-
-    ControlButtons{
-        id:controlmodelbuttons
-
-        parentWindow: mainInterfaceRect
-    }
-
 }
diff --git a/modules/gui/qt/player/qml/MiniPlayer.qml b/modules/gui/qt/player/qml/MiniPlayer.qml
index 482c17aaac..977e7ef96a 100644
--- a/modules/gui/qt/player/qml/MiniPlayer.qml
+++ b/modules/gui/qt/player/qml/MiniPlayer.qml
@@ -82,7 +82,7 @@ Widgets.NavigableFocusScope {
                 right: parent.right
             }
 
-            Keys.onDownPressed: buttonrow_left.focus = true
+            Keys.onDownPressed: buttonsLayout.focus = true
             Keys.onUpPressed: root.navigationUpItem.focus = true
         }
 
@@ -106,104 +106,21 @@ Widgets.NavigableFocusScope {
                 tint: VLCStyle.colors.blendColors(VLCStyle.colors.bg, VLCStyle.colors.banner, 0.85)
             }
 
-            Item {
+            PlayerButtonsLayout {
+                id: buttonsLayout
+
                 anchors {
                     fill: parent
-
                     leftMargin: VLCStyle.applicationHorizontalMargin
                     rightMargin: VLCStyle.applicationHorizontalMargin
                     bottomMargin: VLCStyle.applicationVerticalMargin
                 }
 
-                PlayerButtonsLayout {
-                    id: buttonrow_left
-
-                    model: miniPlayerModel_left
-                    defaultSize: VLCStyle.icon_normal
-
-                    implicitHeight: buttonrow.implicitHeight
-
-                    anchors {
-                        left: parent.left
-                        top: parent.top
-                        bottom: parent.bottom
-
-                        leftMargin: VLCStyle.margin_normal
-                    }
-
-                    visible: model.count > 0 && (miniPlayerModel_center.count > 0 ? ((x+width) < buttonrow_center.x) : true)
-
-                    navigationParent: root
-                    navigationRightItem: buttonrow_center
-
-                    focus: true
-
-                    navigationUp: function(index) {
-                        if (progressBar.enabled)
-                            progressBar.focus = true
-                        else
-                            root.navigationUp(index)
-                    }
-                }
-
-                PlayerButtonsLayout {
-                    id: buttonrow_center
+                models: [miniPlayerModel_left, miniPlayerModel_center, miniPlayerModel_right]
 
-                    model: miniPlayerModel_center
-                    defaultSize: VLCStyle.icon_normal
-
-                    anchors {
-                        centerIn: parent
-                    }
-
-                    navigationParent: root
-                    navigationLeftItem: buttonrow_left
-                    navigationRightItem: buttonrow_right
-
-                    navigationUp: function(index) {
-                        if (progressBar.enabled)
-                            progressBar.focus = true
-                        else
-                            root.navigationUp(index)
-                    }
-                }
+                navigationUpItem: progressBar.enabled ? progressBar : root.navigationUpItem
 
-                PlayerButtonsLayout {
-                    id: buttonrow_right
-
-                    model: miniPlayerModel_right
-                    defaultSize: VLCStyle.icon_normal
-
-                    anchors {
-                        right: parent.right
-                        top: parent.top
-                        bottom: parent.bottom
-
-                        rightMargin: VLCStyle.margin_normal
-                    }
-
-                    visible: model.count > 0 && (miniPlayerModel_center.count > 0 ? ((buttonrow_center.x + buttonrow_center.width) < x)
-                                                                                  : !(((buttonrow_left.x + buttonrow_left.width) > x) && miniPlayerModel_left.count > 0))
-
-                    navigationParent: root
-                    navigationLeftItem: buttonrow_center
-
-                    navigationUp: function(index) {
-                        if (progressBar.enabled)
-                            progressBar.focus = true
-                        else
-                            root.navigationUp(index)
-                    }
-                }
-            }
-
-            Connections{
-                target: mainInterface
-                onToolBarConfUpdated: {
-                    miniPlayerModel_left.reloadModel()
-                    miniPlayerModel_center.reloadModel()
-                    miniPlayerModel_right.reloadModel()
-                }
+                isMiniplayer: true
             }
 
             PlayerControlBarModel {
@@ -224,13 +141,6 @@ Widgets.NavigableFocusScope {
                 configName: "MiniPlayerToolbar-right"
             }
 
-            ControlButtons {
-                id: controlmodelbuttons
-
-                isMiniplayer: true
-                parentWindow: mainInterfaceRect
-            }
-
             Keys.onPressed: {
                 if (!event.accepted)
                     defaultKeyAction(event, 0)
diff --git a/modules/gui/qt/player/qml/PlayerButtonsLayout.qml b/modules/gui/qt/player/qml/PlayerButtonsLayout.qml
index 62bc5eda46..1ec7c20a14 100644
--- a/modules/gui/qt/player/qml/PlayerButtonsLayout.qml
+++ b/modules/gui/qt/player/qml/PlayerButtonsLayout.qml
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Copyright (C) 2019 VLC authors and VideoLAN
+ * Copyright (C) 2020 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
@@ -15,93 +15,118 @@
  * 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 QtQuick.Layouts 1.3
-import QtQml.Models 2.11
 
 import org.videolan.vlc 0.1
 
 import "qrc:///style/"
 import "qrc:///widgets/" as Widgets
 
+
 Widgets.NavigableFocusScope {
     id: playerButtonsLayout
-    property alias model: buttonsRepeater.model
-    property var defaultSize: VLCStyle.icon_medium
+
+    implicitHeight: childrenRect.height
+    implicitWidth: childrenRect.width
+
+    property alias isMiniplayer: controlmodelbuttons.isMiniplayer
+    property alias parentWindow: controlmodelbuttons.parentWindow
+
+    property real marginLeft: VLCStyle.margin_normal
+    property real marginRight: VLCStyle.margin_normal
+    property real marginTop: 0
+    property real marginBottom: 0
+
     property bool forceColors: false
+    
+    property var models: [] // 0: left, 1: center, 2: right
+
+    Connections {
+        target: mainInterface
 
-    implicitWidth: buttonrow.implicitWidth
-    implicitHeight: buttonrow.implicitHeight
+        onToolBarConfUpdated: {
+            models[0].reloadModel()
+            models[1].reloadModel()
+            models[2].reloadModel()
+        }
+    }
 
-    visible: model.count > 0
+    ControlButtons {
+        id: controlmodelbuttons
 
-    Keys.priority: Keys.AfterItem
-    Keys.onPressed: {
-        if (!event.accepted)
-            defaultKeyAction(event, 0)
+        isMiniplayer: false
+        parentWindow: mainInterfaceRect
     }
 
-RowLayout{
-    id: buttonrow
-    property bool _focusGiven: false
+    ButtonsLayout {
+        id: buttonrow_left
 
-    anchors.fill: parent
+        model: models[0]
 
-    spacing: VLCStyle.margin_normal
+        implicitHeight: buttonrow.implicitHeight
 
-    VLCColors {id: vlcNightColors; state: "night"}
+        anchors {
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
 
-    Repeater{
-        id: buttonsRepeater
+            leftMargin: playerButtonsLayout.marginLeft
 
-        onItemRemoved: {
-            if (item.focus) {
-                buttonrow._focusGiven = false
-            }
+            topMargin: playerButtonsLayout.marginTop
+            bottomMargin: playerButtonsLayout.marginBottom
         }
 
-        delegate: Loader{
-            id: buttonloader
-
-            sourceComponent: controlmodelbuttons.returnbuttondelegate(model.id)
-            onLoaded: {
-                if (!buttonrow._focusGiven) {
-                    buttonloader.focus = true
-                    buttonrow._focusGiven = true
-                }
-                buttonloader.item.focus = true
-
-                if(buttonloader.item instanceof Widgets.IconToolButton)
-                    buttonloader.item.size = playerButtonsLayout.defaultSize
-
-                //force buttons color
-                if (playerButtonsLayout.forceColors) {
-                    if ( buttonloader.item._colors ) {
-                        buttonloader.item._colors = vlcNightColors
-                    }
-                    else {
-                        if ( buttonloader.item.color )
-                            buttonloader.item.color = VLCStyle.colors.playerFg
-                        if ( buttonloader.item.bgColor )
-                            buttonloader.item.bgColor = VLCStyle.colors.setColorAlpha(VLCStyle.colors.playerBg, 0.8)
-                        if ( buttonloader.item.borderColor )
-                            buttonloader.item.borderColor = VLCStyle.colors.playerBorder
-                    }
-                }
-
-                if (index > 0)
-                    buttonloader.item.KeyNavigation.left = buttonrow.children[index].item
-
-                if (buttonloader.item.navigationRight !== undefined)
-                    buttonloader.item.navigationRight = playerButtonsLayout.navigationRight
-
-                if (buttonloader.item.navigationLeft !== undefined)
-                    buttonloader.item.navigationLeft = playerButtonsLayout.navigationLeft
-            }
+        forceColors: playerButtonsLayout.forceColors
+        
+        visible: model.count > 0 && (buttonrow_center.model.count > 0 ? ((x+width) < buttonrow_center.x) : true)
+
+        navigationParent: playerButtonsLayout
+        navigationRightItem: buttonrow_center
+
+        focus: true
+    }
+
+    ButtonsLayout {
+        id: buttonrow_center
+
+        model: models[1]
+
+        anchors {
+            centerIn: parent
+
+            topMargin: playerButtonsLayout.marginTop
+            bottomMargin: playerButtonsLayout.marginBottom
         }
+
+        forceColors: playerButtonsLayout.forceColors
+
+        navigationParent: playerButtonsLayout
+        navigationLeftItem: buttonrow_left
+        navigationRightItem: buttonrow_right
     }
-}
 
+    ButtonsLayout {
+        id: buttonrow_right
+
+        model: models[2]
+
+        anchors {
+            right: parent.right
+            top: parent.top
+            bottom: parent.bottom
+
+            rightMargin: playerButtonsLayout.marginRight
+
+            topMargin: playerButtonsLayout.marginTop
+            bottomMargin: playerButtonsLayout.marginBottom
+        }
+
+        forceColors: playerButtonsLayout.forceColors
+        
+        visible: model.count > 0 && (buttonrow_center.model.count > 0 ? ((buttonrow_center.x + buttonrow_center.width) < x)
+                                                                      : !(((buttonrow_left.x + buttonrow_left.width) > x) && buttonrow_center.left.count > 0))
+
+        navigationParent: playerButtonsLayout
+        navigationLeftItem: buttonrow_center
+    }
 }
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index fb470a9afa..6a1a413f34 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -308,6 +308,7 @@
         <file alias="PlayerMenu.qml">player/qml/PlayerMenu.qml</file>
         <file alias="PlayerMenuItem.qml">player/qml/PlayerMenuItem.qml</file>
         <file alias="LanguageMenu.qml">player/qml/LanguageMenu.qml</file>
+        <file alias="ButtonsLayout.qml">player/qml/ButtonsLayout.qml</file>
     </qresource>
     <qresource prefix="/about">
         <file alias="About.qml">dialogs/help/qml/About.qml</file>



More information about the vlc-commits mailing list