frame-resizer.ts

import {fullscreenChangeEvents} from 'shared/utils/fullscreen';

type IframeResizerOptions = {
  iframeElement: HTMLElement,
  containerElement: HTMLElement
};

export class IframeResizer {
  private originalWidth: number;
  private originalHeight: number;
  private originalRatio: number;

  constructor(private options: IframeResizerOptions) {
    // TODO: if height/width is not defined by element attr -> pick real measurement directly from DOM
    this.originalWidth = Number(options.iframeElement.getAttribute('width'));
    this.originalHeight = Number(options.iframeElement.getAttribute('height'));
    this.originalRatio = this.originalWidth / this.originalHeight;

    this.resize();

    // Register listeners
    window.addEventListener('orientationchange', this.onScreenChange);
    window.addEventListener('resize', this.onScreenChange);
    $(document).on(fullscreenChangeEvents.join(' '), this.onScreenChange);
  }

  onScreenChange = () => {
    this.resize();
  }

  resize() {
    const containerWidth = this.options.containerElement.clientWidth;
    this.options.iframeElement.setAttribute('width', `${containerWidth}px`);
    this.options.iframeElement.setAttribute('height', `${containerWidth / this.originalRatio}px`);
  }

  destroy() {
    // Unregister listeners
    window.removeEventListener('orientationchange', this.onScreenChange);
    window.removeEventListener('resize', this.onScreenChange);
    $(document).off(fullscreenChangeEvents.join(' '), this.onScreenChange);
  }
}