FullScreen Request on Angular 2/4

Question

I'm building a new project on Angular 2/Angular 4, and i need to use Enter FullScreen Button on my Application.

I was searching and i've Found the code:

  toggleFullScreen() {
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement )
        {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  }

When i use "ng serve" to compile the application, FullScreen Button works, but it gives me the follow errors:

ERROR in src/app/commom/breadcrumb/breadcrumb.component.ts(41,64): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(41,127): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(42,56): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(42,111): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(44,41): error TS2339: Property 'mozFullScreenElement' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(44,102): error TS2551: Property 'msFullscreenElement' does not exist on type 'Document'. Did you mean 'fullscreenElement'?
src/app/commom/breadcrumb/breadcrumb.component.ts(103,19): error TS2339: Property 'mozFullScreenElement' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(103,90): error TS2551: Property 'msFullscreenElement' does not exist on type 'Document'. Did you mean 'fullscreenElement'?
src/app/commom/breadcrumb/breadcrumb.component.ts(107,43): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(108,34): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(109,43): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(110,34): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(112,9): error TS2554: Expected 0 arguments, but got 1.
src/app/commom/breadcrumb/breadcrumb.component.ts(112,66): error TS2339: Property 'ALLOW_KEYBOARD_INPUT' does not exist on type '{ new (): Element; prototype: Element; }'.
src/app/commom/breadcrumb/breadcrumb.component.ts(117,27): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(118,18): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(119,27): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(120,18): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

Can someone help me, pls?

Cajeput

Answer 1

The typings for HTMLElement and Element don't have some of those properties like mozFullScreenElement and ALLOW_KEYBOARD_INPUT defined, so even though the generated JavaScript code will work just fine, the TypeScript compiler isn't happy.

The quick-and-dirty fix is to just cast everything giving you trouble to <any>. A more sophisticated way would be to define your own interfaces that extend HTMLElement and Element like this:

interface MyHTMLElement extends HTMLElement {
  mozFullScreenElement?: boolean;
  webkitFullscreenElement?: boolean;
  // ...etc...
}

...and cast your element objects like that instead of to <any>.

Edit: I wanted to use this full-screen code myself, so I've whipped up a full TypeScript-friendly version:

interface FsDocument extends HTMLDocument {
  mozFullScreenElement?: Element;
  msFullscreenElement?: Element;
  msExitFullscreen?: () => void;
  mozCancelFullScreen?: () => void;
}

export function isFullScreen(): boolean {
  const fsDoc = <FsDocument> document;

  return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
}

interface FsDocumentElement extends HTMLElement {
  msRequestFullscreen?: () => void;
  mozRequestFullScreen?: () => void;
}

export function toggleFullScreen(): void {
  const fsDoc = <FsDocument> document;

  if (!isFullScreen()) {
    const fsDocElem = <FsDocumentElement> document.documentElement;

    if (fsDocElem.requestFullscreen)
      fsDocElem.requestFullscreen();
    else if (fsDocElem.msRequestFullscreen)
      fsDocElem.msRequestFullscreen();
    else if (fsDocElem.mozRequestFullScreen)
      fsDocElem.mozRequestFullScreen();
    else if (fsDocElem.webkitRequestFullscreen)
      fsDocElem.webkitRequestFullscreen();
  }
  else if (fsDoc.exitFullscreen)
    fsDoc.exitFullscreen();
  else if (fsDoc.msExitFullscreen)
    fsDoc.msExitFullscreen();
  else if (fsDoc.mozCancelFullScreen)
    fsDoc.mozCancelFullScreen();
  else if (fsDoc.webkitExitFullscreen)
    fsDoc.webkitExitFullscreen();
}

export function setFullScreen(full: boolean): void {
  if (full !== isFullScreen())
    toggleFullScreen();
}

So far I've run this in Chrome, Firefox and Safari, all on macOS, and it works great.

Undry

Hi @kshetline, Where can i implement this interface? On my .component.ts? – Cajeput

Define the interface above wherever you're declaring toggleFullScreen(), whichever file that might be in. Then cast document, document.documentElement, and Element.prototype accordingly. I'd love to use this full-screen code in an app of my own, so I'll be writing it up the way I like it pretty soon. – Undry

This works like a charms cheers even in typescript it's just copy paste :) – Snider

it works if you toggle enter fullscreen by code, but if i enter fullscreen by click F11 i can't exit – Bogusz

Answer 2

The solution by @kshetline worked really good! So I decided to put it into a Service

import {Injectable} from '@angular/core';

@Injectable()
export class FullscreenService {
  private doc = <FullScreenDocument>document;

  enter() {
    const el = this.doc.documentElement;
    if (el.requestFullscreen) el.requestFullscreen();
    else if (el.msRequestFullscreen) el.msRequestFullscreen();
    else if (el.mozRequestFullScreen) el.mozRequestFullScreen();
    else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
  }

  leave() {
    if (this.doc.exitFullscreen) this.doc.exitFullscreen();
    else if (this.doc.msExitFullscreen) this.doc.msExitFullscreen();
    else if (this.doc.mozCancelFullScreen) this.doc.mozCancelFullScreen();
    else if (this.doc.webkitExitFullscreen) this.doc.webkitExitFullscreen();
  }

  toggle() {
    if (this.enabled) this.leave();
    else this.enter();
  }

  get enabled() {
    return !!(
      this.doc.fullscreenElement ||
      this.doc.mozFullScreenElement ||
      this.doc.webkitFullscreenElement ||
      this.doc.msFullscreenElement
    );
  }
}

interface FullScreenDocument extends HTMLDocument {
  documentElement: FullScreenDocumentElement;
  mozFullScreenElement?: Element;
  msFullscreenElement?: Element;
  webkitFullscreenElement?: Element;
  msExitFullscreen?: () => void;
  mozCancelFullScreen?: () => void;
  webkitExitFullscreen?: () => void;
}

interface FullScreenDocumentElement extends HTMLElement {
  msRequestFullscreen?: () => void;
  mozRequestFullScreen?: () => void;
  webkitRequestFullscreen?: () => void;
}

Usage

@Component()
export class SomeComponent {
  constructor(private fullscreenService: FullscreenService) {}

  onToggleFullscreen() {
    this.fullscreenService.toggle();
  }
}

Orchestrion

I like this answer very much ... However, I think that this service should also know when the user manually enters the FullscreenState (i.e. with F11), so that it can at least be switched off again with the service, if this is possible at all ... – Pelican

Answer 3

Because these properties mozFullScreenElement, msFullscreenElement... are vendor-based, there's no defined type for it. One quick way to get around it is to change all of these properties to something like document['mozFullScreenElement']

Peden

Hey @Lance, Almost there. Now i've got: Error TS1003: Identifier expected on positions (87,19); (87,94); (91,43);(92,34); (93,43); (94,34); (96,34); (96,70); (101,27); (102,18),(103,27), (104,18) that's all the places that i've put [' '] – Cajeput