Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed up the mini player some more

Browse Source
This commit is contained in:
Eclypsed
2024-01-18 01:58:40 -05:00
parent fe722f326a
commit b6b4e16ecd
3 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/media/mediaCard.svelte
View File

@@ -50,10 +50,10 @@
</IconButton> </IconButton>
</span> </span>
</div> </div>
<div id="card-label" class="absolute -bottom-3 w-full px-2.5 text-sm"> <div class="absolute -bottom-3 w-full px-2.5 text-sm">
<div class="overflow-hidden text-ellipsis whitespace-nowrap" title={mediaData.name}>{mediaData.name}</div> <div class="overflow-hidden text-ellipsis whitespace-nowrap" title={mediaData.name}>{mediaData.name}</div>
<div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400"> <div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400">
<span id="artist-list" class="overflow-hidden text-ellipsis" style="font-size: 0;"> <span class="overflow-hidden text-ellipsis" style="font-size: 0; line-height: 0;">
<!-- the font size of zero is to remove the stupid little gaps between the spans --> <!-- the font size of zero is to remove the stupid little gaps between the spans -->
{#each mediaData.artists as artist} {#each mediaData.artists as artist}
{@const listIndex = mediaData.artists.indexOf(artist)} {@const listIndex = mediaData.artists.indexOf(artist)}

49
src/lib/components/media/miniPlayer.svelte
View File

@@ -9,7 +9,9 @@
$: song = $currentlyPlaying $: song = $currentlyPlaying
let songLiked = false let volume
let songLiked = false,
songPlaying = false
const formatDuration = (timeMilliseconds) => { const formatDuration = (timeMilliseconds) => {
const seconds = Math.floor((timeMilliseconds / 1000) % 60) const seconds = Math.floor((timeMilliseconds / 1000) % 60)
@@ -17,22 +19,29 @@
return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':') return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':')
} }
let volume
$: console.log(volume)
</script> </script>
{#if song} {#if song}
<div id="player-wrapper" class="relative flex w-full justify-center" transition:slide={{ axis: 'y' }}> <div id="player-wrapper" class="relative w-full" transition:slide={{ axis: 'y' }}>
{#if displayMode === 'vertical'} {#if displayMode === 'vertical'}
<h1>Vertical Mode</h1> <h1>Vertical Mode</h1>
{:else} {:else}
<div class="grid h-full grid-cols-[1fr_auto_1fr] grid-rows-1 items-center gap-10 rounded-full bg-neutral-950 px-8 py-2.5 text-lg"> <div class="grid h-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg">
<section class="flex h-full items-center justify-start gap-4 text-sm"> <section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" /> <img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
<div class="flex flex-col gap-1"> <div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
<div>{song.name}</div> <span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
<div class="text-xs text-neutral-400">{Array.from(song.artists, (artist) => artist.name).join(', ')}</div> <span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
{#each song.artists as artist}
{@const listIndex = song.artists.indexOf(artist)}
<a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
{#if listIndex === song.artists.length - 2}
<span class="mx-0.5 text-xs">&</span>
{:else if listIndex < song.artists.length - 2}
<span class="mr-0.5 text-xs">,</span>
{/if}
{/each}
</span>
</div> </div>
<button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}> <button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
{#if songLiked} {#if songLiked}
@@ -42,13 +51,13 @@
{/if} {/if}
</button> </button>
</section> </section>
<section class="flex h-full flex-col justify-center gap-1"> <section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
<div class="flex h-6 items-center justify-center gap-4"> <div class="flex h-6 items-center justify-center gap-4">
<IconButton halo={false}> <IconButton halo={false}>
<i slot="icon" class="fa-solid fa-backward-step" /> <i slot="icon" class="fa-solid fa-backward-step" />
</IconButton> </IconButton>
<IconButton halo={false}> <IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
<i slot="icon" class="fa-solid fa-play" /> <i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
</IconButton> </IconButton>
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}> <IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
<i slot="icon" class="fa-solid fa-stop" /> <i slot="icon" class="fa-solid fa-stop" />
@@ -57,15 +66,21 @@
<i slot="icon" class="fa-solid fa-forward-step" /> <i slot="icon" class="fa-solid fa-forward-step" />
</IconButton> </IconButton>
</div> </div>
<div class="flex w-96 items-center gap-2 text-sm text-neutral-400"> <div class="flex items-center gap-2 text-sm text-neutral-400">
<div class="whitespace-nowrap">0:00</div> <div class="whitespace-nowrap">0:00</div>
<Slider /> <Slider />
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div> <div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
</div> </div>
</section> </section>
<section class="flex h-full items-center justify-end gap-4 py-3"> <section class="flex h-full items-center justify-end gap-1 py-5">
<VolumeSlider bind:volume /> <VolumeSlider bind:volume />
<IconButton> <IconButton halo={false}>
<i slot="icon" class="fa-solid fa-shuffle" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-repeat" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-ellipsis-vertical" /> <i slot="icon" class="fa-solid fa-ellipsis-vertical" />
</IconButton> </IconButton>
</section> </section>
@@ -76,6 +91,6 @@
<style> <style>
#player-wrapper { #player-wrapper {
height: 72px; height: 80px;
} }
</style> </style>

15
src/lib/components/utility/volumeSlider.svelte
View File

@@ -1,5 +1,6 @@
<script> <script>
import Slider from '$lib/components/utility/slider.svelte' import Slider from '$lib/components/utility/slider.svelte'
import IconButton from '$lib/components/utility/iconButton.svelte'
import { getVolume, setVolume } from '$lib/utils/utils.js' import { getVolume, setVolume } from '$lib/utils/utils.js'
import { onMount } from 'svelte' import { onMount } from 'svelte'
@@ -18,20 +19,20 @@
$: volume = muted ? 0 : storedVolume $: volume = muted ? 0 : storedVolume
</script> </script>
<div id="volume-slider" class="flex h-full flex-row-reverse items-center gap-2"> <div id="volume-slider" class="flex h-10 w-fit flex-shrink-0 flex-row-reverse items-center gap-2">
<button id="volume-toggle" class="grid aspect-square h-full place-items-center transition-colors hover:text-lazuli-primary" on:click={() => (muted = !muted)}> <IconButton halo={false} on:click={() => (muted = !muted)}>
<i class="fa-solid {volume > 50 ? 'fa-volume-high' : volume > 0 ? 'fa-volume-low' : 'fa-volume-xmark'} w-full text-left text-base" /> <i slot="icon" class="fa-solid {volume > 50 ? 'fa-volume-high' : volume > 0 ? 'fa-volume-low' : 'fa-volume-xmark'} w-full text-center text-base" />
</button> </IconButton>
<div id="slider-wrapper" class="w-0 transition-all duration-300"> <div id="slider-wrapper" class="w-0 transition-all duration-500">
<Slider bind:value={storedVolume} /> <Slider bind:value={storedVolume} />
</div> </div>
</div> </div>
<style> <style>
#volume-slider:hover > #slider-wrapper { #volume-slider:hover > #slider-wrapper {
width: 8rem; width: 6rem;
} }
#slider-wrapper:focus-within { #slider-wrapper:focus-within {
width: 8rem; width: 6rem;
} }
</style> </style>