feat: various artwork improvements

src/pages/constituent/blur/artwork-controller/_applet.astro

···
     left: 0;
     object-fit: cover;
     opacity: 0;
-    pointer-events: none;
     position: absolute;
     top: 0;
     transition-duration: var(--transition-durition);
···
   cite {
     display: block;
     font-style: normal;
-    line-height: var(--leading-snug);
     text-shadow: var(--text-shadow-sm);
   }
 
···
 
   reactive(
     engine.queue,
-    (data) => comparable(data.future),
-    () => {
-      const track = engine.queue.data.now;
-
-      if (!track) {
-        setActiveTrack(undefined);
-        return;
-      }
-
-      setActiveTrack(track);
-    },
+    (data) => data.now,
+    (track) => setActiveTrack(track || undefined),
   );
 
   // Changed artwork based on active queue item.
   // (debounced)
 
-  reactive(engine.queue, (data) => comparable(data.future), debounce(2000, changeArtwork));
+  reactive(engine.queue, (data) => data.now, debounce(2000, changeArtwork));
 
   async function changeArtwork() {
     const track = engine.queue.data.now;
···
       const color = fac.getColor(img as HTMLImageElement);
       const rgb = color.value;
       const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);
-      console.log(o);
 
       setArtworkColor(color.rgba);
       setArtworkLightMode(o > 165);
···
         computed(
           () =>
             activeTrack()?.tags?.artist ||
-            (isMainGroup() && !activeTrack() ? "Waiting for tracks to be queued ..." : ""),
+            (isMainGroup() && !activeTrack() ? "Waiting on queue ..." : ""),
         ),
       ),
     ),

src/pages/orchestrator/queue-audio/_applet.astro

···
       const activeTrack = engine.queue.data.now;
       const isPlaying = engine.audio.data.isPlaying;
 
+      // Resolve URIs
+      const url = activeTrack
+        ? await inputUrl(configurator.input, activeTrack.uri).then((a) => a?.url)
+        : undefined;
+
+      // Check if we still need to render
+      if (engine.queue.data.now?.id !== activeTrack?.id) return;
+
       // Play new active queue item
       // TODO: Take URL expiration timestamp into account
       // TODO: Preload next queue item
···
                 {
                   id: activeTrack.id,
                   isPreload: false,
-                  url: await inputUrl(configurator.input, activeTrack.uri).then((a) => a?.url),
+                  url,
                 },
               ]
-            : // TODO: This probably isn't correct, keep preloads?
+            : // TODO: Keep preloads
               [],
           play: activeTrack && isPlaying ? { audioId: activeTrack.id } : undefined,
         },

src/scripts/processor/artwork/types.d.ts

···
   stream?: ReadableStream;
   tags?: Tags;
   urls?: Urls;
+  variousArtists?: boolean;
 };
 
 // export type State = {

src/scripts/processor/artwork/worker.ts

···
 ////////////////////////////////////////////
 // 🛠️
 ////////////////////////////////////////////
+function escapeLucene(str: string) {
+  return [].map
+    .call(str, (char) => {
+      if (
+        char === "+" ||
+        char === "-" ||
+        char === "&" ||
+        char === "|" ||
+        char === "!" ||
+        char === "(" ||
+        char === ")" ||
+        char === "{" ||
+        char === "}" ||
+        char === "[" ||
+        char === "]" ||
+        char === "^" ||
+        char === '"' ||
+        char === "~" ||
+        char === "*" ||
+        char === "?" ||
+        char === ":" ||
+        char === "\\" ||
+        char === "/"
+      )
+        return "\\" + char;
+      else return char;
+    })
+    .join("");
+}
+
 async function lastFm(req: ArtworkRequest): Promise<Artwork[]> {
   if (!navigator.onLine) return [];
 
···
   if (!navigator.onLine) return [];
   if (!album && !artist) return [];
 
-  // TODO
-  const variousArtists = false;
-
-  const query = `release:"${album}"` + (variousArtists ? `` : ` AND artist:"${artist}"`);
+  const query =
+    `release:"${escapeLucene(album || "")}"` +
+    (req.variousArtists ? `` : ` AND artistname:"${escapeLucene(artist || "")}"`);
   const encodedQuery = encodeURIComponent(query);
 
   return await fetch(`https://musicbrainz.org/ws/2/release/?query=${encodedQuery}&fmt=json`)
     .then((r) => r.json())
-    .then((r) => musicBrainzCover(r.releases))
+    .then((r) => {
+      if (r.releases.length === 0 && !req.variousArtists) {
+        return musicBrainz({ ...req, variousArtists: true });
+      } else {
+        return musicBrainzCover(r.releases, req);
+      }
+    })
     .catch((err) => {
       console.error(err);
       return [];
     });
 }
 
-async function musicBrainzCover(remainingReleases: any[]): Promise<Artwork[]> {
+async function musicBrainzCover(remainingReleases: any[], req: ArtworkRequest): Promise<Artwork[]> {
   const release = remainingReleases[0];
   if (!release) return [];
 
+  const credit = release?.["artist-credit"]?.[0]?.name;
+  if (req.variousArtists && credit !== "Various Artists" && credit !== req.tags?.artist) return [];
+
   return await fetch(`https://coverartarchive.org/release/${release.id}/front-500`)
     .then((r) => r.blob())
     .then(async (b) => {
       if (b.type.startsWith("image/")) {
         return [{ bytes: await b.arrayBuffer().then((buf) => new Uint8Array(buf)), mime: b.type }];
       } else {
-        return musicBrainzCover(remainingReleases.slice(1));
+        return musicBrainzCover(remainingReleases.slice(1), req);
       }
     })
     .catch((err) => {
       console.error(err);
-      return musicBrainzCover(remainingReleases.slice(1));
+      return musicBrainzCover(remainingReleases.slice(1), req);
     });
 }