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

worked on the miniplayer, volume slider is fucked

Browse Source
This commit is contained in:
Eclypsed
2024-01-17 00:52:04 -05:00
parent a6c65ce0cf
commit fe722f326a
6 changed files with 80 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,39 +2,33 @@
export let displayMode
import IconButton from '$lib/components/utility/iconButton.svelte'
import VolumeSlider from '$lib/components/utility/volumeSlider.svelte'
import Slider from '$lib/components/utility/slider.svelte'
import { currentlyPlaying } from '$lib/utils/stores.js'
import { slide } from 'svelte/transition'
import { getVolume, setVolume } from '$lib/utils/utils.js'
import { onMount } from 'svelte'
$: song = $currentlyPlaying
let songLiked = false
let volumeSlider
let volume
onMount(() => {
volume = getVolume()
})
$: console.log(volume)
const formatDuration = (timeMilliseconds) => {
const seconds = Math.floor((timeMilliseconds / 1000) % 60)
const minutes = Math.floor((timeMilliseconds / 1000 / 60) % 60)
return [minutes.toString(), seconds.toString.padStart(2, '0')].join(':')
return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':')
}
let volume
$: console.log(volume)
</script>
{#if song}
<div id="player-wrapper" class="relative border-t-2 border-t-lazuli-primary bg-neutral-950" transition:slide={{ axis: 'y' }}>
<div id="player-wrapper" class="relative flex w-full justify-center" transition:slide={{ axis: 'y' }}>
{#if displayMode === 'vertical'}
<h1>Vertical Mode</h1>
{:else}
<div class="grid h-full grid-cols-3 grid-rows-1 p-3 text-sm">
<section class="flex items-center gap-4">
<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">
<section class="flex h-full items-center justify-start gap-4 text-sm">
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
<div class="flex flex-col gap-1">
<div>{song.name}</div>
@@ -48,44 +42,29 @@
{/if}
</button>
</section>
<section class="flex items-center justify-center gap-4 py-1 text-xl">
<IconButton>
<i slot="icon" class="fa-solid fa-backward-step" />
</IconButton>
<IconButton>
<i slot="icon" class="fa-solid fa-play" />
</IconButton>
<IconButton on:click={() => ($currentlyPlaying = null)}>
<i slot="icon" class="fa-solid fa-stop" />
</IconButton>
<IconButton>
<i slot="icon" class="fa-solid fa-forward-step" />
</IconButton>
</section>
<section class="flex items-center justify-end gap-4 py-1 text-xl">
<div class="flex w-40 items-center gap-4">
<Slider
bind:this={volumeSlider}
initialValue={volume}
on:valuechange={(event) => {
volume = event.detail.value
setVolume(volume)
}}
/>
<button
class="transition-colors hover:text-lazuli-primary"
on:click={() => {
if (volume > 0) {
volume = 0
} else {
volume = getVolume()
}
volumeSlider.setValue(volume)
}}
>
<i class="fa-solid fa-volume-high" />
</button>
<section class="flex h-full flex-col justify-center gap-1">
<div class="flex h-6 items-center justify-center gap-4">
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-backward-step" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-play" />
</IconButton>
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
<i slot="icon" class="fa-solid fa-stop" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-forward-step" />
</IconButton>
</div>
<div class="flex w-96 items-center gap-2 text-sm text-neutral-400">
<div class="whitespace-nowrap">0:00</div>
<Slider />
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
</div>
</section>
<section class="flex h-full items-center justify-end gap-4 py-3">
<VolumeSlider bind:volume />
<IconButton>
<i slot="icon" class="fa-solid fa-ellipsis-vertical" />
</IconButton>

6
src/lib/components/utility/iconButton.svelte
View File

@@ -1,5 +1,6 @@
<script>
export let disabled = false
export let halo = true
import { createEventDispatcher } from 'svelte'
@@ -8,6 +9,7 @@
<button
class:disabled
class:halo
class="relative grid aspect-square h-full place-items-center transition-transform duration-75 active:scale-90 {disabled ? 'text-neutral-600' : ''}"
on:click|preventDefault={() => dispatch('click')}
{disabled}
@@ -16,7 +18,7 @@
</button>
<style>
button:not(.disabled)::before {
button:not(.disabled).halo::before {
content: '';
width: 0;
height: 0;
@@ -26,7 +28,7 @@
transition-duration: 200ms;
position: absolute;
}
button:not(.disabled):hover::before {
button:not(.disabled).halo:hover::before {
width: 130%;
height: 130%;
}

2
src/lib/components/utility/navbar.svelte
View File

@@ -27,7 +27,7 @@
<style>
nav {
padding: 20px 2rem;
padding: 18px 2rem;
font-size: 20px;
line-height: 28px;
}

40
src/lib/components/utility/slider.svelte
View File

@@ -1,15 +1,6 @@
<script>
import { onMount } from 'svelte'
import { createEventDispatcher } from 'svelte'
export let value = 0
export let initialValue = 0
onMount(() => (sliderValue = Number(initialValue)))
export const setValue = (value) => (sliderValue = value)
const dispatch = createEventDispatcher()
let sliderValue
let sliderTrail, sliderThumb
const trackThumb = (sliderPos) => {
@@ -17,17 +8,11 @@
if (sliderTrail) sliderTrail.style.right = `${100 - sliderPos}%`
}
$: trackThumb(sliderValue)
$: trackThumb(value)
const handleKeyPress = (key) => {
if ((key === 'ArrowRight' || key === 'ArrowUp') && sliderValue < 100) {
sliderValue += 1
return dispatch('valuechange', { value: sliderValue })
}
if ((key === 'ArrowLeft' || key === 'ArrowDown') && sliderValue > 0) {
sliderValue -= 1
return dispatch('valuechange', { value: sliderValue })
}
if ((key === 'ArrowRight' || key === 'ArrowUp') && value < 100) return (value += 1)
if ((key === 'ArrowLeft' || key === 'ArrowDown') && value > 0) return (value -= 1)
}
</script>
@@ -36,25 +21,14 @@
class="relative isolate h-1 w-full rounded-full bg-neutral-600"
role="slider"
tabindex="0"
aria-valuenow={sliderValue}
aria-valuenow={value}
aria-valuemin="0"
aria-valuemax="100"
on:keydown={(event) => handleKeyPress(event.key)}
>
<input
type="range"
class="absolute z-10 h-1 w-full"
step="any"
min="0"
max="100"
bind:value={sliderValue}
tabindex="-1"
aria-hidden="true"
aria-disabled="true"
on:mouseup={() => dispatch('valuechange', { value: sliderValue })}
/>
<input type="range" class="absolute z-10 h-1 w-full" step="any" min="0" max="100" bind:value tabindex="-1" aria-hidden="true" aria-disabled="true" />
<span bind:this={sliderTrail} id="slider-trail" class="absolute left-0 h-1 rounded-full bg-white transition-colors" />
<span bind:this={sliderThumb} id="slider-thumb" class="absolute top-1/2 aspect-square h-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 transition-opacity duration-300" />
<span bind:this={sliderThumb} id="slider-thumb" class="absolute top-1/2 aspect-square h-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 transition-opacity duration-300" />
</div>
<style>

37
src/lib/components/utility/volumeSlider.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script>
import Slider from '$lib/components/utility/slider.svelte'
import { getVolume, setVolume } from '$lib/utils/utils.js'
import { onMount } from 'svelte'
export let volume = 0
let muted = false
let storedVolume
onMount(() => (storedVolume = getVolume()))
$: changeVolume(storedVolume)
const changeVolume = (newVolume) => {
if (typeof newVolume === 'number' && !isNaN(newVolume)) setVolume(newVolume)
}
$: volume = muted ? 0 : storedVolume
</script>
<div id="volume-slider" class="flex h-full 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)}>
<i class="fa-solid {volume > 50 ? 'fa-volume-high' : volume > 0 ? 'fa-volume-low' : 'fa-volume-xmark'} w-full text-left text-base" />
</button>
<div id="slider-wrapper" class="w-0 transition-all duration-300">
<Slider bind:value={storedVolume} />
</div>
</div>
<style>
#volume-slider:hover > #slider-wrapper {
width: 8rem;
}
#slider-wrapper:focus-within {
width: 8rem;
}
</style>

2
src/lib/utils/utils.js
View File

@@ -2,7 +2,7 @@ import Joi from 'joi'
export const getVolume = () => {
const currentVolume = localStorage.getItem('volume')
if (currentVolume) return currentVolume
if (currentVolume) return Number(currentVolume)
const defaultVolume = 100
localStorage.setItem('volume', defaultVolume)