Audio playlist in QML - qt

Question

I am making a simple playlist player on qml. I mean there is a Audio player which plays files with extension .mp3 in a folder. But this "playlist player" assumes the whole folder as a playlist. So I give the path of the playlist folder as a command line argument to the program, for ex. ./playlist_player /home/user/playlist-folder and program plays whole mp3s in the playlist-folder folder. But since qml does not understands wildchars like asterisk(*), I use QDir to find the names of the mp3s to find the names of the mp3s and expose those strings to qml by using an approach which described in here http://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html. So I have an QObject-derived class names FileNames and it has Q_PROPERTY(QStringList mp3List READ mp3List). So on the constructor of the FileNames I look for the path given in command line, and detect for files with extension .mp3s and push_back those paths to the FileNames::mp3List. And on main.cpp, I instantiate a FileNames object after that instantiate QQuickView object and I pass the FileNames object to Qml side with QQmlContext::setContextProperty member function.
Everything works until that I need also the number of the mp3s in the list to iterate all over with next function which increment index value for the list on qml side. I know I can expose another property for passing count of the mp3List but I ended up with this solution might not be the best native one.
Here is the code that I have wrote;
/* filenames.h */
class FileNames : public QObject {
Q_OBJECT
Q_PROPERTY(QStringList mp3List READ mp3List)
Q_PROPERTY(int mp3ListCount READ mp3ListCount)
public:
explicit FileNames(QObject *parent = 0);
QStringList mp3List() const;
int mp3ListCount() const;
private:
QStringList m_mp3List;
int m_mp3ListCount;
};
/* filenames.cpp */
FileNames::FileNames(QObject *parent) :
QObject(parent), m_mp3ListCount(0)
{
QString path("/home/user/music/");
QDir dirname(path);
QStringList dir = dirname.entryList();
for (const auto &file : dir)
if (file.endsWith(".mp3")) {
m_mp3List.push_back("file://" + path + file);
++m_mp3ListCount;
}
}
QStringList FileNames::mp3List() const
{
return m_mp3List;
}
int FileNames::mp3ListCount() const
{
return m_mp3ListCount;
}
/* main.cpp */
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
FileNames names;
QQuickView view;
view.engine()->rootContext()->setContextProperty("names", &names);
view.setSource(QUrl(QStringLiteral("qrc:///main.qml")));
view.setResizeMode(QQuickView::SizeRootObjectToView);
view.showFullScreen();
return app.exec();
}
/* Playlist.qml */
Item {
id: root
property int index: 0
property MediaPlayer mediaPlayer
property variant list;
property int listCount;
function setIndex(i)
{
console.log("setting index to: " + i);
index = i;
if (index < 0 || index >= listCount) {
index = 0;
mediaPlayer.source = "";
}
mediaPlayer.source = list[index];
}
function next()
{
setIndex(index + 1);
}
function previous()
{
setIndex(index + 1);
}
Connections {
target: root.mediaPlayer
onStopped: {
if (root.mediaPlayer.status == MediaPlayer.EndOfMedia)
{
root.next();
root.mediaPlayer.play();
}
}
}
}
/* main.qml */
Rectangle {
id: root
width: 1024
height: 600
color: "black"
Playlist {
id: playlist
mediaPlayer: player
list: names.mp3List
listCount: names.mp3ListCount
}
MediaPlayer {
id: player
}
VideoOutput {
anchors.fill: parent
source: player
}
}
So does anyone has more native solution to making a "playlist_player" application with Qt?
UPDATE ->
So right now I am using FolderListModel but seems like this class does not work properly without a view. I guess because it works asynchronously. Here is how is my code look like;
/* Playlist.qml */
Item {
id: root
property int index: 0
property MediaPlayer mediaPlayer
property FolderListModel fm
function setIndex(i)
{
index = i;
console.log("setting index to: " + i);
index %= fm.count;
mediaPlayer.source = "file://" + fm.get(index, "filePath");
console.log("setting source to: " + mediaPlayer.source);
}
function next()
{
setIndex(index + 1);
}
function previous()
{
setIndex(index + 1);
}
Connections {
target: root.mediaPlayer
onStopped: {
if (root.mediaPlayer.status == MediaPlayer.EndOfMedia) {
root.next();
root.mediaPlayer.play();
}
}
}
}
/* main.qml */
Rectangle {
id: root
width: 1024
height: 600
color: "black"
property bool onStart: true
Playlist {
id: playlist
mediaPlayer: player
fm: FolderListModel {
id: fm
folder: "file:///home/user/music"
showDirs: false
showDotAndDotDot: false
nameFilters: ["*.mp3"]
property bool ready: count > 0
// startup initialization;
onReadyChanged: if (player.status == MediaPlayer.NoMedia) {
playlist.setIndex(0);
player.play();
}
}
}
MediaPlayer { id: player }
VideoOutput {
anchors.fill: parent
source: player
}
}
Thank you,
Sina.

Answer 1

Using C++ types in QML or defining context properties is perfectly fine when integration with C++ code is needed. C++ naturally extends the possibilities of QML and it is only a matter of understand when a C++ back-end class, or a newly QML type written in C++, is needed. For further discussion about this topic please have a look to this other answer.
Given the answer linked above and the lifetime of your playlist component, using a QML-type instead of a context property would be the right choice. However, as said, QML already provide the right component for you: FolderListModel. In your case it can be easily defined like this:
FolderListModel {
id: folderModel
nameFilters: ["*.mp3"]
showDirs: false
folder: "file:" + /* CPP PROVIDED PATH */
}
and you can use get function to query for the next mp3 in the list, according to the count property.
A great advantage is that FolderListModel does listen for file changes in your folder so that you don't need to check for file addition/removal. Last, but not least, FolderListModel can be easily integrated in a GUI implementation, using it as a model for a ListView. Please see here for an example.
Addendum
As noted by OP the FolderListModel works asynchronously. That's a common behaviour since doing all the checks during component initialisation could lead to a long start-up (especially for directories full of files). There's no property to track when FolderListModel has finished tracking the filesystem, nor it probably makes sense to have one since the filesystem check is continuous. Adding a bool property could help, something like this:
FolderListModel {
id: fm
folder: "..."
showDirs: false
showDotAndDotDot: false
nameFilters: ["*.mp3"]
property bool ready: count > 0
}
When ready is true (because mp3s have been added or the initial scanning has finished) it could be possible to trigger the player. Clearly other properties can be added to improve the behaviour of the model.

Answer 2

The FolderListModel QML Type will do what you need. It supports name filtering, etc.