90 lines
1.8 KiB
Svelte
90 lines
1.8 KiB
Svelte
<script lang="ts">
|
||
const SPEED_OPTIONS = [0.5, 0.75, 1, 1.25, 1.5, 2] as const;
|
||
|
||
let {
|
||
currentRate,
|
||
onSelect,
|
||
onClose,
|
||
}: {
|
||
currentRate: number;
|
||
onSelect: (rate: number) => void;
|
||
onClose: () => void;
|
||
} = $props();
|
||
|
||
function handleSelect(rate: number) {
|
||
onSelect(rate);
|
||
onClose();
|
||
}
|
||
|
||
function handleWindowClick(e: MouseEvent) {
|
||
const target = e.target as HTMLElement;
|
||
if (!target.closest('.speed-selector')) {
|
||
onClose();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<svelte:window onclick={handleWindowClick} />
|
||
|
||
<div class="speed-selector" role="menu">
|
||
{#each SPEED_OPTIONS as rate (rate)}
|
||
<button
|
||
class="speed-option"
|
||
class:active={Math.abs(currentRate - rate) < 0.01}
|
||
role="menuitem"
|
||
onclick={() => handleSelect(rate)}
|
||
>
|
||
<span class="check">{Math.abs(currentRate - rate) < 0.01 ? '✓' : ''}</span>
|
||
{rate}×
|
||
</button>
|
||
{/each}
|
||
</div>
|
||
|
||
<style>
|
||
.speed-selector {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
right: 0;
|
||
margin-bottom: 8px;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: 8px;
|
||
padding: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 80px;
|
||
z-index: 50;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.speed-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--text-primary, #cdd6f4);
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.speed-option:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: var(--accent, #89b4fa);
|
||
}
|
||
|
||
.speed-option.active {
|
||
color: var(--accent, #89b4fa);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.check {
|
||
width: 14px;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
}
|
||
</style>
|