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>
|