How to detect user inactivity using Angular 2?

Question

I am trying to create an Angular App which contains videos where the user needs to be logged out after a few minutes of inactivity.

If the user is watching the videos either normally or in fullscreen, he need not be logged out.
If the tab is inactive and the videos are playing I need him to be logged out after inactivity.

make use of a directive that check for mouse movements or clcik on the window and on setTimeout if nothing happens for that time frame log the user out — Rahul Singh
– Rahul Singh, Commented Oct 11, 2017 at 5:11
When viewing the video in fullscreen the cursor disappears, and then i go back to square one again. — Nithin
– Nithin, Commented Oct 11, 2017 at 16:15

rjdkolb · Accepted Answer · 2018-01-18 09:03:06Z

7

The easiest way will be to use idlejs.

It works well with Angular and it includes .d.ts bindings for Typescript.

import { Idle } from 'idlejs/dist';

// with predefined events on `document`
const idle = new Idle()
  .whenNotInteractive()
  .within(60)
  .do(() => console.log('Logout user with a function'))
  .start();

When a user is playing a video you can stop the idle.

play(){
    this.idle.stop();
    // play movie
}

And when the user clicks pause / stop

pause(){
    this.idle.restart();
    // pause movie
}

answered Jan 18, 2018 at 9:03

rjdkolb

12.1k13 gold badges79 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to detect user inactivity using Angular 2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related