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

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');
+});

package/test/swipeFullscreen.test.js

@@ -0,0 +1,365 @@
+import document from 'global/document';
+import window from 'global/window';
+
+import QUnit from 'qunit';
+import sinon from 'sinon';
+import videojs from 'video.js';
+
+import plugin from '../src/plugin';
+
+const createTouch = (el, opts) => {
+  if ('Touch' in window) {
+    opts.identifier = Date.now();
+    opts.target = el;
+
+    return new window.Touch(opts);
+  }
+
+  return opts;
+};
+
+const createTouchEvent = (el, evt, opts) => {
+  if ('TouchEvent' in window) {
+    opts.identifier = Date.now();
+    opts.target = el;
+
+    opts.touches = opts.touches.map((t) => {
+      return createTouch(el, t);
+    });
+    opts.changedTouches = opts.changedTouches.map((t) => {
+      return createTouch(el, t);
+    });
+
+    return new window.TouchEvent(evt, opts);
+  }
+
+  opts.type = evt;
+
+  return opts;
+};
+
+const skipWithoutTouch = 'TouchEvent' in window ? 'test' : 'skip';
+
+QUnit.test('the environment is sane', function(assert) {
+  assert.strictEqual(typeof Array.isArray, 'function', 'es5 exists');
+  assert.strictEqual(typeof sinon, 'object', 'sinon exists');
+  assert.strictEqual(typeof videojs, 'function', 'videojs exists');
+  assert.strictEqual(typeof plugin, 'function', 'plugin is a function');
+});
+
+QUnit.module('swipeFullscreen', {
+
+  beforeEach() {
+    this.clock = sinon.useFakeTimers();
+    this.fixture = document.getElementById('qunit-fixture');
+    this.video = document.createElement('video');
+    this.fixture.appendChild(this.video);
+    this.player = videojs(this.video);
+  },
+
+  afterEach() {
+    if (!this.player.isDisposed()) {
+      this.player.dispose();
+    }
+    this.clock.restore();
+  }
+});
+
+QUnit.test('swipeToFullscreen: adds CSS class when enabled', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: false,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  assert.true(this.player.hasClass('using-fs-swipe-up'), 'adds using-fs-swipe-up class');
+  assert.false(this.player.hasClass('using-fs-swipe-down'), 'does not add using-fs-swipe-down class');
+});
+
+QUnit.test('swipeFromFullscreen: adds CSS class when enabled', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: false,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  assert.true(this.player.hasClass('using-fs-swipe-down'), 'adds using-fs-swipe-down class');
+  assert.false(this.player.hasClass('using-fs-swipe-up'), 'does not add using-fs-swipe-up class');
+});
+
+QUnit[skipWithoutTouch]('touch start outside fullscreen', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  const touchEvent = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 100 }]
+  });
+
+  this.player.el().dispatchEvent(touchEvent);
+
+  // Test that the event listener is properly set up
+  assert.expect(0);
+});
+
+QUnit[skipWithoutTouch]('prevents swiping when feature disabled', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: false,
+      swipeFromFullscreen: false,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  sinon.stub(this.player, 'requestFullscreen');
+
+  const touchStart = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 100 }]
+  });
+
+  const touchMove = createTouchEvent(this.player.el(), 'touchmove', {
+    bubbles: true,
+    cancelable: true,
+    touches: [{ clientY: 50 }],
+    changedTouches: []
+  });
+
+  const touchEnd = createTouchEvent(this.player.el(), 'touchend', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 50 }]
+  });
+
+  this.player.el().dispatchEvent(touchStart);
+  this.player.el().dispatchEvent(touchMove);
+  this.player.el().dispatchEvent(touchEnd);
+
+  assert.notOk(this.player.requestFullscreen.called, 'requestFullscreen not called when swipe disabled');
+});
+
+QUnit[skipWithoutTouch]('scales element on touch move', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  const techEl = this.player.tech_.el();
+
+  const touchStart = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 100 }]
+  });
+
+  const touchMove = createTouchEvent(this.player.el(), 'touchmove', {
+    bubbles: true,
+    cancelable: true,
+    touches: [{ clientY: 50 }],
+    changedTouches: []
+  });
+
+  this.player.el().dispatchEvent(touchStart);
+  this.player.el().dispatchEvent(touchMove);
+
+  assert.ok(techEl.style.transform.includes('scale('), 'applies scale transform on touch move');
+});
+
+QUnit[skipWithoutTouch]('enters fullscreen on swipe up', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  sinon.stub(this.player, 'isFullscreen').returns(false);
+  sinon.stub(this.player, 'requestFullscreen').returns(Promise.resolve());
+
+  const touchStart = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 200 }]
+  });
+
+  const touchEnd = createTouchEvent(this.player.el(), 'touchend', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 100 }]
+  });
+
+  this.player.el().dispatchEvent(touchStart);
+  this.player.el().dispatchEvent(touchEnd);
+
+  assert.true(this.player.requestFullscreen.called, 'requestFullscreen called on swipe up above threshold');
+});
+
+QUnit[skipWithoutTouch]('exits fullscreen on swipe down', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  sinon.stub(this.player, 'isFullscreen').returns(true);
+  sinon.stub(this.player, 'exitFullscreen');
+
+  const touchStart = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 100 }]
+  });
+
+  const touchEnd = createTouchEvent(this.player.el(), 'touchend', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 200 }]
+  });
+
+  this.player.el().dispatchEvent(touchStart);
+  this.player.el().dispatchEvent(touchEnd);
+
+  assert.true(this.player.exitFullscreen.called, 'exitFullscreen called on swipe down below threshold');
+});
+
+QUnit[skipWithoutTouch]('respects swipe threshold', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 100
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  sinon.stub(this.player, 'isFullscreen').returns(false);
+  sinon.stub(this.player, 'requestFullscreen').returns(Promise.resolve());
+
+  const touchStart = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 200 }]
+  });
+
+  // Small swipe (30px) - below 100px threshold
+  const touchEnd = createTouchEvent(this.player.el(), 'touchend', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 170 }]
+  });
+
+  this.player.el().dispatchEvent(touchStart);
+  this.player.el().dispatchEvent(touchEnd);
+
+  assert.notOk(this.player.requestFullscreen.called, 'requestFullscreen not called when swipe below threshold');
+});
+
+QUnit[skipWithoutTouch]('handles touchcancel event', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  sinon.stub(this.player, 'isFullscreen').returns(false);
+  sinon.stub(this.player, 'requestFullscreen').returns(Promise.resolve());
+
+  const touchStart = createTouchEvent(this.player.el(), 'touchstart', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 200 }]
+  });
+
+  const touchCancel = createTouchEvent(this.player.el(), 'touchcancel', {
+    bubbles: true,
+    cancelable: true,
+    touches: [],
+    changedTouches: [{ clientY: 100 }],
+    type: 'touchcancel'
+  });
+
+  this.player.el().dispatchEvent(touchStart);
+  this.player.el().dispatchEvent(touchCancel);
+
+  assert.notOk(this.player.requestFullscreen.called, 'requestFullscreen not called on touchcancel');
+});
+
+QUnit.test('cleans up event listeners on dispose', function(assert) {
+  this.player.mobileUi({
+    fullscreen: {
+      swipeToFullscreen: true,
+      swipeFromFullscreen: true,
+      swipeThreshold: 50
+    },
+    forceForTesting: true
+  });
+
+  this.clock.tick(1);
+
+  const rELSpy = sinon.spy(this.player.el(), 'removeEventListener');
+
+  this.player.dispose();
+
+  this.clock.tick(10);
+
+  assert.ok(rELSpy.calledWith('touchstart'), 'removeEventListener called during dispose');
+
+  rELSpy.restore();
+});
+