+ Track details
+
+
+ Track details
+
+
+
+
+
diff --git a/src/facets/themes/winamp/facet/index.inline.js b/src/facets/themes/winamp/facet/index.inline.js
index b3a35a31..a424d31c 100644
--- a/src/facets/themes/winamp/facet/index.inline.js
+++ b/src/facets/themes/winamp/facet/index.inline.js
@@ -26,6 +26,7 @@ await foundation.configurator.input();
await import("~/facets/themes/winamp/browser/element.js");
await import("~/facets/themes/winamp/window/element.js");
await import("~/facets/themes/winamp/artwork/element.js");
+await import("~/facets/themes/winamp/track-details/element.js");
const { default: WinampElement } = await import(
"~/facets/themes/winamp/winamp/element.js"
diff --git a/src/facets/themes/winamp/track-details/element.js b/src/facets/themes/winamp/track-details/element.js
new file mode 100644
index 00000000..2b8ad970
--- /dev/null
+++ b/src/facets/themes/winamp/track-details/element.js
@@ -0,0 +1,218 @@
+import {
+ defineElement,
+ DiffuseElement,
+ query,
+ whenElementsDefined,
+} from "~/common/element.js";
+import { signal } from "~/common/signal.js";
+
+/**
+ * @import {RenderArg} from "~/common/element.d.ts"
+ *
+ * @import ControllerOrchestrator from "~/components/orchestrator/controller/element.js"
+ * @import FavouritesOrchestrator from "~/components/orchestrator/favourites/element.js"
+ */
+
+class TrackDetailsElement extends DiffuseElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ }
+
+ // SIGNALS - DEPENDENCIES
+
+ $controller = signal(/** @type {ControllerOrchestrator | undefined} */ (undefined));
+ $favourites = signal(/** @type {FavouritesOrchestrator | undefined} */ (undefined));
+
+ // COMPUTED
+
+ currentTrack = () => this.$controller.value?.currentTrack();
+
+ // LIFECYCLE
+
+ /**
+ * @override
+ */
+ connectedCallback() {
+ super.connectedCallback();
+
+ /** @type {ControllerOrchestrator} */
+ const controller = query(this, "controller-orchestrator-selector");
+
+ /** @type {FavouritesOrchestrator} */
+ const favourites = query(this, "favourites-orchestrator-selector");
+
+ whenElementsDefined({ controller, favourites }).then(() => {
+ this.$controller.value = controller;
+ this.$favourites.value = favourites;
+ });
+ }
+
+ // ACTIONS
+
+ toggleFavourite = () => {
+ const track = this.currentTrack();
+ if (track) this.$favourites.value?.toggle(track);
+ };
+
+ /**
+ * @param {RenderArg} _
+ */
+ render({ html }) {
+ const track = this.currentTrack();
+ const isFav = track ? (this.$favourites.value?.isFavourite(track) ?? false) : false;
+
+ const title = track?.tags?.title ?? "—";
+ const artist = track?.tags?.artist ?? "—";
+ const album = track?.tags?.album ?? "—";
+ const year = track?.tags?.year ?? null;
+
+ const durationMs = track?.stats?.duration ?? null;
+ const duration = durationMs != null ? formatDuration(durationMs) : "—";
+
+ const bitrate = track?.stats?.bitrate != null
+ ? `${Math.round(track.stats.bitrate / 1000)} kbps`
+ : "—";
+
+ const sampleRate = track?.stats?.sampleRate != null
+ ? `${Math.round(track.stats.sampleRate / 1000)} kHz`
+ : "—";
+
+ const codec = track?.stats?.codec ?? "—";
+ const channels = track?.stats?.numberOfChannels ?? null;
+
+ return html`
+
+
+
+
+
+