I am trying to make full screen when a user scroll down. so I call requestFullscreen() on scroll down and call exitFullscreen() on scroll up. Up to this stage, it works fine but I call requestFullscreen() on scroll down again, I get an error Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
@HostListener('window:touchstart', ['$event'])
handleTouchStart(event) {
if (!window.document.fullscreenElement) {
this.isFullScreen = false;
} else {
this.isFullScreen = true;
}
}
@HostListener('document:touchend', ['$event'])
handleTouchEnd(event) {
if (event.cancelable) {
event.preventDefault();
}
if (!this.isFullScreen && (this.previousScrollTop < this.body.nativeElement.scrollTop)) {
this.openfullscreen();
} else if (this.isFullScreen && (this.previousScrollTop > this.body.nativeElement.scrollTop)) {
this.closefullscreen();
}
this.previousScrollTop = this.body.nativeElement.scrollTop;
}
openfullscreen() {
// Trigger fullscreen
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
}
this.isFullScreen = true;
}
closefullscreen(){
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
};
if (docWithBrowsersExitFunctions.exitFullscreen) {
docWithBrowsersExitFunctions.exitFullscreen();
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
docWithBrowsersExitFunctions.mozCancelFullScreen();
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
docWithBrowsersExitFunctions.webkitExitFullscreen();
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
docWithBrowsersExitFunctions.msExitFullscreen();
}
this.isFullScreen = false;
}
I had look event.isTrusted and is true which is user input. Why do I get an error even though I call requestFullscreen() by touchend event?