playable/src/modules/ui/controls/play/play.view.ts

Video player based on HTML5Video

import { TextLabel } from '../../../../constants';

import View from '../../core/view';
import { IView } from '../../core/types';

import { controlTemplate } from './templates';

import htmlToElement from '../../core/htmlToElement';
import getElementByHook from '../../core/getElementByHook';

import { IPlayViewStyles, IPlayViewCallbacks, IPlayViewConfig } from './types';
import { ITextMap } from '../../../text-map/types';

import playViewTheme from './play.theme';
import styles from './play.scss';

const DATA_IS_PLAYING = 'data-playable-is-playing';

class PlayView extends View<IPlayViewStyles> implements IView<IPlayViewStyles> {
  private _callbacks: IPlayViewCallbacks;
  private _textMap: ITextMap;

  private _$rootElement: HTMLElement;
  private _$playbackControl: HTMLElement;

  constructor(config: IPlayViewConfig) {
    const { callbacks, textMap, theme } = config;

    super(theme);

    this._callbacks = callbacks;
    this._textMap = textMap;

    this._$rootElement = htmlToElement(
      controlTemplate({
        styles: this.styleNames,
        themeStyles: this.themeStyles,
        texts: {
          label: this._textMap.get(TextLabel.PLAY_CONTROL_LABEL),
        },
      }),
    );

    this._$playbackControl = getElementByHook(
      this._$rootElement,
      'playback-control',
    );

    this.setPlayingState(false);
    this._bindEvents();
  }

  private _bindEvents() {
    this._onButtonClick = this._onButtonClick.bind(this);

    this._$playbackControl.addEventListener('click', this._onButtonClick);
  }

  private _unbindEvents() {
    this._$playbackControl.removeEventListener('click', this._onButtonClick);
  }

  private _onButtonClick() {
    this._$playbackControl.focus();
    this._callbacks.onButtonClick();
  }

  setPlayingState(isPlaying: boolean) {
    if (isPlaying) {
      this._$playbackControl.classList.remove(this.styleNames.paused);
      this._$playbackControl.setAttribute(
        'aria-label',
        this._textMap.get(TextLabel.PAUSE_CONTROL_LABEL),
      );
    } else {
      this._$playbackControl.classList.add(this.styleNames.paused);
      this._$playbackControl.setAttribute(
        'aria-label',
        this._textMap.get(TextLabel.PLAY_CONTROL_LABEL),
      );
    }

    this._$rootElement.setAttribute(DATA_IS_PLAYING, String(isPlaying));
  }

  show() {
    this._$rootElement.classList.remove(this.styleNames.hidden);
  }

  hide() {
    this._$rootElement.classList.add(this.styleNames.hidden);
  }

  getElement() {
    return this._$rootElement;
  }

  destroy() {
    this._unbindEvents();

    if (this._$rootElement.parentNode) {
      this._$rootElement.parentNode.removeChild(this._$rootElement);
    }

    this._$playbackControl = null;
    this._$rootElement = null;
  }
}

PlayView.setTheme(playViewTheme);
PlayView.extendStyleNames(styles);

export default PlayView;