user attention detection

index.ts

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)
    };
};