CODEWITHSUNDEEP
javascriptangularjs
Nithin
Nithin

Reputation: 1477

Using visibility API in Angular?

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?

Upvotes: 17

Views: 14483

Answers (3)

Skatt
Skatt

Reputation: 392

@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 document.hidden to do one method or others.

Upvotes: 22

olivierlsc
olivierlsc

Reputation: 41

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 {
    }
}

Upvotes: 4

HMR
HMR

Reputation: 39270

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?

Upvotes: 14

Related Questions