Expand DNDT, add TrackInline, more tracks

src/components/TrackInline.astro

@@ -0,0 +1,34 @@
+---
+import { getTrackByID } from "@lib/utils";
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  id: string;
+  class?: string;
+}
+
+const { id, class: className, ...attrs } = Astro.props as Props;
+
+const track = getTrackByID(id);
+
+if (!track) {
+  throw new Error(`Track with ID "${id}" not found.`);
+}
+
+import { getAudioDurationInSeconds } from "get-audio-duration";
+import { join } from "path";
+const fullFilePath = join(process.cwd(), "public", track.data.src);
+const duration = await getAudioDurationInSeconds(fullFilePath);
+---
+
+<div
+  class:list={[
+    "text-primary flex items-center transition hover:cursor-pointer hover:text-gray-300",
+    className
+  ]}
+  onclick=`window.player.addToQueue({ src: "${track.data.src}", "metadata": ${JSON.stringify(track.data.metadata)}, "duration": "${duration}" }, true);`
+  {...attrs}
+>
+  <Icon name="fa7-solid:play-circle" class="mr-2 inline-block" />
+  <span class="inline-block">{track.data.metadata.title}</span>
+</div>