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

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);
   }
 
   /**

package/test/plugin.test.js

@@ -9,6 +9,8 @@ import plugin from '../src/plugin';
 
 const Player = videojs.getComponent('Player');
 
+const merge = videojs.obj ? videojs.obj.merge : videojs.mergeOptions;
+
 QUnit.test('the environment is sane', function(assert) {
   assert.strictEqual(typeof Array.isArray, 'function', 'es5 exists');
   assert.strictEqual(typeof sinon, 'object', 'sinon exists');
@@ -16,28 +18,31 @@ QUnit.test('the environment is sane', function(assert) {
   assert.strictEqual(typeof plugin, 'function', 'plugin is a function');
 });
 
-QUnit.module('videojs-mobile-ui', {
+const beforeEach = function() {
 
-  beforeEach() {
+  // Mock the environment's timers because certain things - particularly
+  // player readiness - are asynchronous in video.js 5. This MUST come
+  // before any player is created; otherwise, timers could get created
+  // with the actual timer methods!
+  this.clock = sinon.useFakeTimers();
 
-    // Mock the environment's timers because certain things - particularly
-    // player readiness - are asynchronous in video.js 5. This MUST come
-    // before any player is created; otherwise, timers could get created
-    // with the actual timer methods!
-    this.clock = sinon.useFakeTimers();
+  this.fixture = document.getElementById('qunit-fixture');
+  this.video = document.createElement('video');
+  this.fixture.appendChild(this.video);
 
-    this.fixture = document.getElementById('qunit-fixture');
-    this.video = document.createElement('video');
-    this.fixture.appendChild(this.video);
-    this.player = videojs(this.video);
-  },
+  this.player = videojs(this.video);
+};
 
-  afterEach() {
-    if (!this.player.isDisposed()) {
-      this.player.dispose();
-    }
-    this.clock.restore();
+const afterEach = function() {
+  if (!this.player.isDisposed()) {
+    this.player.dispose();
   }
+  this.clock.restore();
+};
+
+QUnit.module('videojs-mobile-ui', {
+  beforeEach,
+  afterEach
 });
 
 QUnit.test('registers itself with video.js', function(assert) {
@@ -49,6 +54,14 @@ QUnit.test('registers itself with video.js', function(assert) {
   );
 });
 
+QUnit.test('initialises without errors', function(assert) {
+  this.player.mobileUi({ forceForTesting: true });
+
+  this.clock.tick(1);
+
+  assert.expect(0);
+});
+
 QUnit.test('inserts element before control bar', function(assert) {
 
   this.player.mobileUi({forceForTesting: true});
@@ -84,7 +97,7 @@ QUnit.test('iOS event listeners', function(assert) {
 
   const oldBrowser = videojs.browser;
 
-  videojs.browser = videojs.mergeOptions(videojs.browser, {
+  videojs.browser = merge(videojs.browser, {
     IS_IOS: true,
     IS_ANDROID: false
   });
@@ -124,7 +137,7 @@ QUnit[testOrSkip]('Android event listeners', function(assert) {
 
   const oldBrowser = videojs.browser;
 
-  videojs.browser = videojs.mergeOptions(videojs.browser, {
+  videojs.browser = merge(videojs.browser, {
     IS_IOS: false,
     IS_ANDROID: true
   });
@@ -156,7 +169,7 @@ QUnit[testOrSkip]('Android event listeners skipped if disabled', function(assert
 
   const oldBrowser = videojs.browser;
 
-  videojs.browser = videojs.mergeOptions(videojs.browser, {
+  videojs.browser = merge(videojs.browser, {
     IS_IOS: false,
     IS_ANDROID: true
   });
@@ -178,3 +191,98 @@ QUnit[testOrSkip]('Android event listeners skipped if disabled', function(assert
 
   videojs.browser = oldBrowser;
 });
+
+QUnit.test('Adds disable-end class if disableOnEnd option is true', function(assert) {
+  this.player.mobileUi({
+    forceForTesting: true,
+    touchControls: { disableOnEnd: true }
+  });
+
+  this.clock.tick(1);
+
+  assert.ok(this.player.hasClass('vjs-mobile-ui-disable-end'), 'Class added via option');
+});
+
+QUnit.test('Adds disable-end class if endscreen plugin is present', function(assert) {
+  this.player.endscreen = () => {};
+
+  this.player.mobileUi({
+    forceForTesting: true,
+    touchControls: { disableOnEnd: false }
+  });
+
+  this.clock.tick(1);
+
+  assert.ok(this.player.hasClass('vjs-mobile-ui-disable-end'), 'Class added via endscreen detection');
+});
+
+QUnit.module('TouchOverlay', {
+  beforeEach,
+  afterEach
+});
+
+QUnit.test('TouchOverlay: double tap right seeks forward', function(assert) {
+  // Setup
+  this.player.mobileUi({ forceForTesting: true });
+  this.clock.tick(1);
+
+  const touchOverlay = this.player.getChild('TouchOverlay');
+  const touchEl = touchOverlay.el_;
+  let currentTimeCache = 0;
+
+  // Mock bounding rect so clicks have a defined "right" side
+  // Width is 100, so > 60 is right side
+  sinon.stub(touchEl, 'getBoundingClientRect').returns({
+    left: 0,
+    width: 100
+  });
+
+  this.player.currentTime = (time) => {
+    if (time === undefined) {
+      return currentTimeCache;
+    }
+    currentTimeCache = time;
+    return currentTimeCache;
+  };
+
+  this.player.duration(60);
+  this.player.currentTime(10);
+
+  // Trigger first tap
+  touchOverlay.handleTap({
+    target: touchEl,
+    preventDefault: () => {},
+    changedTouches: [{ clientX: 90 }]
+  });
+
+  // Trigger second tap (double tap)
+  touchOverlay.handleTap({
+    target: touchEl,
+    preventDefault: () => {},
+    changedTouches: [{ clientX: 90 }]
+  });
+
+  // Fast forward debounce timer (default tapTimeout is 300ms)
+  this.clock.tick(310);
+  assert.equal(this.player.currentTime(), 20, 'Seeked forward 10 seconds (default)');
+
+  // Advance enough for requestAnimationFrame to trigger
+  this.clock.tick(50);
+  assert.ok(touchOverlay.hasClass('skip'), 'Skip animation class added');
+});
+
+QUnit.test('TouchOverlay: single tap toggles play/pause visibility', function(assert) {
+  this.player.mobileUi({ forceForTesting: true });
+  this.clock.tick(1);
+
+  const touchOverlay = this.player.getChild('TouchOverlay');
+
+  // Trigger single tap
+  touchOverlay.handleTap({
+    target: touchOverlay.el_,
+    preventDefault: () => {},
+    changedTouches: [{ clientX: 50 }]
+  });
+
+  assert.ok(touchOverlay.hasClass('show-play-toggle'), 'Play toggle is visible after single tap');
+});