Using visibility API in Angular?

Question

I have implemented Visibility API inside a constructor of an Angular component similar to this

constructor() {
    var hidden, state, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    }

    document.addEventListener(visibilityChange, function() {
        if(status == hidden){
            console.log("Hidden");
        }
        else if(status != hidden){
            console.log("Visible");
        }
    }, false);
}

pauseVideo(){
    //Video pause code
}

I need to pause the video i.e., call the pauseVideo() method when the Visibility changes to hidden, How do i do it?

Answer 1

 @Component( {
        selector : 'app-root',
        templateUrl : './app.component.html',
        styleUrls : [ './app.component.scss' ]
    } )

    export class AppComponent implements OnDestroy, OnInit { 
    constructor() {
    }

         @HostListener('document:visibilitychange', ['$event'])
          visibilitychange() {
            this.checkHiddenDocument();
          }
        
            checkHiddenDocument(){
            if (document.hidden){
            this.pauseVideo();
            } else {
            this.playVideo();
            }
        
        }
       ngOnInit(): void {}
       ngOnDestroy(): void {}
    }

You can use a hostlistener to the visibilityChange event. Then check the state of the document to do one method or others.

Answer 2

I don't know why you say document.hidden does not work in the event listener as it works just fine for me:

document.addEventListener(
  "visibilitychange"
  , () => { 
    if (document.hidden) { 
      console.log("document is hidden");
    }else{
      console.log("document is showing");
    }
  }
);

If you have an error of sorts could you open the dev tools (F12) and inspect the console? Maybe break on the error and see what's wrong?

Answer 3

If you work with Angular 4+, you can use Module angular-page-visibility (https://www.npmjs.com/package/angular-page-visibility).

Here is an example with a component class :

@Component( {
    selector : 'app-root',
    templateUrl : './app.component.html',
    styleUrls : [ './app.component.scss' ]
} )
export class AppComponent implements OnDestroy, OnInit {
    title = 'app';

    constructor() {
    }

    ngOnInit(): void {
    }

    @OnPageVisible()
    logWhenPageVisible(): void {
        console.log( 'OnPageVisible' );
        console.log( 'visible' );
    }

    @OnPageHidden()
    logWhenPageHidden(): void {
        console.log( 'OnPageHidden' );
        console.log( 'hidden' );
    }

    @OnPageVisibilityChange()
    logWhenPageVisibilityChange( isPageVisible: boolean ): void {
        console.log( 'OnPageVisibilityChange' );
        if ( isPageVisible ) {
            console.log( 'visible' );
        } else {
            console.log( 'hidden' );
        }
    }

    ngOnDestroy(): void {
    }
}