Started on media player
This commit is contained in:
Eclypsed
@@ -1,19 +1,112 @@
|
||||
<script lang="ts">
|
||||
export let currentlyPlaying: Song
|
||||
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="h-full w-full">
|
||||
<div class="bg-red-300">
|
||||
<audio controls>
|
||||
<source src="/api/audio?id=KfmrhlGCfWk&connectionId=cae88864-e116-4ce8-b3cc-5383eae0b781&apikey=2ff052272eeb44628c97314e09f384c10ae7fb31d8a40630442d3cb417512574" type="audio/webm" />
|
||||
</audio>
|
||||
</div>
|
||||
<div class="bg-green-300">{currentlyPlaying.type}</div>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
<!-- <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>
|
||||
</style> -->
|
||||
|
||||
Reference in New Issue
Block a user