Files
portfolio/src/components/TrackInline.astro
T

35 lines
983 B
Plaintext

---
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>