Skip to content

Instantly share code, notes, and snippets.

@otakustay
Created October 24, 2019 11:42
Show Gist options
  • Save otakustay/fc770553bdd60dcf01243e479a3bc02c to your computer and use it in GitHub Desktop.
Save otakustay/fc770553bdd60dcf01243e479a3bc02c to your computer and use it in GitHub Desktop.
user attention detection
interface Options {
readonly maxIdleTime?: number;
}
type AttentionState = 'active' | 'inactive' | 'unknown';
interface AttentionChangeEvent {
readonly state: AttentionState;
readonly active: boolean;
readonly lastAction: number;
}
interface Mutable<T> {
current: T;
}
export const listen = (callback: (event: AttentionChangeEvent) => void, options: Options): (() => void) => {
const {maxIdleTime = 1000 * 30} = options;
const timer: Mutable<number> = {current: -1};
const event: Mutable<AttentionChangeEvent> = {
current: {
state: 'active',
active: true,
lastAction: Date.now(),
}
};
const updateState = (newState: AttentionState) => {
event.current = {
state: newState,
active: newState === 'active',
lastAction: newState === 'active' ? Date.now() : event.current.lastAction,
};
if (newState === event.current.state) {
return;
}
if (newState === 'active') {
timer.current = setTimeout(() => updateState('unknown'), maxIdleTime);
}
else {
clearTimeout(timer.current);
}
callback(event.current);
}
const toActive = () => updateState('active');
const toInactive = () => updateState('inactive');
const handleVisibilityChange = () => {
if (document.visibilityState === 'visible') {
toActive();
}
else {
toInactive();
}
};
document.documentElement.addEventListener('mousemove', toActive);
document.documentElement.addEventListener('keydown', toActive);
document.documentElement.addEventListener('mousedown', toActive);
document.documentElement.addEventListener('resize', toActive);
document.documentElement.addEventListener('touchstart', toActive);
window.addEventListener('focus', toActive);
window.addEventListener('blur', toInactive);
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => {
document.documentElement.removeEventListener('mousemove', toActive);
document.documentElement.removeEventListener('keydown', toActive);
document.documentElement.removeEventListener('mousedown', toActive);
document.documentElement.removeEventListener('resize', toActive);
document.documentElement.removeEventListener('touchstart', toActive);
window.removeEventListener('focus', toActive);
window.removeEventListener('blur', toInactive);
document.removeEventListener('visibilitychange', handleVisibilityChange);
clearTimeout(timer.current)
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment