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
|
export default {
contentDependencies: [
'generateArtistCredit',
'generateColorStyleAttribute',
'generateTrackListMissingDuration',
'linkTrack',
],
extraDependencies: ['html', 'language'],
relations: (relation, track, contextContributions) => ({
trackLink:
relation('linkTrack', track),
credit:
relation('generateArtistCredit',
track.artistContribs,
contextContributions),
colorStyle:
relation('generateColorStyleAttribute', track.color),
missingDuration:
(track.duration
? null
: relation('generateTrackListMissingDuration')),
}),
data: (track, _contextContributions) => ({
duration:
track.duration ?? 0,
trackHasDuration:
!!track.duration,
}),
slots: {
// showArtists enables showing artists *at all.* It doesn't take precedence
// over behavior which automatically collapses (certain) artists because of
// provided context contributions.
showArtists: {
type: 'boolean',
default: true,
},
// If true and the track doesn't have a duration, a missing-duration cue
// will be displayed instead.
showDuration: {
type: 'boolean',
default: false,
},
colorMode: {
validate: v => v.is('none', 'track', 'line'),
default: 'track',
},
},
generate: (data, relations, slots, {html, language}) =>
language.encapsulate('trackList.item', itemCapsule =>
html.tag('li',
slots.colorMode === 'line' &&
relations.colorStyle.slot('context', 'primary-only'),
language.encapsulate(itemCapsule, workingCapsule => {
const workingOptions = {};
workingOptions.track =
relations.trackLink
.slot('color', slots.colorMode === 'track');
if (slots.showDuration) {
workingCapsule += '.withDuration';
workingOptions.duration =
(data.trackHasDuration
? language.$(itemCapsule, 'withDuration.duration', {
duration:
language.formatDuration(data.duration),
})
: relations.missingDuration);
}
const artistCapsule = language.encapsulate(itemCapsule, 'withArtists');
relations.credit.setSlots({
normalStringKey:
artistCapsule + '.by',
featuringStringKey:
artistCapsule + '.featuring',
normalFeaturingStringKey:
artistCapsule + '.by.featuring',
});
if (!html.isBlank(relations.credit)) {
workingCapsule += '.withArtists';
workingOptions.by =
html.tag('span', {class: 'by'},
html.metatag('chunkwrap', {split: ','},
html.resolve(relations.credit)));
}
return language.$(workingCapsule, workingOptions);
}))),
};
|
