videojs-mobile-ui 0.8.0 → 1.0.1

package/dist/videojs-mobile-ui.js

@@ -1,68 +1,29 @@
-/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
+/*! @name videojs-mobile-ui @version 1.0.1 @license MIT */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js'), require('global/window')) :
-  typeof define === 'function' && define.amd ? define(['video.js', 'global/window'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs, global.window));
-}(this, (function (videojs, window) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
+  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs));
+})(this, (function (videojs) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
-  var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
 
-  var version = "0.8.0";
+  var version = "1.0.1";
 
-  function createCommonjsModule(fn, basedir, module) {
-  	return module = {
-  	  path: basedir,
-  	  exports: {},
-  	  require: function (path, base) {
-        return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
-      }
-  	}, fn(module, module.exports), module.exports;
-  }
-
-  function commonjsRequire () {
-  	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-  }
-
-  var setPrototypeOf = createCommonjsModule(function (module) {
-    function _setPrototypeOf(o, p) {
-      module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-      };
-
-      module.exports["default"] = module.exports, module.exports.__esModule = true;
-      return _setPrototypeOf(o, p);
-    }
-
-    module.exports = _setPrototypeOf;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
-  });
-
-  var inheritsLoose = createCommonjsModule(function (module) {
-    function _inheritsLoose(subClass, superClass) {
-      subClass.prototype = Object.create(superClass.prototype);
-      subClass.prototype.constructor = subClass;
-      setPrototypeOf(subClass, superClass);
-    }
-
-    module.exports = _inheritsLoose;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
-  });
+  /**
+   * @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(TouchOverlay, _Component);
-
+  class TouchOverlay extends Component {
     /**
     * Creates an instance of the this class.
     *
@@ -72,46 +33,80 @@
     * @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;
+        }
+
+        // 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
      *
@@ -119,111 +114,44 @@
      *        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: {
@@ -233,37 +161,32 @@
       disabled: false
     }
   };
-  var screen = window__default['default'].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
-
+    }
 
-    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.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__default['default'].registerPlugin || videojs__default['default'].plugin;
   /**
    * Add UI and event listeners
    *
@@ -274,60 +197,31 @@
    * @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);
             });
           }
         }
@@ -337,41 +231,40 @@
         }
       }
     };
-
     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.addEventListener('orientationchange', rotationHandler);
+        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 (_) {
+    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.
    *
@@ -410,27 +303,20 @@
    *           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;
 
   return mobileUi;
 
-})));
+}));

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

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs,e.window)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),i=n(t);function r(e,t,n){return e(n={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&n.path)}},n.exports),n.exports}var a=r((function(e){function t(n,o){return e.exports=t=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},e.exports.default=e.exports,e.exports.__esModule=!0,t(n,o)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})),l=r((function(e){e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)},e.exports.default=e.exports,e.exports.__esModule=!0})),s=o.default.getComponent("Component"),u=o.default.dom||o.default,c=function(e){function t(t,n){var o;return(o=e.call(this,t,n)||this).seekSeconds=n.seekSeconds,o.tapTimeout=n.tapTimeout,o.addChild("playToggle",{}),t.on(["playing","userinactive"],(function(e){o.removeClass("show-play-toggle")})),0===o.player_.options_.inactivityTimeout&&(o.player_.options_.inactivityTimeout=5e3),o.enable(),o}l(t,e);var n=t.prototype;return n.createEl=function(){return u.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})},n.handleTap=function(e){var t=this;e.target===this.el_&&(e.preventDefault(),this.firstTapCaptured?(this.firstTapCaptured=!1,this.timeout&&i.default.clearTimeout(this.timeout),this.handleDoubleTap(e)):(this.firstTapCaptured=!0,this.timeout=i.default.setTimeout((function(){t.firstTapCaptured=!1,t.handleSingleTap(e)}),this.tapTimeout)))},n.handleSingleTap=function(e){this.removeClass("skip"),this.toggleClass("show-play-toggle")},n.handleDoubleTap=function(e){var t=this,n=this.el_.getBoundingClientRect(),o=e.changedTouches[0].clientX-n.left;if(o<.4*n.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-this.seekSeconds)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+this.seekSeconds)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.removeClass("skip"),i.default.requestAnimationFrame((function(){t.addClass("skip")}))},n.enable=function(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)},n.disable=function(){this.off("touchend",this.handleTap)},t}(s);s.registerComponent("TouchOverlay",c);var d={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,iOS:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},f=i.default.screen,p=function(){if(f){var e=((f.orientation||{}).type||f.mozOrientation||f.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof i.default.orientation?0===i.default.orientation||180===i.default.orientation?"portrait":"landscape":"portrait"},h=o.default.registerPlugin||o.default.plugin,m=function(e){var t=this;void 0===e&&(e={}),(e.forceForTesting||o.default.browser.IS_ANDROID||o.default.browser.IS_IOS)&&this.ready((function(){!function(e,t){if(e.addClass("vjs-mobile-ui"),t.fullscreen.iOS&&(o.default.log.warn("videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead."),o.default.browser.IS_IOS&&o.default.browser.IOS_VERSION>9&&!e.el_.ownerDocument.querySelector(".bc-iframe")&&(e.tech_.el_.setAttribute("playsinline","playsinline"),e.tech_.supportsFullScreen=function(){return!1})),!t.touchControls.disabled){var n;(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");var r=o.default.VERSION.split("."),a=parseInt(r[0],10),l=parseInt(r[1],10);n=a<7||7===a&&l<7?Array.prototype.indexOf.call(e.el_.children,e.getChild("ControlBar").el_):e.children_.indexOf(e.getChild("ControlBar")),e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,n)}if(!t.fullscreen.disabled){var s=!1,u=function(){var n=p();"landscape"===n&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&f.orientation&&f.orientation.lock&&f.orientation.lock("landscape").then((function(){s=!0})).catch((function(e){o.default.log("Browser refused orientation lock:",e)}))):"portrait"===n&&t.fullscreen.exitOnRotate&&!s&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(o.default.browser.IS_IOS?(i.default.addEventListener("orientationchange",u),e.on("dispose",(function(){i.default.removeEventListener("orientationchange",u)}))):f.orientation&&(f.orientation.onchange=u,e.on("dispose",(function(){f.orientation.onchange=null})))),e.on("fullscreenchange",(function(n){e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===p()?f.orientation.lock("landscape").then((function(){s=!0})).catch((function(e){o.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&s&&(f.orientation.unlock(),s=!1)})),e.on("ended",(function(e){!0===s&&(f.orientation.unlock(),s=!1)}))}}(t,o.default.mergeOptions(d,e))}))};return h("mobileUi",m),m.VERSION="0.8.0",m}));
+/*! @name videojs-mobile-ui @version 1.0.1 @license MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const o=n.default.getComponent("Component"),i=n.default.dom||n.default;o.registerComponent("TouchOverlay",class extends o{constructor(e,t){super(e,t),this.seekSeconds=t.seekSeconds,this.tapTimeout=t.tapTimeout,this.taps=0,this.addChild("playToggle",{}),e.on(["playing","userinactive"],(e=>{this.removeClass("show-play-toggle")})),0===this.player_.options_.inactivityTimeout&&(this.player_.options_.inactivityTimeout=5e3),this.handleTaps_=n.default.fn.debounce((e=>{const t=(this.taps-1)*this.seekSeconds;if(this.taps=0,t<1)return;const n=this.el_.getBoundingClientRect(),o=e.changedTouches[0].clientX-n.left;if(o<.4*n.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-t)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+t)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.setAttribute("data-skip-text",`${t} ${this.localize("seconds")}`),this.removeClass("skip"),window.requestAnimationFrame((()=>{this.addClass("skip")}))}),this.tapTimeout),this.enable()}createEl(){return i.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})}handleTap(e){e.target===this.el_&&(e.preventDefault(),this.taps+=1,1===this.taps&&(this.removeClass("skip"),this.toggleClass("show-play-toggle")),this.handleTaps_(e))}enable(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)}disable(){this.off("touchend",this.handleTap)}});const s={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},a=window.screen,r=()=>{if(window.screen){const e=((window.screen.orientation||{}).type||window.screen.mozOrientation||window.screen.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof window.orientation?0===window.orientation||180===window.orientation?"portrait":"landscape":"portrait"},l=function(e={}){(e.forceForTesting||n.default.browser.IS_ANDROID||n.default.browser.IS_IOS)&&this.ready((()=>{((e,t)=>{if(e.addClass("vjs-mobile-ui"),!t.touchControls.disabled){(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");const n=e.children_.indexOf(e.getChild("ControlBar"));e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,n)}if(t.fullscreen.disabled)return;let o=!1;const i=()=>{const i=r();"landscape"===i&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&a.orientation&&a.orientation.lock&&a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)}))):"portrait"===i&&t.fullscreen.exitOnRotate&&!o&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(n.default.browser.IS_IOS?(window.addEventListener("orientationchange",i),e.on("dispose",(()=>{window.removeEventListener("orientationchange",i)}))):a.orientation&&(a.orientation.onchange=i,e.on("dispose",(()=>{a.orientation.onchange=null})))),e.on("fullscreenchange",(i=>{e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===r()?a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&o&&(a.orientation.unlock(),o=!1)})),e.on("ended",(e=>{!0===o&&(a.orientation.unlock(),o=!1)}))})(this,n.default.obj.merge(s,e))}))};return n.default.registerPlugin("mobileUi",l),l.VERSION="1.0.1",l}));

package/index.html

@@ -24,8 +24,7 @@
   controls
   playsinline
   >
-  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
-  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm" />
+  <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegurl" />
 </video-js>
 <ul>
   <li><a href="test/">Run unit tests in browser.</a></li>
@@ -63,10 +62,6 @@
       id="alwaysLockToLandscape"
       />alwaysLockToLandscape
     </li>
-    <li>
-      <input type="checkbox" data-section="fullscreen" id="iOS" />iOS
-      <b>Deprecated</b>
-    </li>
     <li>
       <input
       type="checkbox"
@@ -119,7 +114,6 @@
         exitOnRotate: true,
         lockOnRotate: true,
         alwaysLockToLandscape: false,
-        iOS: false,
         disabled: false,
       },
       touchControls: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-mobile-ui",
-  "version": "0.8.0",
+  "version": "1.0.1",
   "description": "Mobile tap controls and fullscreen on rotate for Video.js",
   "main": "dist/videojs-mobile-ui.cjs.js",
   "module": "dist/videojs-mobile-ui.es.js",
@@ -31,7 +31,7 @@
     "watch": "npm-run-all -p watch:*",
     "watch:css": "npm run build:css -- -w",
     "watch:js": "npm run build:js -- -w",
-    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose"
+    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose --skip-es-check"
   },
   "engines": {
     "node": ">=14",
@@ -71,24 +71,24 @@
     "global": "^4.4.0"
   },
   "peerDependencies": {
-    "video.js": "^6 || ^7"
+    "video.js": "^8"
   },
   "devDependencies": {
     "@babel/runtime": "^7.14.0",
-    "@videojs/generator-helpers": "~2.0.2",
-    "husky": "^6.0.0",
-    "jsdoc": "^3.6.7",
+    "@videojs/generator-helpers": "~3.2.0",
+    "husky": "^8.0.1",
+    "jsdoc": "^4.0.0",
     "karma": "^6.3.2",
     "postcss": "^8.2.13",
     "postcss-cli": "^8.3.1",
     "rollup": "^2.46.0",
-    "sinon": "^9.1.0",
-    "video.js": "^6 || ^7",
+    "sinon": "^15.0.0",
+    "video.js": "^8.0.0",
     "videojs-generate-karma-config": "~8.0.0",
     "videojs-generate-postcss-config": "~3.0.0",
-    "videojs-generate-rollup-config": "~6.2.0",
+    "videojs-generate-rollup-config": "^7.0.0",
     "videojs-generator-verify": "^4.1.0",
     "videojs-languages": "^2.0.0",
-    "videojs-standard": "^8.0.4"
+    "videojs-standard": "^9.0.1"
   }
 }

package/src/plugin.css

@@ -30,16 +30,28 @@
 
     &.skip {
       opacity: 0;
-      animation: fadeAndScale 0.6s linear;
+      animation: fadeAndScale 0.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>');
+
+      &:after {
+        content: attr(data-skip-text);
+        position: absolute;
+        top: 60%;
+        left: 70%;
+      }
     }
 
     &.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>');
+
+      &:after {
+        right: 70%;
+        left: unset;
+      }
     }
 
     .vjs-play-control {