FullScreen 적용하기

angular를 이용한 full Screen을 적용하는 방식에 대해 설명드리겠습니다.
FullScreen은 동영상등을 클릭했을때 화면전체를 채워 사용자에게 편안한 컨텐츠를 제공할때 많이 사용되는 기능입니다.

참조

기본적인 예제

import { Component, OnInit, Inject} from '@angular/core';
import { DOCUMENT  } from '@angular/common';
..........
export class ViewComponent implements OnInit {
  constructor(
    @Inject(DOCUMENT) private document: any,
  ) {}

  public ngOnInit(): void {
    this.docElem = this.document.documentElement;
  }

  // 클릭시 fullscreen을 오픈한다.
  public openfullscreen() {
    if (this.docElem.requestFullscreen) {
      this.docElem.requestFullscreen();
    } 
  }

  // 클릭시 fullscreen을 close 한다.
  public closeFullScreen() {
    if (this.docElem.exitFullscreen) {
      this.docElem.exitFullscreen();
    }
  }
}

위의 예제는 간단한 예제인데 이곳에는 하나의 단점이 있습니다.
fullscreen 화면에서 사용자 버튼이 아닌 브라우저 자체에서 지원하는 close 명령을 받아 들여야 합니다.
수정한 코드는 아래와 같습니다.

fullscreenchange 이벤트 받기

이 이벤트는 fullscreen이 열리거나 닫힐때 발생하는 이벤트 입니다.

import { Component, OnInit, Inject, HostListener} from '@angular/core';
import { DOCUMENT  } from '@angular/common';
..........
export class ViewComponent implements OnInit {
  @HostListener('document:fullscreenchange', ['$event'])
  fullscreenmodes(event: any){
    // 이런 방식으로 현재 닫힘을 체크가능하다.
  }

  constructor(
    @Inject(DOCUMENT) private document: any,
  ) {}

  public ngOnInit(): void {
    this.docElem = this.document.documentElement;
  }

  // 클릭시 fullscreen을 오픈한다.
  public openfullscreen() {
    if (this.docElem.requestFullscreen) {
      this.docElem.requestFullscreen();
    } 
  }

  // 클릭시 fullscreen을 close 한다.
  public closeFullScreen() {
    if (this.docElem.exitFullscreen) {
      this.docElem.exitFullscreen();
    }
  }
}

특정 Element 화면에 꽉채우기

fullscreen일때 특정 Element(video나 iframe 같은)를 화면에 꽉채우는 것은 css와 script를 활용하여 처리한다.

position: inherit;
left: 0;
top: 0;
width: 100vw;
height: 100vh;