1 // FIXME: something weird with our path definition in tsconfig and typings
3 import * as videojs from 'video.js'
5 import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
6 import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
8 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
9 class TheaterButton extends Button {
11 private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
13 constructor (player: videojs.Player, options: any) {
14 super(player, options)
16 const enabled = getStoredTheater()
17 if (enabled === true) {
18 this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
20 this.handleTheaterChange()
23 this.player_.theaterEnabled = enabled
27 return `vjs-theater-control ${super.buildCSSClass()}`
30 handleTheaterChange () {
31 const theaterEnabled = this.isTheaterEnabled()
34 this.controlText('Normal mode')
36 this.controlText('Theater mode')
39 saveTheaterInStore(theaterEnabled)
41 this.player_.trigger('theaterChange', theaterEnabled)
45 this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
47 this.handleTheaterChange()
50 private isTheaterEnabled () {
51 return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
55 TheaterButton.prototype.controlText_ = 'Theater mode'
57 TheaterButton.registerComponent('TheaterButton', TheaterButton)