client/src/assets/player/shared/control-bar/theater-button.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import videojs from 'video.js'
import { getStoredTheater, saveTheaterInStore } from '../../peertube-player-local-storage'
import { TheaterButtonOptions } from '../../types'

const Button = videojs.getComponent('Button')
class TheaterButton extends Button {

  private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'

  private theaterButtonOptions: TheaterButtonOptions

  constructor (player: videojs.Player, options: TheaterButtonOptions & videojs.ComponentOptions) {
    super(player, options)

    this.theaterButtonOptions = options

    const enabled = getStoredTheater()
    if (enabled === true) {
      this.player().addClass(TheaterButton.THEATER_MODE_CLASS)

      this.handleTheaterChange()
    }

    this.controlText('Theater mode')

    this.player().theaterEnabled = enabled

    this.updateShowing()
    this.player().on('video-change', () => this.updateShowing())
  }

  buildCSSClass () {
    return `vjs-theater-control ${super.buildCSSClass()}`
  }

  handleTheaterChange () {
    const theaterEnabled = this.isTheaterEnabled()

    if (theaterEnabled) {
      this.controlText('Normal mode')
    } else {
      this.controlText('Theater mode')
    }

    saveTheaterInStore(theaterEnabled)

    this.player_.trigger('theater-change', theaterEnabled)
  }

  handleClick () {
    this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)

    this.handleTheaterChange()
  }

  private isTheaterEnabled () {
    return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
  }

  private updateShowing () {
    if (this.theaterButtonOptions.isDisplayed()) this.show()
    else this.hide()
  }
}

videojs.registerComponent('TheaterButton', TheaterButton)