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

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