1 files changed, 21 insertions, 52 deletions
diff --git a/src/content/dependencies/generateTrackList.js b/src/content/dependencies/generateTrackList.js
index 3c36d248..53a32536 100644
--- a/src/content/dependencies/generateTrackList.js
+++ b/src/content/dependencies/generateTrackList.js
@@ -1,59 +1,28 @@
-import {empty, stitchArrays} from '#sugar';
-
 export default {
-  contentDependencies: ['linkTrack', 'linkContribution'],
-
-  extraDependencies: ['html', 'language'],
+  contentDependencies: ['generateTrackListItem'],
+  extraDependencies: ['html'],
 
-  relations(relation, tracks) {
-    if (empty(tracks)) {
-      return {};
-    }
-
-    return {
-      trackLinks:
-        tracks
-          .map(track => relation('linkTrack', track)),
-
-      contributionLinks:
-        tracks
-          .map(track =>
-            (empty(track.artistContribs)
-              ? null
-              : track.artistContribs
-                  .map(contrib => relation('linkContribution', contrib)))),
-    };
-  },
+  relations: (relation, tracks) => ({
+    items:
+      tracks
+        .map(track => relation('generateTrackListItem', track, [])),
+  }),
 
   slots: {
-    showContribution: {type: 'boolean', default: false},
-    showIcons: {type: 'boolean', default: false},
+    colorMode: {
+      validate: v => v.is('none', 'track', 'line'),
+      default: 'track',
+    },
   },
 
-  generate(relations, slots, {html, language}) {
-    return (
-      html.tag('ul',
-        stitchArrays({
-          trackLink: relations.trackLinks,
-          contributionLinks: relations.contributionLinks,
-        }).map(({trackLink, contributionLinks}) =>
-            html.tag('li',
-              (empty(contributionLinks)
-                ? trackLink
-                : language.$('trackList.item.withArtists', {
-                    track: trackLink,
-                    by:
-                      html.tag('span', {class: 'by'},
-                        html.metatag('chunkwrap', {split: ','},
-                          language.$('trackList.item.withArtists.by', {
-                            artists:
-                              language.formatConjunctionList(
-                                contributionLinks.map(link =>
-                                  link.slots({
-                                    showContribution: slots.showContribution,
-                                    showIcons: slots.showIcons,
-                                  }))),
-                          }))),
-                  }))))));
-  },
+  generate: (relations, slots, {html}) =>
+    html.tag('ul',
+      {[html.onlyIfContent]: true},
+
+      relations.items.map(item =>
+        item.slots({
+          showArtists: true,
+          showDuration: false,
+          colorMode: slots.colorMode,
+        }))),
 };