feat: Add an option to prevent clicks from toggling playback (#239)

videojs · Jun 15, 2021 · 7dc2684 · 7dc2684
1 parent 9293eb4
commit 7dc2684
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,7 @@ Maintenance Status: Stable
   - [`debug`](#debug)
   - [`omnitone`](#omnitone)
   - [`omnitoneOptions`](#omnitoneoptions)
+  - [`disableTogglePlay`](#disableTogglePlay)
 - [Credits](#credits)
 - [Support](#support)
 
@@ -276,6 +277,12 @@ Please be aware of, the Omnitone library is not included in the build files.
 
 Default options for the Omnitone library. Please check available options on https://github.com/GoogleChrome/omnitone
 
+### `disableTogglePlay`
+
+> type: `boolean`, default: `false`
+
+Feature to disable the togglePlay manually.
+This functionality is useful in live events so that users cannot stop the live, but still have a controlBar available.
 
 ## Credits ##
 

diff --git a/examples/disable-togglePlay.html b/examples/disable-togglePlay.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo disabled tooglePlay</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" crossorigin="anonymous" controls playsinline>
+    <source src="https://storage.googleapis.com/omnitone-demo.google.com.a.appspot.com/fuerza-imprevista-1080p-h264-aac.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '360';
+
+      // AUTO is the default and looks at mediainfo
+      var vr = window.vr = player.vr({projection: 'AUTO', disableTogglePlay: true, debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/src/canvas-player-controls.js b/src/canvas-player-controls.js
@@ -10,11 +10,12 @@ import videojs from 'video.js';
  *    show the control bar. Moving around the scene in the canvas should not.
  */
 class CanvasPlayerControls extends videojs.EventTarget {
-  constructor(player, canvas) {
+  constructor(player, canvas, options) {
     super();
 
     this.player = player;
     this.canvas = canvas;
+    this.options = options;
 
     this.onMoveEnd = videojs.bind(this, this.onMoveEnd);
     this.onMoveStart = videojs.bind(this, this.onMoveStart);
@@ -61,7 +62,7 @@ class CanvasPlayerControls extends videojs.EventTarget {
     // if the player does not have a controlbar or
     // the move was a mouse click but not left click do not
     // toggle play.
-    if (!this.player.controls() || (e.type === 'mousedown' && !videojs.dom.isSingleLeftClick(e))) {
+    if (this.options.disableTogglePlay || !this.player.controls() || (e.type === 'mousedown' && !videojs.dom.isSingleLeftClick(e))) {
       this.shouldTogglePlay = false;
       return;
     }

diff --git a/src/plugin.js b/src/plugin.js
@@ -22,7 +22,8 @@ const defaults = {
   forceCardboard: false,
   omnitoneOptions: {},
   projection: 'AUTO',
-  sphereDetail: 32
+  sphereDetail: 32,
+  disableTogglePlay: false
 };
 
 const errors = {
@@ -730,7 +731,7 @@ void main() {
           }
 
           this.controls3d = new OrbitOrientationContols(options);
-          this.canvasPlayerControls = new CanvasPlayerControls(this.player_, this.renderedCanvas);
+          this.canvasPlayerControls = new CanvasPlayerControls(this.player_, this.renderedCanvas, this.options_);
         }
 
         this.animationFrameId_ = this.requestAnimationFrame(this.animate_);