[vlc-commits] [Git][videolan/vlc][master] 4 commits: qml/MusicAlbumsGridExpandDelegate: fix keyboard navigation

Steve Lhomme (@robUx4) gitlab at videolan.org
Fri Jan 27 11:03:19 UTC 2023



Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
20cf64dc by Yann Lochet at 2023-01-27T10:18:07+00:00
qml/MusicAlbumsGridExpandDelegate: fix keyboard navigation

When using the left arrow in the track list, the focus was not put on
the enqueue button (whereas this is the behaviour when in the header)

- - - - -
475ea681 by Yann Lochet at 2023-01-27T10:18:07+00:00
qml/MusicAlbumsGridExpandDelegate: fix incorrect focus reason

TabFocus is a focus policy whereas TabFocusReason is a focus reason

- - - - -
ec9a9a8e by Yann Lochet at 2023-01-27T10:18:07+00:00
qml: adapt MusicAlbumsGridExpandDelegate for smaller screen sizes

- - - - -
8ecb4568 by Yann Lochet at 2023-01-27T10:18:07+00:00
qml/MusicAlbumsGridExpandDelegate: fix keyboard focus on play button

- - - - -


1 changed file:

- modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
=====================================
@@ -33,6 +33,12 @@ FocusScope {
 
     property var model
 
+    property var headerFocusScope
+    property var enqueueActionBtn
+    property var playActionBtn
+
+    property bool forcePlayActionBtnFocusOnce: false
+
     signal retract()
 
     implicitWidth: layout.implicitWidth
@@ -51,7 +57,9 @@ FocusScope {
     clip: true
 
     function setCurrentItemFocus(reason) {
-        playActionBtn.forceActiveFocus(reason);
+        root.playActionBtn.forceActiveFocus(reason);
+        if (VLCStyle.isScreenSmall)
+            root.forcePlayActionBtnFocusOnce = true;
     }
 
     function _getStringTrack() {
@@ -98,73 +106,239 @@ FocusScope {
         anchors.bottomMargin: VLCStyle.margin_xxsmall
         spacing: VLCStyle.margin_large
 
-        FocusScope {
-            id: artAndControl
+        Component {
+            id: cover
 
-            Layout.preferredHeight: artAndControlLayout.implicitHeight
-            Layout.preferredWidth: artAndControlLayout.implicitWidth
-            Layout.alignment: Qt.AlignTop
+            RoundImage {
+                id: expand_cover_id
 
-            focus: true
+                property int cover_height: parent.cover_height
+                property int cover_width: parent.cover_width
 
-            Column {
-                id: artAndControlLayout
+                height: cover_height
+                width: cover_width
+                radius: VLCStyle.expandCover_music_radius
+                source: (root.model && root.model.cover && root.model.cover !== "")
+                    ?  root.model.cover
+                    : VLCStyle.noArtAlbumCover
 
-                spacing: VLCStyle.margin_normal
-                bottomPadding: VLCStyle.margin_large
+                Widgets.ListCoverShadow {
+                    anchors.fill: parent
+                }
+            }
+        }
 
-                /* A bigger cover for the album */
-                Item {
-                    height: VLCStyle.expandCover_music_height
-                    width: VLCStyle.expandCover_music_width
+        Component {
+            id: buttons
 
-                    Widgets.ListCoverShadow {
-                        anchors.fill: parent
+            Widgets.NavigableRow {
+                id: actionButtons
+
+                property alias enqueueActionBtn: _enqueueActionBtn
+                property alias playActionBtn: _playActionBtn
+
+                focus: true
+                width: expand_cover_id.width
+                spacing: VLCStyle.margin_small
+
+                Layout.alignment: Qt.AlignCenter
+
+                model: ObjectModel {
+                    Widgets.ActionButtonPrimary {
+                        id: _playActionBtn
+
+                        iconTxt: VLCIcons.play_outline
+                        text: I18n.qtr("Play")
+                        onClicked: MediaLib.addAndPlay( root.model.id )
+
+                        onActiveFocusChanged: {
+                            // root.setCurrentItemFocus sets active focus to playActionBtn, but it gets stolen
+                            // by the delegate of the first track at initial load when playActionBtn is in the
+                            // header of tracks
+                            if (VLCStyle.isScreenSmall && root.forcePlayActionBtnFocusOnce) {
+                                root.forcePlayActionBtnFocusOnce = false
+                                root.playActionBtn.forceActiveFocus(Qt.TabFocusReason)
+                            }
+                        }
                     }
 
-                    RoundImage {
-                        id: expand_cover_id
+                    Widgets.ButtonExt {
+                        id: _enqueueActionBtn
 
-                        height: VLCStyle.expandCover_music_height
-                        width: VLCStyle.expandCover_music_width
-                        radius: VLCStyle.expandCover_music_radius
-                        source: (model && model.cover && model.cover !== "")
-                                  ?  model.cover
-                                  : VLCStyle.noArtAlbumCover
+                        iconTxt: VLCIcons.enqueue
+                        text: I18n.qtr("Enqueue")
+                        onClicked: MediaLib.addToPlaylist( root.model.id )
                     }
                 }
 
-                Widgets.NavigableRow {
-                    id: actionButtons
+                Navigation.parentItem: root
+                Navigation.rightItem: VLCStyle.isScreenSmall ? root.headerFocusScope : tracks
+                Navigation.upItem: VLCStyle.isScreenSmall ? root.headerFocusScope : null
 
-                    focus: true
-                    width: expand_cover_id.width
-                    spacing: VLCStyle.margin_small
+                Navigation.downAction: function () {
+                    if (!VLCStyle.isScreenSmall)
+                        return
 
-                    Layout.alignment: Qt.AlignCenter
+                    if (tracks.count > 0) {
+                        tracks.setCurrentItemFocus(Qt.TabFocusReason)
+                    } else {
+                        root.Navigation.downAction()
+                    }
+                }
+            }
+        }
+
+        Component {
+            id: header_common
 
-                    model: ObjectModel {
-                        Widgets.ActionButtonPrimary {
-                            id: playActionBtn
+            FocusScope {
+                id: headerFocusScope
+
+                property int bottomPadding: parent.bottomPadding
+
+                width: parent.width
+                height: implicitHeight
+                implicitHeight: col.implicitHeight
 
-                            iconTxt: VLCIcons.play_outline
-                            text: I18n.qtr("Play")
-                            onClicked: MediaLib.addAndPlay( model.id )
+                focus: true
+
+                Navigation.parentItem: root
+                Navigation.leftItem: root.enqueueActionBtn
+                Navigation.downAction: function () {
+                    if (VLCStyle.isScreenSmall) {
+                        root.enqueueActionBtn.forceActiveFocus(Qt.TabFocusReason);
+                        return
+                    }
+
+                    if (tracks.count > 0) {
+                        tracks.setCurrentItemFocus(Qt.TabFocusReason)
+                    } else {
+                        root.Navigation.downAction()
+                    }
+                }
+
+                Column {
+                    id: col
+
+                    anchors.fill: parent
+                    bottomPadding: headerFocusScope.bottomPadding
+
+                    RowLayout {
+                        width: parent.width
+
+                        /* The title of the albums */
+                        Widgets.SubtitleLabel {
+                            id: expand_infos_title_id
+
+                            text: Helpers.get(root.model, "title", I18n.qtr("Unknown title"))
+
+                            Layout.fillWidth: true
                         }
 
-                        Widgets.ButtonExt {
-                            id: enqueueActionBtn
+                        Widgets.IconControlButton {
+                            iconText: VLCIcons.close
+                            focus: true
+
+                            Navigation.parentItem: headerFocusScope
+                            Layout.rightMargin: VLCStyle.margin_small
 
-                            iconTxt: VLCIcons.enqueue
-                            text: I18n.qtr("Enqueue")
-                            onClicked: MediaLib.addToPlaylist( model.id )
+                            onClicked: root.retract()
                         }
                     }
 
-                    Navigation.parentItem: root
-                    Navigation.rightItem: tracks
+                    Widgets.CaptionLabel {
+                        id: expand_infos_subtitle_id
+
+                        width: parent.width
+                        text: I18n.qtr("%1 - %2 - %3 - %4")
+                            .arg(Helpers.get(root.model, "main_artist", I18n.qtr("Unknown artist")))
+                            .arg(Helpers.get(root.model, "release_year", ""))
+                            .arg(_getStringTrack())
+                            .arg((root.model && root.model.duration) ? root.model.duration.formatHMS() : 0)
+                    }
                 }
+            }
+        }
 
+        Component {
+            id: header_small
+
+            RowLayout {
+                id: row
+
+                width: parent.width
+                height: implicitHeight
+                implicitHeight: col.implicitHeight
+
+                Loader {
+                    sourceComponent: cover
+                    property int cover_height: VLCStyle.cover_small
+                    property int cover_width: VLCStyle.cover_small
+
+                    Layout.bottomMargin: VLCStyle.margin_large
+                    Layout.rightMargin: VLCStyle.margin_xxsmall
+                }
+
+                Column {
+                    id: col
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.bottomMargin: VLCStyle.margin_large
+
+                    Loader {
+                        sourceComponent: header_common
+                        width: parent.width
+                        property int bottomPadding: VLCStyle.margin_xsmall
+
+                        onLoaded: {
+                            root.headerFocusScope = item
+                        }
+                    }
+
+                    Loader {
+                        sourceComponent: buttons
+
+                        onLoaded: {
+                            root.enqueueActionBtn = item.enqueueActionBtn
+                            root.playActionBtn = item.playActionBtn
+                        }
+                    }
+                }
+            }
+        }
+
+        FocusScope {
+            id: artAndControl
+
+            visible: !VLCStyle.isScreenSmall
+            focus: !VLCStyle.isScreenSmall
+
+            implicitHeight: artAndControlLayout.implicitHeight
+            implicitWidth: artAndControlLayout.implicitWidth
+            Layout.alignment: Qt.AlignTop
+
+            Column {
+                id: artAndControlLayout
+
+                spacing: VLCStyle.margin_normal
+                bottomPadding: VLCStyle.margin_large
+
+                /* A bigger cover for the album */
+                Loader {
+                    sourceComponent: !VLCStyle.isScreenSmall ? cover : null
+                    property int cover_height: VLCStyle.expandCover_music_height
+                    property int cover_width: VLCStyle.expandCover_music_width
+                }
+
+                Loader {
+                    sourceComponent: !VLCStyle.isScreenSmall ? buttons : null
+
+                    onLoaded: {
+                        root.playActionBtn = item.playActionBtn
+                        root.enqueueActionBtn = item.enqueueActionBtn
+                    }
+                }
             }
         }
 
@@ -212,66 +386,13 @@ FocusScope {
                 }
             }
 
-            header: FocusScope {
-                id: headerFocusScope
-
+            header: Loader {
+                sourceComponent: VLCStyle.isScreenSmall
+                                 ? header_small
+                                 : header_common
                 width: tracks.width
-                height: implicitHeight
-                implicitHeight: col.implicitHeight
-
-                focus: true
-
-                Navigation.parentItem: root
-                Navigation.leftItem: enqueueActionBtn
-                Navigation.downAction: function () {
-                    if (tracks.count > 0) {
-                        tracks.setCurrentItemFocus(Qt.TabFocus)
-                    } else {
-                        root.Navigation.downAction()
-                    }
-                }
-
-
-                Column {
-                    id: col
-
-                    anchors.fill: parent
-                    bottomPadding: VLCStyle.margin_large
-
-                    RowLayout {
-                        width: parent.width
-
-                        /* The title of the albums */
-                        Widgets.SubtitleLabel {
-                            id: expand_infos_title_id
-
-                            text: Helpers.get(model, "title", I18n.qtr("Unknown title"))
-
-                            Layout.fillWidth: true
-                        }
-
-                        Widgets.IconControlButton {
-                            iconText: VLCIcons.close
-                            focus: true
 
-                            Navigation.parentItem: headerFocusScope
-                            Layout.rightMargin: VLCStyle.margin_small
-
-                            onClicked: root.retract()
-                        }
-                    }
-
-                    Widgets.CaptionLabel {
-                        id: expand_infos_subtitle_id
-
-                        width: parent.width
-                        text: I18n.qtr("%1 - %2 - %3 - %4")
-                            .arg(Helpers.get(model, "main_artist", I18n.qtr("Unknown artist")))
-                            .arg(Helpers.get(model, "release_year", ""))
-                            .arg(_getStringTrack())
-                            .arg((model && model.duration) ? model.duration.formatHMS() : 0)
-                    }
-                }
+                property int bottomPadding: VLCStyle.margin_large //used only by header_common
             }
 
             clip: true // content may overflow if not enough space is provided
@@ -320,7 +441,7 @@ FocusScope {
             }]
 
             Navigation.parentItem: root
-            Navigation.leftItem: actionButtons
+            Navigation.leftItem: VLCStyle.isScreenSmall ? null : root.enqueueActionBtn
             Navigation.upItem: headerItem
 
             Widgets.TableColumns {



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/2d300b624ed9de89593895399546d065e0f2a3b7...8ecb45684a49a5efa9f23c36266b4be24ab64add

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/2d300b624ed9de89593895399546d065e0f2a3b7...8ecb45684a49a5efa9f23c36266b4be24ab64add
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance


More information about the vlc-commits mailing list