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

   1 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
   2 import { getStoredTheater, saveTheaterInStore } from './utils'
   3
   4 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
   5 class TheaterButton extends Button {
   6
   7   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
   8
   9   constructor (player, options) {
  10     super(player, options)
  11
  12     const enabled = getStoredTheater()
  13     if (enabled === true) {
  14       this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
  15       this.handleTheaterChange()
  16     }
  17   }
  18
  19   buildCSSClass () {
  20     return `vjs-theater-control ${super.buildCSSClass()}`
  21   }
  22
  23   handleTheaterChange () {
  24     if (this.isTheaterEnabled()) {
  25       this.controlText('Normal mode')
  26     } else {
  27       this.controlText('Theater mode')
  28     }
  29
  30     saveTheaterInStore(this.isTheaterEnabled())
  31   }
  32
  33   handleClick () {
  34     this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
  35
  36     this.handleTheaterChange()
  37   }
  38
  39   private isTheaterEnabled () {
  40     return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
  41   }
  42 }
  43
  44 TheaterButton.prototype.controlText_ = 'Theater mode'
  45
  46 TheaterButton.registerComponent('TheaterButton', TheaterButton)