videojs-mobile-ui 1.1.4 → 1.2.0

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

@@ -1,13 +1,16 @@
-/*! @name videojs-mobile-ui @version 1.1.4 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0 @license MIT */
 import videojs from 'video.js';
 import window from 'global/window';
 
-var version = "1.1.4";
+var version = "1.2.0";
 
 /**
  * @file touchOverlay.js
  * Touch UI component
  */
+
+/** @import Player from 'video.js/dist/types/player' */
+
 const Component = videojs.getComponent('Component');
 const dom = videojs.dom || videojs;
 
@@ -23,7 +26,7 @@ class TouchOverlay extends Component {
   * @param  {Player} player
   *         The `Player` that this class should be attached to.
   *
-  * @param  {Object} [options]
+  * @param  {options} [options]
   *         The key/value store of player options.
   */
   constructor(player, options) {
@@ -112,7 +115,9 @@ class TouchOverlay extends Component {
     if (event.target !== this.el_) {
       return;
     }
-    event.preventDefault();
+    if (event.cancelable) {
+      event.preventDefault();
+    }
     this.taps += 1;
     if (this.taps === 1) {
       this.removeClass('skip');
@@ -138,13 +143,184 @@ class TouchOverlay extends Component {
 }
 Component.registerComponent('TouchOverlay', TouchOverlay);
 
-// Default options for the plugin.
+/** @import Player from 'video.js/dist/types/player' */
+/** @import Plugin from 'video.js/dist/types/plugin' */
+/** @import {MobileUiOptions} from './plugin' */
+
+/**
+ * Sets up swiping to enter and exit fullscreen.
+ *
+ * @this {Plugin}
+ * @param {Player} player
+ *  The player to initialise on.
+ * @param {MobileUiOptions} 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;
+
+  /**
+   * 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;
+    }
+    touchStartY = e.changedTouches[0].clientY;
+    couldBeSwiping = true;
+    player.tech_.el().style.transition = '';
+  };
+
+  /**
+   * 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})`;
+    }
+  };
+
+  /**
+   * Monitor the touch end to determine a valid swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
+   */
+  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 = '';
+  });
+};
+
+/**
+ * @typedef {Object} MobileUiOptions
+ * @property {Object} [fullscreen]
+ *  Options for fullscreen behaviours.
+ * @property {boolean} [fullscreen.enterOnRotate]
+ *  If the device is rotated, enter fullscreen.
+ *  Default `true`.
+ * @property {boolean} [fullscreen.exitOnRotate]
+ *  If the device is rotated, exit fullscreen, unless `lockOnRotate` is used.
+ *  Default `true`.
+ * @property {boolean} [fullscreen.lockOnRotate]
+ *  When going fullscreen in response to rotation (`enterOnRotate`), also lock the orientation (not supported by iOS).
+ *  Default `true`.
+ * @property {boolean} [fullscreen.lockToLandscapeOnEnter]
+ *  When fullscreen is entered by any means, lock the orientation (not supported by iOS).
+ *  Default `false`.
+ * @property {boolean} [fullscreen.swipeToFullscreen]
+ *  Swipe up to enter fullscreen.
+ *  Default `false`.
+ * @property {boolean} [fullscreen.swipeFromFullscreen]
+ *  Swipe down to exit fullscreen.
+ *  Won't do anything on iOS native fullscreen, which has its own swipe down exit gesture.
+ *  Default `false`.
+ * @property {boolean} [fullscreen.disabled]
+ *  All fullscreen functionality provided by this plugin disabled.
+ *  Default `false`.
+ * @property {Object} [touchControls]
+ *  Options for tap overlay.
+ * @property {number} [touchControls.seekSeconds]
+ *  Increment to seek in seconds.
+ *  Default `10`.
+ * @property {number} [touchControls.tapTimeout]
+ *  Timeout to consider multiple taps as double rather than two single.
+ *  Default `300`.
+ * @property {boolean} [touchControls.disableOnEnd]
+ *  Disable the touch overlay when the video ends.
+ *  Useful if an end screen overlay is used to avoid conflict.
+ *  Default `false`.
+ * @property {boolean} [touchControls.disabled]
+ *  All tap overlay functionality provided by this plugin disabled.
+ *  Default `false`.
+ * @internal
+ * @property {boolean} [forceForTesting]
+ *  Used in unit tests
+ */
+
+/** @type {MobileUiOptions} */
 const defaults = {
   fullscreen: {
     enterOnRotate: true,
     exitOnRotate: true,
     lockOnRotate: true,
     lockToLandscapeOnEnter: false,
+    swipeToFullscreen: false,
+    swipeFromFullscreen: false,
     disabled: false
   },
   touchControls: {
@@ -187,7 +363,7 @@ const getOrientation = () => {
  * @param    {Player} player
  *           A Video.js player object.
  *
- * @param    {Object} [options={}]
+ * @param    {MobileUiOptions} [options={}]
  *           A plain object containing options for the plugin.
  */
 const onPlayerReady = (player, options) => {
@@ -204,17 +380,22 @@ const onPlayerReady = (player, options) => {
   if (options.fullscreen.disabled) {
     return;
   }
+  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 (!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(e => {
-            videojs.log('Browser refused orientation lock:', e);
+          }).catch(err => {
+            videojs.log.warn('Browser refused orientation lock:', err);
           });
         }
       }
@@ -239,6 +420,7 @@ const onPlayerReady = (player, options) => {
     }
   }
   player.on('fullscreenchange', _ => {
+    player.log('fullscreenchange', player.isFullscreen(), options.fullscreen.lockToLandscapeOnEnter, getOrientation());
     if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
       screen.orientation.lock('landscape').then(() => {
         locked = true;
@@ -259,40 +441,10 @@ const onPlayerReady = (player, options) => {
 };
 
 /**
- * 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.lockToLandscapeOnEnter=false]
- *           Whether to always lock orientation to landscape on fullscreen mode
- *           Unlocked when exiting fullscreen or on 'ended'
- * @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    {MobileUiOptions} [options={}] Plugin options
  */
 const mobileUi = function (options = {}) {
   if (options.forceForTesting || videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {

package/dist/videojs-mobile-ui.js

@@ -1,4 +1,4 @@
-/*! @name videojs-mobile-ui @version 1.1.4 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0 @license MIT */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
   typeof define === 'function' && define.amd ? define(['video.js'], factory) :
@@ -9,12 +9,15 @@
 
   var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 
-  var version = "1.1.4";
+  var version = "1.2.0";
 
   /**
    * @file touchOverlay.js
    * Touch UI component
    */
+
+  /** @import Player from 'video.js/dist/types/player' */
+
   const Component = videojs__default["default"].getComponent('Component');
   const dom = videojs__default["default"].dom || videojs__default["default"];
 
@@ -30,7 +33,7 @@
     * @param  {Player} player
     *         The `Player` that this class should be attached to.
     *
-    * @param  {Object} [options]
+    * @param  {options} [options]
     *         The key/value store of player options.
     */
     constructor(player, options) {
@@ -119,7 +122,9 @@
       if (event.target !== this.el_) {
         return;
       }
-      event.preventDefault();
+      if (event.cancelable) {
+        event.preventDefault();
+      }
       this.taps += 1;
       if (this.taps === 1) {
         this.removeClass('skip');
@@ -145,13 +150,184 @@
   }
   Component.registerComponent('TouchOverlay', TouchOverlay);
 
-  // Default options for the plugin.
+  /** @import Player from 'video.js/dist/types/player' */
+  /** @import Plugin from 'video.js/dist/types/plugin' */
+  /** @import {MobileUiOptions} from './plugin' */
+
+  /**
+   * Sets up swiping to enter and exit fullscreen.
+   *
+   * @this {Plugin}
+   * @param {Player} player
+   *  The player to initialise on.
+   * @param {MobileUiOptions} 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;
+
+    /**
+     * 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;
+      }
+      touchStartY = e.changedTouches[0].clientY;
+      couldBeSwiping = true;
+      player.tech_.el().style.transition = '';
+    };
+
+    /**
+     * 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})`;
+      }
+    };
+
+    /**
+     * Monitor the touch end to determine a valid swipe
+     *
+     * @param {TouchEvent} e Triggering touch event
+     */
+    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 = '';
+    });
+  };
+
+  /**
+   * @typedef {Object} MobileUiOptions
+   * @property {Object} [fullscreen]
+   *  Options for fullscreen behaviours.
+   * @property {boolean} [fullscreen.enterOnRotate]
+   *  If the device is rotated, enter fullscreen.
+   *  Default `true`.
+   * @property {boolean} [fullscreen.exitOnRotate]
+   *  If the device is rotated, exit fullscreen, unless `lockOnRotate` is used.
+   *  Default `true`.
+   * @property {boolean} [fullscreen.lockOnRotate]
+   *  When going fullscreen in response to rotation (`enterOnRotate`), also lock the orientation (not supported by iOS).
+   *  Default `true`.
+   * @property {boolean} [fullscreen.lockToLandscapeOnEnter]
+   *  When fullscreen is entered by any means, lock the orientation (not supported by iOS).
+   *  Default `false`.
+   * @property {boolean} [fullscreen.swipeToFullscreen]
+   *  Swipe up to enter fullscreen.
+   *  Default `false`.
+   * @property {boolean} [fullscreen.swipeFromFullscreen]
+   *  Swipe down to exit fullscreen.
+   *  Won't do anything on iOS native fullscreen, which has its own swipe down exit gesture.
+   *  Default `false`.
+   * @property {boolean} [fullscreen.disabled]
+   *  All fullscreen functionality provided by this plugin disabled.
+   *  Default `false`.
+   * @property {Object} [touchControls]
+   *  Options for tap overlay.
+   * @property {number} [touchControls.seekSeconds]
+   *  Increment to seek in seconds.
+   *  Default `10`.
+   * @property {number} [touchControls.tapTimeout]
+   *  Timeout to consider multiple taps as double rather than two single.
+   *  Default `300`.
+   * @property {boolean} [touchControls.disableOnEnd]
+   *  Disable the touch overlay when the video ends.
+   *  Useful if an end screen overlay is used to avoid conflict.
+   *  Default `false`.
+   * @property {boolean} [touchControls.disabled]
+   *  All tap overlay functionality provided by this plugin disabled.
+   *  Default `false`.
+   * @internal
+   * @property {boolean} [forceForTesting]
+   *  Used in unit tests
+   */
+
+  /** @type {MobileUiOptions} */
   const defaults = {
     fullscreen: {
       enterOnRotate: true,
       exitOnRotate: true,
       lockOnRotate: true,
       lockToLandscapeOnEnter: false,
+      swipeToFullscreen: false,
+      swipeFromFullscreen: false,
       disabled: false
     },
     touchControls: {
@@ -194,7 +370,7 @@
    * @param    {Player} player
    *           A Video.js player object.
    *
-   * @param    {Object} [options={}]
+   * @param    {MobileUiOptions} [options={}]
    *           A plain object containing options for the plugin.
    */
   const onPlayerReady = (player, options) => {
@@ -211,17 +387,22 @@
     if (options.fullscreen.disabled) {
       return;
     }
+    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 (!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(e => {
-              videojs__default["default"].log('Browser refused orientation lock:', e);
+            }).catch(err => {
+              videojs__default["default"].log.warn('Browser refused orientation lock:', err);
             });
           }
         }
@@ -246,6 +427,7 @@
       }
     }
     player.on('fullscreenchange', _ => {
+      player.log('fullscreenchange', player.isFullscreen(), options.fullscreen.lockToLandscapeOnEnter, getOrientation());
       if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
         screen.orientation.lock('landscape').then(() => {
           locked = true;
@@ -266,40 +448,10 @@
   };
 
   /**
-   * 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.lockToLandscapeOnEnter=false]
-   *           Whether to always lock orientation to landscape on fullscreen mode
-   *           Unlocked when exiting fullscreen or on 'ended'
-   * @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    {MobileUiOptions} [options={}] Plugin options
    */
   const mobileUi = function (options = {}) {
     if (options.forceForTesting || videojs__default["default"].browser.IS_ANDROID || videojs__default["default"].browser.IS_IOS) {

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

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 1.1.4 @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(a){const e=((a.orientation||{}).type||a.mozOrientation||a.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.1.4",l});
+/*! @name videojs-mobile-ui @version 1.2.0 @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 s=t(e);const n=s.default.getComponent("Component"),o=s.default.dom||s.default;n.registerComponent("TouchOverlay",class extends n{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_=s.default.fn.debounce(e=>{const t=(this.taps-1)*this.seekSeconds;if(this.taps=0,t<1)return;const s=this.el_.getBoundingClientRect(),n=e.changedTouches[0].clientX-s.left;if(n<.4*s.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-t)),this.addClass("reverse");else{if(!(n>s.width-.4*s.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 o.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})}handleTap(e){e.target===this.el_&&(e.cancelable&&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 i={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,swipeToFullscreen:!1,swipeFromFullscreen:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},l=window.screen,r=()=>{if(l){const e=((l.orientation||{}).type||l.mozOrientation||l.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof window.orientation?0===window.orientation||180===window.orientation?"portrait":"landscape":"portrait"},a=(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 s=e.children_.indexOf(e.getChild("ControlBar"));e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,s)}if(t.fullscreen.disabled)return;(t.fullscreen.swipeToFullscreen||t.fullscreen.swipeFromFullscreen)&&((e,t)=>{const{swipeToFullscreen:s,swipeFromFullscreen:n}=t.fullscreen;s&&e.addClass("using-fs-swipe-up"),n&&e.addClass("using-fs-swipe-down");let o=0,i=!1;const l=t=>{const l=e.isFullscreen();!l&&!s||l&&!n?i=!1:(o=t.changedTouches[0].clientY,i=!0,e.tech_.el().style.transition="")},r=t=>{if(!i)return;const s=t.touches[0].clientY,n=o-s,l=e.isFullscreen();let r=1;!l&&n>0?(r=1+Math.min(.1,n/500),e.tech_.el().style.transform=`scale(${r})`):l&&n<0&&(r=1-Math.min(.1,Math.abs(n)/500),e.tech_.el().style.transform=`scale(${r})`)},a=t=>{if(!i)return;if(i=!1,e.tech_.el().style.transition="transform 0.3s ease-out",e.tech_.el().style.transform="scale(1)","touchcancel"===t.type)return;const s=t.changedTouches[0].clientY,n=o-s;n>30&&!e.isFullscreen()?e.requestFullscreen().catch(t=>{e.log.warn("Browser refused fullscreen",t)}):n<-30&&e.isFullscreen()&&e.exitFullscreen()};e.el().addEventListener("touchstart",l,{passive:!0}),e.el().addEventListener("touchmove",r,{passive:!0}),e.el().addEventListener("touchend",a,{passive:!0}),e.el().addEventListener("touchcancel",a,{passive:!0}),e.on("dispose",()=>{e.el().removeEventListener("touchstart",l,{passive:!0}),e.el().removeEventListener("touchmove",r,{passive:!0}),e.el().removeEventListener("touchend",a,{passive:!0}),e.el().removeEventListener("touchcancel",a,{passive:!0}),e.tech_.el().style.transform="",e.tech_.el().style.transition=""})})(e,t);let n=!1;const o=()=>{const o=r();"landscape"===o&&t.fullscreen.enterOnRotate?e.paused()||e.isFullscreen()||(e.requestFullscreen().catch(t=>{e.log.warn("Browser refused fullscreen request:",t)}),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&l.orientation&&l.orientation.lock&&l.orientation.lock("landscape").then(()=>{n=!0}).catch(e=>{s.default.log.warn("Browser refused orientation lock:",e)})):"portrait"===o&&t.fullscreen.exitOnRotate&&!n&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(s.default.browser.IS_IOS?(window.addEventListener("orientationchange",o),e.on("dispose",()=>{window.removeEventListener("orientationchange",o)})):l.orientation&&(l.orientation.onchange=o,e.on("dispose",()=>{l.orientation.onchange=null}))),e.on("fullscreenchange",o=>{e.log("fullscreenchange",e.isFullscreen(),t.fullscreen.lockToLandscapeOnEnter,r()),e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===r()?l.orientation.lock("landscape").then(()=>{n=!0}).catch(e=>{s.default.log("Browser refused orientation lock:",e)}):!e.isFullscreen()&&n&&(l.orientation.unlock(),n=!1)}),e.on("ended",e=>{!0===n&&(l.orientation.unlock(),n=!1)})},c=function(e={}){(e.forceForTesting||s.default.browser.IS_ANDROID||s.default.browser.IS_IOS)&&this.ready(()=>{a(this,s.default.obj.merge(i,e))})};return s.default.registerPlugin("mobileUi",c),c.VERSION="1.2.0",c});