videojs-mobile-ui 0.7.0 → 0.9.0-beta.3

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

@@ -1,21 +1,34 @@
-/*! @name videojs-mobile-ui @version 0.7.0 @license MIT */
+/*! @name videojs-mobile-ui @version 0.9.0-beta.3 @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 = "0.9.0-beta.3";
+
+/**
+ * @file touchOverlay.js
+ * Touch UI component
+ */
+
+/** @import Player from 'video.js/dist/types/player' */
+
+const Component = videojs.getComponent('Component');
+const dom = videojs.dom || videojs;
+const debounce = (callback, wait) => {
+  let timeoutId = null;
+  return (...args) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback.apply(null, args);
+    }, wait);
+  };
+};
 
-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 +38,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_ = 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 +119,166 @@ 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);
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    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
-   *
+   * Enables touch handler
    */
-  ;
-
-  _proto.handleSingleTap = function handleSingleTap(event) {
-    this.removeClass('skip');
-    this.toggleClass('show-play-toggle');
+  enable() {
+    this.firstTapCaptured = false;
+    this.on('touchend', this.handleTap);
   }
+
   /**
-   * Seeks by configured number of seconds if left or right part of video double tapped
-   *
-   * @param {Event} event
-   *        The touch event
-   *
+   * Disables touch handler
    */
-  ;
-
-  _proto.handleDoubleTap = function handleDoubleTap(event) {
-    var _this3 = this;
+  disable() {
+    this.off('touchend', this.handleTap);
+  }
+}
+Component.registerComponent('TouchOverlay', TouchOverlay);
 
-    var rect = this.el_.getBoundingClientRect();
-    var x = event.changedTouches[0].clientX - rect.left; // Check if double tap is in left or right area
+/**
+ * Sets up swiping to enter and exit fullscreen.
+ *
+ * @param {Object} player
+ *  The player to initialise on.
+ * @param {Object} pluginOptions
+ *  The options used by the mobile ui plugin.
+ */
+const initSwipe = (player, pluginOptions) => {
+  const {
+    swipeToFullscreen,
+    swipeFromFullscreen
+  } = pluginOptions.fullscreen;
+  if (swipeToFullscreen) {
+    player.addClass('using-fs-swipe-up');
+  }
+  if (swipeFromFullscreen) {
+    player.addClass('using-fs-swipe-down');
+  }
+  let touchStartY = 0;
+  let couldBeSwiping = false;
+  const swipeThreshold = 30;
 
-    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 {
+  /**
+   * Monitor the possible start of a swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
+   */
+  const onStart = e => {
+    const isFullscreen = player.isFullscreen();
+    if (!isFullscreen && !swipeToFullscreen || isFullscreen && !swipeFromFullscreen) {
+      couldBeSwiping = false;
       return;
-    } // Remove play toggle if showing
-
-
-    this.removeClass('show-play-toggle'); // Remove and readd class to trigger animation
+    }
+    touchStartY = e.changedTouches[0].clientY;
+    couldBeSwiping = true;
+    player.tech_.el().style.transition = '';
+  };
 
-    this.removeClass('skip');
-    window.requestAnimationFrame(function () {
-      _this3.addClass('skip');
-    });
-  }
   /**
-   * Enables touch handler
+   * Monitor the movement of a swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
    */
-  ;
+  const onMove = e => {
+    if (!couldBeSwiping) {
+      return;
+    }
+    const currentY = e.touches[0].clientY;
+    const deltaY = touchStartY - currentY;
+    const isFullscreen = player.isFullscreen();
+    let scale = 1;
+    if (!isFullscreen && deltaY > 0) {
+      // Swiping up to enter fullscreen: Zoom in (Max 1.1)
+      scale = 1 + Math.min(0.1, deltaY / 500);
+      player.tech_.el().style.transform = `scale(${scale})`;
+    } else if (isFullscreen && deltaY < 0) {
+      // Swiping down to exit fullscreen: Zoom out (Min 0.9)
+      scale = 1 - Math.min(0.1, Math.abs(deltaY) / 500);
+      player.tech_.el().style.transform = `scale(${scale})`;
+    }
+  };
 
-  _proto.enable = function enable() {
-    this.firstTapCaptured = false;
-    this.on('touchend', this.handleTap);
-  }
   /**
-   * Disables touch handler
+   * Monitor the touch end to determine a valid swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
    */
-  ;
-
-  _proto.disable = function disable() {
-    this.off('touchend', this.handleTap);
+  const onEnd = e => {
+    if (!couldBeSwiping) {
+      return;
+    }
+    couldBeSwiping = false;
+    player.tech_.el().style.transition = 'transform 0.3s ease-out';
+    player.tech_.el().style.transform = 'scale(1)';
+    if (e.type === 'touchcancel') {
+      return;
+    }
+    const touchEndY = e.changedTouches[0].clientY;
+    const deltaY = touchStartY - touchEndY;
+    if (deltaY > swipeThreshold && !player.isFullscreen()) {
+      player.requestFullscreen().catch(err => {
+        player.log.warn('Browser refused fullscreen', err);
+      });
+    } else if (deltaY < -swipeThreshold && player.isFullscreen()) {
+      player.exitFullscreen();
+    }
   };
+  player.el().addEventListener('touchstart', onStart, {
+    passive: true
+  });
+  player.el().addEventListener('touchmove', onMove, {
+    passive: true
+  });
+  player.el().addEventListener('touchend', onEnd, {
+    passive: true
+  });
+  player.el().addEventListener('touchcancel', onEnd, {
+    passive: true
+  });
+  player.on('dispose', () => {
+    player.el().removeEventListener('touchstart', onStart, {
+      passive: true
+    });
+    player.el().removeEventListener('touchmove', onMove, {
+      passive: true
+    });
+    player.el().removeEventListener('touchend', onEnd, {
+      passive: true
+    });
+    player.el().removeEventListener('touchcancel', onEnd, {
+      passive: true
+    });
+    player.tech_.el().style.transform = '';
+    player.tech_.el().style.transition = '';
+  });
+};
 
-  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,
+    swipeToFullscreen: false,
+    swipeFromFullscreen: false,
     disabled: false
   },
   touchControls: {
@@ -185,37 +288,33 @@ var defaults = {
     disabled: false
   }
 };
