feat: add Library on QML #14514

acolombier · 2025-03-24T01:53:39Z

Depends of #14516

Alternative to #12897 and #4594

Demo

Track menu (basic)

Column sorting

Library feature (Playlist)

Library feature (Computer)

(Note: resizable column is only supported in Qt 6.5 - might need to implement our own to keep support to Ubuntu 24.04 )

Bonus: file drag visual

Screencast.From.2025-03-24.14-38-13.mp4

JoergAtGithub · 2025-03-30T20:51:08Z

I tried this. The QML GUI opens, but the track list is empty. If I click on a sidebar element like Computer it crashs:

warning [Main] QQmlExpression: Expression file:///D:/mixxx-2.6-worktree/res/qml/Library.qml:211:13 depends on non-NOTIFYable properties:
warning [Main]     mixxx::qml::QmlLibrarySourceTree::defaultColumns
warning [Main] QQmlExpression: Expression file:///D:/mixxx-2.6-worktree/res/qml/Library.qml:204:13 depends on non-NOTIFYable properties:
warning [Main]     mixxx::qml::QmlLibrarySourceTree::defaultColumns
warning [Main] QQmlExpression: Expression file:///D:/mixxx-2.6-worktree/res/qml/Library.qml:197:13 depends on non-NOTIFYable properties:
warning [Main]     mixxx::qml::QmlLibrarySourceTree::defaultColumns
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:15: TypeError: Cannot read property 'valid' of undefined
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/Sampler.qml:86:9: Unable to assign [undefined] to QString
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/LibraryBrowser.qml:36:17: QML TreeView: modelIndex(row, column) is deprecated. Use index(row, column) instead. For more information, see https://doc.qt.io/qt-6/qml-qtquick-tableview-obsolete.html
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/LibraryBrowser.qml:116:37: QML QQuickImage: Cannot open: file:///D:/mixxx-2.6-worktree/res/qml/images/library_tracks.png
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/LibraryBrowser.qml:36:17: QML TreeView: modelIndex(row, column) is deprecated. Use index(row, column) instead. For more information, see https://doc.qt.io/qt-6/qml-qtquick-tableview-obsolete.html
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/LibraryBrowser.qml:36:17: QML TreeView: modelIndex(row, column) is deprecated. Use index(row, column) instead. For more information, see https://doc.qt.io/qt-6/qml-qtquick-tableview-obsolete.html
warning [Main] file:///D:/mixxx-2.6-worktree/res/qml/LibraryBrowser.qml:36:17: QML TreeView: modelIndex(row, column) is deprecated. Use index(row, column) instead. For more information, see https://doc.qt.io/qt-6/qml-qtquick-tableview-obsolete.html
DEBUG ASSERT: "index.isValid()" in function void __cdecl mixxx::qml::QmlSidebarModelProxy::activate(const class QModelIndex &) at D:\mixxx-2.6-worktree\src\qml\qmlsidebarmodelproxy.cpp:39

acolombier · 2025-04-01T13:11:51Z

That's strange. Looking at modelIndex(row, column), I assume you are running >Qt 6.5. unfortunately, I believe there was a breaking change in that function according to the doc.

acolombier · 2025-04-01T22:17:37Z

I can confirm that breaking change - see this change. Sadly, Ubuntu 24.04 is stuck at 6.4.2, which doesn't include the replacement method. Could you please run with the envvar QT_QUICK_TABLEVIEW_COMPAT_VERSION=6.4? If it doesn't work, this following patch should make it work with > Qt 6.4.2. could you please confirm that too?

