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       this.handleTheaterChange()
  20     }
  21   }
  22
  23   buildCSSClass () {
  24     return `vjs-theater-control ${super.buildCSSClass()}`
  25   }
  26
  27   handleTheaterChange () {
  28     if (this.isTheaterEnabled()) {
  29       this.controlText('Normal mode')
  30     } else {
  31       this.controlText('Theater mode')
  32     }
  33
  34     saveTheaterInStore(this.isTheaterEnabled())
  35   }
  36
  37   handleClick () {
  38     this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
  39
  40     this.handleTheaterChange()
  41   }
  42
  43   private isTheaterEnabled () {
  44     return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
  45   }
  46 }
  47
  48 TheaterButton.prototype.controlText_ = 'Theater mode'
  49
  50 TheaterButton.registerComponent('TheaterButton', TheaterButton)