-var screen = window.screen;
+const screen = window.screen;
+const registerPlugin = videojs.registerPlugin || videojs.plugin;
+
 /**
  * Gets 'portrait' or 'lanscape' from the two orientation APIs
  *
  * @return {string} orientation
  */
-
-var getOrientation = function getOrientation() {
+const getOrientation = () => {
   if (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 = ((screen.orientation || {}).type || screen.mozOrientation || 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
  *
@@ -223,63 +322,49 @@ var registerPlugin = videojs.registerPlugin || videojs.plugin;
  * @param    {Player} player
  *           A Video.js player object.
  *
- * @param    {Object} [options={}]
+ * @param    {MobileUiOptions} [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
+    // Insert before the control bar
+    let controlBarIdx;
+    const versionParts = videojs.VERSION.split('.');
+    const major = parseInt(versionParts[0], 10);
+    const 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'));
     }
-
     player.touchOverlay = player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
   }
-
   if (options.fullscreen.disabled) {
     return;
   }
-
-  var locked = false;
-
-  var rotationHandler = function rotationHandler() {
-    var currentOrientation = getOrientation();
-
+  if (options.fullscreen.swipeToFullscreen || options.fullscreen.swipeFromFullscreen) {
+    initSwipe(player, options);
+  }
+  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 (!player.paused() && !player.isFullscreen()) {
+        player.requestFullscreen().catch(err => {
+          player.log.warn('Browser refused fullscreen request:', err);
+        });
+        if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
+          screen.orientation.lock('landscape').then(() => {
             locked = true;
-          }).catch(function (e) {
-            videojs.log('Browser refused orientation lock:', e);
+          }).catch(err => {
+            videojs.log.warn('Browser refused orientation lock:', err);
           });
         }
       }
@@ -289,90 +374,58 @@ 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.
- *
- * Adds a monile UI for player control, and fullscreen orientation control
+ * Adds a mobile UI for player control, and fullscreen orientation control
  *
  * @function mobileUi
- * @param    {Object} [options={}]
- *           Plugin options.
- * @param    {boolean} [options.forceForTesting=false]
- *           Enables the display regardless of user agent, for testing purposes
- * @param    {Object} [options.fullscreen={}]
- *           Fullscreen options.
- * @param    {boolean} [options.fullscreen.disabled=false]
- *           If true no fullscreen handling except the *deprecated* iOS fullwindow hack
- * @param    {boolean} [options.fullscreen.enterOnRotate=true]
- *           Whether to go fullscreen when rotating to landscape
- * @param    {boolean} [options.fullscreen.exitOnRotate=true]
- *           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.iOS=false]
- *           Deprecated: Whether to disable iOS's native fullscreen so controls can work
- * @param    {Object} [options.touchControls={}]
- *           Touch UI options.
- * @param    {boolean} [options.touchControls.disabled=false]
- *           If true no touch controls are added.
- * @param    {int} [options.touchControls.seekSeconds=10]
- *           Number of seconds to seek on double-tap
- * @param    {int} [options.touchControls.tapTimeout=300]
- *           Interval in ms to be considered a doubletap
- * @param    {boolean} [options.touchControls.disableOnEnd=false]
- *           Whether to disable when the video ends (e.g., if there is an endscreen)
- *           Never shows if the endscreen plugin is present
+ * @param    {Object} [options={}] Plugin options
  */
-
-
-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.mergeOptions(defaults, options));
     });
   }
-}; // Register the plugin with video.js.
-
+};
 
-registerPlugin('mobileUi', mobileUi); // Include the version number.
+// Register the plugin with video.js.
+registerPlugin('mobileUi', mobileUi);
 
+// Include the version number.
 mobileUi.VERSION = version;
 
-export default mobileUi;
+export { mobileUi as default };