Angular 2 and fullscreen API

Question

I've looked trough the docs and examples, yet found no way to listen for the "onfullscreenchange" event and/or it's variants ("onwebkitfullscreenchange" etc.) on the "document" element.

What i've tried without success:

/*method 1*/    
host: {
      '(document:onwebkitfullscreenchange)': 'fullScreen()'
    }
/*method 2*/
    @HostListener("document:onwebkitfullscreenchange", []) fullScreen() {}
/*method 3*/
    renderer.listenGlobal('document', 'onwebkitfullscreenchange', (event) => {})

All of the above work with the more common events such as onclick event.

If you've figured out a way to integrate the fullscreen API with Angular 2 or have other ideas or suggestions on how to go about or attempt this, i'd be very appreciative of your help.

Edit: If you could point me to a helpful resource, that might demistify (even partially) this, i would greatly appreciate it. Thank you!

ANSWER document:webkitfullscreenchange (and so forth for the other browsers)

score 7 · Accepted Answer · answered Feb 16 '17 at 19:28

7

There is no such thing as an onfullscreenchange event type. That's the event handler, so you could do (but probably shouldn't, as it's not really the "Angular way" of doing this):

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

But there is a fullscreenchange event, so this should work fine:

@HostListener("document:fullscreenchange", []) fullScreen() {}

answered Feb 16 '17 at 19:28

Brother Woodrow

6,092
3
18
20

The "onfullscreenchange" is the standard, but if you look at the documentation for the API https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API you'll see that each browser implements a different eventhandler, not the standard, unless, i'm reading that wrong. That aside, i've just tested your suggestion it does not work. Perhaps i am missing something but i can't figure it out. – Radu Andrei Feb 16 '17 at 20:37
So it's actually browser prefixed -> for chrome `document:webkitfullscreenchange`. But it works. For some reason however, the event is not triggered if you fullscreen with the F11, default keybinding. You have trigger it manually, on F11/ESC via listeners on their respective keycodes. – Radu Andrei Feb 16 '17 at 20:53

score 3 · Answer 2 · answered Jun 12 '19 at 07:35

Here is an sample for check fullscreen or exit fullscreen use a boolean variable.

 @HostListener('document:fullscreenchange', ['$event'])
 @HostListener('document:webkitfullscreenchange', ['$event'])
 @HostListener('document:mozfullscreenchange', ['$event'])
 @HostListener('document:MSFullscreenChange', ['$event'])
  fullscreenmode(){

    if(this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
    }
    else{
      this.toggleClass = 'ft-minimize';
    }
    console.log(this.toggleClass)
  }

Demo: https://stackblitz.com/edit/fullscreen-closefullscreen-check?file=src%2Fapp%2Fapp.component.ts

score 0 · Answer 3 · answered Sep 19 '18 at 14:10

0

@HostListener('document:fullscreenchange')
@HostListener('document:webkitfullscreenchange')
@HostListener('document:mozfullscreenchange')
@HostListener('document:MSFullscreenChange')
onScreenModeСhange() {
    //Do stuff
}

answered Sep 19 '18 at 14:10

Adrian

201
2
8

Angular 2 and fullscreen API

3 Answers3

Linked