Icons for years (#220)

package.json

@@ -66,7 +66,7 @@
     "clean": "rm -Rf build node_modules",
     "build": "tsc",
     "dev": "BNB_SUBSONIC_CUSTOM_CLIENTS1=audio/flac,audio/mpeg,audio/mp4\\>audio/flac BNB_LOG_LEVEL=debug BNB_DEBUG=true BNB_SCROBBLE_TRACKS=false BNB_REPORT_NOW_PLAYING=false BNB_SONOS_SEED_HOST=$BNB_DEV_SONOS_DEVICE_IP BNB_SONOS_SERVICE_NAME=z_bonobDev BNB_URL=\"http://${BNB_DEV_HOST_IP}:4534\" BNB_SUBSONIC_URL=\"${BNB_DEV_SUBSONIC_URL}\" nodemon -V ./src/app.ts",
-    "devr": "BNB_LOG_LEVEL=debug BNB_DEBUG=true BNB_SCROBBLE_TRACKS=false BNB_REPORT_NOW_PLAYING=false BNB_SONOS_SEED_HOST=$BNB_DEV_SONOS_DEVICE_IP BNB_SONOS_SERVICE_NAME=z_bonobDev BNB_SONOS_DEVICE_DISCOVERY=true BNB_SONOS_AUTO_REGISTER=true BNB_URL=\"http://${BNB_DEV_HOST_IP}:4534\" BNB_SUBSONIC_URL=\"${BNB_DEV_SUBSONIC_URL}\" nodemon -V ./src/app.ts",
+    "devr": "BNB_LOG_LEVEL=debug BNB_DEBUG=true BNB_ICON_FOREGROUND_COLOR=deeppink BNB_ICON_BACKGROUND_COLOR=darkslategray BNB_SCROBBLE_TRACKS=false BNB_REPORT_NOW_PLAYING=false BNB_SONOS_SEED_HOST=$BNB_DEV_SONOS_DEVICE_IP BNB_SONOS_SERVICE_NAME=z_bonobDev BNB_SONOS_DEVICE_DISCOVERY=true BNB_SONOS_AUTO_REGISTER=true BNB_URL=\"http://${BNB_DEV_HOST_IP}:4534\" BNB_SUBSONIC_URL=\"${BNB_DEV_SUBSONIC_URL}\" nodemon -V ./src/app.ts",
     "register-dev": "ts-node ./src/register.ts http://${BNB_DEV_HOST_IP}:4534",
     "test": "jest",
     "testw": "jest --watch",

src/icon.ts

@@ -48,8 +48,16 @@ export type IconFeatures = {
   viewPortIncreasePercent: number | undefined;
   backgroundColor: string | undefined;
   foregroundColor: string | undefined;
+  text: string | undefined;
 };
 
+export const NO_FEATURES: IconFeatures = {
+  viewPortIncreasePercent: undefined,
+  backgroundColor: undefined,
+  foregroundColor: undefined,
+  text: undefined
+}
+
 export type IconSpec = {
   svg: string | undefined;
   features: Partial<IconFeatures> | undefined;
@@ -93,17 +101,11 @@ export class SvgIcon implements Icon {
 
   constructor(
     svg: string,
-    features: Partial<IconFeatures> = {
+    features: Partial<IconFeatures> = {}
-      viewPortIncreasePercent: undefined,
-      backgroundColor: undefined,
-      foregroundColor: undefined,
-    }
   ) {
     this.svg = svg;
     this.features = {
-      viewPortIncreasePercent: undefined,
+      ...NO_FEATURES,
-      backgroundColor: undefined,
-      foregroundColor: undefined,
       ...features,
     };
   }
@@ -131,6 +133,17 @@ export class SvgIcon implements Icon {
       viewBox = viewBox.increasePercent(this.features.viewPortIncreasePercent);
       element("//svg:svg").setAttribute("viewBox", viewBox.toString());
     }
+    if(this.features.text) {
+      elements("//svg:text").forEach((text) => {
+        text.textContent = this.features.text!
+      });
+    }
+    if (this.features.foregroundColor) {
+      elements("//svg:path|//svg:text").forEach((path) => {
+        if (path.getAttribute("fill")) path.setAttribute("stroke", this.features.foregroundColor!);
+        else path.setAttribute("fill", this.features.foregroundColor!);
+      });
+    }
     if (this.features.backgroundColor) {
       const rect = doc.createElementNS(SVG_NS, "rect");
       rect.setAttribute("x", `${viewBox.minX}`);
@@ -142,12 +155,6 @@ export class SvgIcon implements Icon {
       const svg = element("//svg:svg")
       svg.insertBefore(rect, svg.childNodes[0]!);
     }
-    if (this.features.foregroundColor) {
-      elements("//svg:path").forEach((path) => {
-        if (path.getAttribute("fill")) path.setAttribute("stroke", this.features.foregroundColor!);
-        else path.setAttribute("fill", this.features.foregroundColor!);
-      });
-    }
     
     return xmlTidy(doc as unknown as Node);
   };
@@ -230,20 +237,24 @@ export type ICON =
   | "yoda" 
   | "heart"
   | "star" 
-  | "solidStar";
+  | "solidStar"
+  | "yy"
+  | "yyyy";
 
-const iconFrom = (name: string) =>
+const svgFrom = (name: string) =>
   new SvgIcon(
     fs
       .readFileSync(path.resolve(__dirname, "..", "web", "icons", name))
       .toString()
   );
 
+const iconFrom = (name: string) => svgFrom(name).with({ features: { viewPortIncreasePercent: 80 } });
+    
 export const ICONS: Record<ICON, SvgIcon> = {
   artists: iconFrom("navidrome-artists.svg"),
   albums: iconFrom("navidrome-all.svg"),
   radio: iconFrom("navidrome-radio.svg"),
-  blank: iconFrom("blank.svg"),
+  blank: svgFrom("blank.svg"),
   playlists: iconFrom("navidrome-playlists.svg"),
   genres: iconFrom("Theatre-Mask-111172.svg"),
   random: iconFrom("navidrome-random.svg"),
@@ -308,7 +319,9 @@ export const ICONS: Record<ICON, SvgIcon> = {
   yoda: iconFrom("Yoda-68107.svg"),
   heart: iconFrom("Heart-85038.svg"),
   star: iconFrom("Star-16101.svg"),
-  solidStar: iconFrom("Star-43879.svg")
+  solidStar: iconFrom("Star-43879.svg"),
+  yy: svgFrom("yy.svg"),
+  yyyy: svgFrom("yyyy.svg"),
 };
 
 export const STAR_WARS = [ICONS.c3po, ICONS.chewy, ICONS.darth, ICONS.skywalker, ICONS.leia, ICONS.r2d2, ICONS.yoda];

src/server.ts

@@ -498,16 +498,18 @@ function server(
     }
   });
 
-  app.get("/icon/:type/size/:size", (req, res) => {
+  app.get("/icon/:type_text/size/:size", (req, res) => {
-    const type = req.params["type"]!;
+    const match = (req.params["type_text"] || "")!.match("^([A-Za-z0-9]+)(?:\:([A-Za-z0-9]+))?$")
+    if (!match)
+      return res.status(400).send();
+    
+    const type = match[1]!
+    const text = match[2]
     const size = req.params["size"]!;
 
     if (!Object.keys(ICONS).includes(type)) {
       return res.status(404).send();
-    } else if (
+    } else if (size != "legacy" && !SONOS_RECOMMENDED_IMAGE_SIZES.includes(size)) {
-      size != "legacy" &&
-      !SONOS_RECOMMENDED_IMAGE_SIZES.includes(size)
-    ) {
       return res.status(400).send();
     } else {
       let icon = (ICONS as any)[type]! as Icon;
@@ -528,8 +530,8 @@ function server(
         icon
           .apply(
             features({
-              viewPortIncreasePercent: 80,
               ...serverOpts.iconColors,
+              text: text
             })
           )
           .apply(festivals(clock))

src/smapi.ts

@@ -251,11 +251,12 @@ const genre = (bonobUrl: URLBuilder, genre: Genre) => ({
   albumArtURI: iconArtURI(bonobUrl, iconForGenre(genre.name)).href(),
 });
 
-const year = (bonobUrl: URLBuilder, year: Year) => ({
+const yyyy = (bonobUrl: URLBuilder, year: Year) => ({
   itemType: "albumList",
   id: `year:${year.year}`,
   title: year.year,
-  albumArtURI: iconArtURI(bonobUrl, "music").href(),
+  // todo: maybe year.year should be nullable?
+  albumArtURI: year.year !== "?" ? iconArtURI(bonobUrl, "yyyy", year.year).href() : iconArtURI(bonobUrl, "music").href(),
 });
 
 const playlist = (bonobUrl: URLBuilder, playlist: Playlist) => ({
@@ -286,9 +287,9 @@ export const coverArtURI = (
     O.getOrElseW(() => iconArtURI(bonobUrl, "vinyl"))
   );
 
-export const iconArtURI = (bonobUrl: URLBuilder, icon: ICON) =>
+export const iconArtURI = (bonobUrl: URLBuilder, icon: ICON, text: string | undefined = undefined) =>
   bonobUrl.append({
-    pathname: `/icon/${icon}/size/legacy`,
+    pathname: `/icon/${text == undefined ? icon : `${icon}:${text}`}/size/legacy`,
   });
 
 export const sonosifyMimeType = (mimeType: string) =>
@@ -888,7 +889,7 @@ function bindSmapiSoapServiceToExpress(
                       .then(([page, total]) =>
                         getMetadataResult({
                           mediaCollection: page.map((it) =>
-                            year(bonobUrl, it)
+                            yyyy(bonobUrl, it)
                           ),
                           index: paging._index,
                           total,

src/subsonic.ts

@@ -805,7 +805,7 @@ export class SubsonicMusicLibrary implements MusicLibrary {
   years = async () => {
       const q: AlbumQuery = {
         _index: 0,
-        _count: 100000,  // FIXME: better than this ?
+        _count: 100000,  // FIXME: better than this, probably doesnt work anyway as max _count is 500 or something
         type: "alphabeticalByArtist",
       };
       const years = this.subsonic.getAlbumList2(this.credentials, q)

tests/builders.ts

@@ -14,7 +14,7 @@ import {
   Playlist,
   SimilarArtist,
   AlbumSummary,
-  RadioStation,
+  RadioStation
 } from "../src/music_service";
 
 import { b64Encode } from "../src/b64";
@@ -166,12 +166,6 @@ export const SAMPLE_GENRES = [
 ];
 export const randomGenre = () => SAMPLE_GENRES[randomInt(SAMPLE_GENRES.length)];
 
-export const aYear = (year: string) => ({ id: year, year });
-
-export const Y2024 = aYear("2024");
-export const Y2023 = aYear("2023");
-export const Y1969 = aYear("1969");
-
 export function aTrack(fields: Partial<Track> = {}): Track {
   const id = uuid();
   const artist = anArtist();

tests/icon.test.ts

@@ -20,6 +20,7 @@ import {
   allOf,
   features,
   STAR_WARS,
+  NO_FEATURES,
 } from "../src/icon";
 
 describe("SvgIcon", () => {
@@ -27,7 +28,9 @@ describe("SvgIcon", () => {
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="path1"/>
   <path d="path2" fill="none" stroke="#000"/>
+  <text font-size="25" fill="none">80's</text>
   <path d="path3"/>
+  <text font-size="25">80's</text>
 </svg>
 `;
 
@@ -58,7 +61,9 @@ describe("SvgIcon", () => {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
               <path d="path1"/>
               <path d="path2" fill="none" stroke="#000"/>
+              <text font-size="25" fill="none">80's</text>
               <path d="path3"/>
+              <text font-size="25">80's</text>
             </svg>
           `)
           );
@@ -107,7 +112,9 @@ describe("SvgIcon", () => {
               <rect x="0" y="0" width="24" height="24" fill="red"/>
               <path d="path1"/>
               <path d="path2" fill="none" stroke="#000"/>
+              <text font-size="25" fill="none">80's</text>
               <path d="path3"/>
+              <text font-size="25">80's</text>
             </svg>
         `)
         );
@@ -131,7 +138,9 @@ describe("SvgIcon", () => {
               <rect x="-4" y="-4" width="36" height="36" fill="pink"/>
               <path d="path1"/>
               <path d="path2" fill="none" stroke="#000"/>
+              <text font-size="25" fill="none">80's</text>
               <path d="path3"/>
+              <text font-size="25">80's</text>
             </svg>
         `)
         );
@@ -149,7 +158,9 @@ describe("SvgIcon", () => {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="path1"/>
               <path d="path2" fill="none" stroke="#000"/>
+              <text font-size="25" fill="none">80's</text>
               <path d="path3"/>
+              <text font-size="25">80's</text>
             </svg>
         `)
         );
@@ -169,7 +180,9 @@ describe("SvgIcon", () => {
               <rect x="0" y="0" width="24" height="24" fill="red"/>
               <path d="path1"/>
               <path d="path2" fill="none" stroke="#000"/>
+              <text font-size="25" fill="none">80's</text>
               <path d="path3"/>
+              <text font-size="25">80's</text>
             </svg>
         `)
         );
@@ -179,7 +192,7 @@ describe("SvgIcon", () => {
 
   describe("foreground color", () => {
     describe("with no viewPort increase", () => {
-      it("should add a rectangle the same size as the original viewPort", () => {
+      it("should change the fill values", () => {
         expect(
           new SvgIcon(svgIcon24)
             .with({ features: { foregroundColor: "red" } })
@@ -189,7 +202,9 @@ describe("SvgIcon", () => {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="path1" fill="red"/>
               <path d="path2" fill="none" stroke="red"/>
+              <text font-size="25" fill="none" stroke="red">80's</text>
               <path d="path3" fill="red"/>
+              <text font-size="25" fill="red">80's</text>
             </svg>
         `)
         );
@@ -197,7 +212,7 @@ describe("SvgIcon", () => {
     });
 
     describe("with a viewPort increase", () => {
-      it("should add a rectangle the same size as the original viewPort", () => {
+      it("should change the fill values", () => {
         expect(
           new SvgIcon(svgIcon24)
             .with({
@@ -212,7 +227,9 @@ describe("SvgIcon", () => {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 32">
               <path d="path1" fill="pink"/>
               <path d="path2" fill="none" stroke="pink"/>
+              <text font-size="25" fill="none" stroke="pink">80's</text>
               <path d="path3" fill="pink"/>
+              <text font-size="25" fill="pink">80's</text>
             </svg>
         `)
         );
@@ -230,7 +247,9 @@ describe("SvgIcon", () => {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="path1"/>
               <path d="path2" fill="none" stroke="#000"/>
+              <text font-size="25" fill="none">80's</text>              
               <path d="path3"/>
+              <text font-size="25">80's</text>              
             </svg>
         `)
         );
@@ -249,7 +268,9 @@ describe("SvgIcon", () => {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="path1" fill="red"/>
               <path d="path2" fill="none" stroke="red"/>
+              <text font-size="25" fill="none" stroke="red">80's</text>              
               <path d="path3" fill="red"/>
+              <text font-size="25" fill="red">80's</text>              
             </svg>
         `)
         );
@@ -257,6 +278,48 @@ describe("SvgIcon", () => {
     });
   });
 
+  describe("text", () => {
+    describe("when text value specified", () => {
+      it("should change the text values", () => {
+        expect(
+          new SvgIcon(svgIcon24)
+            .with({ features: { text: "yipppeeee" } })
+            .toString()
+        ).toEqual(
+          xmlTidy(`<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="path1"/>
+  <path d="path2" fill="none" stroke="#000"/>
+  <text font-size="25" fill="none">yipppeeee</text>
+  <path d="path3"/>
+  <text font-size="25">yipppeeee</text>
+</svg>
+        `)
+        );
+      });
+    });
+
+    describe("of undefined", () => {
+      it("should not do anything", () => {
+        expect(
+          new SvgIcon(svgIcon24)
+            .with({ features: { text: undefined } })
+            .toString()
+        ).toEqual(
+          xmlTidy(`<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="path1"/>
+  <path d="path2" fill="none" stroke="#000"/>
+  <text font-size="25" fill="none">80's</text>
+  <path d="path3"/>
+  <text font-size="25">80's</text>
+</svg>
+        `)
+        );
+      });
+    });
+  });
+
   describe("swapping the svg", () => {
     describe("with no other changes", () => {
       it("should swap out the svg, but maintain the IconFeatures", () => {
@@ -315,10 +378,14 @@ describe("SvgIcon", () => {
 
 class DummyIcon implements Icon {
   svg: string;
-  features: Partial<IconFeatures>;
+  features: IconFeatures;
+
   constructor(svg: string, features: Partial<IconFeatures>) {
     this.svg = svg;
-    this.features = features;
+    this.features = {
+      ...NO_FEATURES,
+      ...features
+    };
   }
 
   public apply = (transformer: Transformer): Icon => transformer(this);
@@ -347,6 +414,7 @@ describe("transform", () => {
             viewPortIncreasePercent: 100,
             foregroundColor: "blue",
             backgroundColor: "blue",
+            text: "a",
           },
         })
         .apply(
@@ -354,6 +422,7 @@ describe("transform", () => {
             features: {
               foregroundColor: "override1",
               backgroundColor: "override2",
+              text: "b",
             },
           })
         ) as DummyIcon;
@@ -363,6 +432,7 @@ describe("transform", () => {
         viewPortIncreasePercent: 100,
         foregroundColor: "override1",
         backgroundColor: "override2",
+        text: "b",
       });
     });
   });
@@ -379,6 +449,7 @@ describe("transform", () => {
             viewPortIncreasePercent: 100,
             foregroundColor: "blue",
             backgroundColor: "blue",
+            text: "bob",
           },
         })
         .apply(
@@ -392,6 +463,7 @@ describe("transform", () => {
         viewPortIncreasePercent: 100,
         foregroundColor: "blue",
         backgroundColor: "blue",
+        text: "bob"
       });
     });
   });
@@ -408,6 +480,7 @@ describe("features", () => {
         viewPortIncreasePercent: 100,
         foregroundColor: "blue",
         backgroundColor: "blue",
+        text: "foobar"
       })
     ) as DummyIcon;
 
@@ -415,6 +488,7 @@ describe("features", () => {
       viewPortIncreasePercent: 100,
       foregroundColor: "blue",
       backgroundColor: "blue",
+      text: "foobar"
     });
   });
 });

tests/server.test.ts

@@ -1366,11 +1366,25 @@ describe("server", () => {
             "..%2F..%2Ffoo",
             "%2Fetc%2Fpasswd",
             ".%2Fbob.js",
-            ".",
-            "..",
-            "1",
             "%23%24",
+          ].forEach((type) => {
+            describe(`trying to retrieve an icon with name ${type}`, () => {
+              it(`should fail`, async () => {
+                const response = await request(server()).get(
+                  `/icon/${type}/size/legacy`
+                );
+
+                expect(response.status).toEqual(400);
+              });
+            });
+          });
+        });
+
+        describe("missing icons", () => {
+          [
+            "1",
             "notAValidIcon",
+            "notAValidIcon:withSomeText"
           ].forEach((type) => {
             describe(`trying to retrieve an icon with name ${type}`, () => {
               it(`should fail`, async () => {
@@ -1398,6 +1412,20 @@ describe("server", () => {
           });
         });
 
+        describe("invalid text", () => {
+          ["..", "foobar.123", "_dog_", "{ whoop }"].forEach((text) => {
+            describe(`trying to retrieve an icon with text ${text}`, () => {
+              it(`should fail`, async () => {
+                const response = await request(server()).get(
+                  `/icon/yyyy:${text}/size/60`
+                );
+
+                expect(response.status).toEqual(400);
+              });
+            });
+          });
+        });        
+
         describe("fetching", () => {
           [
             "artists",
@@ -1527,6 +1555,41 @@ describe("server", () => {
             });
           });
         });
+
+        describe("specifing some text", () => {
+          const text = "somethingWicked"
+
+          describe(`legacy icon`, () => {
+            it("should return the png image", async () => {
+              const response = await request(server()).get(
+                `/icon/yyyy:${text}/size/legacy`
+              );
+
+              expect(response.status).toEqual(200);
+              expect(response.header["content-type"]).toEqual("image/png");
+              const image = await Image.load(response.body);
+              expect(image.width).toEqual(80);
+              expect(image.height).toEqual(80);
+            });
+          });
+
+          describe("svg icon", () => {
+            it(`should return an svg image with the text replaced`, async () => {
+              const response = await request(server()).get(
+                `/icon/yyyy:${text}/size/60`
+              );
+
+              expect(response.status).toEqual(200);
+              expect(response.header["content-type"]).toEqual(
+                "image/svg+xml; charset=utf-8"
+              );
+              const svg = Buffer.from(response.body).toString();
+              expect(svg).toContain(
+                `>${text}</text>`
+              );
+            });
+          });
+        });
       });
     });
   });

tests/smapi.test.ts

@@ -39,9 +39,6 @@ import {
   ROCK,
   TRIP_HOP,
   PUNK,
-  Y2024,
-  Y2023,
-  Y1969,
   aPlaylist,
   aRadioStation,
 } from "./builders";
@@ -562,6 +559,24 @@ describe("coverArtURI", () => {
   });
 });
 
+describe("iconArtURI", () => {
+  const bonobUrl = new URLBuilder(
+    "http://bonob.example.com:8080/context?search=yes"
+  );
+
+  describe("with no text", () => {
+    it("should return just the icon uri", () => {
+      expect(iconArtURI(bonobUrl, "mushroom").href()).toEqual("http://bonob.example.com:8080/context/icon/mushroom/size/legacy?search=yes")
+    });
+  });
+
+  describe("with text", () => {
+    it("should return just the icon uri", () => {
+      expect(iconArtURI(bonobUrl, "yyyy", "foobar10000").href()).toEqual("http://bonob.example.com:8080/context/icon/yyyy:foobar10000/size/legacy?search=yes")
+    });
+  });
+});
+
 describe("wsdl api", () => {
   const musicService = {
     generateToken: jest.fn(),
@@ -1383,7 +1398,7 @@ describe("wsdl api", () => {
             });
 
             describe("asking for a year", () => {
-              const expectedYears = [Y1969, Y2023, Y2024];
+              const expectedYears = [{ year: "?" }, { year: "1969" }, { year: "1980" }, { year: "2001" }, { year: "2010" }];
 
               beforeEach(() => {
                 musicLibrary.years.mockResolvedValue(expectedYears);
@@ -1396,17 +1411,22 @@ describe("wsdl api", () => {
                     index: 0,
                     count: 100,
                   });
+                  const albumListForYear = (year: string, icon: URLBuilder) => ({
+                    itemType: "albumList",
+                    id: `year:${year}`,
+                    title: year,
+                    albumArtURI: icon.href(),
+                  });
+
                   expect(result[0]).toEqual(
                     getMetadataResult({
-                      mediaCollection: expectedYears.map((year) => ({
+                      mediaCollection: [
-                        itemType: "albumList",
+                        albumListForYear("?",    iconArtURI(bonobUrl, "music")),
-                        id: `year:${year.id}`,
+                        albumListForYear("1969", iconArtURI(bonobUrl, "yyyy", "1969")),
-                        title: year.year,
+                        albumListForYear("1980", iconArtURI(bonobUrl, "yyyy", "1980")),
-                        albumArtURI: iconArtURI(
+                        albumListForYear("2001", iconArtURI(bonobUrl, "yyyy", "2001")),
-                          bonobUrl,
+                        albumListForYear("2010", iconArtURI(bonobUrl, "yyyy", "2010")),
-                          "music",
+                      ],
-                        ).href(),
-                      })),
                       index: 0,
                       total: expectedYears.length,
                     })
@@ -1418,21 +1438,22 @@ describe("wsdl api", () => {
                 it("should return just that page", async () => {
                   const result = await ws.getMetadataAsync({
                     id: `years`,
-                    index: 1,
+                    index: 2,
                     count: 2,
                   });
                   expect(result[0]).toEqual(
                     getMetadataResult({
-                      mediaCollection: [Y2023, Y2024].map((year) => ({
+                      mediaCollection: [{ year: "1980" }, { year: "2001" }].map((year) => ({
                         itemType: "albumList",
-                        id: `year:${year.id}`,
+                        id: `year:${year.year}`,
                         title: year.year,
                         albumArtURI: iconArtURI(
                           bonobUrl,
-                          "music"
+                          "yyyy",
+                          year.year
                         ).href(),
                       })),
-                      index: 1,
+                      index: 2,
                       total: expectedYears.length,
                     })
                   );

web/icons/yy.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <text x="50" y="75" font-size="65" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold">80s</text>
+</svg>

web/icons/yyyy.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <text x="50" y="65" font-size="35" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold">1980</text>
+</svg>