Big layout improvements, started on miniplayer

2024-01-16 02:45:27 -05:00
parent fd08867628
commit a6c65ce0cf
33 changed files with 351 additions and 176 deletions
@@ -0,0 +1,78 @@
+<script>
+    import { onMount } from 'svelte'
+    import { createEventDispatcher } from 'svelte'
+
+    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) => {
+        if (sliderThumb) sliderThumb.style.left = `${sliderPos}%`
+        if (sliderTrail) sliderTrail.style.right = `${100 - sliderPos}%`
+    }
+
+    $: trackThumb(sliderValue)
+
+    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 })
+        }
+    }
+</script>
+
+<div
+    id="slider-track"
+    class="relative isolate h-1 w-full rounded-full bg-neutral-600"
+    role="slider"
+    tabindex="0"
+    aria-valuenow={sliderValue}
+    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 })}
+    />
+    <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" />
+</div>
+
+<style>
+    input[type='range'] {
+        appearance: none;
+        cursor: pointer;
+        opacity: 0;
+    }
+    #slider-track:hover > #slider-trail {
+        background-color: var(--lazuli-primary);
+    }
+    #slider-track:focus > #slider-trail {
+        background-color: var(--lazuli-primary);
+    }
+    #slider-track:hover > #slider-thumb {
+        opacity: 1;
+    }
+    #slider-track:focus > #slider-thumb {
+        opacity: 1;
+    }
+</style>