a1078e0cc7
- Add four synthesized alarm sounds (Digital Beep, Gentle Chime, Urgent Alarm, Bell) using Web Audio API oscillators - Add sound enable/mute toggle button and sound selector dropdown - Add preview button to test selected alarm before countdown - Play selected alarm sound when countdown expires (if enabled) - Default widget mode to 'timer' instead of 'stopwatch' - Extract shared inputClass constant for timer input styling - Hide native number input spinners via Tailwind utility classes Co-authored-by: Cursor <cursoragent@cursor.com>
483 lines
18 KiB
JavaScript
483 lines
18 KiB
JavaScript
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
function useMediaQuery(query) {
|
|
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
|
|
useEffect(() => {
|
|
const mql = window.matchMedia(query);
|
|
const handler = (e) => setMatches(e.matches);
|
|
mql.addEventListener('change', handler);
|
|
return () => mql.removeEventListener('change', handler);
|
|
}, [query]);
|
|
return matches;
|
|
}
|
|
|
|
function formatTime(ms, showCentiseconds = true) {
|
|
const minutes = Math.floor(ms / 60000);
|
|
const seconds = Math.floor((ms % 60000) / 1000);
|
|
if (!showCentiseconds) {
|
|
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
}
|
|
const cs = Math.floor((ms % 1000) / 10);
|
|
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(cs).padStart(2, '0')}`;
|
|
}
|
|
|
|
const COUNTDOWN_PRESETS = [
|
|
{ label: '1:00', ms: 60000 },
|
|
{ label: '2:00', ms: 120000 },
|
|
{ label: '3:00', ms: 180000 },
|
|
{ label: '5:00', ms: 300000 },
|
|
];
|
|
|
|
const ALARM_SOUNDS = [
|
|
{
|
|
id: 'digital',
|
|
label: 'Digital Beep',
|
|
play: () => {
|
|
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
|
const beep = (startTime) => {
|
|
const osc = ctx.createOscillator();
|
|
const gain = ctx.createGain();
|
|
osc.connect(gain);
|
|
gain.connect(ctx.destination);
|
|
osc.frequency.value = 830;
|
|
osc.type = 'square';
|
|
gain.gain.value = 0.3;
|
|
osc.start(startTime);
|
|
osc.stop(startTime + 0.15);
|
|
};
|
|
beep(ctx.currentTime);
|
|
beep(ctx.currentTime + 0.25);
|
|
beep(ctx.currentTime + 0.5);
|
|
},
|
|
},
|
|
{
|
|
id: 'chime',
|
|
label: 'Gentle Chime',
|
|
play: () => {
|
|
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
|
[523, 659, 784].forEach((freq, i) => {
|
|
const osc = ctx.createOscillator();
|
|
const gain = ctx.createGain();
|
|
osc.connect(gain);
|
|
gain.connect(ctx.destination);
|
|
osc.frequency.value = freq;
|
|
osc.type = 'sine';
|
|
gain.gain.setValueAtTime(0.25, ctx.currentTime + i * 0.3);
|
|
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i * 0.3 + 0.4);
|
|
osc.start(ctx.currentTime + i * 0.3);
|
|
osc.stop(ctx.currentTime + i * 0.3 + 0.4);
|
|
});
|
|
},
|
|
},
|
|
{
|
|
id: 'urgent',
|
|
label: 'Urgent Alarm',
|
|
play: () => {
|
|
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
|
for (let i = 0; i < 5; i++) {
|
|
const osc = ctx.createOscillator();
|
|
const gain = ctx.createGain();
|
|
osc.connect(gain);
|
|
gain.connect(ctx.destination);
|
|
osc.frequency.value = 1000;
|
|
osc.type = 'sawtooth';
|
|
gain.gain.value = 0.2;
|
|
osc.start(ctx.currentTime + i * 0.12);
|
|
osc.stop(ctx.currentTime + i * 0.12 + 0.08);
|
|
}
|
|
},
|
|
},
|
|
{
|
|
id: 'bell',
|
|
label: 'Bell',
|
|
play: () => {
|
|
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
|
const osc = ctx.createOscillator();
|
|
const gain = ctx.createGain();
|
|
osc.connect(gain);
|
|
gain.connect(ctx.destination);
|
|
osc.frequency.value = 660;
|
|
osc.type = 'sine';
|
|
gain.gain.setValueAtTime(0.4, ctx.currentTime);
|
|
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.5);
|
|
osc.start(ctx.currentTime);
|
|
osc.stop(ctx.currentTime + 1.5);
|
|
},
|
|
},
|
|
];
|
|
|
|
const inputClass = 'w-10 bg-gray-800 border border-gray-600 rounded px-1 py-0.5 text-center text-white text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
|
|
|
|
export default function StopwatchWidget({ visible, onHide }) {
|
|
const isDesktop = useMediaQuery('(min-width: 640px)');
|
|
|
|
const [mode, setMode] = useState('timer');
|
|
|
|
// Stopwatch state
|
|
const [swRunning, setSwRunning] = useState(false);
|
|
const [swElapsed, setSwElapsed] = useState(0);
|
|
const [laps, setLaps] = useState([]);
|
|
const swIntervalRef = useRef(null);
|
|
const swStartRef = useRef(0);
|
|
|
|
// Countdown state
|
|
const [cdTarget, setCdTarget] = useState(60000);
|
|
const [cdRemaining, setCdRemaining] = useState(60000);
|
|
const [cdRunning, setCdRunning] = useState(false);
|
|
const [cdExpired, setCdExpired] = useState(false);
|
|
const [cdInputMin, setCdInputMin] = useState('1');
|
|
const [cdInputSec, setCdInputSec] = useState('00');
|
|
const cdIntervalRef = useRef(null);
|
|
const cdStartRef = useRef(0);
|
|
const cdRemainingAtStartRef = useRef(0);
|
|
|
|
// Sound state
|
|
const [soundEnabled, setSoundEnabled] = useState(true);
|
|
const [selectedSound, setSelectedSound] = useState('digital');
|
|
|
|
// Drag state (desktop only)
|
|
const [position, setPosition] = useState({ x: window.innerWidth - 300, y: 80 });
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const dragOffset = useRef({ x: 0, y: 0 });
|
|
const cardRef = useRef(null);
|
|
|
|
// Stopwatch logic
|
|
useEffect(() => {
|
|
if (swRunning) {
|
|
swStartRef.current = Date.now() - swElapsed;
|
|
swIntervalRef.current = setInterval(() => {
|
|
setSwElapsed(Date.now() - swStartRef.current);
|
|
}, 10);
|
|
} else {
|
|
clearInterval(swIntervalRef.current);
|
|
}
|
|
return () => clearInterval(swIntervalRef.current);
|
|
}, [swRunning]);
|
|
|
|
const handleSwStartStop = () => setSwRunning(r => !r);
|
|
const handleSwReset = () => {
|
|
setSwRunning(false);
|
|
setSwElapsed(0);
|
|
setLaps([]);
|
|
};
|
|
const handleSwLap = () => {
|
|
setLaps(prev => [...prev, swElapsed]);
|
|
};
|
|
|
|
// Countdown logic
|
|
useEffect(() => {
|
|
if (cdRunning) {
|
|
cdStartRef.current = Date.now();
|
|
cdRemainingAtStartRef.current = cdRemaining;
|
|
cdIntervalRef.current = setInterval(() => {
|
|
const elapsed = Date.now() - cdStartRef.current;
|
|
const remaining = cdRemainingAtStartRef.current - elapsed;
|
|
if (remaining <= 0) {
|
|
setCdRemaining(0);
|
|
setCdRunning(false);
|
|
setCdExpired(true);
|
|
clearInterval(cdIntervalRef.current);
|
|
} else {
|
|
setCdRemaining(remaining);
|
|
}
|
|
}, 10);
|
|
} else {
|
|
clearInterval(cdIntervalRef.current);
|
|
}
|
|
return () => clearInterval(cdIntervalRef.current);
|
|
}, [cdRunning]);
|
|
|
|
const handleCdStartPause = () => {
|
|
if (cdExpired) return;
|
|
setCdRunning(r => !r);
|
|
};
|
|
const handleCdReset = () => {
|
|
setCdRunning(false);
|
|
setCdRemaining(cdTarget);
|
|
setCdExpired(false);
|
|
};
|
|
const handleCdPreset = (ms) => {
|
|
setCdRunning(false);
|
|
setCdTarget(ms);
|
|
setCdRemaining(ms);
|
|
setCdExpired(false);
|
|
setCdInputMin(String(Math.floor(ms / 60000)));
|
|
setCdInputSec(String(Math.floor((ms % 60000) / 1000)).padStart(2, '0'));
|
|
};
|
|
const handleCdCustomSet = () => {
|
|
const min = parseInt(cdInputMin) || 0;
|
|
const sec = parseInt(cdInputSec) || 0;
|
|
const ms = (min * 60 + sec) * 1000;
|
|
if (ms > 0) {
|
|
setCdTarget(ms);
|
|
setCdRemaining(ms);
|
|
setCdRunning(false);
|
|
setCdExpired(false);
|
|
}
|
|
};
|
|
|
|
// Expired flash + sound
|
|
useEffect(() => {
|
|
if (cdExpired) {
|
|
if (soundEnabled) {
|
|
const sound = ALARM_SOUNDS.find(s => s.id === selectedSound);
|
|
if (sound) sound.play();
|
|
}
|
|
const timeout = setTimeout(() => setCdExpired(false), 3000);
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
}, [cdExpired, soundEnabled, selectedSound]);
|
|
|
|
const handlePreviewSound = () => {
|
|
const sound = ALARM_SOUNDS.find(s => s.id === selectedSound);
|
|
if (sound) sound.play();
|
|
};
|
|
|
|
// Drag handlers (desktop)
|
|
const handleDragStart = useCallback((e) => {
|
|
if (!isDesktop) return;
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
|
|
dragOffset.current = { x: clientX - position.x, y: clientY - position.y };
|
|
setIsDragging(true);
|
|
}, [isDesktop, position]);
|
|
|
|
useEffect(() => {
|
|
if (!isDragging) return;
|
|
const handleMove = (e) => {
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
|
|
setPosition({
|
|
x: Math.max(0, Math.min(window.innerWidth - 280, clientX - dragOffset.current.x)),
|
|
y: Math.max(0, Math.min(window.innerHeight - 100, clientY - dragOffset.current.y)),
|
|
});
|
|
};
|
|
const handleUp = () => setIsDragging(false);
|
|
|
|
document.addEventListener('mousemove', handleMove);
|
|
document.addEventListener('mouseup', handleUp);
|
|
document.addEventListener('touchmove', handleMove);
|
|
document.addEventListener('touchend', handleUp);
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMove);
|
|
document.removeEventListener('mouseup', handleUp);
|
|
document.removeEventListener('touchmove', handleMove);
|
|
document.removeEventListener('touchend', handleUp);
|
|
};
|
|
}, [isDragging]);
|
|
|
|
if (!visible) return null;
|
|
|
|
const cardClasses = isDesktop
|
|
? 'fixed z-50 w-[280px] rounded-xl shadow-2xl'
|
|
: 'fixed z-50 bottom-0 left-0 right-0 rounded-t-xl shadow-2xl';
|
|
|
|
const cardStyle = isDesktop ? { left: position.x, top: position.y } : {};
|
|
|
|
const borderColor = cdExpired
|
|
? 'border-red-500 animate-pulse'
|
|
: 'border-gray-700 dark:border-gray-600';
|
|
|
|
const content = (
|
|
<div
|
|
ref={cardRef}
|
|
className={`${cardClasses} bg-gray-900 dark:bg-gray-950 border-2 ${borderColor} text-white select-none`}
|
|
style={cardStyle}
|
|
>
|
|
{/* Drag handle / header */}
|
|
<div
|
|
className={`flex items-center justify-between px-3 py-2 ${isDesktop ? 'cursor-grab active:cursor-grabbing' : ''}`}
|
|
onMouseDown={handleDragStart}
|
|
onTouchStart={handleDragStart}
|
|
>
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={() => setMode('stopwatch')}
|
|
className={`px-2 py-1 text-xs rounded transition ${mode === 'stopwatch' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
|
|
>
|
|
Stopwatch
|
|
</button>
|
|
<button
|
|
onClick={() => setMode('timer')}
|
|
className={`px-2 py-1 text-xs rounded transition ${mode === 'timer' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
|
|
>
|
|
Timer
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={onHide}
|
|
className="w-7 h-7 sm:w-6 sm:h-6 flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700 rounded transition"
|
|
title="Hide"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{/* Display */}
|
|
<div className="px-3 pb-3">
|
|
<div className="bg-black/40 rounded-lg px-4 py-3 sm:py-2 text-center mb-3">
|
|
<span
|
|
className={`font-mono tracking-wider ${isDesktop ? 'text-2xl' : 'text-3xl'} ${mode === 'timer' && cdRemaining < 10000 && cdRunning ? 'text-red-400' : 'text-green-400'}`}
|
|
style={{ fontFamily: "'Courier New', monospace" }}
|
|
>
|
|
{mode === 'stopwatch'
|
|
? formatTime(swElapsed)
|
|
: formatTime(cdRemaining, false)
|
|
}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
{mode === 'stopwatch' ? (
|
|
<div className="flex gap-2 mb-2">
|
|
<button
|
|
onClick={handleSwStartStop}
|
|
className={`flex-1 py-2 sm:py-1.5 rounded text-sm font-semibold transition ${swRunning ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'}`}
|
|
>
|
|
{swRunning ? 'Stop' : 'Start'}
|
|
</button>
|
|
{swRunning && (
|
|
<button
|
|
onClick={handleSwLap}
|
|
className="flex-1 py-2 sm:py-1.5 rounded text-sm font-semibold bg-blue-600 hover:bg-blue-700 transition"
|
|
>
|
|
Lap
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={handleSwReset}
|
|
className="flex-1 py-2 sm:py-1.5 rounded text-sm font-semibold bg-gray-600 hover:bg-gray-700 transition"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex gap-2 mb-2">
|
|
<button
|
|
onClick={handleCdStartPause}
|
|
disabled={cdExpired || cdRemaining <= 0}
|
|
className={`flex-1 py-2 sm:py-1.5 rounded text-sm font-semibold transition disabled:opacity-50 ${cdRunning ? 'bg-yellow-600 hover:bg-yellow-700' : 'bg-green-600 hover:bg-green-700'}`}
|
|
>
|
|
{cdRunning ? 'Pause' : 'Start'}
|
|
</button>
|
|
<button
|
|
onClick={handleCdReset}
|
|
className="flex-1 py-2 sm:py-1.5 rounded text-sm font-semibold bg-gray-600 hover:bg-gray-700 transition"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
{!cdRunning && (
|
|
<>
|
|
<div className="flex gap-1 mb-2">
|
|
{COUNTDOWN_PRESETS.map(p => (
|
|
<button
|
|
key={p.ms}
|
|
onClick={() => handleCdPreset(p.ms)}
|
|
className={`flex-1 py-1 rounded text-xs font-medium transition ${cdTarget === p.ms ? 'bg-indigo-600' : 'bg-gray-700 hover:bg-gray-600'}`}
|
|
>
|
|
{p.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="99"
|
|
value={cdInputMin}
|
|
onChange={(e) => setCdInputMin(e.target.value)}
|
|
className={inputClass}
|
|
/>
|
|
<span className="text-gray-400">m</span>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="59"
|
|
value={cdInputSec}
|
|
onChange={(e) => setCdInputSec(e.target.value)}
|
|
className={inputClass}
|
|
/>
|
|
<span className="text-gray-400">s</span>
|
|
<button
|
|
onClick={handleCdCustomSet}
|
|
className="ml-1 px-2 py-0.5 bg-indigo-600 hover:bg-indigo-700 rounded text-xs font-medium transition"
|
|
>
|
|
Set
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Sound controls */}
|
|
<div className="flex items-center gap-2 mt-3 pt-2 border-t border-gray-700/50">
|
|
<button
|
|
onClick={() => setSoundEnabled(s => !s)}
|
|
className={`p-1 rounded transition ${soundEnabled ? 'text-indigo-400 hover:text-indigo-300' : 'text-gray-500 hover:text-gray-400'}`}
|
|
title={soundEnabled ? 'Mute alarm' : 'Enable alarm sound'}
|
|
>
|
|
{soundEnabled ? (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M6.5 8H4a1 1 0 00-1 1v6a1 1 0 001 1h2.5l4.5 4V4l-4.5 4z" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707A1 1 0 0112 5v14a1 1 0 01-1.707.707L5.586 15z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<div className="relative flex-1">
|
|
<select
|
|
value={selectedSound}
|
|
onChange={(e) => setSelectedSound(e.target.value)}
|
|
disabled={!soundEnabled}
|
|
className="w-full appearance-none bg-gray-800 border border-gray-600 rounded px-2 py-1 pr-6 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed transition"
|
|
>
|
|
{ALARM_SOUNDS.map(s => (
|
|
<option key={s.id} value={s.id}>{s.label}</option>
|
|
))}
|
|
</select>
|
|
<svg className="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
<button
|
|
onClick={handlePreviewSound}
|
|
disabled={!soundEnabled}
|
|
className="p-1 rounded text-gray-400 hover:text-white transition disabled:opacity-40 disabled:cursor-not-allowed"
|
|
title="Preview sound"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Lap list (stopwatch mode) */}
|
|
{mode === 'stopwatch' && laps.length > 0 && (
|
|
<div className={`mt-2 border-t border-gray-700 pt-2 overflow-y-auto ${isDesktop ? 'max-h-32' : 'max-h-24'}`}>
|
|
{laps.map((lapTime, i) => {
|
|
const prev = i === 0 ? 0 : laps[i - 1];
|
|
const delta = lapTime - prev;
|
|
return (
|
|
<div key={i} className="flex justify-between text-xs text-gray-300 py-0.5">
|
|
<span className="text-gray-500">#{i + 1}</span>
|
|
<span className="font-mono">{formatTime(delta)}</span>
|
|
<span className="font-mono text-gray-500">{formatTime(lapTime)}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return createPortal(content, document.body);
|
|
}
|