This commit is contained in:
HugeFrog24
2026-04-26 17:59:01 +02:00
parent 02bb07e780
commit d5e7f8398e
2 changed files with 49 additions and 30 deletions
+19 -19
View File
@@ -34,9 +34,9 @@ export default function Home() {
const bumpAudio = useShakeAudio(); const bumpAudio = useShakeAudio();
const requestMotionPermission = async () => { const requestMotionPermission = async () => {
if (typeof window === 'undefined') return; if (globalThis.window === undefined) return;
if (!('DeviceMotionEvent' in window)) { if (!('DeviceMotionEvent' in globalThis)) {
setMotionPermission('denied'); setMotionPermission('denied');
return; return;
} }
@@ -57,7 +57,15 @@ export default function Home() {
const triggerShake = useCallback((intensity: number) => { const triggerShake = useCallback((intensity: number) => {
bumpAudio(); bumpAudio();
if (!isAnimatingRef.current) { if (isAnimatingRef.current) {
const timeSinceStart = Date.now() - animationStartTimeRef.current;
if (timeSinceStart > 100) {
setShakeQueue(prev => {
if (prev.length >= 1) return prev;
return [...prev, intensity];
});
}
} else {
if (animationTimeoutRef.current) { if (animationTimeoutRef.current) {
clearTimeout(animationTimeoutRef.current); clearTimeout(animationTimeoutRef.current);
} }
@@ -86,14 +94,6 @@ export default function Home() {
return prev; return prev;
}); });
}, shakeConfig.animations.shakeReset); }, shakeConfig.animations.shakeReset);
} else {
const timeSinceStart = Date.now() - animationStartTimeRef.current;
if (timeSinceStart > 100) {
setShakeQueue(prev => {
if (prev.length >= 1) return prev;
return [...prev, intensity];
});
}
} }
}, [bumpAudio]); }, [bumpAudio]);
@@ -108,7 +108,7 @@ export default function Home() {
const acceleration = event.accelerationIncludingGravity; const acceleration = event.accelerationIncludingGravity;
if (!acceleration) return; if (!acceleration) return;
const currentTime = new Date().getTime(); const currentTime = Date.now();
const timeDiff = currentTime - lastUpdate; const timeDiff = currentTime - lastUpdate;
if (timeDiff > shakeConfig.debounceTime) { if (timeDiff > shakeConfig.debounceTime) {
@@ -124,19 +124,19 @@ export default function Home() {
} }
}; };
if (typeof window !== 'undefined') { if (globalThis.window !== undefined) {
if (motionPermission === 'granted' && 'DeviceMotionEvent' in window) { if (motionPermission === 'granted' && 'DeviceMotionEvent' in globalThis) {
window.addEventListener('devicemotion', handleMotion); globalThis.addEventListener('devicemotion', handleMotion);
} }
window.addEventListener('keydown', handleKeyPress); globalThis.addEventListener('keydown', handleKeyPress);
} }
return () => { return () => {
if (typeof window !== 'undefined') { if (globalThis.window !== undefined) {
if (motionPermission === 'granted') { if (motionPermission === 'granted') {
window.removeEventListener('devicemotion', handleMotion); globalThis.removeEventListener('devicemotion', handleMotion);
} }
window.removeEventListener('keydown', handleKeyPress); globalThis.removeEventListener('keydown', handleKeyPress);
} }
}; };
}, [lastUpdate, motionPermission, triggerShake]); }, [lastUpdate, motionPermission, triggerShake]);
+30 -11
View File
@@ -5,7 +5,7 @@ import { useRef, useEffect, useCallback } from 'react';
const AUDIO_URL = '/audio/starley_call_on_me.ogg'; const AUDIO_URL = '/audio/starley_call_on_me.ogg';
const FADE_IN_SEC = 0.1; const FADE_IN_SEC = 0.1;
const FADE_OUT_SEC = 0.8; const FADE_OUT_SEC = 0.8;
const QUIET_TIMEOUT_MS = 300; const QUIET_TIMEOUT_MS = 1000;
const PLAY_GAIN = 0.7; const PLAY_GAIN = 0.7;
// exponentialRampToValueAtTime can't reach 0; use a tiny positive target // exponentialRampToValueAtTime can't reach 0; use a tiny positive target
const NEAR_ZERO = 0.0001; const NEAR_ZERO = 0.0001;
@@ -16,6 +16,7 @@ export function useShakeAudio() {
const sourceRef = useRef<AudioBufferSourceNode | null>(null); const sourceRef = useRef<AudioBufferSourceNode | null>(null);
const gainRef = useRef<GainNode | null>(null); const gainRef = useRef<GainNode | null>(null);
const quietTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const quietTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const stopTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const fadeOutAndStop = useCallback(() => { const fadeOutAndStop = useCallback(() => {
const ctx = ctxRef.current; const ctx = ctxRef.current;
@@ -28,18 +29,22 @@ export function useShakeAudio() {
gain.gain.setValueAtTime(gain.gain.value, now); gain.gain.setValueAtTime(gain.gain.value, now);
gain.gain.linearRampToValueAtTime(NEAR_ZERO, now + FADE_OUT_SEC); gain.gain.linearRampToValueAtTime(NEAR_ZERO, now + FADE_OUT_SEC);
try { if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
source.stop(now + FADE_OUT_SEC + 0.05); // Defer source.stop() via setTimeout (not source.stop(time)) so a bump
} catch { // arriving mid-fade can cancel it and ramp back up without restarting.
// source may already be stopped stopTimeoutRef.current = setTimeout(() => {
} if (sourceRef.current === source) {
try { source.stop(); } catch { /* already stopped */ }
sourceRef.current = null; source.disconnect();
gainRef.current = null; sourceRef.current = null;
gainRef.current = null;
}
stopTimeoutRef.current = null;
}, FADE_OUT_SEC * 1000 + 50);
}, []); }, []);
const bump = useCallback(async () => { const bump = useCallback(async () => {
if (typeof window === 'undefined') return; if (globalThis.window === undefined) return;
if (!ctxRef.current) { if (!ctxRef.current) {
try { try {
@@ -74,7 +79,20 @@ export function useShakeAudio() {
if (quietTimerRef.current) clearTimeout(quietTimerRef.current); if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
quietTimerRef.current = setTimeout(fadeOutAndStop, QUIET_TIMEOUT_MS); quietTimerRef.current = setTimeout(fadeOutAndStop, QUIET_TIMEOUT_MS);
if (sourceRef.current) return; if (sourceRef.current && gainRef.current) {
// Already playing or mid-fade-out: cancel any scheduled stop and
// ramp gain back up to PLAY_GAIN. Loop position is preserved.
if (stopTimeoutRef.current) {
clearTimeout(stopTimeoutRef.current);
stopTimeoutRef.current = null;
}
const now = ctx.currentTime;
const gainParam = gainRef.current.gain;
gainParam.cancelScheduledValues(now);
gainParam.setValueAtTime(gainParam.value, now);
gainParam.linearRampToValueAtTime(PLAY_GAIN, now + FADE_IN_SEC);
return;
}
const source = ctx.createBufferSource(); const source = ctx.createBufferSource();
source.buffer = bufferRef.current; source.buffer = bufferRef.current;
@@ -95,6 +113,7 @@ export function useShakeAudio() {
useEffect(() => { useEffect(() => {
return () => { return () => {
if (quietTimerRef.current) clearTimeout(quietTimerRef.current); if (quietTimerRef.current) clearTimeout(quietTimerRef.current);
if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);
const source = sourceRef.current; const source = sourceRef.current;
if (source) { if (source) {
try { source.stop(); } catch { /* already stopped */ } try { source.stop(); } catch { /* already stopped */ }