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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-mobile-ui",
-  "version": "0.8.0",
+  "version": "0.9.0-beta.3",
   "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",
@@ -74,21 +74,21 @@
     "video.js": "^6 || ^7"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.14.0",
-    "@videojs/generator-helpers": "~2.0.2",
-    "husky": "^6.0.0",
-    "jsdoc": "^3.6.7",
-    "karma": "^6.3.2",
-    "postcss": "^8.2.13",
+    "@babel/runtime": "^7.28.6",
+    "@videojs/generator-helpers": "~3.2.0",
+    "husky": "^8.0.3",
+    "jsdoc": "^4.0.5",
+    "karma": "^6.4.4",
+    "postcss": "^8.5.6",
     "postcss-cli": "^8.3.1",
-    "rollup": "^2.46.0",
-    "sinon": "^9.1.0",
-    "video.js": "^6 || ^7",
+    "rollup": "^2.79.2",
+    "sinon": "^14.0.1",
+    "video.js": "^7.21.7",
     "videojs-generate-karma-config": "~8.0.0",
-    "videojs-generate-postcss-config": "~3.0.0",
-    "videojs-generate-rollup-config": "~6.2.0",
-    "videojs-generator-verify": "^4.1.0",
+    "videojs-generate-postcss-config": "^3.0.1",
+    "videojs-generate-rollup-config": "^7.0.2",
+    "videojs-generator-verify": "^4.1.3",
     "videojs-languages": "^2.0.0",
-    "videojs-standard": "^8.0.4"
+    "videojs-standard": "^9.1.0"
   }
 }

package/src/plugin.css

@@ -14,9 +14,9 @@
   }
 }
 
-.video-js {
+.video-js.vjs-mobile-ui {
 
-  &.vjs-has-started .vjs-touch-overlay {
+  &.vjs-has-started:not(.vjs-ad-playing) .vjs-touch-overlay {
     position: absolute;
     pointer-events: auto;
     top: 0;
@@ -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 {
@@ -83,4 +95,10 @@
     display: none;
   }
 
+  &:not(:fullscreen).using-fs-swipe-up,
+  &:fullscreen.using-fs-swipe-down {
+    touch-action: none;
+    overflow: hidden;
+  }
+
 }

package/src/plugin.js

@@ -1,6 +1,7 @@
 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';
 
 // Default options for the plugin.
@@ -10,7 +11,8 @@ const defaults = {
     exitOnRotate: true,
     lockOnRotate: true,
     lockToLandscapeOnEnter: false,
-    iOS: false,
+    swipeToFullscreen: false,
+    swipeFromFullscreen: false,
     disabled: false
   },
   touchControls: {
@@ -22,6 +24,7 @@ const defaults = {
 };
 
 const screen = window.screen;
+const registerPlugin = videojs.registerPlugin || videojs.plugin;
 
 /**
  * Gets 'portrait' or 'lanscape' from the two orientation APIs
@@ -49,9 +52,6 @@ const getOrientation = () => {
   return 'portrait';
 };
 
-// Cross-compatibility for Video.js 5 and 6.
-const registerPlugin = videojs.registerPlugin || videojs.plugin;
-
 /**
  * Add UI and event listeners
  *
@@ -59,23 +59,12 @@ const registerPlugin = videojs.registerPlugin || videojs.plugin;
  * @param    {Player} player
  *           A Video.js player object.
  *
- * @param    {Object} [options={}]
+ * @param    {MobileUiOptions} [options={}]
  *           A plain object containing options for the plugin.
  */
 const onPlayerReady = (player, options) => {
   player.addClass('vjs-mobile-ui');
 
-  if (options.fullscreen.iOS) {
-    videojs.log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
-    if (videojs.browser.IS_IOS && videojs.browser.IOS_VERSION > 9 &&
-        !player.el_.ownerDocument.querySelector('.bc-iframe')) {
-      player.tech_.el_.setAttribute('playsinline', 'playsinline');
-      player.tech_.supportsFullScreen = function() {
-        return false;
-      };
-    }
-  }
-
   if (!options.touchControls.disabled) {
 
     if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
@@ -105,20 +94,26 @@ const onPlayerReady = (player, options) => {
     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);
           });
         }
       }
@@ -168,42 +163,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    {boolean} [options.fullscreen.iOS=false]
- *           Deprecated: Whether to disable iOS's native fullscreen so controls can work
- * @param    {Object} [options.touchControls={}]
- *           Touch UI options.
- * @param    {boolean} [options.touchControls.disabled=false]
- *           If true no touch controls are added.
- * @param    {int} [options.touchControls.seekSeconds=10]
- *           Number of seconds to seek on double-tap
- * @param    {int} [options.touchControls.tapTimeout=300]
- *           Interval in ms to be considered a doubletap
- * @param    {boolean} [options.touchControls.disableOnEnd=false]
- *           Whether to disable when the video ends (e.g., if there is an endscreen)
- *           Never shows if the endscreen plugin is present
+ * @param    {Object} [options={}] Plugin options
  */
 const mobileUi = function(options = {}) {
   if (options.forceForTesting || videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {

package/src/swipeFullscreen.js

@@ -0,0 +1,117 @@
+/**
+ * Sets up swiping to enter and exit fullscreen.
+ *
+ * @param {Object} player
+ *  The player to initialise on.
+ * @param {Object} pluginOptions
+ *  The options used by the mobile ui plugin.
+ */
+const initSwipe = (player, pluginOptions) => {
+  const {swipeToFullscreen, swipeFromFullscreen} = pluginOptions.fullscreen;
+
+  if (swipeToFullscreen) {
+    player.addClass('using-fs-swipe-up');
+  }
+  if (swipeFromFullscreen) {
+    player.addClass('using-fs-swipe-down');
+  }
+
+  let touchStartY = 0;
+  let couldBeSwiping = false;
+  const swipeThreshold = 30;
+
+  /**
+   * 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 = '';
+  });
+
+};
+
+export default initSwipe;

package/src/touchOverlay.js

@@ -6,9 +6,23 @@
 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;
 
+const debounce = (callback, wait) => {
+  let timeoutId = null;
+
+  return (...args) => {
+    window.clearTimeout(timeoutId);
+
+    timeoutId = window.setTimeout(() => {
+      callback.apply(null, args);
+    }, wait);
+  };
+};
+
 /**
  * The `TouchOverlay` is an overlay to capture tap events.
  *
@@ -30,6 +44,7 @@ class TouchOverlay extends Component {
 
     this.seekSeconds = options.seekSeconds;
     this.tapTimeout = options.tapTimeout;
+    this.taps = 0;
 
     // Add play toggle overlay
     this.addChild('playToggle', {});
@@ -44,6 +59,46 @@ 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_ = 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();
   }
 
@@ -76,65 +131,16 @@ class TouchOverlay extends Component {
       return;
     }
 
-    event.preventDefault();
-
-    if (this.firstTapCaptured) {
-      this.firstTapCaptured = false;
-      if (this.timeout) {
-        window.clearTimeout(this.timeout);
-      }
-      this.handleDoubleTap(event);
-    } else {
-      this.firstTapCaptured = true;
-      this.timeout = window.setTimeout(() => {
-        this.firstTapCaptured = false;
-        this.handleSingleTap(event);
-      }, this.tapTimeout);
+    if (event.cancelable) {
+      event.preventDefault();
     }
-  }
-
-  /**
-   * 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.taps += 1;
+    if (this.taps === 1) {
+      this.removeClass('skip');
+      this.toggleClass('show-play-toggle');
     }
-
-    // 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');
-    });
+    this.handleTaps_(event);
   }
 
   /**