Changeset View
Changeset View
Standalone View
Standalone View
src/qml/ContextView.qml
Show All 9 Lines | |||||
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | 10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | 11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | ||
12 | * Lesser General Public License for more details. | 12 | * Lesser General Public License for more details. | ||
13 | * | 13 | * | ||
14 | * You should have received a copy of the GNU Lesser General Public License | 14 | * You should have received a copy of the GNU Lesser General Public License | ||
15 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | 15 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
16 | */ | 16 | */ | ||
17 | 17 | | |||
18 | import QtQuick 2.7 | 18 | import QtQuick 2.10 | ||
19 | import QtQuick.Window 2.2 | 19 | import QtQuick.Window 2.2 | ||
20 | import QtQuick.Controls 2.2 | 20 | import QtQuick.Controls 2.2 | ||
21 | import QtQml.Models 2.2 | 21 | import QtQml.Models 2.2 | ||
22 | import org.kde.elisa 1.0 | | |||
23 | import QtQuick.Layouts 1.2 | 22 | import QtQuick.Layouts 1.2 | ||
24 | 23 | | |||
25 | Item { | 24 | import org.kde.elisa 1.0 | ||
25 | | ||||
26 | FocusScope { | ||||
26 | id: topItem | 27 | id: topItem | ||
27 | 28 | | |||
28 | property var albumName | 29 | property int databaseId: 0 | ||
29 | property var artistName | 30 | property alias title: titleLabel.text | ||
30 | property var tracksCount | 31 | property string albumName: '' | ||
31 | property var albumArtUrl | 32 | property string artistName: '' | ||
33 | property url albumArtUrl: '' | ||||
34 | property string fileUrl: '' | ||||
35 | | ||||
36 | TrackContextMetaDataModel { | ||||
37 | id: metaDataModel | ||||
38 | | ||||
39 | manager: elisa.musicManager | ||||
40 | } | ||||
32 | 41 | | |||
33 | ColumnLayout { | 42 | ColumnLayout { | ||
34 | anchors.fill: parent | 43 | anchors.fill: parent | ||
35 | 44 | | |||
36 | spacing: 0 | 45 | spacing: 0 | ||
37 | 46 | | |||
38 | Item { | 47 | TextMetrics { | ||
39 | Layout.fillHeight: true | 48 | id: titleHeight | ||
49 | text: viewTitleHeight.text | ||||
50 | font | ||||
51 | { | ||||
52 | pointSize: viewTitleHeight.font.pointSize | ||||
53 | bold: viewTitleHeight.font.bold | ||||
54 | } | ||||
55 | } | ||||
56 | | ||||
57 | LabelWithToolTip { | ||||
58 | id: viewTitleHeight | ||||
59 | text: i18nc("Title of the context view related to the currently playing track", "Now Playing") | ||||
60 | | ||||
61 | font.pointSize: elisaTheme.defaultFontPointSize * 2 | ||||
62 | | ||||
63 | Layout.alignment: Qt.AlignLeft | Qt.AlignTop | ||||
64 | Layout.topMargin: elisaTheme.layoutVerticalMargin * 3 | ||||
65 | Layout.bottomMargin: titleHeight.height | ||||
40 | } | 66 | } | ||
41 | 67 | | |||
42 | Image { | 68 | Image { | ||
43 | id: albumIcon | 69 | id: albumIcon | ||
44 | 70 | | |||
45 | source: albumArtUrl.toString() === '' ? Qt.resolvedUrl(elisaTheme.defaultAlbumImage) : albumArtUrl | 71 | source: albumArtUrl.toString() === '' ? Qt.resolvedUrl(elisaTheme.defaultAlbumImage) : albumArtUrl | ||
46 | Layout.preferredWidth: elisaTheme.coverImageSize | 72 | | ||
47 | Layout.preferredHeight: elisaTheme.coverImageSize | 73 | Layout.fillWidth: true | ||
48 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter | 74 | Layout.maximumHeight: elisaTheme.contextCoverImageSize | ||
49 | Layout.maximumWidth: elisaTheme.coverImageSize | 75 | Layout.preferredHeight: elisaTheme.contextCoverImageSize | ||
50 | Layout.maximumHeight: elisaTheme.coverImageSize | 76 | | ||
51 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | 77 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | ||
52 | 78 | | |||
53 | width: elisaTheme.coverImageSize | 79 | width: elisaTheme.contextCoverImageSize | ||
54 | height: elisaTheme.coverImageSize | 80 | height: elisaTheme.contextCoverImageSize | ||
55 | 81 | | |||
56 | sourceSize.width: elisaTheme.coverImageSize | 82 | sourceSize.width: parent.width | ||
57 | sourceSize.height: elisaTheme.coverImageSize | 83 | sourceSize.height: elisaTheme.contextCoverImageSize | ||
58 | 84 | | |||
59 | asynchronous: true | 85 | asynchronous: true | ||
60 | 86 | | |||
61 | fillMode: Image.PreserveAspectFit | 87 | fillMode: Image.PreserveAspectCrop | ||
62 | } | 88 | } | ||
63 | 89 | | |||
64 | LabelWithToolTip { | 90 | LabelWithToolTip { | ||
65 | id: titleLabel | 91 | id: titleLabel | ||
66 | 92 | | |||
67 | text: if (albumName !== undefined) | 93 | font.pointSize: elisaTheme.defaultFontPointSize * 2 | ||
68 | albumName | | |||
69 | else | | |||
70 | '' | | |||
71 | | ||||
72 | font.weight: Font.Bold | 94 | font.weight: Font.Bold | ||
73 | color: myPalette.text | | |||
74 | 95 | | |||
75 | horizontalAlignment: Text.AlignHCenter | 96 | Layout.alignment: Qt.AlignLeft | Qt.AlignTop | ||
97 | Layout.topMargin: elisaTheme.layoutVerticalMargin | ||||
76 | 98 | | |||
77 | Layout.fillWidth: true | 99 | elide: Text.ElideRight | ||
78 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | 100 | } | ||
101 | | ||||
102 | LabelWithToolTip { | ||||
103 | id: albumArtistLabel | ||||
104 | | ||||
105 | text: (artistName && albumName ? i18nc('display of artist and album in context view', '<i>by</i> <b>%1</b> <i>from</i> <b>%2</b>', artistName, albumName) : '') | ||||
106 | | ||||
107 | font.pointSize: elisaTheme.defaultFontPointSize * 1.4 | ||||
108 | | ||||
109 | visible: artistName !== '' && albumName !== '' | ||||
110 | | ||||
111 | Layout.alignment: Qt.AlignLeft | Qt.AlignTop | ||||
79 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | 112 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | ||
80 | 113 | | |||
81 | elide: Text.ElideRight | 114 | elide: Text.ElideRight | ||
82 | } | 115 | } | ||
83 | 116 | | |||
84 | LabelWithToolTip { | 117 | LabelWithToolTip { | ||
85 | id: artistLabel | 118 | id: albumLabel | ||
86 | 119 | | |||
87 | text: if (artistName !== undefined) | 120 | text: (albumName ? i18nc('display of album in context view', '<i>from</i> <b>%1</b>', albumName) : '') | ||
88 | artistName | | |||
89 | else | | |||
90 | '' | | |||
91 | 121 | | |||
92 | font.weight: Font.Normal | 122 | font.pointSize: elisaTheme.defaultFontPointSize * 1.4 | ||
93 | color: myPalette.text | | |||
94 | 123 | | |||
95 | horizontalAlignment: Text.AlignHCenter | 124 | visible: artistName === '' && albumName !== '' | ||
96 | 125 | | |||
97 | Layout.fillWidth: true | 126 | Layout.alignment: Qt.AlignLeft | Qt.AlignTop | ||
98 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | 127 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | ||
99 | 128 | | |||
100 | elide: Text.ElideRight | 129 | elide: Text.ElideRight | ||
101 | } | 130 | } | ||
102 | 131 | | |||
103 | LabelWithToolTip { | 132 | LabelWithToolTip { | ||
104 | id: numberLabel | 133 | id: artistLabel | ||
105 | | ||||
106 | text: i18np("1 track", "%1 track", tracksCount) | | |||
107 | 134 | | |||
108 | visible: tracksCount !== undefined | 135 | text: (artistName ? i18nc('display of artist in context view', '<i>by</i> <b>%1</b>', artistName) : '') | ||
109 | 136 | | |||
110 | font.weight: Font.Light | 137 | font.pointSize: elisaTheme.defaultFontPointSize * 1.4 | ||
111 | color: myPalette.text | | |||
112 | 138 | | |||
113 | horizontalAlignment: Text.AlignHCenter | 139 | visible: artistName !== '' && albumName === '' | ||
114 | 140 | | |||
115 | Layout.fillWidth: true | 141 | Layout.alignment: Qt.AlignLeft | Qt.AlignTop | ||
116 | Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom | | |||
117 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | 142 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | ||
118 | 143 | | |||
119 | elide: Text.ElideRight | 144 | elide: Text.ElideRight | ||
120 | } | 145 | } | ||
121 | 146 | | |||
122 | Item { | 147 | ListView { | ||
123 | Layout.fillHeight: true | 148 | id: trackData | ||
124 | } | | |||
125 | 149 | | |||
126 | RowLayout { | | |||
127 | Layout.fillWidth: true | 150 | Layout.fillWidth: true | ||
128 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin * 2 | 151 | Layout.fillHeight: true | ||
152 | | ||||
153 | ScrollBar.vertical: ScrollBar { | ||||
154 | id: scrollBar | ||||
155 | } | ||||
156 | boundsBehavior: Flickable.StopAtBounds | ||||
157 | clip: true | ||||
129 | 158 | | |||
130 | spacing: 0 | 159 | spacing: 0 | ||
131 | 160 | | |||
132 | Image { | 161 | model: metaDataModel | ||
133 | id: artistJumpIcon | | |||
134 | 162 | | |||
135 | source: Qt.resolvedUrl(elisaTheme.defaultArtistImage) | 163 | delegate: MetaDataDelegate { | ||
164 | width: scrollBar.visible ? (!LayoutMirroring.enabled ? trackData.width - scrollBar.width : trackData.width) : trackData.width | ||||
165 | } | ||||
166 | } | ||||
136 | 167 | | |||
137 | Layout.preferredWidth: elisaTheme.smallImageSize | 168 | Row { | ||
138 | Layout.preferredHeight: elisaTheme.smallImageSize | 169 | Layout.alignment: Qt.AlignLeft | Qt.AlignBottom | ||
139 | Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter | 170 | Layout.topMargin: elisaTheme.layoutVerticalMargin | ||
140 | Layout.maximumWidth: elisaTheme.smallImageSize | 171 | Layout.bottomMargin: elisaTheme.layoutVerticalMargin | ||
141 | Layout.maximumHeight: elisaTheme.smallImageSize | | |||
142 | Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 | | |||
143 | Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 | | |||
144 | 172 | | |||
145 | visible: artistName !== undefined | 173 | spacing: elisaTheme.layoutHorizontalMargin | ||
146 | width: elisaTheme.smallImageSize | | |||
147 | height: elisaTheme.smallImageSize | | |||
148 | 174 | | |||
149 | sourceSize.width: elisaTheme.smallImageSize | 175 | Image { | ||
150 | sourceSize.height: elisaTheme.smallImageSize | 176 | sourceSize.width: fileNameLabel.height | ||
177 | sourceSize.height: fileNameLabel.height | ||||
151 | 178 | | |||
152 | fillMode: Image.PreserveAspectFit | 179 | source: elisaTheme.folderIcon | ||
153 | } | 180 | } | ||
154 | 181 | | |||
155 | LabelWithToolTip { | 182 | LabelWithToolTip { | ||
156 | text: if (artistName !== undefined) | 183 | id: fileNameLabel | ||
157 | artistName | | |||
158 | else | | |||
159 | '' | | |||
160 | 184 | | |||
161 | font.weight: Font.Normal | 185 | text: fileUrl | ||
162 | color: myPalette.text | | |||
163 | 186 | | |||
164 | horizontalAlignment: Text.AlignLeft | 187 | elide: Text.ElideRight | ||
165 | } | 188 | } | ||
166 | } | 189 | } | ||
167 | } | 190 | } | ||
191 | | ||||
192 | onDatabaseIdChanged: { | ||||
193 | metaDataModel.initializeByTrackId(databaseId) | ||||
194 | } | ||||
195 | | ||||
196 | Connections { | ||||
197 | target: elisa | ||||
198 | | ||||
199 | onMusicManagerChanged: { | ||||
200 | metaDataModel.initializeByTrackId(databaseId) | ||||
201 | } | ||||
202 | } | ||||
203 | | ||||
204 | Component.onCompleted: { | ||||
205 | if (elisa.musicManager) { | ||||
206 | metaDataModel.initializeByTrackId(databaseId) | ||||
207 | } | ||||
208 | } | ||||
168 | } | 209 | } |