1 files changed, 59 insertions, 20 deletions
diff --git a/src/content/dependencies/generateLyricsSection.js b/src/content/dependencies/generateLyricsSection.js
index 7e7718c7..f6b719a9 100644
--- a/src/content/dependencies/generateLyricsSection.js
+++ b/src/content/dependencies/generateLyricsSection.js
@@ -1,8 +1,10 @@
+import {stitchArrays} from '#sugar';
+
 export default {
   contentDependencies: [
     'generateContentHeading',
+    'generateIntrapageDotSwitcher',
     'generateLyricsEntry',
-    'generateLyricsSwitcher',
     'transformContent',
   ],
 
@@ -13,30 +15,67 @@ export default {
       relation('generateContentHeading'),
 
     switcher:
-      relation('generateLyricsSwitcher', entries),
+      relation('generateIntrapageDotSwitcher'),
 
     entries:
       entries
         .map(entry => relation('generateLyricsEntry', entry)),
+
+    annotations:
+      entries
+        .map(entry => entry.annotation)
+        .map(annotation => relation('transformContent', annotation)),
   }),
 
-  generate: (relations, {html, language}) =>
-    html.tags([
-      relations.heading
-        .slots({
-          attributes: {id: 'lyrics'},
-          title: language.$('releaseInfo.lyrics'),
-        }),
-
-      relations.switcher,
-
-      relations.entries
-        .map((entry, index) =>
-          entry.slots({
-            attributes: [
-              index >= 1 &&
-                {style: 'display: none'},
-            ],
+  data: (entries) => ({
+    ids:
+      Array.from(
+        {length: entries.length},
+        (_, index) => 'lyrics-entry-' + index),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('releaseInfo.lyrics', capsule =>
+      html.tags([
+        relations.heading
+          .slots({
+            attributes: {id: 'lyrics'},
+            title: language.$(capsule),
+          }),
+
+        html.tag('p', {class: 'lyrics-switcher'},
+          {[html.onlyIfContent]: true},
+
+          language.$(capsule, 'switcher', {
+            [language.onlyIfOptions]: ['entries'],
+
+            entries:
+              relations.switcher.slots({
+                initialOptionIndex: 0,
+
+                titles:
+                  relations.annotations.map(annotation =>
+                    annotation.slots({
+                      mode: 'inline',
+                      textOnly: true,
+                    })),
+
+                targetIDs:
+                  data.ids,
+              }),
           })),
-    ]),
+
+        stitchArrays({
+          entry: relations.entries,
+          id: data.ids,
+        }).map(({entry, id}, index) =>
+            entry.slots({
+              attributes: [
+                {id},
+
+                index >= 1 &&
+                  {style: 'display: none'},
+              ],
+            })),
+      ])),
 };