videojs-mobile-ui 0.8.0 → 1.0.1

package/README.md

@@ -34,9 +34,12 @@ Fullscreen control:
 ## Installation
 
 ```sh
-npm install --save videojs-mobile-ui
+npm install video.js
+npm install videojs-mobile-ui
 ```
 
+Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js versions are not supported. 0.7.0 supports video.js 7.x.
+
 ## Plugin Options
 
 ### Default options
@@ -66,7 +69,6 @@ npm install --save videojs-mobile-ui
 - *fullscreen.exitOnRotate* `boolean` Whether to leave fullscreen when rotating to portrait (if not locked)
 - *fullscreen.lockOnRotate* `boolean` Whether to lock to fullscreen when rotating to landscape
 - *fullscreen.lockToLandscapeOnEnter* `boolean` Whether to lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
-- *fullscreen.iOS* `boolean` Whether to use fake fullscreen on iOS (needed for controls to work)
 - *fullscreen.disabled* `boolean` If true no fullscreen handling except the *deprecated* iOS fullwindow hack
 - *touchControls.seekSeconds* `int` Seconds to seek when double-tapping
 - *touchControls.tapTimeout* `int` Milliseconds to consider a double-tap

package/dist/lang/de.js

@@ -0,0 +1,3 @@
+videojs.addLanguage('de', {
+  "seconds": "Sekunden"
+});

package/dist/lang/en.js

@@ -1,3 +1,3 @@
 videojs.addLanguage('en', {
-  "Include your own strings in JSON files.": "Include your own strings in JSON files."
+  "seconds": "seconds"
 });

package/dist/lang/it.js

@@ -0,0 +1,3 @@
+videojs.addLanguage('it', {
+  "seconds": "secondi"
+});

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

@@ -1,29 +1,29 @@
-/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
+/*! @name videojs-mobile-ui @version 1.0.1 @license MIT */
 'use strict';
 
 var videojs = require('video.js');
-var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var window = require('global/window');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
-var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
 
-var version = "0.8.0";
+var version = "1.0.1";
+
+/**
+ * @file touchOverlay.js
+ * Touch UI component
+ */
+const Component = videojs__default["default"].getComponent('Component');
+const dom = videojs__default["default"].dom || videojs__default["default"];
 
-var Component = videojs__default['default'].getComponent('Component');
-var dom = videojs__default['default'].dom || videojs__default['default'];
 /**
  * The `TouchOverlay` is an overlay to capture tap events.
  *
  * @extends Component
  */
