videojs-mobile-ui 1.2.0 → 1.2.1

package/docs/api/index.html

@@ -63,8 +63,8 @@
     <div class="container-overview">
     
         
-            <div class="description">touchOverlay.js
-Touch UI component</div>
+            <div class="description"><p>touchOverlay.js
+Touch UI component</p></div>
         
 
         
@@ -144,13 +144,13 @@ Touch UI component</div>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#Component">Component</a></li><li><a href="global.html#defaults">defaults</a></li><li><a href="global.html#getOrientation">getOrientation</a></li><li><a href="global.html#initSwipe">initSwipe</a></li><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Fri Jan 23 2026 14:03:20 GMT+0100 (Mitteleuropäische Normalzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 02 2021 09:43:56 GMT+0100 (CET)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/api/plugin.js.html

@@ -29,102 +29,41 @@
             <pre class="prettyprint source linenums"><code>import videojs from 'video.js';
 import {version as VERSION} from '../package.json';
 import './touchOverlay.js';
-import initSwipe from './swipeFullscreen.js';
 import window from 'global/window';
 
-/**
- * @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.
- *  Default true.
- * @property {boolean} [fullscreen.lockOnRotate]
- *  If the device is rotated, lock the orientation (not supported by iOS).
- *  Default true.
- * @property {boolean} [fullscreen.lockToLandscapeOnEnter]
- *  When fullscreen is entered, 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 tap on the button after display, in ms. ???
- *  Default 300.
- * @property {boolean} [touchControls.disableOnEnd]
- *  Disable the touch overlay when the video ends.
- *  Useful if an end screen overlay is used.
- *  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} */
+// Default options for the plugin.
 const defaults = {
   fullscreen: {
     enterOnRotate: true,
     exitOnRotate: true,
     lockOnRotate: true,
-    lockToLandscapeOnEnter: false,
-    swipeToFullscreen: false,
-    swipeFromFullscreen: false,
-    disabled: false
+    iOS: false
   },
   touchControls: {
     seekSeconds: 10,
     tapTimeout: 300,
-    disableOnEnd: false,
-    disabled: false
+    disableOnEnd: false
   }
 };
 
 const screen = window.screen;
 
