content, css: gGIPAlbumsListItem: mode-selected album artists

5 files changed, 88 insertions, 13 deletions

diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js b/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js
index 079cb56c..df42598d 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js
@@ -41,5 +41,7 @@ export default {
 
       {[html.onlyIfContent]: true},
 
-      relations.items),
+      relations.items
+        .map(item =>
+          item.slot('accentMode', 'groups'))),
 };
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js b/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js
index 2e439897..463522ea 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js
@@ -26,6 +26,10 @@ export default {
     seriesNames:
       group.serieses
         .map(series => series.name),
+
+    seriesShowAlbumArtists:
+      group.serieses
+        .map(series => series.showAlbumArtists),
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -38,9 +42,15 @@ export default {
 
         stitchArrays({
           name: data.seriesNames,
+          showAlbumArtists: data.seriesShowAlbumArtists,
           heading: relations.seriesHeadings,
           items: relations.seriesItems,
-        }).map(({heading, name, items}) =>
+        }).map(({
+            name,
+            showAlbumArtists,
+            heading,
+            items,
+          }) =>
             html.tags([
               heading.slots({
                 tag: 'dt',
@@ -52,6 +62,10 @@ export default {
 
               html.tag('dd',
                 html.tag('ul',
-                  items)),
+                  items.map(item =>
+                    item.slots({
+                      accentMode:
+                        (showAlbumArtists ? 'artists' : null),
+                    })))),
             ])))),
 };
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
index faa944ac..f0e1e39c 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
@@ -3,6 +3,7 @@ import {empty} from '#sugar';
 export default {
   contentDependencies: [
     'generateAbsoluteDatetimestamp',
+    'generateArtistCredit',
     'generateColorStyleAttribute',
     'linkAlbum',
     'linkGroup',
@@ -35,12 +36,21 @@ export default {
         ? relation('generateAbsoluteDatetimestamp', album.date)
         : null),
 
+    artistCredit:
+      relation('generateArtistCredit', album.artistContribs, []),
+
     otherGroupLinks:
       query.otherGroups
         .map(group => relation('linkGroup', group)),
   }),
 
-  generate: (relations, {html, language}) =>
+  slots: {
+    accentMode: {
+      validate: v => v.is('groups', 'artists'),
+    },
+  },
+
+  generate: (relations, slots, {html, language}) =>
     html.tag('li',
       relations.colorStyle,
 
@@ -51,20 +61,24 @@ export default {
           workingOptions.album =
             relations.albumLink.slot('color', false);
 
+          const yearCapsule = language.encapsulate(itemCapsule, 'withYear');
+
           if (relations.datetimestamp) {
             workingCapsule += '.withYear';
             workingOptions.yearAccent =
-              language.$(itemCapsule, 'yearAccent', {
+              language.$(yearCapsule, 'accent', {
                 year:
                   relations.datetimestamp.slots({style: 'year', tooltip: true}),
               });
           }
 
-          if (!empty(relations.otherGroupLinks)) {
+          const otherGroupCapsule = language.encapsulate(itemCapsule, 'withOtherGroup');
+
+          if (slots.accentMode === 'groups' && !empty(relations.otherGroupLinks)) {
             workingCapsule += '.withOtherGroup';
             workingOptions.otherGroupAccent =
               html.tag('span', {class: 'other-group-accent'},
-                language.$(itemCapsule, 'otherGroupAccent', {
+                language.$(otherGroupCapsule, 'accent', {
                   groups:
                     language.formatConjunctionList(
                       relations.otherGroupLinks.map(groupLink =>
@@ -72,6 +86,28 @@ export default {
                 }));
           }
 
+          const artistCapsule = language.encapsulate(itemCapsule, 'withArtists');
+          const {artistCredit} = relations;
+
+          artistCredit.setSlots({
+            normalStringKey:
+              artistCapsule + '.by',
+
+            featuringStringKey:
+              artistCapsule + '.featuring',
+
+            normalFeaturingStringKey:
+              artistCapsule + '.by.featuring',
+          });
+
+          if (slots.accentMode === 'artists' && !html.isBlank(artistCredit)) {
+            workingCapsule += '.withArtists';
+            workingOptions.by =
+              html.tag('span', {class: 'by'},
+                html.metatag('chunkwrap', {split: ','},
+                  html.resolve(artistCredit)));
+          }
+
           return language.$(workingCapsule, workingOptions);
         }))),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 2b82b07e..754f0184 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1745,6 +1745,15 @@ html[data-url-key="localized.albumCommentary"] .content-heading-accent {
   display: inline-block;
 }
 
+html[data-url-key="localized.groupInfo"] .by {
+  opacity: 0.7;
+  font-style: oblique;
+}
+
+html[data-url-key="localized.groupInfo"] .by a {
+  color: var(--page-primary-color);
+}
+
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-loading-line,
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-loaded-line,
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-error-line {
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 761d9c3b..0a3bc707 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1325,17 +1325,31 @@ groupInfoPage:
       _: >-
         {ALBUM}
 
-      withYear: >-
-        {YEAR_ACCENT} {ALBUM}
+      withYear:
+        _: >-
+          {YEAR_ACCENT} {ALBUM}
 
-      withOtherGroup: >-
-        {ALBUM} {OTHER_GROUP_ACCENT}
+        accent: "({YEAR})"
+
+      withOtherGroup:
+        _: >-
+          {ALBUM} {OTHER_GROUP_ACCENT}
+
+        accent: "(from {GROUPS})"
+
+      withArtists:
+        _: >-
+          {ALBUM} {BY}
+
+        by: "by {ARTISTS}"
+        featuring: "feat. {ARTISTS}"
+        by.featuring: "by {ARTISTS} feat. {FEATURING}"
 
       withYear.withOtherGroup: >-
         {YEAR_ACCENT} {ALBUM} {OTHER_GROUP_ACCENT}
 
-      yearAccent: "({YEAR})"
-      otherGroupAccent:  "(from {GROUPS})"
+      withYear.withArtists: >-
+        {YEAR_ACCENT} {ALBUM} {BY}
 
 #
 # groupGalleryPage: