To List
Fullscreen API in Typescript

Fullscreen API in Typescript

2023-05-26
2 min read

Fullscreen API

Fullscreen API provides many useful methods and properties to enter or exit fullscreen mode. Web bar at the top and window bar at the bottom will be hidden in Fullscreen mode.

Open Fullscreen

The requestFullscreen() in HTML element is a function consisting of Promise to make element fullscreen mode.

Document: Full page

typescript
const openFullscreen = async () => {
  if (!document.fullscreenElement) {
    if (document.documentElement.requestFullscreen) {
      await document.documentElement.requestFullscreen()
    }
  }
}

The fullscreenElement instance property allows to get current HTML Element displayed in fullscreen mode. If this is null, the document is not in fullscreen mode. Shortly, it's used to check whether document is in fullscreen mode.

Element

typescript
const openFullscreen = async (element: HTMLElement) => {
  if (element.requestFullscreen) {
    await element.requestFullscreen()
  }
}

You can make specific element space fullscreen mode.

In addition, pressing F11 key allows to enter fullscreen mode.

Close Fullscreen

You also can exit fullscreen mode by pressing ESC or F11 key.

typescript
const closeFullscreen = async () => {
  if (document.fullscreenElement) {
    if (document.exitFullscreen) {
      await document.exitFullscreen()
    }
  }
}

The requestFullscreen() in HTML element is used to exit Fullscreen mode. If it's not in fullscreen mode, it won't be worked.

CSS

CSS style in Fullscreen mode can be modified.

css
/* Safari */
:-webkit-full-screen {
  background-color: green;
}

/* IE11 */
:-ms-fullscreen {
  background-color: green;
}

/* Standard syntax */
:fullscreen {
  background-color: green;
}

document.fullscreenEnabled property.

The document.fullscreenEnabled property returns boolean type. If fullscreen mode is not available, it returns false. Otherwise false.

Events

The Fullscreen API detects two events.

fullscreenchange in Element

typescript
document.documentElement.addEventListener('fullscreenchange', handleFullscreenChange)
document.documentElement.removeEventListener('fullscreenchange', handleFullscreenChange)

const handleFullscreenChange = (event: HTMLElementEventMap['fullscreenchange']) => {
  // Logic
}

The fullscreenchange event is fired when fullscreen mode is switched successfully.

fullscreenerror in Element

typescript
document.documentElement.addEventListener('fullscreenerror', handleFullscreenError)
document.documentElement.removeEventListener('fullscreenerror ', handleFullscreenError)

const handleFullscreenError = (event: HTMLElementEventMap['fullscreenerror']) => { 
  // Logic
}

The fullscreenerror event is fired when fullscreen mode cannot be switched.

Ref