Lazuli/src/lib/components/media/mediaPlayer.svelte

<script lang="ts">
    import { onMount } from 'svelte'
    import { fade } from 'svelte/transition'
    import { currentlyPlaying } from '$lib/stores'
    import { FastAverageColor } from 'fast-average-color'
    import Slider from '$lib/components/util/slider.svelte'

    export let song: Song

    let playing = false,
        shuffle = false,
        repeat = false

    let bgColor = 'black',
        primaryColor = 'var(--lazuli-primary)'

    const fac = new FastAverageColor()
    $: fac.getColorAsync(`/api/remoteImage?url=${song.thumbnail}`, { algorithm: 'dominant' }).then((color) => (bgColor = color.rgb))
    $: fac.getColorAsync(`/api/remoteImage?url=${song.thumbnail}`, { algorithm: 'simple' }).then((color) => (primaryColor = color.rgb))
    // let audioSource: HTMLAudioElement, progressBar: HTMLInputElement
    // onMount(() => (audioSource.volume = 0.4))
</script>

<main class="relative m-4 flex h-24 flex-grow-0 gap-4 overflow-clip rounded-xl text-white transition-colors duration-1000" style="background-color: {bgColor};">
    <img src={song.thumbnail} alt="" class="aspect-square max-h-full object-cover" />
    <section class="flex w-96 flex-col justify-center gap-1">
        <div class="line-clamp-2">{song.name}</div>
        <div class="text-sm text-neutral-400">{song.artists?.map((artist) => artist.name) || song.createdBy?.name}</div>
    </section>
    <section class="flex w-96 flex-col items-center justify-center gap-4">
        <div class="flex items-center gap-3 text-xl">
            <button on:click={() => (shuffle = !shuffle)} class="aspect-square h-8">
                <i class="fa-solid fa-shuffle" style="color: {shuffle ? primaryColor : 'rgb(163, 163, 163)'};" />
            </button>
            <button class="aspect-square h-8">
                <i class="fa-solid fa-backward-step" />
            </button>
            <button on:click={() => (playing = !playing)} class="grid aspect-square h-10 place-items-center rounded-full bg-white">
                <i class="fa-solid {playing ? 'fa-pause' : 'fa-play'} text-black" />
            </button>
            <button class="aspect-square h-8">
                <i class="fa-solid fa-forward-step" />
            </button>
            <button on:click={() => (repeat = !repeat)} class="aspect-square h-8">
                <i class="fa-solid fa-repeat" style="color: {repeat ? primaryColor : 'rgb(163, 163, 163)'};" />
            </button>
        </div>
        <Slider sliderColor={primaryColor} />
    </section>
</main>

<!-- <main class="h-screen w-full">
    <div class="relative h-full overflow-hidden">
        <div class="absolute z-0 flex h-full w-full items-center justify-items-center bg-neutral-900">
            <div class="absolute z-10 h-full w-full backdrop-blur-3xl"></div>
            {#key song}
                <img in:fade src={song.thumbnail} alt="" class="absolute h-full w-full object-cover brightness-50" />
            {/key}
        </div>
        <div class="absolute grid h-full w-full grid-rows-[auto_8rem_3rem_6rem] justify-items-center p-8">
            {#key song}
                <img in:fade src={song.thumbnail} alt="" class="h-full min-h-[8rem] overflow-hidden rounded-xl object-contain p-2" />
            {/key}
            <div in:fade class="flex flex-col items-center justify-center gap-1 px-8 text-center font-notoSans">
                {#key song}
                    <span class="text-3xl text-neutral-300">{song.name}</span>
                    {#if song.album?.name}
                        <span class="text-xl text-neutral-300">{song.album.name}</span>
                    {/if}
                    <span class="text-xl text-neutral-300">{song.artists?.map((artist) => artist.name).join(' / ') || song.createdBy?.name}</span>
                {/key}
            </div>
            <input
                id="progress-bar"
                on:mouseup={() => (audioSource.currentTime = audioSource.duration * Number(progressBar.value))}
                type="range"
                value="0"
                min="0"
                max="1"
                step="any"
                class="w-[90%] cursor-pointer rounded-lg bg-gray-400"
            />
            <div class="flex h-full w-11/12 justify-around overflow-hidden text-3xl text-white">
                <button class="relative z-0 aspect-square max-h-full max-w-full overflow-hidden rounded-full">
                    <i class="fa-solid fa-backward-step" />
                </button>
                <button class="relative z-0 aspect-square max-h-full max-w-full overflow-hidden rounded-full">
                    <i class={playing ? 'fa-solid fa-pause' : 'fa-solid fa-play'} />
                </button>
                <button on:click={() => ($currentlyPlaying = null)} class="relative z-0 aspect-square max-h-full max-w-full overflow-hidden rounded-full">
                    <i class="fa-solid fa-stop" />
                </button>
                <button class="relative z-0 aspect-square max-h-full max-w-full overflow-hidden rounded-full">
                    <i class="fa-solid fa-forward-step" />
                </button>
            </div>
        </div>
    </div>
    <div class="no-scrollbar flex w-full flex-col items-center divide-y-[1px] divide-[#353535] overflow-y-scroll bg-neutral-900 p-4">
        <div>This is where playlist items go</div>
    </div>
    {#key song}
        <audio bind:this={audioSource} id="audio" class="hidden" src="/api/audio?id={song.id}&connection={song.connection}" />
    {/key}
</main> -->

<!-- <style>
    main {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
</style> -->