From 9af2accee68082e4e1160a4e4a7036451262be02 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Mar 2022 10:27:05 +0100 Subject: Reorganize videojs components --- .../assets/player/control-bar/theater-button.ts | 53 ++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 client/src/assets/player/control-bar/theater-button.ts (limited to 'client/src/assets/player/control-bar/theater-button.ts') diff --git a/client/src/assets/player/control-bar/theater-button.ts b/client/src/assets/player/control-bar/theater-button.ts new file mode 100644 index 000000000..f862ee224 --- /dev/null +++ b/client/src/assets/player/control-bar/theater-button.ts @@ -0,0 +1,53 @@ +import videojs from 'video.js' +import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage' + +const Button = videojs.getComponent('Button') +class TheaterButton extends Button { + + private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled' + + constructor (player: videojs.Player, options: videojs.ComponentOptions) { + super(player, options) + + const enabled = getStoredTheater() + if (enabled === true) { + this.player().addClass(TheaterButton.THEATER_MODE_CLASS) + + this.handleTheaterChange() + } + + this.controlText('Theater mode') + + this.player().theaterEnabled = enabled + } + + buildCSSClass () { + return `vjs-theater-control ${super.buildCSSClass()}` + } + + handleTheaterChange () { + const theaterEnabled = this.isTheaterEnabled() + + if (theaterEnabled) { + this.controlText('Normal mode') + } else { + this.controlText('Theater mode') + } + + saveTheaterInStore(theaterEnabled) + + this.player_.trigger('theaterChange', theaterEnabled) + } + + handleClick () { + this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS) + + this.handleTheaterChange() + } + + private isTheaterEnabled () { + return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS) + } +} + +videojs.registerComponent('TheaterButton', TheaterButton) -- cgit v1.2.3