-
-var TouchOverlay = /*#__PURE__*/function (_Component) {
-  _inheritsLoose__default['default'](TouchOverlay, _Component);
-
+class TouchOverlay extends Component {
   /**
   * Creates an instance of the this class.
   *
@@ -33,46 +33,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__default["default"].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;
+      }
 
-    return _this;
+      // Remove play toggle if showing
+      this.removeClass('show-play-toggle');
+
+      // Remove and readd class to trigger animation
+      this.setAttribute('data-skip-text', `${increment} ${this.localize('seconds')}`);
+      this.removeClass('skip');
+      window__default["default"].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
    *
@@ -80,111 +114,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__default['default'].clearTimeout(this.timeout);
-      }
-
-      this.handleDoubleTap(event);
-    } else {
-      this.firstTapCaptured = true;
-      this.timeout = window__default['default'].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__default['default'].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,
     lockToLandscapeOnEnter: false,
-    iOS: false,
     disabled: false
   },
   touchControls: {
@@ -194,37 +161,32 @@ var defaults = {
     disabled: false
   }
 };
-var screen = window__default['default'].screen;
+const screen = window__default["default"].screen;
+
 /**
  * Gets 'portrait' or 'lanscape' from the two orientation APIs
  *
  * @return {string} orientation
  */
-
-var getOrientation = function getOrientation() {
-  if (screen) {
+const getOrientation = () => {
+  if (window__default["default"].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__default["default"].screen.orientation || {}).type || window__default["default"].screen.mozOrientation || window__default["default"].screen.msOrientation || '').split('-')[0];
     if (orientationString === 'landscape' || orientationString === 'portrait') {
       return orientationString;
     }
-  } // iOS only supports window.orientation
-
+  }
 
-  if (typeof window__default['default'].orientation === 'number') {
-    if (window__default['default'].orientation === 0 || window__default['default'].orientation === 180) {
+  // iOS only supports window.orientation
+  if (typeof window__default["default"].orientation === 'number') {
+    if (window__default["default"].orientation === 0 || window__default["default"].orientation === 180) {
       return 'portrait';
     }
-
     return 'landscape';
   }
-
   return 'portrait';
-}; // Cross-compatibility for Video.js 5 and 6.
-
+};
 
-var registerPlugin = videojs__default['default'].registerPlugin || videojs__default['default'].plugin;
 /**
  * Add UI and event listeners
  *
@@ -235,60 +197,31 @@ var registerPlugin = videojs__default['default'].registerPlugin || videojs__defa
  * @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__default['default'].log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
-
-    if (videojs__default['default'].browser.IS_IOS && videojs__default['default'].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__default['default'].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 || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
-          screen.orientation.lock('landscape').then(function () {
+          screen.orientation.lock('landscape').then(() => {
             locked = true;
-          }).catch(function (e) {
-            videojs__default['default'].log('Browser refused orientation lock:', e);
+          }).catch(e => {
+            videojs__default["default"].log('Browser refused orientation lock:', e);
           });
         }
       }
@@ -298,41 +231,40 @@ var onPlayerReady = function onPlayerReady(player, options) {
       }
     }
   };
-
   if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
-    if (videojs__default['default'].browser.IS_IOS) {
-      window__default['default'].addEventListener('orientationchange', rotationHandler);
-      player.on('dispose', function () {
-        window__default['default'].removeEventListener('orientationchange', rotationHandler);
+    if (videojs__default["default"].browser.IS_IOS) {
+      window__default["default"].addEventListener('orientationchange', rotationHandler);
+      player.on('dispose', () => {
+        window__default["default"].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 (_) {
+  player.on('fullscreenchange', _ => {
     if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
-      screen.orientation.lock('landscape').then(function () {
+      screen.orientation.lock('landscape').then(() => {
         locked = true;
-      }).catch(function (e) {
-        videojs__default['default'].log('Browser refused orientation lock:', e);
+      }).catch(e => {
+        videojs__default["default"].log('Browser refused orientation lock:', e);
       });
     } else if (!player.isFullscreen() && locked) {
       screen.orientation.unlock();
       locked = false;
     }
   });
-  player.on('ended', function (_) {
+  player.on('ended', _ => {
     if (locked === true) {
       screen.orientation.unlock();
       locked = false;
     }
   });
 };
+
 /**
  * A video.js plugin.
  *
@@ -371,25 +303,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 = {};
-  }
-
-  if (options.forceForTesting || videojs__default['default'].browser.IS_ANDROID || videojs__default['default'].browser.IS_IOS) {
-    this.ready(function () {
-      onPlayerReady(_this, videojs__default['default'].mergeOptions(defaults, options));
+const mobileUi = function (options = {}) {
+  if (options.forceForTesting || videojs__default["default"].browser.IS_ANDROID || videojs__default["default"].browser.IS_IOS) {
+    this.ready(() => {
+      onPlayerReady(this, videojs__default["default"].obj.merge(defaults, options));
     });
   }
-}; // Register the plugin with video.js.
-
+};
 
-registerPlugin('mobileUi', mobileUi); // Include the version number.
+// Register the plugin with video.js.
+videojs__default["default"].registerPlugin('mobileUi', mobileUi);
 
+// Include the version number.
 mobileUi.VERSION = version;
 
 module.exports = mobileUi;

package/dist/videojs-mobile-ui.css

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
-@-webkit-keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}@keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}.video-js.vjs-has-started .vjs-touch-overlay{position:absolute;pointer-events:auto;top:0}.video-js .vjs-touch-overlay{display:block;width:100%;height:100%;pointer-events:none}.video-js .vjs-touch-overlay.skip{opacity:0;-webkit-animation:fadeAndScale .6s linear;animation:fadeAndScale .6s linear;background-repeat:no-repeat;background-position:80% center;background-size:10%;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay.skip.reverse{background-position:20% center;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;width:30%;height:80%;pointer-events:none;opacity:0;transition:opacity .3s ease}.video-js .vjs-touch-overlay .vjs-play-control .vjs-icon-placeholder::before{content:'';background-size:60%;background-position:center center;background-repeat:no-repeat;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-paused .vjs-icon-placeholder::before{content:'';background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-ended .vjs-icon-placeholder::before{content:'';background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>')}.video-js .vjs-touch-overlay.show-play-toggle .vjs-play-control{opacity:1;pointer-events:auto}.video-js.vjs-mobile-ui-disable-end.vjs-ended .vjs-touch-overlay{display:none}
+/*! @name videojs-mobile-ui @version 1.0.1 @license MIT */
+@keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}.video-js.vjs-has-started .vjs-touch-overlay{position:absolute;pointer-events:auto;top:0}.video-js .vjs-touch-overlay{display:block;width:100%;height:100%;pointer-events:none}.video-js .vjs-touch-overlay.skip{opacity:0;animation:fadeAndScale .8s linear;background-repeat:no-repeat;background-position:80% center;background-size:10%;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay.skip:after{content:attr(data-skip-text);position:absolute;top:60%;left:70%}.video-js .vjs-touch-overlay.skip.reverse{background-position:20% center;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay.skip.reverse:after{right:70%;left:unset}.video-js .vjs-touch-overlay .vjs-play-control{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;width:30%;height:80%;pointer-events:none;opacity:0;transition:opacity .3s ease}.video-js .vjs-touch-overlay .vjs-play-control .vjs-icon-placeholder::before{content:'';background-size:60%;background-position:center center;background-repeat:no-repeat;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-paused .vjs-icon-placeholder::before{content:'';background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-ended .vjs-icon-placeholder::before{content:'';background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>')}.video-js .vjs-touch-overlay.show-play-toggle .vjs-play-control{opacity:1;pointer-events:auto}.video-js.vjs-mobile-ui-disable-end.vjs-ended .vjs-touch-overlay{display:none}