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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
import {empty, filterProperties, stitchArrays, unique} from '#sugar';
export default {
contentDependencies: ['linkGroup'],
extraDependencies: ['html', 'language', 'wikiData'],
sprawl({groupCategoryData}) {
return {
groupOrder: groupCategoryData.flatMap(category => category.groups),
}
},
query(sprawl, tracksAndAlbums) {
const filteredAlbums = tracksAndAlbums.filter(thing => !thing.album);
const filteredTracks = tracksAndAlbums.filter(thing => thing.album);
const allAlbums = unique([
...filteredAlbums,
...filteredTracks.map(track => track.album),
]);
const allGroupsUnordered = new Set(Array.from(allAlbums).flatMap(album => album.groups));
const allGroupsOrdered = sprawl.groupOrder.filter(group => allGroupsUnordered.has(group));
const mapTemplate = allGroupsOrdered.map(group => [group, 0]);
const groupToCountMap = new Map(mapTemplate);
const groupToDurationMap = new Map(mapTemplate);
const groupToDurationCountMap = new Map(mapTemplate);
for (const album of filteredAlbums) {
for (const group of album.groups) {
groupToCountMap.set(group, groupToCountMap.get(group) + 1);
}
}
for (const track of filteredTracks) {
for (const group of track.album.groups) {
groupToCountMap.set(group, groupToCountMap.get(group) + 1);
if (track.duration) {
groupToDurationMap.set(group, groupToDurationMap.get(group) + track.duration);
groupToDurationCountMap.set(group, groupToDurationCountMap.get(group) + 1);
}
}
}
const groupsSortedByCount =
allGroupsOrdered
.sort((a, b) => groupToCountMap.get(b) - groupToCountMap.get(a));
// The filter here ensures all displayed groups have at least some duration
// when sorting by duration.
const groupsSortedByDuration =
allGroupsOrdered
.filter(group => groupToDurationMap.get(group) > 0)
.sort((a, b) => groupToDurationMap.get(b) - groupToDurationMap.get(a));
const groupCountsSortedByCount =
groupsSortedByCount
.map(group => groupToCountMap.get(group));
const groupDurationsSortedByCount =
groupsSortedByCount
.map(group => groupToDurationMap.get(group));
const groupDurationsApproximateSortedByCount =
groupsSortedByCount
.map(group => groupToDurationCountMap.get(group) > 1);
const groupCountsSortedByDuration =
groupsSortedByDuration
.map(group => groupToCountMap.get(group));
const groupDurationsSortedByDuration =
groupsSortedByDuration
.map(group => groupToDurationMap.get(group));
const groupDurationsApproximateSortedByDuration =
groupsSortedByDuration
.map(group => groupToDurationCountMap.get(group) > 1);
return {
groupsSortedByCount,
groupsSortedByDuration,
groupCountsSortedByCount,
groupDurationsSortedByCount,
groupDurationsApproximateSortedByCount,
groupCountsSortedByDuration,
groupDurationsSortedByDuration,
groupDurationsApproximateSortedByDuration,
};
},
relations(relation, query) {
return {
groupLinksSortedByCount:
query.groupsSortedByCount
.map(group => relation('linkGroup', group)),
groupLinksSortedByDuration:
query.groupsSortedByDuration
.map(group => relation('linkGroup', group)),
};
},
data(query) {
return filterProperties(query, [
'groupCountsSortedByCount',
'groupDurationsSortedByCount',
'groupDurationsApproximateSortedByCount',
'groupCountsSortedByDuration',
'groupDurationsSortedByDuration',
'groupDurationsApproximateSortedByDuration',
]);
},
slots: {
title: {type: 'html'},
showBothColumns: {type: 'boolean'},
showSortButton: {type: 'boolean'},
visible: {type: 'boolean', default: true},
sort: {validate: v => v.is('count', 'duration')},
countUnit: {validate: v => v.is('tracks', 'artworks')},
},
generate(data, relations, slots, {html, language}) {
if (slots.sort === 'count' && empty(relations.groupLinksSortedByCount)) {
return html.blank();
} else if (slots.sort === 'duration' && empty(relations.groupLinksSortedByDuration)) {
return html.blank();
}
const getCounts = counts =>
counts.map(count => {
switch (slots.countUnit) {
case 'tracks': return language.countTracks(count, {unit: true});
case 'artworks': return language.countArtworks(count, {unit: true});
}
});
// We aren't displaying the "~" approximate symbol here for now.
// The general notion that these sums aren't going to be 100% accurate
// is made clear by the "XYZ has contributed ~1:23:45 hours of music..."
// line that's always displayed above this table.
const getDurations = (durations, approximate) =>
stitchArrays({
duration: durations,
approximate: approximate,
}).map(({duration}) => language.formatDuration(duration));
const topLevelClasses = [
'group-contributions-sorted-by-' + slots.sort,
slots.visible && 'visible',
];
return html.tags([
html.tag('dt', {class: topLevelClasses},
(slots.showSortButton
? language.$('artistPage.groupContributions.title.withSortButton', {
title: slots.title,
sort:
html.tag('a', {class: 'group-contributions-sort-button'},
{href: '#'},
(slots.sort === 'count'
? language.$('artistPage.groupContributions.title.sorting.count')
: language.$('artistPage.groupContributions.title.sorting.duration'))),
})
: slots.title)),
html.tag('dd', {class: topLevelClasses},
html.tag('ul', {class: 'group-contributions-table'},
{role: 'list'},
(slots.sort === 'count'
? stitchArrays({
group: relations.groupLinksSortedByCount,
count: getCounts(data.groupCountsSortedByCount),
duration:
getDurations(
data.groupDurationsSortedByCount,
data.groupDurationsApproximateSortedByCount),
}).map(({group, count, duration}) =>
html.tag('li',
html.tag('div', {class: 'group-contributions-row'}, [
group,
html.tag('span', {class: 'group-contributions-metrics'},
// When sorting by count, duration details aren't necessarily
// available for all items.
(slots.showBothColumns && duration
? language.$('artistPage.groupContributions.item.countDurationAccent', {count, duration})
: language.$('artistPage.groupContributions.item.countAccent', {count}))),
])))
: stitchArrays({
group: relations.groupLinksSortedByDuration,
count: getCounts(data.groupCountsSortedByDuration),
duration:
getDurations(
data.groupDurationsSortedByDuration,
data.groupDurationsApproximateSortedByCount),
}).map(({group, count, duration}) =>
html.tag('li',
html.tag('div', {class: 'group-contributions-row'}, [
group,
html.tag('span', {class: 'group-contributions-metrics'},
// Count details are always available, since they're just the
// number of contributions directly. And duration details are
// guaranteed for every item when sorting by duration.
(slots.showBothColumns
? language.$('artistPage.groupContributions.item.durationCountAccent', {duration, count})
: language.$('artistPage.groupContributions.item.durationAccent', {duration}))),
])))))),
]);
},
};
|
