Compare commits

...

2 Commits

Author SHA1 Message Date
root
f79538f6b2 fix: use untrack() in float clamp effect to prevent reactive loop that locked up the page
All checks were successful
Release / Test backend (push) Successful in 50s
Release / Check ui (push) Successful in 1m46s
Release / Docker (push) Successful in 6m18s
Release / Gitea Release (push) Successful in 21s
2026-04-12 07:49:08 +05:00
root
a3a218fef1 fix: float circle releases pointer capture on pointerup/cancel so page stays responsive
All checks were successful
Release / Test backend (push) Successful in 49s
Release / Check ui (push) Successful in 1m53s
Release / Docker (push) Successful in 6m28s
Release / Gitea Release (push) Successful in 21s
2026-04-11 23:56:14 +05:00

View File

@@ -50,6 +50,7 @@
import { audioStore } from '$lib/audio.svelte';
import { goto } from '$app/navigation';
import { untrack } from 'svelte';
import { Button } from '$lib/components/ui/button';
import { cn } from '$lib/utils';
import type { Voice } from '$lib/types';
@@ -981,7 +982,7 @@
let floatMoved = $state(false);
function onFloatPointerDown(e: PointerEvent) {
e.preventDefault();
e.stopPropagation();
floatDragging = true;
floatMoved = false;
floatDragStart = { mx: e.clientX, my: e.clientY, ox: audioStore.floatPos.x, oy: audioStore.floatPos.y };
@@ -1000,19 +1001,24 @@
};
audioStore.floatPos = clampFloatPos(raw.x, raw.y);
}
function onFloatPointerUp() {
function onFloatPointerUp(e: PointerEvent) {
if (!floatDragging) return;
if (floatDragging && !floatMoved) {
// Tap: toggle play/pause
audioStore.toggleRequest++;
}
floatDragging = false;
try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* ignore */ }
}
// Clamp saved position to viewport on mount and on resize
// Clamp saved position to viewport on mount and on resize.
// Use untrack() when reading floatPos to avoid a reactive loop
// (reading + writing the same state inside $effect would re-trigger forever).
$effect(() => {
if (typeof window === 'undefined') return;
const clamp = () => {
audioStore.floatPos = clampFloatPos(audioStore.floatPos.x, audioStore.floatPos.y);
const { x, y } = untrack(() => audioStore.floatPos);
audioStore.floatPos = clampFloatPos(x, y);
};
clamp();
window.addEventListener('resize', clamp);
@@ -1525,7 +1531,7 @@
onpointerdown={onFloatPointerDown}
onpointermove={onFloatPointerMove}
onpointerup={onFloatPointerUp}
onpointercancel={onFloatPointerUp}
onpointercancel={(e) => { floatDragging = false; try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* ignore */ } }}
>
<!-- Pulsing ring when playing -->
{#if audioStore.isPlaying}