client/src/assets/player/videojs-components/theater-button.ts

   1 // FIXME: something weird with our path definition in tsconfig and typings
   2 // @ts-ignore
   3 import * as videojs from 'video.js'
   4
   5 import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
   6 import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
   7
   8 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
   9 class TheaterButton extends Button {
  10
  11   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
  12
  13   constructor (player: videojs.Player, options: any) {
  14     super(player, options)
  15
  16     const enabled = getStoredTheater()
  17     if (enabled === true) {
  18       this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
  19
  20       this.handleTheaterChange()
  21     }
  22
  23     this.player_.theaterEnabled = enabled
  24   }
  25
  26   buildCSSClass () {
  27     return `vjs-theater-control ${super.buildCSSClass()}`
  28   }
  29
  30   handleTheaterChange () {
  31     const theaterEnabled = this.isTheaterEnabled()
  32
  33     if (theaterEnabled) {
  34       this.controlText('Normal mode')
  35     } else {
  36       this.controlText('Theater mode')
  37     }
  38
  39     saveTheaterInStore(theaterEnabled)
  40
  41     this.player_.trigger('theaterChange', theaterEnabled)
  42   }
  43
  44   handleClick () {
  45     this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
  46
  47     this.handleTheaterChange()
  48   }
  49
  50   private isTheaterEnabled () {
  51     return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
  52   }
  53 }
  54
  55 TheaterButton.prototype.controlText_ = 'Theater mode'
  56
  57 TheaterButton.registerComponent('TheaterButton', TheaterButton)