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?

You can use if (document.hidden) { to see if the document is visible or not. — HMR
– HMR, Commented Oct 15, 2017 at 6:31
I did use if (document.hidden) but the method can't be accessed inside the document event listener, i googled some more and an answer was to use a service to broadcast an event when this happens; Any idea about it? — Nithin
– Nithin, Commented Oct 15, 2017 at 7:04

TmTron · Accepted Answer · 2022-12-27 12:22:46Z

23

@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.

edited Dec 27, 2022 at 12:22

TmTron

19.7k13 gold badges109 silver badges167 bronze badges

answered Nov 13, 2019 at 16:42

Skatt

4004 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdusalam Ben Haj Over a year ago

this should have been the accepted answer

user3025289 Over a year ago

should be the accepted answer but none of the solutions can detect focus-lost (alt-tab or cmd-tab)

HMR · Accepted Answer · 2017-10-15 08:05:21Z

14

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?

answered Oct 15, 2017 at 8:05

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Comments

olivierlsc · Accepted Answer · 2018-02-14 13:13:07Z

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

Collectives™ on Stack Overflow

Using visibility API in Angular?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related