Re-activate video playback after 30 seconds of user inactivity (using RxJs)

Question

Re-activate video playback after 30 seconds of user inactivity (using RxJs)

My intention is to provide a brief explanation of the functionality I am looking for. Essentially, when a video is playing, I want it to pause if a user clicks on it, allowing them to do something else. Then, after 30 seconds of idle time, I need the video to automatically resume.

To achieve this, I have utilized basic JavaScript's setTimeout functionality. You can see the code snippet below:

@HostListener('window:click', ['$event'])
onClick: (event) => {
    // stop the video
    this.activity = setTimeout(() => { /* resume */ } , 30000)
}


@HostListener('window:mousemove', ['$event'])
onMouseMove: (event) => {
    clearTimeout(this.activity)
    this.activity = setTimeout(() => { /* resume */ } , 30000)
}

Any suggestions on how this could be accomplished using the RxJs approach?

javascript angular typescript events rxjs

Answer 1

Answer №1

interaction = new Subject<void>();

@HostListener('window:click', ['$event'])
handleClick(event: any) {
    // stop the video
    interval(30000).pipe(takeUntil(this.interaction)).subscribe(() => {
        /* resume */
        this.interaction.next();
        this.interaction.complete();
    });
}


@HostListener('window:mousemove', ['$event'])
handleMouseMove(event: any) {
    this.interaction.next();
    this.interaction.complete();

    this.interaction = new Subject<void>();

    interval(30000).pipe(takeUntil(this.interaction)).subscribe(() => {
        /* resume */
        this.interaction.next();
        this.interaction.complete();
    });
}

Answer 2

interaction = new Subject<void>();

@HostListener('window:click', ['$event'])
handleClick(event: any) {
    // stop the video
    interval(30000).pipe(takeUntil(this.interaction)).subscribe(() => {
        /* resume */
        this.interaction.next();
        this.interaction.complete();
    });
}


@HostListener('window:mousemove', ['$event'])
handleMouseMove(event: any) {
    this.interaction.next();
    this.interaction.complete();

    this.interaction = new Subject<void>();

    interval(30000).pipe(takeUntil(this.interaction)).subscribe(() => {
        /* resume */
        this.interaction.next();
        this.interaction.complete();
    });
}

Answer 3

Answer №2

Here is the solution I have devised:

This code runs outside of the Angular Zone to avoid taxing your application with unnecessary change detection events while the mouse is in motion. It will only trigger a change detection event when the video playback stops or resumes.

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, NgZone } from '@angular/core';
import {
  BehaviorSubject,
  fromEvent,
  merge,
  Observable,
  of,
  Subject,
} from 'rxjs';
import {
  distinctUntilChanged,
  mapTo,
  startWith,
  switchMapTo,
  debounceTime,
  takeUntil,
} from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class VideoService {
  private readonly onDestroy = new Subject<void>();
  readonly isPlaying$: Observable<boolean> = new BehaviorSubject(true);

  constructor(
    @Inject(DOCUMENT) private readonly document: Document,
    private readonly ngZone: NgZone
  ) {
    // Executing the entire logic outside of Angular for minimal impact on app performance
    this.ngZone.runOutsideAngular(() => {
      fromEvent(this.document, 'click', { passive: true })
        .pipe(
          switchMapTo(
            merge(
              of(false),
              fromEvent(this.document, 'mousemove', { passive: true }).pipe(
                startWith(null),
                debounceTime(1000),
                mapTo(true)
              )
            )
          ),
          distinctUntilChanged(),
          takeUntil(this.onDestroy)
        )
        .subscribe((value) =>
          this.ngZone.run(() => {
            (this.isPlaying$ as BehaviorSubject<boolean>).next(value);
          })
        );
    });
  }

  ngOnDestroy() {
    this.onDestroy.next();
    this.onDestroy.complete();
  }
}

View live demo here!

I am open to exploring alternative solutions, as I believe there may be simpler approaches that have yet to be considered.

Answer 4

Here is the solution I have devised:

This code runs outside of the Angular Zone to avoid taxing your application with unnecessary change detection events while the mouse is in motion. It will only trigger a change detection event when the video playback stops or resumes.

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, NgZone } from '@angular/core';
import {
  BehaviorSubject,
  fromEvent,
  merge,
  Observable,
  of,
  Subject,
} from 'rxjs';
import {
  distinctUntilChanged,
  mapTo,
  startWith,
  switchMapTo,
  debounceTime,
  takeUntil,
} from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class VideoService {
  private readonly onDestroy = new Subject<void>();
  readonly isPlaying$: Observable<boolean> = new BehaviorSubject(true);

  constructor(
    @Inject(DOCUMENT) private readonly document: Document,
    private readonly ngZone: NgZone
  ) {
    // Executing the entire logic outside of Angular for minimal impact on app performance
    this.ngZone.runOutsideAngular(() => {
      fromEvent(this.document, 'click', { passive: true })
        .pipe(
          switchMapTo(
            merge(
              of(false),
              fromEvent(this.document, 'mousemove', { passive: true }).pipe(
                startWith(null),
                debounceTime(1000),
                mapTo(true)
              )
            )
          ),
          distinctUntilChanged(),
          takeUntil(this.onDestroy)
        )
        .subscribe((value) =>
          this.ngZone.run(() => {
            (this.isPlaying$ as BehaviorSubject<boolean>).next(value);
          })
        );
    });
  }

  ngOnDestroy() {
    this.onDestroy.next();
    this.onDestroy.complete();
  }
}

View live demo here!

I am open to exploring alternative solutions, as I believe there may be simpler approaches that have yet to be considered.

Re-activate video playback after 30 seconds of user inactivity (using RxJs)

Answer №1

Answer №2

Similar questions

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

The issue with THREE.js ORBITCONTROLLS not responding to changes in mouse button settings is causing inconvenience

React Weather App experiencing issues with prop communication and updating variables

Include a character in a tube using Angular

Exploring the capabilities of multiple nested controllers in AngularJS

Tips for expanding a script that relocates a logo into a navigation consisting of several unordered lists

Testing Ajax code encounters error

Using Typeof in an IF statement is successful, but attempting to use ELSE with the same

Ways to stop CKEDITOR from automatically saving textarea or contenteditable content

What is the most efficient way to restrict multiple input fields, each using v-model, to only accept numeric values in Vue.js without duplicating code for every input field?

Display the div according to the $index selected from the AngularJS list

The ngModel feature is not functioning properly when trying to update in tag inputs

Is it possible to utilize mathematical operators such as multiplication, division, addition, subtraction, and exponentiation to transform a non-zero numerical value into

Mixing Jest and Cypress in a TypeScript environment can lead to Assertion and JestMatchers issues

What is the best way to send a JavaScript array to a Perl script using AJAX?

Can I send both a list of files and an entire JSON object in a FormData object to an ASP.NET CORE MVC Controller?

Duplicate entries being saved in the database due to Ajax calls

PHP code cannot be executed due to a problem with Angular routing

What are the steps to run and test the renovate bot on your local machine

Adjusting the contenteditable feature to place the caret on a specific child node