Display alerts over a fullscreen element

armandovillalta · September 20, 2020, 7:23am

How can one display an ionic alert when a element, lets say a div element which is a container for a video element with some button something like this:

<div class="videoContainer" #videoContainer (mouseenter)="onMouseEnter()" (click)="onMouseClick()" (mousemove)="onMouseMove()">
	<div class="videoLoading" *ngIf="!cameraServiceReady"></div>
	<video autoplay muted playsinline #video id="video" class="videoInsert" [class.videoFlip]="flipScreen"></video>
	<canvas #canvas id="canvas" class="canvas" [class.videoFlip]="flipScreen"></canvas>
	<div class="buttonContainer" *ngIf="showButtons && cameraServiceReady">
		<ion-button (click)="onFullScreen()" fill="clear" size="large" color="light">
			<ion-icon name="scan-outline" class="ion-padding"></ion-icon>
		</ion-button>
		<ion-button (click)="onOpenLanguageSelection()" fill="clear" size="large" color="light">
			<ion-icon name="language-outline"></ion-icon>
		</ion-button>
		<ion-button (click)="toggleFlipScreen()" fill="clear" size="large" color="light">
			<ion-icon name="camera-reverse-outline"></ion-icon>
		</ion-button>
		<ion-button (click)="onOpenCameraSelection()" fill="clear" size="large" color="light">
			<ion-icon name="videocam-outline"></ion-icon>
		</ion-button>
	</div>
</div>

If the container is not in fullscreen then alerts appear over it but if this element is in fullscreen using the Fullscreen Api from html5 (elem.requestFullscreen();) then alert are not appearing in front of the element. I believe this is because the browser puts the z-index of a fullscreen element to its max value which is around 2147483647.

How could we override this? Any suggestions or solution for this?

nikhilkgupta01 · September 20, 2020, 11:09am

On the function that sets the logic for ion-alert to present, pause the video, then show the alert. To show an element as an overlay on the video, there is a hack to achieve this. I am going to assume it will work with ion-alert the same way.
You could set z-index of ion-alert as mentioned here. Set its z-index to 2147483647. Please check it, I dont have time to do so. Also, I cannot speak about compatibility of this fix with all browsers.

armandovillalta · September 21, 2020, 12:21am

Tried it but does not work because based on what I read, when a element goes fullscreen then you dont have a “browser window” anymore so you can only access elements inside the container, you wont see anything else… so I believe options are to get off from the fullscreen mode and display the alert or add a custom alert inside the container the is going fullscreen.

nikhilkgupta01 · September 21, 2020, 12:39am

It appears you are correct. I checked the link that i posted in my previous reply. The jsfiddle provided in the answer didn’t even work as was said there. Maybe an outdated answer. Thank you for checking and confirming it. I suggest you must very well proceed with the options in your hands right now. I will search for any possible solutions that actually make use of ion-alert and will update my findings here.

armandovillalta · September 21, 2020, 5:38pm

@nikhilkgupta01 think I found a pretty clean solution after some testing… need to test in more browsers to see if everything ok but here it goes in case anyone have this issue also:

The trick is to “fullscreen” the entire document( just like when you press F11 though I found out f11 fullscreen and programatic fullscreen are two different features) and not only the specific element, in this case the container. So by doing something like:

async onFullScreen() {
        const elem = document.documentElement;
        // @ts-ignore
        // tslint:disable-next-line:max-line-length
        const methodToBeInvoked = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullscreen || elem.msRequestFullscreen;
        if (methodToBeInvoked && !this.inFullScreenMode) {
            methodToBeInvoked.call(elem);
        } else if (document.exitFullscreen) {
                await document.exitFullscreen();
                this.cameraSrv.resizeCanvasElement();
        }
    }

This function will be triggered when the user press button, just like when you hit the fullscreen button in a youtube video. Then after this we check if we are in fullscreen or not with the inFullScreenMode variable. And how do we set this to true or false? well we need to listen to the fullscreenchange like this:

    @HostListener('document:fullscreenchange', ['$event'])
    @HostListener('document:webkitfullscreenchange', ['$event'])
    @HostListener('document:mozfullscreenchange', ['$event'])
    @HostListener('document:MSFullscreenChange', ['$event'])
    onFullScreenChange(event) {
        this.inFullScreenMode = !this.inFullScreenMode;
    }

We are assuming we start in “normal mode”, maybe we need to tweak it a little bit in case user already in fullscreen.

Now, in this case for the videoContainer, we will add a conditional css class to “fullscreen” the video container:

<div class="videoContainer" [class.fullScreenVideo]="inFullScreenMode" #videoContainer
                     (mouseenter)="onMouseEnter()" (click)="onMouseClick()"
                     (mousemove)="onMouseMove()">
  <div class="videoLoading" *ngIf="!cameraServiceReady"></div>
  <video autoplay muted playsinline #video id="video" class="videoInsert" [class.videoFlip]="flipScreen"></video>
  <canvas #canvas id="canvas" class="canvas" [class.videoFlip]="flipScreen"></canvas>
  <div class="buttonContainer" *ngIf="showButtons && cameraServiceReady">
    <ion-button (click)="onFullScreen()" fill="clear" size="large" color="light">
       <ion-icon name="scan-outline" class="ion-padding"></ion-icon>
    </ion-button>
     <ion-button (click)="onOpenLanguageSelection()" fill="clear" size="large" color="light">
        <ion-icon name="language-outline"></ion-icon>
      </ion-button>
      <ion-button (click)="toggleFlipScreen()" fill="clear" size="large" color="light">
         <ion-icon name="camera-reverse-outline"></ion-icon>
       </ion-button>
       <ion-button (click)="onOpenCameraSelection()" fill="clear" size="large" color="light">
         <ion-icon name="videocam-outline"></ion-icon>
       </ion-button>
   </div>
</div>

and the small css class for this:

.fullScreenVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2147483647;
  min-width: 100%;
  min-height: 100%;
}

I set the z-index here just for testing purpose but no need to set that high maybe 2000 or depending on your needs…

FULLSCREEN MODE:

NORMAL MODE: