Class PlayerView

src/ui/PlayerView.ts:7–141

import Icons from './Icons'

export class PlayerView implements IComponent {
  public readonly element: HTMLElement
  public readonly videoWrapper: HTMLElement
  public readonly controlBar: ControlBarView = new ControlBarView(this._player)

  private _bigButton: HTMLElement
  private _spinner: HTMLElement

  private _state: IPlayerState = 'Paused'

  constructor(private _player: XtermPlayer) {
    const el = this.element = $div({ class: 'xp', attrs: { tabindex: '0' } },
      this.videoWrapper = $div({ class: 'video-wrapper' }),
      this._bigButton = $div({ class: 'xp-overlay xp-overlay-center xp-big-button' }),
      this._spinner = $div({ class: 'xp-overlay xp-overlay-center sk-flow' },
        $div({ class: 'sk-flow-dot' }),
        $div({ class: 'sk-flow-dot' }),
        $div({ class: 'sk-flow-dot' }),
      ),
      this.controlBar.element
    )
    addDisposableDomListener(el, 'mouseenter', () => {
      if (this.state === 'Running') {
        this._showControlBar()
      }
    })
    addDisposableDomListener(el, 'mouseleave', () => {
      if (this.state === 'Running') {
        this._hideControlBar()
      }
    })
    addDisposableDomListener(el, 'keydown', (ev: KeyboardEvent) => {
      ev.preventDefault()
      switch (ev.code) {
        case 'Space':
          this._togglePlayPauseReplay()
          break
        case 'ArrowRight':
          this._player.currentTime += 3000
          break
        case 'ArrowLeft':
          this._player.currentTime -= 3000
          break
        case 'ArrowUp':
          this._player.volume += 0.1
          break
        case 'ArrowDown':
          this._player.volume -= 0.1
          break
      }
    }, true)
    addDisposableDomListener(this._bigButton, 'click', this._togglePlayPauseReplay.bind(this))

    this.controlBar.onPlaybackButtonClick(this._togglePlayPauseReplay.bind(this))
    this.controlBar.onSeek((percent: number) => {
      if (this.state !== 'Loading') {
        this._player.currentTime = percent * this._player.duration
      }