diff --git a/res/qml/LibraryBrowser.qml b/res/qml/LibraryBrowser.qml
index a55206034d..7e994b2bce 100644
--- a/res/qml/LibraryBrowser.qml
+++ b/res/qml/LibraryBrowser.qml
@@ -59,7 +59,7 @@ Rectangle {
                         required property int row
                         required property int column
                         required property bool current
-                        readonly property var index: treeView.modelIndex(column, row) // FIXME this seems to become "row,column" in future version of Qt (after 6.4). Update to `index` when upgradeing
+                        readonly property var index: treeView.index(row, column) 
 
                         implicitWidth: treeView.width
                         implicitHeight: depth == 0 ? 42 : 35
@@ -89,13 +89,11 @@ Rectangle {
                                 hoverEnabled: true
                                 acceptedButtons: Qt.LeftButton | Qt.RightButton
                                 onClicked: {
-                                    treeView.selectionModel.select(treeView.selectionModel.model.index(row, 0), ItemSelectionModel.Rows | ItemSelectionModel.Select | ItemSelectionModel.Clear | ItemSelectionModel.Current);
+                                    treeView.selectionModel.setCurrentIndex(index, ItemSelectionModel.NoUpdate)
                                     treeView.model.activate(index)
-                                    console.log(treeView.modelIndex(column, row))
                                     if (isTreeNode && hasChildren) {
                                         treeView.toggleExpanded(row)
                                     }
-                                    event.accepted = true
                                 }
                             }

I tried with Qt 6.8 and QT_QUICK_TABLEVIEW_COMPAT_VERSION does the trick, though the selection won’t show on the sidebar (probably another breaking change somewhere that I need to handle)

Also, please note that if you have no playlist or crate, it is expected that the sidebar appears empty, as there is no feedback on this state yet

acolombier · 2025-04-19T11:18:08Z

I consider this PR mature now. There is missing feature to be added later, such as context menu integration on the sidebar, list action such as playlist or crate creation, but this can be split and added later.

Regarding the breaking changes issue raised by @JoergAtGithub (to be confirmed), I suggest we dynamically set the QT_QUICK_TABLEVIEW_COMPAT_VERSION till we raise the minimal system requirement and drop support for Qt < 6.5

Swiftb0y · 2025-05-19T08:45:50Z

This is quite a big PR. any chance of splitting it?

acolombier · 2025-05-19T09:47:46Z

I could move out crate and playlist features in a follow up PR? This should reduce the diff by about 500 lines. Would that be sufficient?

Swiftb0y · 2025-05-19T10:07:26Z

thats still 2,2k lines. Most of the C++ looks pretty boilerplate-y, so this might be feasible.

Eve00000 · 2025-08-01T16:15:30Z

Test Pt1 : Clean Win 10 x64 VM (4cpus 16Gb , build installed. (1920*1080)

1st impression : looks very nice
1st user experience:

sorting is delayed (red bullet is very nice how to see asc/desc?)
sidebar is empty
no horizontal scrolbar / scrolling?
cannot select columns (show/hide)
arrow keys not working
no resizing of columns (the whole table just moves to left/right)

performance same as in test audioHardware

acolombier · 2025-08-08T19:01:27Z

Thanks for your feedback @Eve00000 !

sorting is delayed (red bullet is very nice how to see asc/desc?)

Yep, there are currently performance limitation with the model. I'm hoping this can be fixed later, as the model gets cleaned up a little bit more

sidebar is empty

Yes, this gets implemented later, in this PR

cannot select columns (show/hide)
no resizing of columns (the whole table just moves to left/right)

Yep, this will be implemented later. The reason for that is, more recent version of Qt support this built-in so I didn't want to implement it manually now

arrow keys not working

Yep, that also a know "limitation", which is likely due to me not understanding well yet how the focus works on QML! Probably can also be revisited next?

Swiftb0y

some thoughts on qml_owned_ptr since it was brought to my attention again in #14597

src/qml/qml_owned_ptr.h

JoergAtGithub · 2025-09-16T08:50:17Z

I could run the latest commit on Windows 11:

Without Scroll-Bars it's barely usable
Scrolling through the library let the waveform jump heavily. This looks like the main event loop is blocked. Is the loading of track information done in a seperated thread?

Swiftb0y

didn't take a thorough look at the qml, but I did notice some stuff in the C++ that needs a little more polish. I'm sorry for dragging this out.

CMakeLists.txt

Swiftb0y · 2025-09-16T11:05:14Z

src/main.cpp

+        // This is a workaround to support Qt 6.4.2, currently shipped on
+        // Ubuntu 24.04 See
+        // https://github.com/mixxxdj/mixxx/pull/14514#issuecomment-2770811094
+        // for further details
+        qputenv("QT_QUICK_TABLEVIEW_COMPAT_VERSION", "6.4");


Ah I see. Can you raise an issue so we don't forget about this once Qt 6.5 is baseline?

src/qml/qmllibrarytracklistmodel.cpp

src/qml/qmllibrarysourcetree.cpp

Swiftb0y · 2025-09-16T11:47:47Z

src/qml/qmllibrarysource.h

+
+class LibraryTableModel;
+class TreeItemModel;
+class AllTrackLibraryFeature final : public LibraryFeature {


idk, didn't know qt imposed that directory structure limitation on us. no opinion.

src/qml/qmllibrarysource.cpp

src/qml/qmllibraryproxy.h

Swiftb0y · 2025-09-16T12:08:23Z

some of my concerns about ptr casts where bogus, I deleted them.

acolombier · 2025-09-17T23:51:42Z

Thanks for the feedback @JoergAtGithub !

Without Scroll-Bars it's barely usable

Noted, I have added vertical scrollbar. I will add the horizontal later, once I have made the update to Qt 6.8 as there was quite some changes around TableView and I suspect I will need to refactor all the column sizing/horizontal sizing policy.

Scrolling through the library let the waveform jump heavily. This looks like the main event loop is blocked. Is the loading of track information done in a seperated thread?

No, it's all currently done on the UI thread!
This is part of the performance improvement I mentioned in our catchup that would be needed before considering this done! The reason for not introducing a side thread yet is that the current library model is quite messy and can probably be simplified (also likely to happen after the 6.8 upgrade!) so I didn't want to add complexity it just yet

Swiftb0y

Thank you, no complaints. Basically LGTM from my side

Swiftb0y · 2025-09-18T00:05:37Z

res/qml/Library/SourceTree.qml

+                tableView.selectionModel.selectRow(row);
+                tableView.loadSelectedTrackIntoNextAvailableDeck(false);


this works for now, though in the future it would be nice if this didn't have to go through the implicit state of the tableView.

Swiftb0y · 2025-09-18T00:06:22Z

res/qml/Library/SourceTree.qml

+        // FIXME: WaveformOverview is currently disabled due to performance limitation. Like for the legacy UI, a cache likely needs to be implemented to help
+        // Mixxx.TrackListColumn {


does this FIXME still apply? Does the overview have perf issues?

Yes it does, it basically suffers for the same impacting covers, which @JoergAtGithub raised - the fact that the data model is fully operating in the QML thread is creating slow down, but due the fairly hacky state of the model, I don't feel comfortable adding thread yet, and would prefer starting up clean, as I do the 6.8 or 6.9 migration in the near future.

right, this is also an issue in the legacy GUI then, right?

I believe the legacy library is already leveraging a worker thread - at least I have not noticed any significant performance issue!

JoergAtGithub · 2025-09-18T18:09:18Z

In general this works on Windows. Im fine with merging this as it is, as first step.

acolombier · 2025-09-18T23:25:41Z

Squashed the fixups! Lets get this in for now, and iterate on the async waveform overview/cover, tracked into #15376

Swiftb0y · 2025-09-19T11:56:05Z

Just checked this out, works surprisingly well on the surface. Good job. Only surprising thing was that the text in the header doesn't seem to be clipped/stacked quite right. Idk if this is our bug or Qt.

Screencast.From.2025-09-19.13-48-41.mp4

Also got a bunch of qml warnings related to SourceTree.qml. It would be nice if you could look into some of those.

warning [Main] QQmlExpression: Expression file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/SourceTree.qml:186:9 depends on non-bindable properties:
warning [Main] SourceTree_QMLTYPE_151::defaultColumns

warning [Main] file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/Browser.qml:121:37: QML QQuickImage: Cannot open: file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/images/library_tracks.png

warning [Main] : Error: Cannot find the marker endIcon "/home/swiftb0y/Sourcerepositories/mixxx/res/qml/images/jump_%1.svg"

warning [Main] file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/SourceTree.qml:38:13: Unable to assign [undefined] to QString

Got this one spammed 30 times in a row.

warning [Main] Ignoring sourceSize request for image url that came from grabToImage. Use the targetSize parameter of the grabToImage() function instead.

warning [Main] file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/SourceTree.qml:132:23: QML DefaultDelegate (parent or ancestor of QQuickDragAttached): Don't know how to encode variant of type QMetaType(QUrl) as mime type "text/plain"
warning [Main] file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/SourceTree.qml:132:23: QML DefaultDelegate (parent or ancestor of QQuickDragAttached): Don't know how to encode variant of type QMetaType(QUrl) as mime type "text/uri-list"
warning [Main] file:///home/swiftb0y/Sourcerepositories/mixxx/res/qml/Library/SourceTree.qml:132:23: QML DefaultDelegate (parent or ancestor of QQuickDragAttached): Binding loop detected for property "active":

acolombier · 2025-09-19T17:17:23Z

Thanks for your test! I should have fixed all those warning hopefully as well as the clipping issue. Only one remaining is:

warning [Main] : Error: Cannot find the marker endIcon "/home/swiftb0y/Sourcerepositories/mixxx/res/qml/images/jump_%1.svg"

This was introduced by the Saved Jump feature - this comes to the fact that we later on brought capability to have the jump icon to have a backward and forward version, but the QML interface has this now redundant early checks I need to remove

Swiftb0y

Thank you. I can confirm the warnings I complained about are gone (there are still some, but they're unrelated to this PR)

JoergAtGithub · 2025-09-20T18:32:11Z

This API might be interesting for the future: https://www.qt.io/blog/model-to-sort-and-filter-the-data-on-the-fly

acolombier · 2025-09-20T20:32:34Z

Oh great ! I know there was improvement already on 6.5, but I could wait for 6.10 to add that, though this probably means we might struggle to support native Ubuntu 26.04 (not sure if they would stick to 6.8 LTS)
I don't think it's a deal breaker tho, we could discuss rolling out 3.0 on flatpak only (I know there were discussions on Zulip) and let distro maintainers have to deal with old deps.
Perhaps worth creating an issue to discuss that topic?

github-actions bot added library build browse soundio qml labels Mar 24, 2025

acolombier moved this to In progress in QML GUI Mar 24, 2025

acolombier added this to QML GUI Mar 24, 2025

acolombier self-assigned this Mar 24, 2025

acolombier removed the soundio label Mar 24, 2025

acolombier mentioned this pull request Mar 25, 2025

Add track/deck context menu using a model, investigate a model based QMenu for legacy skins #14520

Open

acolombier added this to the 3.0.0-beta milestone Mar 25, 2025

acolombier moved this to In progress in Releases Mar 25, 2025

acolombier added this to Releases Mar 25, 2025

github-actions bot added the code quality label Mar 29, 2025

acolombier force-pushed the feat/qml-library branch 4 times, most recently from cc8df70 to d9097f6 Compare March 29, 2025 18:57

ronso0 mentioned this pull request Apr 2, 2025

(fix) avoid crash after removing Quick Link #14556

Merged

acolombier marked this pull request as ready for review April 19, 2025 11:18

acolombier added the needs review label May 7, 2025

acolombier force-pushed the feat/qml-library branch from d9097f6 to f78d8ff Compare May 19, 2025 00:37

acolombier force-pushed the feat/qml-library branch from f78d8ff to 3fab7ee Compare May 19, 2025 09:50

acolombier mentioned this pull request May 28, 2025

QML settings sound hardware #14597

Merged

acolombier force-pushed the feat/qml-library branch from ded2c6b to 0fbdcf6 Compare June 19, 2025 23:12

acolombier force-pushed the feat/qml-library branch from 0fbdcf6 to 8a83d82 Compare June 30, 2025 07:45

Swiftb0y reviewed Aug 11, 2025

View reviewed changes

acolombier requested a review from Swiftb0y September 16, 2025 07:37

Swiftb0y reviewed Sep 16, 2025

View reviewed changes

Swiftb0y reviewed Sep 18, 2025

View reviewed changes

acolombier force-pushed the feat/qml-library branch 2 times, most recently from 1490e8b to 67f4125 Compare September 18, 2025 23:19

acolombier force-pushed the feat/qml-library branch from 2b9ea64 to 9ec873a Compare September 19, 2025 17:16

Swiftb0y approved these changes Sep 19, 2025

View reviewed changes

feat: add Library cappability on QML

426c3e5

acolombier force-pushed the feat/qml-library branch from 9ec873a to 426c3e5 Compare September 19, 2025 20:47

JoergAtGithub enabled auto-merge September 19, 2025 21:02

JoergAtGithub merged commit da6db1e into mixxxdj:main Sep 19, 2025
14 checks passed

github-project-automation bot moved this from In progress to Done in QML GUI Sep 19, 2025

github-project-automation bot moved this from In progress to Done in Releases Sep 19, 2025

JoergAtGithub removed the needs review label Sep 21, 2025

		tableView.selectionModel.selectRow(row);
		tableView.loadSelectedTrackIntoNextAvailableDeck(false);

		// FIXME: WaveformOverview is currently disabled due to performance limitation. Like for the legacy UI, a cache likely needs to be implemented to help
		// Mixxx.TrackListColumn {

Uh oh!

feat: add Library on QML #14514

feat: add Library on QML #14514

Conversation

acolombier commented Mar 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo

Uh oh!

JoergAtGithub commented Mar 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

acolombier commented Apr 1, 2025

Uh oh!

acolombier commented Apr 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

acolombier commented Apr 19, 2025

Uh oh!

Swiftb0y commented May 19, 2025

Uh oh!

acolombier commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Swiftb0y commented May 19, 2025

Uh oh!

Eve00000 commented Aug 1, 2025

Uh oh!

acolombier commented Aug 8, 2025

Uh oh!

Swiftb0y left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JoergAtGithub commented Sep 16, 2025

Uh oh!

Swiftb0y left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Swiftb0y Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Swiftb0y Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Swiftb0y commented Sep 16, 2025

Uh oh!

acolombier commented Sep 17, 2025

Uh oh!

Swiftb0y left a comment

Choose a reason for hiding this comment

Uh oh!

Swiftb0y Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

Swiftb0y Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

acolombier Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

Swiftb0y Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

acolombier Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

JoergAtGithub commented Sep 18, 2025

Uh oh!

acolombier commented Sep 18, 2025

acolombier commented Mar 24, 2025 •

edited

Loading

JoergAtGithub commented Mar 30, 2025 •

edited

Loading

acolombier commented Apr 1, 2025 •

edited

Loading

acolombier commented May 19, 2025 •

edited

Loading

Swiftb0y commented Sep 19, 2025 •

edited

Loading

Swiftb0y left a comment •

edited

Loading