-/**
- * Gets 'portrait' or 'lanscape' from the two orientation APIs
- *
- * @return {string} orientation
- */
-const getOrientation = () => {
-  if (screen) {
-    // Prefer the string over angle, as 0° can be landscape on some tablets
-    const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
-
-    if (orientationString === 'landscape' || orientationString === 'portrait') {
-      return orientationString;
-    }
-  }
-
-  // iOS only supports window.orientation
+const angle = () => {
+  // iOS
   if (typeof window.orientation === 'number') {
-    if (window.orientation === 0 || window.orientation === 180) {
-      return 'portrait';
-    }
-    return 'landscape';
+    return window.orientation;
   }
-
-  return 'portrait';
+  // Android
+  if (screen &amp;&amp; screen.orientation &amp;&amp; screen.orientation.angle) {
+    return window.orientation;
+  }
+  videojs.log('angle unknown');
+  return 0;
 };
 
+// Cross-compatibility for Video.js 5 and 6.
+const registerPlugin = videojs.registerPlugin || videojs.plugin;
+
 /**
  * Add UI and event listeners
  *
@@ -132,86 +71,77 @@ const getOrientation = () => {
  * @param    {Player} player
  *           A Video.js player object.
  *
- * @param    {MobileUiOptions} [options={}]
+ * @param    {Object} [options={}]
  *           A plain object containing options for the plugin.
  */
 const onPlayerReady = (player, options) => {
   player.addClass('vjs-mobile-ui');
 
-  if (!options.touchControls.disabled) {
-
-    if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
-      player.addClass('vjs-mobile-ui-disable-end');
-    }
-
-    // Insert before the control bar
-    const controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
-
-    player.touchOverlay = player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
+  if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
+    player.addClass('vjs-mobile-ui-disable-end');
   }
 
-  if (options.fullscreen.disabled) {
-    return;
+  if (options.fullscreen.iOS &amp;&amp;
+      videojs.browser.IS_IOS &amp;&amp; videojs.browser.IOS_VERSION > 9 &amp;&amp;
+      !player.el_.ownerDocument.querySelector('.bc-iframe')) {
+    player.tech_.el_.setAttribute('playsinline', 'playsinline');
+    player.tech_.supportsFullScreen = function() {
+      return false;
+    };
   }
 
-  if (options.fullscreen.swipeToFullscreen || options.fullscreen.swipeFromFullscreen) {
-    initSwipe(player, options);
+  // 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 &lt; 7.7.0 doesn't account for precedding components that don't have elements
+  if (major &lt; 7 || (major === 7 &amp;&amp; minor &lt; 7)) {
+    controlBarIdx = Array.prototype.indexOf.call(
+      player.el_.children,
+      player.getChild('ControlBar').el_
+    );
+  } else {
+    controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
   }
 
+  player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
+
   let locked = false;
 
   const rotationHandler = () => {
-    const currentOrientation = getOrientation();
+    const currentAngle = angle();
 
-    if (currentOrientation === 'landscape' &amp;&amp; options.fullscreen.enterOnRotate) {
+    if ((currentAngle === 90 || currentAngle === 270 || currentAngle === -90) &amp;&amp;
+        options.enterOnRotate) {
       if (player.paused() === false) {
         player.requestFullscreen();
-        if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) &amp;&amp;
+        if (options.fullscreen.lockOnRotate &amp;&amp;
             screen.orientation &amp;&amp; screen.orientation.lock) {
           screen.orientation.lock('landscape').then(() => {
             locked = true;
-          }).catch((e) => {
-            videojs.log('Browser refused orientation lock:', e);
+          }).catch(() => {
+            videojs.log('orientation lock not allowed');
           });
         }
       }
-    } else if (currentOrientation === 'portrait' &amp;&amp; options.fullscreen.exitOnRotate &amp;&amp; !locked) {
+    }
+
+    if ((currentAngle === 0 || currentAngle === 180) &amp;&amp; options.exitOnRotate) {
       if (player.isFullscreen()) {
         player.exitFullscreen();
       }
     }
   };
 
-  if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
-    if (videojs.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', () => {
-        screen.orientation.onchange = null;
-      });
-    }
+  if (videojs.browser.IS_IOS) {
+    window.addEventListener('orientationchange', rotationHandler);
+  } else if (screen.orientation) {
+    // addEventListener('orientationchange') is not a user interaction on Android
+    screen.orientation.onchange = rotationHandler;
   }
 
-  player.on('fullscreenchange', _ => {
-    if (player.isFullscreen() &amp;&amp; options.fullscreen.lockToLandscapeOnEnter &amp;&amp; getOrientation() === 'portrait') {
-      screen.orientation.lock('landscape').then(()=>{
-        locked = true;
-      }).catch((e) => {
-        videojs.log('Browser refused orientation lock:', e);
-      });
-    } else if (!player.isFullscreen() &amp;&amp; locked) {
-      screen.orientation.unlock();
-      locked = false;
-    }
-  });
-
   player.on('ended', _ => {
     if (locked === true) {
       screen.orientation.unlock();
@@ -221,21 +151,46 @@ const onPlayerReady = (player, options) => {
 };
 
 /**
- * Adds a mobile UI for player control, and fullscreen orientation control
+ * A video.js plugin.
+ *
+ * Adds a monile UI for player control, and fullscreen orientation control
  *
  * @function mobileUi
- * @param    {MobileUiOptions} [options={}]
+ * @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.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]
+ *           Whether to disable iOS's native fullscreen so controls can work
+ * @param    {Object} [options.touchControls={}]
+ *           Touch UI options.
+ * @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
  */
 const mobileUi = function(options = {}) {
   if (options.forceForTesting || videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
     this.ready(() => {
-      onPlayerReady(this, videojs.obj.merge(defaults, options));
+      onPlayerReady(this, videojs.mergeOptions(defaults, options));
     });
   }
 };
 
 // Register the plugin with video.js.
-videojs.registerPlugin('mobileUi', mobileUi);
+registerPlugin('mobileUi', mobileUi);
 
 // Include the version number.
 mobileUi.VERSION = VERSION;
@@ -251,13 +206,13 @@ export default mobileUi;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#Component">Component</a></li><li><a href="global.html#defaults">defaults</a></li><li><a href="global.html#getOrientation">getOrientation</a></li><li><a href="global.html#initSwipe">initSwipe</a></li><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Fri Jan 23 2026 14:03:20 GMT+0100 (Mitteleuropäische Normalzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 02 2021 09:43:56 GMT+0100 (CET)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/api/scripts/linenumber.js

@@ -1,12 +1,12 @@
 /*global document */
-(() => {
-    const source = document.getElementsByClassName('prettyprint source linenums');
-    let i = 0;
-    let lineNumber = 0;
-    let lineId;
-    let lines;
-    let totalLines;
-    let anchorHash;
+(function() {
+    var source = document.getElementsByClassName('prettyprint source linenums');
+    var i = 0;
+    var lineNumber = 0;
+    var lineId;
+    var lines;
+    var totalLines;
+    var anchorHash;
 
     if (source && source[0]) {
         anchorHash = document.location.hash.substring(1);
@@ -15,7 +15,7 @@
 
         for (; i < totalLines; i++) {
             lineNumber++;
-            lineId = `line${lineNumber}`;
+            lineId = 'line' + lineNumber;
             lines[i].id = lineId;
             if (lineId === anchorHash) {
                 lines[i].className += ' selected';

package/docs/api/styles/jsdoc-default.css

@@ -273,7 +273,7 @@ tr > th:last-child { border-right: 1px solid #ddd; }
     margin: 0;
 }
 
-.source
+.prettyprint
 {
     border: 1px solid #ddd;
     width: 80%;
@@ -284,7 +284,7 @@ tr > th:last-child { border-right: 1px solid #ddd; }
     width: inherit;
 }
 
-.source code
+.prettyprint code
 {
     font-size: 100%;
     line-height: 18px;

package/docs/api/touchOverlay.js.html

@@ -34,8 +34,6 @@
 import videojs from 'video.js';
 import window from 'global/window';
 
-/** @import Player from 'video.js/dist/types/player' */
-
 const Component = videojs.getComponent('Component');
 const dom = videojs.dom || videojs;
 
@@ -52,7 +50,7 @@ class TouchOverlay extends Component {
   * @param  {Player} player
   *         The `Player` that this class should be attached to.
   *
-  * @param  {options} [options]
+  * @param  {Object} [options]
   *         The key/value store of player options.
   */
   constructor(player, options) {
@@ -60,7 +58,6 @@ class TouchOverlay extends Component {
 
     this.seekSeconds = options.seekSeconds;
     this.tapTimeout = options.tapTimeout;
-    this.taps = 0;
 
     // Add play toggle overlay
     this.addChild('playToggle', {});
@@ -75,46 +72,6 @@ class TouchOverlay extends Component {
       this.player_.options_.inactivityTimeout = 5000;
     }
 
-    /**
-     * Debounced tap handler.
-     * Seeks number of (taps - 1) * configured seconds to skip.
-     * One tap is a non-op
-     *
-     * @param {Event} event
-     */
-    this.handleTaps_ = videojs.fn.debounce(event => {
-      const increment = (this.taps - 1) * this.seekSeconds;
-
-      this.taps = 0;
-      if (increment < 1) {
-        return;
-      }
-
-      const rect = this.el_.getBoundingClientRect();
-      const x = event.changedTouches[0].clientX - rect.left;
-
-      // Check if double tap is in left or right area
-      if (x < rect.width * 0.4) {
-        this.player_.currentTime(Math.max(0, this.player_.currentTime() - increment));
-        this.addClass('reverse');
-      } else if (x > rect.width - (rect.width * 0.4)) {
-        this.player_.currentTime(Math.min(this.player_.duration(), this.player_.currentTime() + increment));
-        this.removeClass('reverse');
-      } else {
-        return;
-      }
-
-      // Remove play toggle if showing
-      this.removeClass('show-play-toggle');
-
-      // 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();
   }
 
@@ -147,16 +104,67 @@ class TouchOverlay extends Component {
       return;
     }
 
-    if (event.cancelable) {
-      event.preventDefault();
+    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(() => {
+        this.firstTapCaptured = false;
+        this.handleSingleTap(event);
+      }, this.tapTimeout);
     }
+  }
 
-    this.taps += 1;
-    if (this.taps === 1) {
-      this.removeClass('skip');
-      this.toggleClass('show-play-toggle');
+  /**
+   * Toggles display of play toggle
+   *
+   * @param {Event} event
+   *        The touch event
+   *
+   */
+  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
+   *
+   */
+  handleDoubleTap(event) {
+    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() - 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;
     }
-    this.handleTaps_(event);
+
+    // Remove play toggle if showing
+    this.removeClass('show-play-toggle');
+
+    // Remove and readd class to trigger animation
+    this.removeClass('skip');
+    window.requestAnimationFrame(() => {
+      this.addClass('skip');
+    });
   }
 
   /**
@@ -188,13 +196,13 @@ export default TouchOverlay;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#Component">Component</a></li><li><a href="global.html#defaults">defaults</a></li><li><a href="global.html#getOrientation">getOrientation</a></li><li><a href="global.html#initSwipe">initSwipe</a></li><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Fri Jan 23 2026 14:03:20 GMT+0100 (Mitteleuropäische Normalzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 02 2021 09:43:56 GMT+0100 (CET)
 </footer>
 
 <script> prettyPrint(); </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-mobile-ui",
-  "version": "1.2.0",
+  "version": "1.2.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",