1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
//! [Fixed Controls style]
import QtQuick
import QtQuick.Controls.Universal
//! [Fixed Controls style]
Window {
id: mainWindow
minimumWidth: 800
minimumHeight: 480
width: minimumWidth
height: minimumHeight
visible: true
title: qsTr("Threaded Song List")
property string currentAlbumName: ""
property string currentAlbumArt: ""
property string currentArtistName: ""
property string currentSongTitle: ""
ListView {
id: songListView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 2 * parent.width / 5
model: ThreadedListModel{}
readonly property int delegateHeight: (songListView.height / 8) - songListView.spacing
cacheBuffer: delegateHeight * 2
delegate: SongListDelegate{
required property int index
required property var model
implicitHeight: songListView.delegateHeight
width: songListView.width
onSongSelected: (albumName, albumArt, artistName, songTitle) => {
mainWindow.currentAlbumName = albumName
mainWindow.currentAlbumArt = albumArt
mainWindow.currentArtistName = artistName
mainWindow.currentSongTitle = songTitle
}
}
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AlwaysOn
implicitWidth: songListView.height / 20
}
BusyIndicator {
anchors.centerIn: parent
width: parent.width / 3
height: width
running: songListView.count === 0
}
}
Rectangle {
color: "white"
anchors.left: songListView.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
Label {
id: statusLabel
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
anchors.leftMargin: 10
anchors.topMargin: 5
textFormat: Text.RichText
text: qsTr("🔗 Connected, %1 songs available").arg(songListView.count)
font.pixelSize: Math.min(parent.height, parent.width) / 32
horizontalAlignment: Text.AlignHCenter
}
Item {
id: deviceImage
anchors.right: parent.right
anchors.top: statusLabel.bottom
anchors.left: parent.left
anchors.leftMargin: 10
height: (3 * parent.height / 4) - statusLabel.height
Image {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: Math.min(parent.width, parent.height)
height: width
source: "qrc:/qt/qml/threadedsonglist/images/device/remote.jpeg"
fillMode: Image.PreserveAspectFit
}
}
Rectangle {
visible: mainWindow.currentSongTitle !== ""
color: "black"
anchors.top: deviceImage.bottom
anchors.right: parent.right
anchors.left: parent.left
anchors.bottom: parent.bottom
Rectangle {
id: nowPlayingBox
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
height: nowPlayingTitle.implicitHeight
color: "#555555"
Label {
id: nowPlayingTitle
anchors.centerIn: parent
color: "white"
text: qsTr("Now playing:")
font.pixelSize: 16
horizontalAlignment: Text.AlignHCenter
}
}
Image {
id: albumArtImage
anchors.top: nowPlayingBox.bottom
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.topMargin: 5
source: mainWindow.currentAlbumArt
fillMode: Image.PreserveAspectFit
}
Column {
anchors.top: nowPlayingBox.bottom
anchors.right: parent.right
anchors.left: albumArtImage.right
anchors.bottom: parent.bottom
anchors.topMargin: 5
anchors.leftMargin: 5
spacing: 5
Label {
color: "white"
text: "♫: " + mainWindow.currentSongTitle
textFormat: Text.RichText
font.pixelSize: (parent.height - 20) / 4
}
Label {
color: "white"
text: "👤: " + mainWindow.currentArtistName
textFormat: Text.RichText
font.pixelSize: (parent.height - 20) / 4
}
Label {
color: "white"
text: "💿: " + mainWindow.currentAlbumName
textFormat: Text.RichText
font.pixelSize: (parent.height - 20) / 4
}
}
}
}
}
|
