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
src/lib/components/utility/volumeSlider.svelte
+8 -7
View File
@@ -1,5 +1,6 @@
<script>
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 { onMount } from 'svelte'
@@ -18,20 +19,20 @@
$: 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">
<div id="volume-slider" class="flex h-10 w-fit flex-shrink-0 flex-row-reverse items-center gap-2">
<IconButton halo={false} on:click={() => (muted = !muted)}>
<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" />
</IconButton>
<div id="slider-wrapper" class="w-0 transition-all duration-500">
<Slider bind:value={storedVolume} />
</div>
</div>
<style>
#volume-slider:hover > #slider-wrapper {
width: 8rem;
width: 6rem;
}
#slider-wrapper:focus-within {
width: 8rem;
width: 6rem;
}
</style>