Add theatre mode

5 files changed, 99 insertions, 12 deletions

diff --git a/client/src/assets/player/images/theater.svg b/client/src/assets/player/images/theater.svg
new file mode 100644
index 000000000..d7086c214
--- /dev/null
+++ b/client/src/assets/player/images/theater.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>theater</title>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-576.000000, -159.000000)" stroke="#fff" stroke-width="2">
+            <g id="33" transform="translate(576.000000, 159.000000)">
+                <rect id="Rectangle-433" x="1" y="6" width="22" height="12"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index eb75091de..afc8e0881 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -10,6 +10,7 @@ import './settings-menu-button'
 import './webtorrent-info-button'
 import './peertube-videojs-plugin'
 import './peertube-load-progress-bar'
+import './theater-button'
 import { videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
@@ -28,6 +29,7 @@ function getVideojsOptions (options: {
   peertubeLink: boolean,
   poster: string,
   startTime: number
+  theaterMode: boolean
 }) {
   const videojsOptions = {
     controls: true,
@@ -63,6 +65,7 @@ function getVideojsOptions (options: {
 
 function getControlBarChildren (options: {
   peertubeLink: boolean
+  theaterMode: boolean
 }) {
   const children = {
     'playToggle': {},
@@ -105,6 +108,12 @@ function getControlBarChildren (options: {
     })
   }
 
+  if (options.theaterMode === true) {
+    Object.assign(children, {
+      'theaterButton': {}
+    })
+  }
+
   Object.assign(children, {
     'fullscreenToggle': {}
   })
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 47288c842..d3ae7b137 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -55,6 +55,7 @@ class PeerTubePlugin extends Plugin {
   private player: any
   private currentVideoFile: VideoFile
   private torrent: WebTorrent.Torrent
+  private fakeRenderer
   private autoResolution = true
   private isAutoResolutionObservation = false
 
@@ -123,6 +124,8 @@ class PeerTubePlugin extends Plugin {
 
     // Don't need to destroy renderer, video player will be destroyed
     this.flushVideoFile(this.currentVideoFile, false)
+
+    this.destroyFakeRenderer()
   }
 
   getCurrentResolutionId () {
@@ -185,7 +188,6 @@ class PeerTubePlugin extends Plugin {
     console.log('Adding ' + magnetOrTorrentUrl + '.')
 
     const oldTorrent = this.torrent
-    let fakeRenderer
     const torrentOptions = {
       store: (chunkLength, storeOpts) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
         max: 100
@@ -205,7 +207,7 @@ class PeerTubePlugin extends Plugin {
         if (options.delay) {
           const fakeVideoElem = document.createElement('video')
           renderVideo(torrent.files[0], fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
-            fakeRenderer = renderer
+            this.fakeRenderer = renderer
 
             if (err) console.error('Cannot render new torrent in fake video element.', err)
 
@@ -217,16 +219,7 @@ class PeerTubePlugin extends Plugin {
 
       // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
       this.addTorrentDelay = setTimeout(() => {
-        if (fakeRenderer) {
-          if (fakeRenderer.destroy) {
-            try {
-              fakeRenderer.destroy()
-            } catch (err) {
-              console.log('Cannot destroy correctly fake renderer.', err)
-            }
-          }
-          fakeRenderer = undefined
-        }
+        this.destroyFakeRenderer()
 
         const paused = this.player.paused()
 
@@ -567,6 +560,19 @@ class PeerTubePlugin extends Plugin {
     return this.videoFiles[Math.floor(this.videoFiles.length / 2)]
   }
 
+  private destroyFakeRenderer () {
+    if (this.fakeRenderer) {
+      if (this.fakeRenderer.destroy) {
+        try {
+          this.fakeRenderer.destroy()
+        } catch (err) {
+          console.log('Cannot destroy correctly fake renderer.', err)
+        }
+      }
+      this.fakeRenderer = undefined
+    }
+  }
+
   // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
   private initSmoothProgressBar () {
     const SeekBar = videojsUntyped.getComponent('SeekBar')
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)
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 4eaf53720..b7cd40aa2 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -51,6 +51,13 @@ function getAverageBandwidth () {
   return undefined
 }
 
+function getStoredTheater () {
+  const value = getLocalStorage('theater-enabled')
+  if (value !== null && value !== undefined) return value === 'true'
+
+  return undefined
+}
+
 function saveVolumeInStore (value: number) {
   return setLocalStorage('volume', value.toString())
 }
@@ -59,6 +66,10 @@ function saveMuteInStore (value: boolean) {
   return setLocalStorage('mute', value.toString())
 }
 
+function saveTheaterInStore (enabled: boolean) {
+  return setLocalStorage('theater-enabled', enabled.toString())
+}
+
 function saveAverageBandwidth (value: number) {
   return setLocalStorage('average-bandwidth', value.toString())
 }
@@ -133,6 +144,8 @@ export {
   videoFileMaxByResolution,
   videoFileMinByResolution,
   copyToClipboard,
+  getStoredTheater,
+  saveTheaterInStore,
   isMobile,
   bytes
 }