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.

Answer 1

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
}