Add theatre mode

1 files changed, 46 insertions, 0 deletions

diff --git a/client/src/assets/player/theater-button.ts b/client/src/assets/player/theater-button.ts
new file mode 100644
index 000000000..1d330e08f
--- /dev/null
+++ b/client/src/assets/player/theater-button.ts
@@ -0,0 +1,46 @@
+import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { getStoredTheater, saveTheaterInStore } from './utils'
+
+const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+class TheaterButton extends Button {
+
+  private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
+
+  constructor (player, options) {
+    super(player, options)
+
+    const enabled = getStoredTheater()
+    if (enabled === true) {
+      this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
+      this.handleTheaterChange()
+    }
+  }
+
+  buildCSSClass () {
+    return `vjs-theater-control ${super.buildCSSClass()}`
+  }
+
+  handleTheaterChange () {
+    if (this.isTheaterEnabled()) {
+      this.controlText('Normal mode')
+    } else {
+      this.controlText('Theater mode')
+    }
+
+    saveTheaterInStore(this.isTheaterEnabled())
+  }
+
+  handleClick () {
+    this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
+
+    this.handleTheaterChange()
+  }
+
+  private isTheaterEnabled () {
+    return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
+  }
+}
+
+TheaterButton.prototype.controlText_ = 'Theater mode'
+
+TheaterButton.registerComponent('TheaterButton', TheaterButton)