Add (@host)listener for fullscreen change

Question

I want to detect if the fullsceen mode is enabled by using the HTML5 fullscreen API. I'm using Chrome and Angular 4.x.

I've created an Angular component and added following @HostListener:

@HostListener('document:webkitfullscreenchange', [$event])
FSHandler(event: KeyboardEvent) {
  console.log('fullscreen mode changed...');
}

This doesn't work for some reason. I've tried removing the browser prefix, capturing other events like webkitFullscreenEnabled, but all of that didn't help.

Any suggestions? Thanks.

Answer 1

You need to handle the fullscreenchange event for Browser/browserkit that the app will be on, and from most guides I've seen, there's four of them. This is how I've done it (I'm an Angular novice, so there may be a nicer / cleaner way),

@HostListener('fullscreenchange', ['$event'])
@HostListener('webkitfullscreenchange', ['$event'])
@HostListener('mozfullscreenchange', ['$event'])
@HostListener('MSFullscreenChange', ['$event'])
screenChange(event) {
  console.log(event);
}

And that detects the change in every browser I've tried (Desktop ones on OSX, and mobile ones on Android).