https://github.com/fi3ework/active-detector
🦉Detect whether browser user is still active.
https://github.com/fi3ework/active-detector
Last synced: 3 months ago
JSON representation
🦉Detect whether browser user is still active.
- Host: GitHub
- URL: https://github.com/fi3ework/active-detector
- Owner: fi3ework
- License: mit
- Created: 2019-10-26T14:04:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T07:47:10.000Z (about 3 years ago)
- Last Synced: 2025-10-28T00:25:49.470Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 116 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# active-detector
Detect whether browser user is still active.
## Install
```zsh
yarn add active-detector
```
## Example
Demo [here](./example). Excute `yarn && yarn start` and watch the log in console.
## Usage
### Quick Start
```typescript
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.
```typescript
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](https://github.com/scottcorgan/tiny-emitter#readme) as the callback controller.
```typescript
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.
```typescript
getState: () => USER_STATE;
```
### Get Active Time Ranges
Get current active time ranges. The start/end time is an Unix timestamp.
```typescript
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.
```typescript
clearRanges: () => void; // {start: number, end: number}[]
```