feat: blur artwork controller progress bar + timestamps

deno.lock

···
       "dependencies": [
         "npm:98.css@~0.1.21",
         "npm:@automerge/automerge@^3.0.0-beta.0",
+        "npm:@js-temporal/polyfill@~0.5.1",
         "npm:@jsr/bradenmacdonald__s3-lite-client@0.9",
         "npm:@jsr/std__media-types@^1.1.0",
         "npm:@orama/orama@^3.1.7",

package-lock.json

···
       "dependencies": {
         "@automerge/automerge": "^3.0.0-beta.0",
         "@bradenmacdonald/s3-lite-client": "npm:@jsr/bradenmacdonald__s3-lite-client@^0.9.0",
+        "@js-temporal/polyfill": "^0.5.1",
         "@orama/orama": "^3.1.7",
         "@orama/plugin-qps": "^3.1.7",
         "@picocss/pico": "^2.1.1",
···
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "dev": true,
       "license": "MIT"
+    },
+    "node_modules/@js-temporal/polyfill": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@js-temporal/polyfill/-/polyfill-0.5.1.tgz",
+      "integrity": "sha512-hloP58zRVCRSpgDxmqCWJNlizAlUgJFqG2ypq79DCvyv9tHjRYMDOcPFjzfl/A1/YxDvRCZz8wvZvmapQnKwFQ==",
+      "license": "ISC",
+      "dependencies": {
+        "jsbi": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/@orama/orama": {
       "version": "3.1.7",
···
       "bin": {
         "js-yaml": "bin/js-yaml.js"
       }
+    },
+    "node_modules/jsbi": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-4.3.2.tgz",
+      "integrity": "sha512-9fqMSQbhJykSeii05nxKl4m6Eqn2P6rOlYiS+C5Dr/HPIU/7yZxu5qzbs40tgaFORiw2Amd0mirjxatXYMkIew==",
+      "license": "Apache-2.0"
     },
     "node_modules/jszip": {
       "version": "3.10.1",

package.json

···
   "dependencies": {
     "@automerge/automerge": "^3.0.0-beta.0",
     "@bradenmacdonald/s3-lite-client": "npm:@jsr/bradenmacdonald__s3-lite-client@^0.9.0",
+    "@js-temporal/polyfill": "^0.5.1",
     "@orama/orama": "^3.1.7",
     "@orama/plugin-qps": "^3.1.7",
     "@picocss/pico": "^2.1.1",

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

···
     z-index: 10;
   }
 
+  /* Now playing */
+
   cite {
+    display: block;
     font-style: normal;
+    line-height: var(--leading-snug);
+  }
+
+  /* Progress */
+
+  .progress {
+    cursor: pointer;
+    margin: var(--space-xs) 0;
+    padding: var(--space-2xs) 0;
+  }
+
+  progress {
+    appearance: none;
+    border: 0;
+    display: block;
+    height: 4px;
+    width: 100%;
+  }
+
+  progress,
+  progress::-webkit-progress-bar {
+    background-color: oklch(100% 0 0 / 40%);
+    overflow: hidden;
+    border-radius: 4px;
+  }
+
+  progress[value]::-webkit-progress-value,
+  progress[value]::-moz-progress-bar {
+    border-radius: 4px;
+    background-color: oklch(100% 0 0 / 50%);
+  }
+
+  .timestamps {
+    display: flex;
+    font-size: var(--fs-2xs);
+    font-weight: 500;
+    justify-content: space-between;
+    margin-top: var(--space-3xs);
+    opacity: 0.4;
+  }
+
+  .timestamps time {
   }
 
   /* Controls */
 
   .controller menu {
+    align-items: center;
     display: flex;
-    font-size: var(--fs-2xs);
-    gap: var(--space-sm);
-    margin: var(--space-md) 0;
+    font-size: var(--fs-md);
+    gap: var(--space-lg);
+    justify-content: center;
+    margin: var(--space-sm) 0;
     padding: 0;
+    text-align: center;
   }
 
   .controller command {
     cursor: pointer;
+    line-height: 0;
+  }
+
+  .controller .iconoir-pause-solid,
+  .controller .iconoir-play-solid {
+    font-size: var(--fs-lg);
   }
 
   /* Gradient blur */
···
 
 <script>
   import { FastAverageColor } from "fast-average-color";
+  import { Temporal } from "@js-temporal/polyfill";
 
   import { computed, effect, type Signal, signal, throttled } from "spellcaster";
   import { tags, text, type ElementConfigurator } from "spellcaster/hyperscript.js";
···
   // Signals
   const [activeTrack, setActiveTrack] = signal<Track | undefined>(undefined);
   const [artwork, setArtwork] = signal<Artwork[]>([]);
+  const [duration, setDuration] = signal<string>("0:00");
   const [groupId, setGroupId] = signal<string | undefined>(context.groupId);
   const [isPlaying, setIsPlaying] = signal<boolean>(false);
   const [progress, setProgress] = signal<number>(0);
+  const [time, setTime] = signal<string>("0:00");
 
   // Applet connections
   const configurator = {
···
   };
 
   ////////////////////////////////////////////
+  // ✨ EFFECTS
+  // ⌚️ Time
+  ////////////////////////////////////////////
+  const formatTimestamps = () => {
+    const prog = progress();
+    const curr = engine.queue.data.now;
+    const audio = curr ? engine.audio.data.items[curr.id] : undefined;
+
+    if (audio) {
+      const p = Temporal.Duration.from({
+        milliseconds: Math.round(audio.duration * prog * 1000),
+      }).round({
+        largestUnit: "hours",
+      });
+
+      const d = Temporal.Duration.from({ milliseconds: Math.round(audio.duration * 1000) }).round({
+        largestUnit: "hours",
+      });
+
+      // const diff =
+
+      setTime(formatTime(p));
+      setDuration(formatTime(d));
+    } else {
+      setTime("0:00");
+      setDuration("0:00");
+    }
+  };
+
+  effect(formatTimestamps);
+
+  function formatTime(duration: Temporal.Duration) {
+    return `${duration.hours > 0 ? duration.hours.toFixed(0) + ":" : ""}${duration.hours > 0 ? (duration.minutes > 9 ? duration.minutes.toFixed(0) : "0" + duration.minutes.toFixed(0)) : duration.minutes.toFixed(0)}:${duration.seconds > 9 ? duration.seconds.toFixed(0) : "0" + duration.seconds.toFixed(0)}`;
+  }
+
+  ////////////////////////////////////////////
   // 🔊 AUDIO
   ////////////////////////////////////////////
 
···
   controller.appendChild(NowPlaying);
 
   ////////////////////////////////////////////
+  // UI ░ PROGRESS
+  ////////////////////////////////////////////
+
+  const ProgressBar = h(
+    "progress",
+    computed(() => ({ max: "100", value: `${progress() * 100}` })),
+    [],
+  );
+
+  const Time = h("div", { className: "timestamps" }, [
+    h(
+      "time",
+      computed(() => {
+        return { attrs: { datetime: time() } };
+      }),
+      text(time),
+    ),
+    h(
+      "time",
+      computed(() => {
+        return { attrs: { datetime: duration() } };
+      }),
+      text(duration),
+    ),
+  ]);
+
+  const Progress = h("div", { className: "progress", onclick: seek }, [ProgressBar, Time]);
+
+  function seek(event: MouseEvent) {
+    const mouseEvent = event;
+    const percentage = mouseEvent.offsetX / (event.target as HTMLProgressElement).clientWidth;
+    engine.audio.sendAction("seek", { audioId: engine.queue.data.now?.id, percentage });
+  }
+
+  controller.appendChild(Progress);
+
+  ////////////////////////////////////////////
   // UI ░ CONTROLS
   ////////////////////////////////////////////
 
+  const Control = (
+    label: string,
+    icon: string,
+    props: Record<string, any> | Signal<Record<string, any>>,
+  ) => {
+    return h("command", props, [h("i", { className: icon, title: label })]);
+  };
+
   const Controls = h("menu", {}, [
-    h("command", { onclick: () => {} }, text("Previous")),
-    h("command", { onclick: playPause }, text(computed(() => (isPlaying() ? "Pause" : "Play")))),
-    h("command", { onclick: nextTrack }, text("Next")),
+    Control("Previous track", "iconoir-rewind-solid", { onclick: previous }),
+    Control(
+      "Play",
+      "iconoir-play-solid",
+      computed(() => {
+        const style = `display: ${!isPlaying() ? "inline" : "none"}`;
+        return { onclick: playPause, style };
+      }),
+    ),
+    Control(
+      "Pause",
+      "iconoir-pause-solid",
+      computed(() => {
+        const style = `display: ${isPlaying() ? "inline" : "none"}`;
+        return { onclick: playPause, style };
+      }),
+    ),
+    Control("Next track", "iconoir-forward-solid", { onclick: next }),
   ]);
 
   function playPause() {
···
     }
   }
 
-  function nextTrack() {
+  function previous() {}
+
+  function next() {
     engine.queue.sendAction("shift");
   }
 

src/styles/diffuse/fonts.css

···
   :root {
     font-family: "InterVariable", sans-serif;
     font-feature-settings:
-      "zero" 2,
-      "ss03" 2;
+      /* "zero" 2, */ "ss03" 2;
     font-optical-sizing: auto;
   }
 }