videojs-mobile-ui 0.7.0 → 1.0.0

package/dist/videojs-mobile-ui.es.js

@@ -1,21 +1,22 @@
-/*! @name videojs-mobile-ui @version 0.7.0 @license MIT */
+/*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
 import videojs from 'video.js';
-import _inheritsLoose from '@babel/runtime/helpers/inheritsLoose';
 import window from 'global/window';
 
-var version = "0.7.0";
+var version = "1.0.0";
+
+/**
+ * @file touchOverlay.js
+ * Touch UI component
+ */
+const Component = videojs.getComponent('Component');
+const dom = videojs.dom || videojs;
 
-var Component = videojs.getComponent('Component');
-var dom = videojs.dom || videojs;
 /**
  * The `TouchOverlay` is an overlay to capture tap events.
  *
  * @extends Component
  */
-
-var TouchOverlay = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(TouchOverlay, _Component);
-
+class TouchOverlay extends Component {
   /**
   * Creates an instance of the this class.
   *
@@ -25,46 +26,80 @@ var TouchOverlay = /*#__PURE__*/function (_Component) {
   * @param  {Object} [options]
   *         The key/value store of player options.
   */
-  function TouchOverlay(player, options) {
-    var _this;
-
-    _this = _Component.call(this, player, options) || this;
-    _this.seekSeconds = options.seekSeconds;
-    _this.tapTimeout = options.tapTimeout; // Add play toggle overlay
-
-    _this.addChild('playToggle', {}); // Clear overlay when playback starts or with control fade
-
-
-    player.on(['playing', 'userinactive'], function (e) {
-      _this.removeClass('show-play-toggle');
-    }); // A 0 inactivity timeout won't work here
+  constructor(player, options) {
+    super(player, options);
+    this.seekSeconds = options.seekSeconds;
+    this.tapTimeout = options.tapTimeout;
+    this.taps = 0;
+
+    // Add play toggle overlay
+    this.addChild('playToggle', {});
+
+    // Clear overlay when playback starts or with control fade
+    player.on(['playing', 'userinactive'], e => {
+      this.removeClass('show-play-toggle');
+    });
 
-    if (_this.player_.options_.inactivityTimeout === 0) {
-      _this.player_.options_.inactivityTimeout = 5000;
+    // A 0 inactivity timeout won't work here
+    if (this.player_.options_.inactivityTimeout === 0) {
+      this.player_.options_.inactivityTimeout = 5000;
     }
 
-    _this.enable();
+    /**
+     * Debounced tap handler.
+     * Seeks number of (taps - 1) * configured seconds to skip.
+     * One tap is a non-op
+     *
+     * @param {Event} event
+     */
+    this.handleTaps_ = videojs.fn.debounce(event => {
+      const increment = (this.taps - 1) * this.seekSeconds;
+      this.taps = 0;
+      if (increment < 1) {
+        return;
+      }
+      const rect = this.el_.getBoundingClientRect();
+      const x = event.changedTouches[0].clientX - rect.left;
+
+      // Check if double tap is in left or right area
+      if (x < rect.width * 0.4) {
+        this.player_.currentTime(Math.max(0, this.player_.currentTime() - increment));
+        this.addClass('reverse');
+      } else if (x > rect.width - rect.width * 0.4) {
+        this.player_.currentTime(Math.min(this.player_.duration(), this.player_.currentTime() + increment));
+        this.removeClass('reverse');
+      } else {
+        return;
+      }
+
+      // Remove play toggle if showing
+      this.removeClass('show-play-toggle');
 
-    return _this;
+      // Remove and readd class to trigger animation
+      this.setAttribute('data-skip-text', `${increment} ${this.localize('seconds')}`);
+      this.removeClass('skip');
+      window.requestAnimationFrame(() => {
+        this.addClass('skip');
+      });
+    }, this.tapTimeout);
+    this.enable();
   }
+
   /**
    * Builds the DOM element.
    *
    * @return {Element}
    *         The DOM element.
    */
-
-
-  var _proto = TouchOverlay.prototype;
-
-  _proto.createEl = function createEl() {
-    var el = dom.createEl('div', {
+  createEl() {
+    const el = dom.createEl('div', {
       className: 'vjs-touch-overlay',
       // Touch overlay is not tabbable.
       tabIndex: -1
     });
     return el;
   }
+
   /**
   * Debounces to either handle a delayed single tap, or a double tap
    *
@@ -72,110 +107,44 @@ var TouchOverlay = /*#__PURE__*/function (_Component) {
    *        The touch event
    *
    */
-  ;
-
-  _proto.handleTap = function handleTap(event) {
-    var _this2 = this;
-
+  handleTap(event) {
     // Don't handle taps on the play button
     if (event.target !== this.el_) {
       return;
     }
-
     event.preventDefault();
-
-    if (this.firstTapCaptured) {
-      this.firstTapCaptured = false;
-
-      if (this.timeout) {
-        window.clearTimeout(this.timeout);
-      }
-
-      this.handleDoubleTap(event);
-    } else {
-      this.firstTapCaptured = true;
-      this.timeout = window.setTimeout(function () {
-        _this2.firstTapCaptured = false;
-
-        _this2.handleSingleTap(event);
-      }, this.tapTimeout);
+    this.taps += 1;
+    if (this.taps === 1) {
+      this.removeClass('skip');
+      this.toggleClass('show-play-toggle');
     }
+    this.handleTaps_(event);
   }
-  /**
-   * Toggles display of play toggle
-   *
-   * @param {Event} event
-   *        The touch event
-   *
-   */
-  ;
-
-  _proto.handleSingleTap = function handleSingleTap(event) {
-    this.removeClass('skip');
-    this.toggleClass('show-play-toggle');
-  }
-  /**
-   * Seeks by configured number of seconds if left or right part of video double tapped
-   *
-   * @param {Event} event
-   *        The touch event
-   *
-   */
-  ;
-
-  _proto.handleDoubleTap = function handleDoubleTap(event) {
-    var _this3 = this;
-
-    var rect = this.el_.getBoundingClientRect();
-    var x = event.changedTouches[0].clientX - rect.left; // Check if double tap is in left or right area
 
-    if (x < rect.width * 0.4) {
-      this.player_.currentTime(Math.max(0, this.player_.currentTime() - this.seekSeconds));
-      this.addClass('reverse');
-    } else if (x > rect.width - rect.width * 0.4) {
-      this.player_.currentTime(Math.min(this.player_.duration(), this.player_.currentTime() + this.seekSeconds));
-      this.removeClass('reverse');
-    } else {
-      return;
-    } // Remove play toggle if showing
-
-
-    this.removeClass('show-play-toggle'); // Remove and readd class to trigger animation
-
-    this.removeClass('skip');
-    window.requestAnimationFrame(function () {
-      _this3.addClass('skip');
-    });
-  }
   /**
    * Enables touch handler
    */
-  ;
-
-  _proto.enable = function enable() {
+  enable() {
     this.firstTapCaptured = false;
     this.on('touchend', this.handleTap);
   }
+
   /**
    * Disables touch handler
    */
-  ;
-
-  _proto.disable = function disable() {
+  disable() {
     this.off('touchend', this.handleTap);
-  };
-
-  return TouchOverlay;
-}(Component);
-
+  }
+}
 Component.registerComponent('TouchOverlay', TouchOverlay);
 
-var defaults = {
+// Default options for the plugin.
+const defaults = {
   fullscreen: {
     enterOnRotate: true,
     exitOnRotate: true,
     lockOnRotate: true,
-    iOS: false,
+    lockToLandscapeOnEnter: false,
     disabled: false
   },
   touchControls: {
@@ -185,37 +154,32 @@ var defaults = {
     disabled: false
   }
 };
-var screen = window.screen;
+const screen = window.screen;
+
 /**
  * Gets 'portrait' or 'lanscape' from the two orientation APIs
  *
  * @return {string} orientation
  */
-
-var getOrientation = function getOrientation() {
-  if (screen) {
+const getOrientation = () => {
+  if (window.screen) {
     // Prefer the string over angle, as 0° can be landscape on some tablets
-    var orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
-
+    const orientationString = ((window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation || '').split('-')[0];
     if (orientationString === 'landscape' || orientationString === 'portrait') {
       return orientationString;
     }
-  } // iOS only supports window.orientation
-
+  }
 
+  // iOS only supports window.orientation
   if (typeof window.orientation === 'number') {
     if (window.orientation === 0 || window.orientation === 180) {
       return 'portrait';
     }
-
     return 'landscape';
   }
-
   return 'portrait';
-}; // Cross-compatibility for Video.js 5 and 6.
-
+};
 
-var registerPlugin = videojs.registerPlugin || videojs.plugin;
 /**
  * Add UI and event listeners
  *
@@ -226,59 +190,30 @@ var registerPlugin = videojs.registerPlugin || videojs.plugin;
  * @param    {Object} [options={}]
  *           A plain object containing options for the plugin.
  */
-
-var onPlayerReady = function onPlayerReady(player, options) {
+const onPlayerReady = (player, options) => {
   player.addClass('vjs-mobile-ui');
-
-  if (options.fullscreen.iOS) {
-    videojs.log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
-
-    if (videojs.browser.IS_IOS && videojs.browser.IOS_VERSION > 9 && !player.el_.ownerDocument.querySelector('.bc-iframe')) {
-      player.tech_.el_.setAttribute('playsinline', 'playsinline');
-
-      player.tech_.supportsFullScreen = function () {
-        return false;
-      };
-    }
-  }
-
   if (!options.touchControls.disabled) {
     if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
       player.addClass('vjs-mobile-ui-disable-end');
-    } // Insert before the control bar
-
-
-    var controlBarIdx;
-    var versionParts = videojs.VERSION.split('.');
-    var major = parseInt(versionParts[0], 10);
-    var minor = parseInt(versionParts[1], 10); // Video.js < 7.7.0 doesn't account for precedding components that don't have elements
-
-    if (major < 7 || major === 7 && minor < 7) {
-      controlBarIdx = Array.prototype.indexOf.call(player.el_.children, player.getChild('ControlBar').el_);
-    } else {
-      controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
     }
 
+    // Insert before the control bar
+    const controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
     player.touchOverlay = player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
   }
-
   if (options.fullscreen.disabled) {
     return;
   }
-
-  var locked = false;
-
-  var rotationHandler = function rotationHandler() {
-    var currentOrientation = getOrientation();
-
+  let locked = false;
+  const rotationHandler = () => {
+    const currentOrientation = getOrientation();
     if (currentOrientation === 'landscape' && options.fullscreen.enterOnRotate) {
       if (player.paused() === false) {
         player.requestFullscreen();
-
-        if (options.fullscreen.lockOnRotate && screen.orientation && screen.orientation.lock) {
-          screen.orientation.lock('landscape').then(function () {
+        if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
+          screen.orientation.lock('landscape').then(() => {
             locked = true;
-          }).catch(function (e) {
+          }).catch(e => {
             videojs.log('Browser refused orientation lock:', e);
           });
         }
@@ -289,36 +224,40 @@ var onPlayerReady = function onPlayerReady(player, options) {
       }
     }
   };
-
   if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
     if (videojs.browser.IS_IOS) {
       window.addEventListener('orientationchange', rotationHandler);
-      player.on('dispose', function () {
+      player.on('dispose', () => {
         window.removeEventListener('orientationchange', rotationHandler);
       });
     } else if (screen.orientation) {
       // addEventListener('orientationchange') is not a user interaction on Android
       screen.orientation.onchange = rotationHandler;
-      player.on('dispose', function () {
+      player.on('dispose', () => {
         screen.orientation.onchange = null;
       });
     }
-
-    player.on('fullscreenchange', function (_) {
-      if (!player.isFullscreen() && locked) {
-        screen.orientation.unlock();
-        locked = false;
-      }
-    });
   }
-
-  player.on('ended', function (_) {
+  player.on('fullscreenchange', _ => {
+    if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
+      screen.orientation.lock('landscape').then(() => {
+        locked = true;
+      }).catch(e => {
+        videojs.log('Browser refused orientation lock:', e);
+      });
+    } else if (!player.isFullscreen() && locked) {
+      screen.orientation.unlock();
+      locked = false;
+    }
+  });
+  player.on('ended', _ => {
     if (locked === true) {
       screen.orientation.unlock();
       locked = false;
     }
   });
 };
+
 /**
  * A video.js plugin.
  *
@@ -339,6 +278,9 @@ var onPlayerReady = function onPlayerReady(player, options) {
  *           Whether to leave fullscreen when rotating to portrait (if not locked)
  * @param    {boolean} [options.fullscreen.lockOnRotate=true]
  *           Whether to lock orientation when rotating to landscape
+ *           Unlocked when exiting fullscreen or on 'ended
+ * @param    {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
+ *           Whether to always lock orientation to landscape on fullscreen mode
  *           Unlocked when exiting fullscreen or on 'ended'
  * @param    {boolean} [options.fullscreen.iOS=false]
  *           Deprecated: Whether to disable iOS's native fullscreen so controls can work
@@ -354,25 +296,18 @@ var onPlayerReady = function onPlayerReady(player, options) {
  *           Whether to disable when the video ends (e.g., if there is an endscreen)
  *           Never shows if the endscreen plugin is present
  */
-
-
-var mobileUi = function mobileUi(options) {
-  var _this = this;
-
-  if (options === void 0) {
-    options = {};
-  }
-
+const mobileUi = function (options = {}) {
   if (options.forceForTesting || videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
-    this.ready(function () {
-      onPlayerReady(_this, videojs.mergeOptions(defaults, options));
+    this.ready(() => {
+      onPlayerReady(this, videojs.obj.merge(defaults, options));
     });
   }
-}; // Register the plugin with video.js.
-
+};
 
-registerPlugin('mobileUi', mobileUi); // Include the version number.
+// Register the plugin with video.js.
+videojs.registerPlugin('mobileUi', mobileUi);
 
+// Include the version number.
 mobileUi.VERSION = version;
 
 export default mobileUi;