Implement an IDLE application screen saver in angular + electron

Question

I would like to implement a 'screen saver' behaviour in my Angular application built with Electron when the application is idle for an amount of time (let's say for 10 seconds). So, if 10 seconds pass in the application without any action from the user (or even the application itself?), a screen with a message should be shown, and this screen will be removed when user has any interaction with the application.

What would be the recommended way? Should I implement this behaviour in a custom way (set a timer which will be erased by any user action etc like this or is there any built-in solution in electron/Angular?

Please note that I do not want to check for the general system's idle state, just the application's.

UPDATE:

I have tried to use UserIdleService in this way:

this._userIdle.onIdleStatusChanged().subscribe((isIdle) => {
        if (isIdle) {
            // code to show a screen saver image
        } else {
             this._userIdle.resetTimer();
             // code to hide the screen saver image
        }
    });

But I see the event getting fired every 1 second, despite my configuration for this module which is as following:

 UserIdleModule.forRoot(
        {
            idle: 100000,
            timeout: 1000000,
            ping: 60
        }
    )

What could cause this issue?

score 1 · Answer 1 · answered Jun 21 '23 at 11:19

1

You could use observables for that, combined with the debounce function:

const mouseEvents = fromEvent(document, 'mousemove');

mouseEvents
  .pipe(debounceTime(10000))
  .subscribe((event: MouseEvent) => {
    // Idle screen logic here 
  });

answered Jun 21 '23 at 11:19

L. Männer

446
2
15

NickAth · Accepted Answer · 2023-06-22T11:39:15.147

After a check in UserIdleService code I realized that idleSensitivity parameter (which by default is 1 should be set in order to use it for inactivity check periodically). Example below:

 UserIdleModule.forRoot(
    {
        idle: 20,
        timeout: 20,
        idleSensitivity: 5,
        ping: 60
    }
)

This configuration, combined with the following subscription on app.component.ts works fine

this._userIdle.onIdleStatusChanged().subscribe((isIdle) => {
    if (isIdle) {
        // code to show a screen saver image
    } else {
         this._userIdle.resetTimer();
         // code to hide the screen saver image
    }
});

Implement an IDLE application screen saver in angular + electron

2 Answers2