CODEWITHSUNDEEP
javascriptangularjshtmlfullscreenaddeventlistener
yluijten
yluijten

Reputation: 123

Add (@host)listener for fullscreen change

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.

Upvotes: 6

Views: 4931

Answers (2)

seaders
seaders

Reputation: 4096

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

Upvotes: 10

MThi
MThi

Reputation: 323

I was able to do it in pure javascript

this.document.addEventListener('webkitfullscreenchange', () => {
  console.log('fullscreen mode changed...');
})

You could also do something like

document.onfullscreenchange = () => console.log('fullscreenchange event fired!');

Although do not forget in that last example that if you get multiple objects where you have this line, document is a singleton. So be aware. I personally at a function where I modified a variable inside, but multiple instance of the object containing that callback existed, so the same document got overwritten.

But then if you want to do it the Angular way. You got the proper approach. I do have the same code as but my event is of type 'any'. I don't think the event is of type KeyboardEvent. That might be your problem.

Upvotes: 0

Related Questions