1 import videojs, { VideoJsPlayer } from 'video.js'
2 import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
4 const Button = videojs.getComponent('Button')
5 class TheaterButton extends Button {
7 private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
9 constructor (player: VideoJsPlayer, options: videojs.ComponentOptions) {
10 super(player, options)
12 const enabled = getStoredTheater()
13 if (enabled === true) {
14 this.player().addClass(TheaterButton.THEATER_MODE_CLASS)
16 this.handleTheaterChange()
19 this.controlText('Theater mode')
21 this.player().theaterEnabled = enabled
25 return `vjs-theater-control ${super.buildCSSClass()}`
28 handleTheaterChange () {
29 const theaterEnabled = this.isTheaterEnabled()
32 this.controlText('Normal mode')
34 this.controlText('Theater mode')
37 saveTheaterInStore(theaterEnabled)
39 this.player_.trigger('theaterChange', theaterEnabled)
43 this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
45 this.handleTheaterChange()
48 private isTheaterEnabled () {
49 return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
53 videojs.registerComponent('TheaterButton', TheaterButton)