This reverts commit 26ddbaa1c9.
alpha-0.1-dir-prefs
parent
26ddbaa1c9
commit
c798f7465a
@ -1,48 +0,0 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* `<MediaPlayer.VolumeFloat>` — the volume as a floating panel instead of an
|
||||
* always-visible rail. Optional: composing `<MuteButton>` + `<VolumeSlider>`
|
||||
* side by side is still the inline shape, and this is the other one.
|
||||
*
|
||||
* Why a float and not an in-row reveal: a slider that expands inside the
|
||||
* control row PUSHES everything after it — time, scrubber, captions, PiP,
|
||||
* fullscreen all shift on hover, and a tight row overflows. The panel is
|
||||
* positioned out of flow, so opening it moves nothing.
|
||||
*
|
||||
* The speaker stays the real `<MuteButton>`: it keeps `aria-pressed`, the `m`
|
||||
* hotkey and the loudness glyph. Hover opens the panel, click mutes — and
|
||||
* closes it, which is the right end to that gesture. On touch there is no
|
||||
* hover, so the tap does both: it is also the only way a touch user reaches
|
||||
* the slider at all.
|
||||
*
|
||||
* Composed from the catalogue's own `Popover` (its `openOnHover` already
|
||||
* exists); nothing about floating is reinvented here.
|
||||
*/
|
||||
import { Popover } from '$uix/eidos/components/popover';
|
||||
import MuteButton from './media-player-mute-button.svelte';
|
||||
import VolumeSlider from './media-player-volume-slider.svelte';
|
||||
import type { MediaPlayerVolumeFloatProps } from './types';
|
||||
|
||||
let {
|
||||
openDelay = 120,
|
||||
closeDelay = 400,
|
||||
side = 'top',
|
||||
...rest
|
||||
}: MediaPlayerVolumeFloatProps = $props();
|
||||
</script>
|
||||
|
||||
<Popover {...rest}>
|
||||
<Popover.Trigger openOnHover {openDelay} {closeDelay}>
|
||||
{#snippet child({ props })}
|
||||
<MuteButton {...props} />
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<!-- The panel hugs the control. Popover's own sizes are made for prose and
|
||||
forms; a vertical rail needs its hit area and nothing more, so the
|
||||
width is overridden on the space scale rather than inherited. -->
|
||||
<Popover.Content {side} size="sm" width="calc(var(--space-8) * 1.5)">
|
||||
<VolumeSlider orientation="vertical" />
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover>
|
||||
Loading…
Reference in new issue