active-detector

active-detector

Detect whether browser user is still active.

Install

yarn add active-detector

Example

Demo here. Excute yarn && yarn start and watch the log in console.

Usage

Quick Start

import { AD, USER_STATE, ActiveRange } from 'active-detector'
const ad = new AD()
ad.getState() // 'active'
ad.ActiveRange() // [start: 1572160131022, end: 1572160127925 ]
ad.on('active', () => console.log('turn to active')) // excute when user turn to be active
ad.on('inactive', () => console.log('turn to inactive')) // excute when user turn to be inactive
ad.on('tick', (state) => console.log(`tick tick, user is ${state} now.`)) // tick users's state

Options

Configuration of active-detector.

const ad = new ActiveDetector({
  inactiveThresh: 10000, // optional, time of determined as the threshold of inactive, default is 30000ms
  throttleTimeout: 500, // optional, in terms of performance, all users activations that be listened is throttled, default is 900ms
})

Add Listener

The callbacks will be invoked when user from inactive to active, or from active to inactive.

active-detector use tiny-emitter as the callback controller.

on: (action: LISTENABLE_ACTION, cb: (ActiveRange[])=> any) => void
off: (action: LISTENABLE_ACTION, cb: (ActiveRange[])=> any) => void
once: (action: LISTENABLE_ACTION, cb: (ActiveRange[])=> any) => void

type LISTENABLE_ACTION =
| 'active' // invoked when user turn to be active from inactive
| 'inactive' // invoked when user turn to be inactive from active
| 'tick' // // tick users's state every ${inactiveThresh} inverval

Get Current State

Get current user state.

getState: () => USER_STATE;

Get Active Time Ranges

Get current active time ranges. The start/end time is an Unix timestamp.

getRanges: () => ActiveRange[]; // {start: number, end: number}[]

Clear Time Ranges

Clear time ranges immediately, it might be used in case you have reported number of ranges by time.

clearRanges: () => void; // {start: number, end: number}[]