SoulStream/src/mini/bits/VolumeFly.svelte

<script>
    // Speaker button + the vertical flyout (the taskbar-volume gesture Kyle
    // picked on the mockup). The icon follows the playbar's own state rule —
    // mute/zero → volume-mute, under half → volume-low, else volume — and the
    // track is the playbar's knobless geometry stood upright, plus the knob
    // the flyout needs for grabbing.
    import Icon from "../../components/Icon.svelte";
    import { mini, setVolume } from "../mini.svelte.js";

    let open = $state(false);
    let btn = $state(null);
    let below = $state(false);

    const volIcon = $derived(
        mini.muted || mini.volume === 0 ? "volume-mute" : mini.volume < 0.5 ? "volume-low" : "volume",
    );

    function toggle() {
        if (!open && btn) below = btn.getBoundingClientRect().top < 138;
        open = !open;
    }
    function outside(e) {
        if (open && !e.target.closest(".volwrap")) open = false;
    }
    function key(e) {
        if (e.key === "Escape") open = false;
    }

    let track = $state(null);
    function setAt(e) {
        const r = track.getBoundingClientRect();
        setVolume(1 - (e.clientY - r.top) / r.height);
    }
    function onDown(e) {
        e.stopPropagation();
        setAt(e);
        const mv = (ev) => setAt(ev);
        const up = () => {
            window.removeEventListener("pointermove", mv);
            window.removeEventListener("pointerup", up);
        };
        window.addEventListener("pointermove", mv);
        window.addEventListener("pointerup", up);
    }
    function wheel(e) {
        e.preventDefault();
        setVolume(mini.volume - Math.sign(e.deltaY) * 0.05);
    }
</script>

<svelte:window onpointerdown={outside} onkeydown={key} />

<span class="volwrap">
    <button class="spk" class:on={open} bind:this={btn} title="Volume" onclick={toggle} onwheel={wheel}>
        <Icon name={volIcon} size={18} />
    </button>
    {#if open}
        <div class="fly" class:below onwheel={wheel}>
            <div
                class="vtrack"
                bind:this={track}
                onpointerdown={onDown}
                role="slider"
                aria-label="Volume"
                aria-valuenow={Math.round(mini.volume * 100)}
                tabindex="0"
            >
                <div class="vfill" style="height: {(mini.volume * 100).toFixed(1)}%"></div>
                <div class="vknob" style="bottom: {(mini.volume * 100).toFixed(1)}%"></div>
            </div>
        </div>
    {/if}
</span>

<style>
    .volwrap {
        position: relative;
        display: inline-flex;
        flex: none;
    }
    .spk {
        color: var(--text-secondary);
        display: grid;
        place-items: center;
        padding: 0;
    }
    .spk:hover,
    .spk.on {
        color: #fff;
    }
    .fly {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        width: 34px;
        height: 126px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 40;
        background: rgba(20, 20, 24, 0.55);
        backdrop-filter: blur(14px) saturate(1.6);
        -webkit-backdrop-filter: blur(14px) saturate(1.6);
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
        animation: flyup 130ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .fly.below {
        bottom: auto;
        top: calc(100% + 8px);
    }
    @keyframes flyup {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(6px) scale(0.96);
        }
    }
    .vtrack {
        position: relative;
        width: 4px;
        height: 98px;
        border-radius: 2px;
        background: hsla(0, 0%, 100%, 0.2);
        cursor: pointer;
        touch-action: none;
        transition: width 100ms;
    }
    .vtrack:hover {
        width: 6px;
    }
    .vfill {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--accent);
        border-radius: 2px;
    }
    .vtrack:hover .vfill {
        background: var(--accent-hover);
    }
    .vknob {
        position: absolute;
        left: 50%;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #fff;
        transform: translate(-50%, 50%);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
        pointer-events: none;
    }
</style>