[vlc-devel] [PATCH 02/25] qml: break main layout of Player widget

Prince Gupta guptaprince8832 at gmail.com
Thu Mar 11 09:16:10 UTC 2021


some object needs to overlap other items conditionally, using a main
layout makes this difficult
---
 modules/gui/qt/player/qml/Player.qml | 397 +++++++++++++--------------
 1 file changed, 197 insertions(+), 200 deletions(-)

diff --git a/modules/gui/qt/player/qml/Player.qml b/modules/gui/qt/player/qml/Player.qml
index 3e3f9b5a9e..6f79bdaeac 100644
--- a/modules/gui/qt/player/qml/Player.qml
+++ b/modules/gui/qt/player/qml/Player.qml
@@ -201,262 +201,259 @@ Widgets.NavigableFocusScope {
         }
     }
 
-    //property alias centralLayout: mainLayout.centralLayout
-    ColumnLayout {
-        id: mainLayout
-        anchors.fill: parent
-
-        Widgets.DrawerExt{
-            id: topcontrolView
+    Widgets.DrawerExt{
+        id: topcontrolView
 
-            Layout.preferredHeight: height
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignTop
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
 
-            edge: Widgets.DrawerExt.Edges.Top
-            property var autoHide: topcontrolView.contentItem.autoHide
+        edge: Widgets.DrawerExt.Edges.Top
+        property var autoHide: topcontrolView.contentItem.autoHide
 
-            state: "visible"
+        state: "visible"
 
-            component: FocusScope {
-                width: topcontrolView.width
-                height: topbar.implicitHeight
-                focus: true
-                property bool autoHide: topbar.autoHide && !resumeDialog.visible
+        component: FocusScope {
+            width: topcontrolView.width
+            height: topbar.implicitHeight
+            focus: true
+            property bool autoHide: topbar.autoHide && !resumeDialog.visible
 
-                TopBar{
-                    id: topbar
+            TopBar {
+                id: topbar
 
-                    anchors.fill: parent
+                anchors.fill: parent
 
-                    focus: true
-                    visible: !resumeDialog.visible
+                focus: true
+                visible: !resumeDialog.visible
 
-                    onAutoHideChanged: {
-                        if (autoHide)
-                            toolbarAutoHide.restart()
-                    }
+                onAutoHideChanged: {
+                    if (autoHide)
+                        toolbarAutoHide.restart()
+                }
 
-                    lockAutoHide: playlistpopup.state === "visible"
-                    title: mainPlaylistController.currentItem.title
-                    colors: rootPlayer.colors
+                lockAutoHide: playlistpopup.state === "visible"
+                title: mainPlaylistController.currentItem.title
+                colors: rootPlayer.colors
 
-                    navigationParent: rootPlayer
-                    navigationDownItem: playlistpopup.showPlaylist ? playlistpopup : (audioControls.visible ? audioControls : controlBarView)
-                    navigationRightItem: csdGroup
-                }
+                navigationParent: rootPlayer
+                navigationDownItem: playlistpopup.showPlaylist ? playlistpopup : (audioControls.visible ? audioControls : controlBarView)
+                navigationRightItem: csdGroup
+            }
 
-                ResumeDialog {
-                    id: resumeDialog
+            ResumeDialog {
+                id: resumeDialog
 
-                    anchors.fill: parent
-                    colors: rootPlayer.colors
-                    navigationParent: rootPlayer
+                anchors.fill: parent
+                colors: rootPlayer.colors
+                navigationParent: rootPlayer
 
-                    onHidden: {
-                        if (activeFocus) {
-                            topbar.focus = true
-                            controlBarView.forceActiveFocus()
-                        }
+                onHidden: {
+                    if (activeFocus) {
+                        topbar.focus = true
+                        controlBarView.forceActiveFocus()
                     }
                 }
             }
         }
+    }
 
-        Item {
-            id: centerContent
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.topMargin: VLCStyle.margin_xsmall
-
-            ColumnLayout {
-                anchors.fill: parent
-                spacing: 0
+    Item {
+        id: centerContent
 
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: topcontrolView.bottom
+            bottom: controlBarView.top
+            topMargin: VLCStyle.margin_xsmall
+            bottomMargin: VLCStyle.margin_xsmall
+        }
 
-                visible: !rootPlayer.hasEmbededVideo
+        ColumnLayout {
+            anchors.fill: parent
+            spacing: 0
+            visible: !rootPlayer.hasEmbededVideo
 
-                Item {
-                    Layout.fillHeight: true
-                }
+            Item {
+                Layout.fillHeight: true
+            }
 
-                Item {
-                    Layout.preferredHeight: Math.max(Math.min(parent.height, parent.width - VLCStyle.margin_small * 2), 0)
-                    Layout.maximumHeight: rootPlayer.height / 2.7182
-                    Layout.minimumHeight: 1
-                    Layout.preferredWidth: height * cover.sar
-                    Layout.alignment: Qt.AlignHCenter
+            Item {
+                Layout.preferredHeight: Math.max(Math.min(parent.height, parent.width - VLCStyle.margin_small * 2), 0)
+                Layout.maximumHeight: rootPlayer.height / 2.7182
+                Layout.minimumHeight: 1
+                Layout.preferredWidth: height * cover.sar
+                Layout.alignment: Qt.AlignHCenter
 
-                    Image {
-                        id: cover
+                Image {
+                    id: cover
 
-                        source: rootPlayer.coverSource
-                        fillMode: Image.PreserveAspectFit
+                    source: rootPlayer.coverSource
+                    fillMode: Image.PreserveAspectFit
 
-                        //source aspect ratio
-                        readonly property real sar: cover.sourceSize.width / cover.sourceSize.height
-                        anchors.fill: parent
-                    }
+                    //source aspect ratio
+                    readonly property real sar: cover.sourceSize.width / cover.sourceSize.height
+                    anchors.fill: parent
+                }
 
-                    Widgets.CoverShadow {
-                        anchors.fill: cover
-                        source: cover
-                        primaryVerticalOffset: VLCStyle.dp(24)
-                        primaryRadius: VLCStyle.dp(54)
-                        secondaryVerticalOffset: VLCStyle.dp(5)
-                        secondaryRadius: VLCStyle.dp(14)
-                    }
+                Widgets.CoverShadow {
+                    anchors.fill: cover
+                    source: cover
+                    primaryVerticalOffset: VLCStyle.dp(24)
+                    primaryRadius: VLCStyle.dp(54)
+                    secondaryVerticalOffset: VLCStyle.dp(5)
+                    secondaryRadius: VLCStyle.dp(14)
                 }
+            }
 
-                Widgets.SubtitleLabel {
-                    id: albumLabel
+            Widgets.SubtitleLabel {
+                id: albumLabel
 
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: implicitHeight
-                    Layout.topMargin: VLCStyle.margin_xxlarge
+                Layout.fillWidth: true
+                Layout.preferredHeight: implicitHeight
+                Layout.topMargin: VLCStyle.margin_xxlarge
 
-                    visible: centerContent.height > (albumLabel.y + albumLabel.height)
-                    text: mainPlaylistController.currentItem.album
-                    font.pixelSize: VLCStyle.fontSize_xxlarge
-                    horizontalAlignment: Text.AlignHCenter
-                    color: rootPlayer.colors.playerFg
-                    Accessible.description: i18n.qtr("album")
-                }
+                visible: centerContent.height > (albumLabel.y + albumLabel.height)
+                text: mainPlaylistController.currentItem.album
+                font.pixelSize: VLCStyle.fontSize_xxlarge
+                horizontalAlignment: Text.AlignHCenter
+                color: rootPlayer.colors.playerFg
+                Accessible.description: i18n.qtr("album")
+            }
 
-                Widgets.MenuLabel {
-                    id: artistLabel
+            Widgets.MenuLabel {
+                id: artistLabel
 
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: implicitHeight
-                    Layout.topMargin: VLCStyle.margin_small
+                Layout.fillWidth: true
+                Layout.preferredHeight: implicitHeight
+                Layout.topMargin: VLCStyle.margin_small
 
-                    visible: centerContent.height > (artistLabel.y + artistLabel.height)
-                    text: mainPlaylistController.currentItem.artist
-                    font.weight: Font.Light
-                    horizontalAlignment: Text.AlignHCenter
-                    color: rootPlayer.colors.playerFg
-                    Accessible.description: i18n.qtr("artist")
-                }
+                visible: centerContent.height > (artistLabel.y + artistLabel.height)
+                text: mainPlaylistController.currentItem.artist
+                font.weight: Font.Light
+                horizontalAlignment: Text.AlignHCenter
+                color: rootPlayer.colors.playerFg
+                Accessible.description: i18n.qtr("artist")
+            }
 
-                Widgets.NavigableRow {
-                    id: audioControls
+            Widgets.NavigableRow {
+                id: audioControls
 
-                    Layout.preferredHeight: implicitHeight
-                    Layout.preferredWidth: implicitWidth
-                    Layout.topMargin: VLCStyle.margin_large
-                    Layout.alignment: Qt.AlignHCenter
-                    visible: player.videoTracks.count === 0 && centerContent.height > (audioControls.y + audioControls.height)
-                    focus: visible
-                    spacing: VLCStyle.margin_xxsmall
-                    navigationParent: rootPlayer
-                    KeyNavigation.up: topcontrolView
-                    KeyNavigation.down: controlBarView
-
-                    model: ObjectModel {
-                        Widgets.IconToolButton {
-                            size: VLCIcons.pixelSize(VLCStyle.icon_large)
-                            iconText: VLCIcons.skip_back
-                            onClicked: player.jumpBwd()
-                            text: i18n.qtr("Step back")
-                            color: rootPlayer.colors.playerFg
-                        }
-
-                        Widgets.IconToolButton {
-                            size: VLCIcons.pixelSize(VLCStyle.icon_large)
-                            iconText: VLCIcons.visualization
-                            onClicked: player.toggleVisualization()
-                            text: i18n.qtr("Visualization")
-                            color: rootPlayer.colors.playerFg
-                        }
-
-                        Widgets.IconToolButton{
-                            size: VLCIcons.pixelSize(VLCStyle.icon_large)
-                            iconText: VLCIcons.skip_for
-                            onClicked: player.jumpFwd()
-                            text: i18n.qtr("Step forward")
-                            color: rootPlayer.colors.playerFg
-                        }
+                Layout.preferredHeight: implicitHeight
+                Layout.preferredWidth: implicitWidth
+                Layout.topMargin: VLCStyle.margin_large
+                Layout.alignment: Qt.AlignHCenter
+                visible: player.videoTracks.count === 0 && centerContent.height > (audioControls.y + audioControls.height)
+                focus: visible
+                spacing: VLCStyle.margin_xxsmall
+                navigationParent: rootPlayer
+                KeyNavigation.up: topcontrolView
+                KeyNavigation.down: controlBarView
+
+                model: ObjectModel {
+                    Widgets.IconToolButton {
+                        size: VLCIcons.pixelSize(VLCStyle.icon_large)
+                        iconText: VLCIcons.skip_back
+                        onClicked: player.jumpBwd()
+                        text: i18n.qtr("Step back")
+                        color: rootPlayer.colors.playerFg
                     }
-                }
 
-                Item {
-                    Layout.fillHeight: true
+                    Widgets.IconToolButton {
+                        size: VLCIcons.pixelSize(VLCStyle.icon_large)
+                        iconText: VLCIcons.visualization
+                        onClicked: player.toggleVisualization()
+                        text: i18n.qtr("Visualization")
+                        color: rootPlayer.colors.playerFg
+                    }
+
+                    Widgets.IconToolButton{
+                        size: VLCIcons.pixelSize(VLCStyle.icon_large)
+                        iconText: VLCIcons.skip_for
+                        onClicked: player.jumpFwd()
+                        text: i18n.qtr("Step forward")
+                        color: rootPlayer.colors.playerFg
+                    }
                 }
             }
 
-
+            Item {
+                Layout.fillHeight: true
+            }
         }
+    }
 
-        Widgets.DrawerExt {
-            id: controlBarView
+    Widgets.DrawerExt {
+        id: controlBarView
 
-            Layout.preferredHeight: height
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignBottom
+        property var autoHide: controlBarView.contentItem.autoHide
 
-            focus: true
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        focus: true
+        state: "visible"
+        edge: Widgets.DrawerExt.Edges.Bottom
 
-            property var autoHide: controlBarView.contentItem.autoHide
+        component: Item {
+            id: controllerBarId
 
-            state: "visible"
-            edge: Widgets.DrawerExt.Edges.Bottom
+            width: controlBarView.width
+            height: controllerId.implicitHeight + controllerId.anchors.bottomMargin
+            property alias autoHide: controllerId.autoHide
 
-            component: Item {
-                id: controllerBarId
+            Item {
+                anchors.fill: parent
+                anchors.topMargin: rootPlayer.positionSliderY - controlBarView.y
+                visible: !rootPlayer.hasEmbededVideo
 
-                width: controlBarView.width
-                height: controllerId.implicitHeight + controllerId.anchors.bottomMargin
-                property alias autoHide: controllerId.autoHide
+                Rectangle {
+                    id: controlBarBackground
 
-                Item {
                     anchors.fill: parent
-                    anchors.topMargin: rootPlayer.positionSliderY - controlBarView.y
-                    visible: !rootPlayer.hasEmbededVideo
-
-                    Rectangle {
-                        id: controlBarBackground
-
-                        anchors.fill: parent
-                        color: rootPlayer.colors.playerBg
-                        visible: false
-                    }
+                    color: rootPlayer.colors.playerBg
+                    visible: false
+                }
 
-                    GaussianBlur {
-                        anchors.fill: parent
-                        source: controlBarBackground
-                        radius: 22
-                        samples: 46
-                        opacity: .7
-                    }
+                GaussianBlur {
+                    anchors.fill: parent
+                    source: controlBarBackground
+                    radius: 22
+                    samples: 46
+                    opacity: .7
                 }
+            }
+
+            MouseArea {
+                id: controllerMouseArea
+                hoverEnabled: true
+                anchors.fill: parent
 
-                MouseArea {
-                    id: controllerMouseArea
-                    hoverEnabled: true
+                ControlBar {
+                    id: controllerId
+                    focus: true
                     anchors.fill: parent
+                    anchors.leftMargin: VLCStyle.applicationHorizontalMargin
+                    anchors.rightMargin: VLCStyle.applicationHorizontalMargin
+                    anchors.bottomMargin: VLCStyle.applicationVerticalMargin
+                    colors: rootPlayer.colors
 
-                    ControlBar {
-                        id: controllerId
-                        focus: true
-                        anchors.fill: parent
-                        anchors.leftMargin: VLCStyle.applicationHorizontalMargin
-                        anchors.rightMargin: VLCStyle.applicationHorizontalMargin
-                        anchors.bottomMargin: VLCStyle.applicationVerticalMargin
-                        colors: rootPlayer.colors
-
-                        lockAutoHide: playlistpopup.state === "visible"
-                            || !player.hasVideoOutput
-                            || !rootPlayer.hasEmbededVideo
-                            || controllerMouseArea.containsMouse
-                        onAutoHideChanged: {
-                            if (autoHide)
-                                toolbarAutoHide.restart()
-                        }
-
-                        navigationParent: rootPlayer
-                        navigationUpItem: playlistpopup.showPlaylist ? playlistpopup : (audioControls.visible ? audioControls : topcontrolView)
+                    lockAutoHide: playlistpopup.state === "visible"
+                        || !player.hasVideoOutput
+                        || !rootPlayer.hasEmbededVideo
+                        || controllerMouseArea.containsMouse
+                    onAutoHideChanged: {
+                        if (autoHide)
+                            toolbarAutoHide.restart()
                     }
+
+                    navigationParent: rootPlayer
+                    navigationUpItem: playlistpopup.showPlaylist ? playlistpopup : (audioControls.visible ? audioControls : topcontrolView)
                 }
             }
         }
-- 
2.25.1



More information about the vlc-devel mailing list