diff options
Diffstat (limited to 'client/src/assets/player/videojs-components/theater-button.ts')
-rw-r--r-- | client/src/assets/player/videojs-components/theater-button.ts | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/client/src/assets/player/videojs-components/theater-button.ts b/client/src/assets/player/videojs-components/theater-button.ts new file mode 100644 index 000000000..1e11a9546 --- /dev/null +++ b/client/src/assets/player/videojs-components/theater-button.ts | |||
@@ -0,0 +1,50 @@ | |||
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) | ||