feat: several artwork controller improvements

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

···
 
   .controller__inner {
     position: relative;
+    transition-duration: var(--transition-durition);
+    transition-property: color;
     z-index: 10;
+  }
+
+  .controller__inner.controller__inner--light-mode {
+    color: rgba(0, 0, 0, 0.6);
   }
 
   /* Now playing */
···
     text-shadow: var(--text-shadow-sm);
   }
 
+  .controller__inner--light-mode cite {
+    text-shadow: none;
+  }
+
   /* Progress */
 
   .progress {
···
     margin-top: var(--space-3xs);
     opacity: 0.4;
     text-shadow: var(--text-shadow-xs);
+  }
+
+  .controller__inner--light-mode .timestamps {
+    text-shadow: none;
   }
 
   /* Controls */
···
   const [activeTrack, setActiveTrack] = signal<Track | undefined>(undefined);
   const [artwork, setArtwork] = signal<Artwork[]>([]);
   const [artworkColor, setArtworkColor] = signal<string | undefined>(undefined);
+  const [artworkLightMode, setArtworkLightMode] = signal<boolean>(false);
   const [duration, setDuration] = signal<string>("0:00");
   const [groupId, setGroupId] = signal<string | undefined>(context.groupId);
   const [isPlaying, setIsPlaying] = signal<boolean>(false);
···
 
     const currTrack = activeTrack();
     const currCacheId = currTrack ? await trackArtworkCacheId(currTrack) : undefined;
-    if (cacheId === currCacheId) setArtwork(art);
+    if (cacheId === currCacheId)
+      try {
+        setArtwork(art);
+      } catch (err) {}
   }
 
   ////////////////////////////////////////////
···
     img.onload = () => {
       const fac = new FastAverageColor();
       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 > 170);
       bg.style.backgroundColor = color.rgba;
       main.style.backgroundColor = color.rgba;
       img.style.opacity = "1";
···
 
     // Insert new artwork
     showcase.appendChild(img);
+  });
+
+  effect(() => {
+    if (artworkLightMode()) controller.classList.add("controller__inner--light-mode");
+    else controller.classList.remove("controller__inner--light-mode");
   });
 
   ////////////////////////////////////////////
···
       engine.audio.sendAction("pause", { audioId });
     } else if (audioId) {
       engine.audio.sendAction("play", { audioId });
-    } else {
-      engine.queue.sendAction("shift");
     }
   }
 

src/pages/engine/audio/_applet.astro

···
   function endedEvent(event: Event) {
     const audio = event.target as HTMLAudioElement;
     audio.currentTime = 0;
-    updateItems(audio.id, { hasEnded: true, isPlaying: false });
+    updateItems(audio.id, { hasEnded: true });
   }
 
   function errorEvent(event: Event) {
···
 
   function pauseEvent(event: Event) {
     const audio = event.target as HTMLAudioElement;
+    const item = context.data.items[audio.id];
+    const ended = item ? item.hasEnded || item.progress === 1 : false;
     updateItems(audio.id, { isPlaying: false });
-    update({ isPlaying: false });
+    update({ isPlaying: ended });
   }
 
   function playEvent(event: Event) {