[vlc-commits] [Git][videolan/vlc][master] 5 commits: qml/MusicAllArtists: Fix keyboard interaction on artist
Hugo Beauzée-Luyssen (@chouquette)
gitlab at videolan.org
Thu Sep 16 09:28:17 UTC 2021
Hugo Beauzée-Luyssen pushed to branch master at VideoLAN / VLC
Commits:
72d5d2b2 by Benjamin Arnaud at 2021-09-16T09:09:47+00:00
qml/MusicAllArtists: Fix keyboard interaction on artist
- - - - -
bb534682 by Benjamin Arnaud at 2021-09-16T09:09:47+00:00
qml/VLCStyle: Add the 'dragDelta' property
And patch the qml files accordingly.
- - - - -
6d95b00b by Benjamin Arnaud at 2021-09-16T09:09:47+00:00
qml: Create MusicArtistDelegate
- - - - -
36b8e67e by Benjamin Arnaud at 2021-09-16T09:09:47+00:00
qml/ExpandGridView: Update the 'expandIndex' behavior with setCurrentItemFocus
- - - - -
6b96e6a0 by Benjamin Arnaud at 2021-09-16T09:09:47+00:00
qml/Music(s): Add 'setCurrentItemFocus' based navigation
- - - - -
14 changed files:
- modules/gui/qt/Makefile.am
- modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
- modules/gui/qt/medialibrary/qml/MusicAlbums.qml
- modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
- modules/gui/qt/medialibrary/qml/MusicAllArtists.qml
- modules/gui/qt/medialibrary/qml/MusicArtist.qml
- + modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
- modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
- modules/gui/qt/style/VLCStyle.qml
- modules/gui/qt/vlc.qrc
- modules/gui/qt/widgets/qml/ExpandGridView.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/TableViewDelegate.qml
- po/POTFILES.in
Changes:
=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -698,6 +698,7 @@ libqt_plugin_la_QML = \
gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml \
gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml \
gui/qt/medialibrary/qml/MusicArtist.qml \
+ gui/qt/medialibrary/qml/MusicArtistDelegate.qml \
gui/qt/medialibrary/qml/MusicArtistsAlbums.qml \
gui/qt/medialibrary/qml/MusicAllArtists.qml \
gui/qt/medialibrary/qml/MusicArtistsDisplay.qml \
=====================================
modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
=====================================
@@ -35,6 +35,10 @@ FocusScope {
height: VLCStyle.artistBanner_height
+ function setCurrentItemFocus(reason) {
+ playActionBtn.forceActiveFocus(reason);
+ }
+
Image {
id: background
asynchronous: true
=====================================
modules/gui/qt/medialibrary/qml/MusicAlbums.qml
=====================================
@@ -188,16 +188,26 @@ FocusScope {
width: gridView_id.width
onRetract: gridView_id.retract()
Navigation.parentItem: root
- Navigation.cancelAction: function() { gridView_id.retract() }
- Navigation.upAction: function() { gridView_id.retract() }
+
+ Navigation.cancelAction: function() {
+ gridView_id.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
+ Navigation.upAction: function() {
+ gridView_id.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
Navigation.downAction: function() {}
}
onActionAtIndex: {
- if (selectionModel.selectedIndexes.length === 1)
- switchExpandItem(index)
- else
- _actionAtIndex(index)
+ if (selectionModel.selectedIndexes.length === 1) {
+ switchExpandItem(index);
+
+ expandItem.setCurrentItemFocus(Qt.TabFocusReason);
+ } else {
+ _actionAtIndex(index);
+ }
}
onSelectAll: selectionModel.selectAll()
=====================================
modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
=====================================
@@ -50,6 +50,10 @@ FocusScope {
// causing expand and shrink animation bit laggy, so clip the delegate to fix it
clip: true
+ function setCurrentItemFocus(reason) {
+ playActionBtn.forceActiveFocus(reason);
+ }
+
Rectangle {
anchors.fill: parent
color: VLCStyle.colors.expandDelegate
=====================================
modules/gui/qt/medialibrary/qml/MusicAllArtists.qml
=====================================
@@ -136,7 +136,6 @@ FocusScope {
} else {
_currentView.currentIndex = index
requestArtistAlbumView(Qt.TabFocusReason)
- medialib.addAndPlay( artistModel.getIdForIndex(index) )
}
}
=====================================
modules/gui/qt/medialibrary/qml/MusicArtist.qml
=====================================
@@ -60,6 +60,10 @@ FocusScope {
height: col.height
width: root.width
+ function setCurrentItemFocus(reason) {
+ artistBanner.setCurrentItemFocus(reason);
+ }
+
Column {
id: col
@@ -75,11 +79,10 @@ FocusScope {
artist: root.artist
Navigation.parentItem: root
Navigation.downAction: function() {
- headerFs.focus = false
if (albumsListView)
- albumsListView.forceActiveFocus(Qt.TabFocusReason)
+ albumsListView.setCurrentItemFocus(Qt.TabFocusReason);
else
- _currentView.setCurrentItemFocus(Qt.TabFocusReason)
+ _currentView.setCurrentItemFocus(Qt.TabFocusReason);
}
}
@@ -118,10 +121,13 @@ FocusScope {
spacing: VLCStyle.column_margin_width
Navigation.parentItem: root
- Navigation.upItem: artistBanner
+
+ Navigation.upAction: function() {
+ artistBanner.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
Navigation.downAction: function() {
- headerFs.focus = false
- _currentView.setCurrentItemFocus(Qt.TabFocusReason)
+ _currentView.setCurrentItemFocus(Qt.TabFocusReason);
}
delegate: Widgets.GridItem {
@@ -198,6 +204,10 @@ FocusScope {
}
}
+ function setCurrentItemFocus(reason) {
+ view.currentItem.setCurrentItemFocus(reason);
+ }
+
function resetFocus() {
if (albumModel.count === 0) {
return
@@ -344,23 +354,36 @@ FocusScope {
width: gridView_id.width
onRetract: gridView_id.retract()
Navigation.parentItem: root
- Navigation.cancelAction: function() { gridView_id.retract() }
- Navigation.upAction: function() { gridView_id.retract() }
+
+ Navigation.cancelAction: function() {
+ gridView_id.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
+ Navigation.upAction: function() {
+ gridView_id.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
Navigation.downAction: function() {}
}
onActionAtIndex: {
- if (albumSelectionModel.selectedIndexes.length <= 1) {
- gridView_id.switchExpandItem( index )
+ if (albumSelectionModel.selectedIndexes.length === 1) {
+ switchExpandItem(index);
+
+ expandItem.setCurrentItemFocus(Qt.TabFocusReason);
} else {
- root._actionAtIndex( index, albumModel, albumSelectionModel )
+ _actionAtIndex(index, albumModel, albumSelectionModel);
}
}
onSelectAll: albumSelectionModel.selectAll()
onSelectionUpdated: albumSelectionModel.updateSelection( keyModifiers, oldIndex, newIndex )
Navigation.parentItem: root
- Navigation.upItem: headerItem
+
+ Navigation.upAction: function() {
+ headerItem.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
Navigation.cancelAction: root._onNavigationCancel
Connections {
@@ -404,7 +427,11 @@ FocusScope {
]
Navigation.parentItem: root
- Navigation.upItem: headerItem
+
+ Navigation.upAction: function() {
+ headerItem.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
Navigation.cancelAction: root._onNavigationCancel
onItemDoubleClicked: medialib.addAndPlay(model.id)
=====================================
modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
=====================================
@@ -0,0 +1,172 @@
+/*****************************************************************************
+ * Copyright (C) 2020 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee at omega.gg>
+ *
+ * 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.11
+
+import org.videolan.controls 0.1
+
+import "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+Control {
+ id: root
+
+ // Properties
+
+ /* required */ property var artistModel
+
+ property bool isCurrent: false
+
+ // Aliases
+ // Private
+
+ property alias _isHover: mouseArea.containsMouse
+
+ // Signals
+
+ signal itemClicked(variant mouse)
+
+ signal itemDoubleClicked(variant mouse)
+
+ // Settings
+
+ height: VLCStyle.play_cover_small + (VLCStyle.margin_xsmall * 2)
+
+ // Childs
+
+ background: Widgets.AnimatedBackground {
+ id: background
+
+ active: visualFocus
+
+ backgroundColor: {
+ if (isCurrent)
+ return VLCStyle.colors.gridSelect;
+ else if (_isHover)
+ return VLCStyle.colors.listHover;
+ else
+ return VLCStyle.colors.setColorAlpha(VLCStyle.colors.listHover, 0);
+ }
+ }
+
+ contentItem: MouseArea {
+ id: mouseArea
+
+ hoverEnabled: true
+
+ drag.axis: Drag.XAndYAxis
+
+ drag.target: Widgets.DragItem {
+ function updateComponents(maxCovers) {
+ return {
+ covers: [{ artwork: (model.cover) ? model.cover
+ : VLCStyle.noArtArtistSmall }],
+
+ title: (model.name) ? model.name
+ : i18n.qtr("Unknown artist"),
+
+ count: 1
+ }
+ }
+
+ function getSelectedInputItem() {
+ return artistModel.getItemsForIndexes([artistModel.index(index, 0)]);
+ }
+ }
+
+ drag.onActiveChanged: {
+ var dragItem = drag.target;
+
+ if (drag.active == false)
+ dragItem.Drag.drop();
+
+ dragItem.Drag.active = drag.active;
+ }
+
+ onPositionChanged: {
+ if (drag.active == false) return;
+
+ var pos = drag.target.parent.mapFromItem(root, mouseX, mouseY);
+
+ drag.target.x = pos.x + VLCStyle.dragDelta;
+ drag.target.y = pos.y + VLCStyle.dragDelta;
+ }
+
+ onClicked: itemClicked(mouse)
+
+ onDoubleClicked: itemDoubleClicked(mouse)
+
+ Widgets.CurrentIndicator {
+ height: parent.height - (margin * 2)
+
+ margin: VLCStyle.dp(4, VLCStyle.scale)
+
+ visible: isCurrent
+ }
+
+ RowLayout {
+ anchors.fill: parent
+
+ anchors.leftMargin: VLCStyle.margin_normal
+ anchors.rightMargin: VLCStyle.margin_normal
+ anchors.topMargin: VLCStyle.margin_xsmall
+ anchors.bottomMargin: VLCStyle.margin_xsmall
+
+ spacing: VLCStyle.margin_xsmall
+
+ RoundImage {
+ width: VLCStyle.play_cover_small
+ height: width
+
+ radius: width
+
+ source: (model.cover) ? model.cover
+ : VLCStyle.noArtArtistSmall
+
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+
+ Rectangle {
+ anchors.fill: parent
+
+ radius: VLCStyle.play_cover_small
+
+ color: "transparent"
+
+ border.width: VLCStyle.dp(1, VLCStyle.scale)
+
+ border.color: (isCurrent || _isHover) ? VLCStyle.colors.accent
+ : VLCStyle.colors.roundPlayCoverBorder
+ }
+ }
+
+ Widgets.ListLabel {
+ text: (model.name) ? model.name
+ : i18n.qtr("Unknown artist")
+
+ color: background.foregroundColor
+
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+ }
+ }
+}
=====================================
modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
=====================================
@@ -125,7 +125,11 @@ FocusScope {
focus: true
displayMarginEnd: miniPlayer.height // to get blur effect while scrolling in mainview
Navigation.parentItem: root
- Navigation.rightItem: albumSubView
+
+ Navigation.rightAction: function() {
+ albumSubView.setCurrentItemFocus(Qt.TabFocusReason);
+ }
+
Navigation.cancelAction: function() {
if (artistList.currentIndex <= 0)
root.Navigation.defaultNavigationCancel()
@@ -141,107 +145,27 @@ FocusScope {
topPadding: VLCStyle.margin_xlarge
}
- delegate: Widgets.AnimatedBackground {
- id: item
+ delegate: MusicArtistDelegate {
+ width: artistList.width
- property bool _highlighted: mouseArea.containsMouse || this.activeFocus
+ isCurrent: ListView.isCurrentItem
- height: VLCStyle.play_cover_small + (VLCStyle.margin_xsmall * 2)
- width: artistList.width
- active: false
- backgroundColor: _highlighted ? VLCStyle.colors.bgHover : "transparent"
- foregroundColor: _highlighted ? VLCStyle.colors.bgHoverText : VLCStyle.colors.text
+ artistModel: artistModel
- Widgets.CurrentIndicator {
- visible: item.ListView.isCurrentItem
- }
+ onItemClicked: {
+ selectionModel.updateSelection(mouse.modifiers, artistList.currentIndex,
+ index);
+
+ artistList.currentIndex = index;
- RowLayout {
- spacing: VLCStyle.margin_xsmall
- anchors {
- fill: parent
- leftMargin: VLCStyle.margin_normal
- rightMargin: VLCStyle.margin_normal
- topMargin: VLCStyle.margin_xsmall
- bottomMargin: VLCStyle.margin_xsmall
- }
-
- RoundImage {
- source: model.cover || VLCStyle.noArtArtistSmall
- height: VLCStyle.play_cover_small
- width: VLCStyle.play_cover_small
- radius: VLCStyle.play_cover_small
-
- Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-
- Rectangle {
- anchors.fill: parent
- color: "transparent"
- radius: VLCStyle.play_cover_small
- border.width: VLCStyle.dp(1, VLCStyle.scale)
- border.color: !_highlighted ? VLCStyle.colors.roundPlayCoverBorder : VLCStyle.colors.accent
- }
- }
-
- Widgets.ListLabel {
- text: model.name || i18n.qtr("Unknown artist")
- color: item.foregroundColor
-
- Layout.fillWidth: true
- Layout.fillHeight: true
- }
+ artistList.forceActiveFocus(Qt.MouseFocusReason);
}
- MouseArea {
- id: mouseArea
-
- anchors.fill: parent
- hoverEnabled: true
-
- onClicked: {
- selectionModel.updateSelection( mouse.modifiers , artistList.currentIndex, index)
- artistList.currentIndex = index
- artistList.forceActiveFocus()
- }
-
- onDoubleClicked: {
- if (mouse.buttons === Qt.LeftButton)
- medialib.addAndPlay( model.id )
- else
- albumSubView.forceActiveFocus()
- }
-
- drag.axis: Drag.XAndYAxis
- drag.target: Widgets.DragItem {
- function updateComponents(maxCovers) {
- return {
- covers: [{artwork: model.cover || VLCStyle.noArtArtistSmall}],
- title: model.name || i18n.qtr("Unknown artist"),
- count: 1
- }
- }
-
- function getSelectedInputItem() {
- return artistModel.getItemsForIndexes([artistModel.index(index, 0)])
- }
- }
-
- drag.onActiveChanged: {
- var dragItem = drag.target
-
- if (!drag.active)
- dragItem.Drag.drop()
-
- dragItem.Drag.active = drag.active
- }
-
- onPositionChanged: {
- if (drag.active) {
- var pos = drag.target.parent.mapFromItem(item, mouseX, mouseY)
- drag.target.x = pos.x + 12
- drag.target.y = pos.y + 12
- }
- }
+ onItemDoubleClicked: {
+ if (mouse.buttons === Qt.LeftButton)
+ medialib.addAndPlay(model.id);
+ else
+ albumSubView.forceActiveFocus();
}
}
=====================================
modules/gui/qt/style/VLCStyle.qml
=====================================
@@ -220,6 +220,10 @@ QtObject {
readonly property int bannerButton_height: dp(32, scale)
readonly property int bannerButton_width: dp(40, scale)
+ // Drag and drop
+
+ readonly property int dragDelta: dp(12, scale)
+
// Speed
property bool animate: true
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -293,6 +293,7 @@
<file alias="MusicAlbumsDisplay.qml">medialibrary/qml/MusicAlbumsDisplay.qml</file>
<file alias="MusicAlbumsGridExpandDelegate.qml">medialibrary/qml/MusicAlbumsGridExpandDelegate.qml</file>
<file alias="MusicArtist.qml">medialibrary/qml/MusicArtist.qml</file>
+ <file alias="MusicArtistDelegate.qml">medialibrary/qml/MusicArtistDelegate.qml</file>
<file alias="MusicArtistsAlbums.qml">medialibrary/qml/MusicArtistsAlbums.qml</file>
<file alias="MusicAllArtists.qml">medialibrary/qml/MusicAllArtists.qml</file>
<file alias="MusicArtistsDisplay.qml">medialibrary/qml/MusicArtistsDisplay.qml</file>
=====================================
modules/gui/qt/widgets/qml/ExpandGridView.qml
=====================================
@@ -106,7 +106,7 @@ FocusScope {
// NOTE: Saving the focus reason for later.
_currentFocusReason = reason;
- if (!model || model.count === 0 || currentIndex === -1 || expandIndex !== -1) {
+ if (!model || model.count === 0 || currentIndex === -1) {
// NOTE: By default we want the focus on the flickable.
flickable.forceActiveFocus(reason);
@@ -120,6 +120,13 @@ FocusScope {
// NOTE: We make sure the current item is fully visible.
positionViewAtIndex(currentIndex, ItemView.Contain);
+
+ if (expandIndex !== -1) {
+ // NOTE: We clear expandIndex so we can apply the proper focus in _setupChild.
+ expandIndex = -1;
+
+ retract();
+ }
}
function switchExpandItem(index) {
@@ -658,7 +665,6 @@ FocusScope {
to: 0
onStopped: {
expandIndex = -1
- setCurrentItemFocus(Qt.OtherFocusReason)
if (_newExpandIndex !== -1)
flickable.expand()
}
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -204,8 +204,8 @@ Control {
onPositionChanged: {
if (drag.active) {
var pos = drag.target.parent.mapFromItem(root, mouseX, mouseY)
- drag.target.x = pos.x + 12
- drag.target.y = pos.y + 12
+ drag.target.x = pos.x + VLCStyle.dragDelta
+ drag.target.y = pos.y + VLCStyle.dragDelta
}
}
=====================================
modules/gui/qt/widgets/qml/TableViewDelegate.qml
=====================================
@@ -116,11 +116,8 @@ Control {
var pos = drag.target.parent.mapFromItem(hoverArea, mouseX, mouseY);
- // FIXME: Shouldn't this be specified in VLCStyle ?
- var delta = VLCStyle.dp(12);
-
- drag.target.x = pos.x + delta;
- drag.target.y = pos.y + delta;
+ drag.target.x = pos.x + VLCStyle.dragDelta;
+ drag.target.y = pos.y + VLCStyle.dragDelta;
}
onDoubleClicked: {
=====================================
po/POTFILES.in
=====================================
@@ -828,6 +828,7 @@ modules/gui/qt/medialibrary/qml/MusicAlbums.qml
modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
modules/gui/qt/medialibrary/qml/MusicArtist.qml
+modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
modules/gui/qt/medialibrary/qml/MusicAllArtists.qml
modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/f483bdc91951208a3875da6e8a6fa0059a6d5aa8...6b96e6a078b28ebbf3e1e2f8b8f1e50dee6c0a00
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/f483bdc91951208a3875da6e8a6fa0059a6d5aa8...6b96e6a078b28ebbf3e1e2f8b8f1e50dee6c0a00
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list