videojs-mobile-ui 0.6.0 → 0.8.0

package/src/plugin.js

@@ -9,12 +9,15 @@ const defaults = {
     enterOnRotate: true,
     exitOnRotate: true,
     lockOnRotate: true,
-    iOS: false
+    lockToLandscapeOnEnter: false,
+    iOS: false,
+    disabled: false
   },
   touchControls: {
     seekSeconds: 10,
     tapTimeout: 300,
-    disableOnEnd: false
+    disableOnEnd: false,
+    disabled: false
   }
 };
 
@@ -28,7 +31,7 @@ const screen = window.screen;
 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('-');
+    const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
 
     if (orientationString === 'landscape' || orientationString === 'portrait') {
       return orientationString;
@@ -62,36 +65,45 @@ const registerPlugin = videojs.registerPlugin || videojs.plugin;
 const onPlayerReady = (player, options) => {
   player.addClass('vjs-mobile-ui');
 
-  if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
-    player.addClass('vjs-mobile-ui-disable-end');
+  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.fullscreen.iOS &&
-      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') {
+      player.addClass('vjs-mobile-ui-disable-end');
+    }
 
-  // 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 < 7.7.0 doesn't account for precedding components that don't have elements
-  if (major < 7 || (major === 7 && minor < 7)) {
-    controlBarIdx = Array.prototype.indexOf.call(
-      player.el_.children,
-      player.getChild('ControlBar').el_
-    );
-  } else {
-    controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
+    // 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 < 7.7.0 doesn't account for precedding components that don't have elements
+    if (major < 7 || (major === 7 && minor < 7)) {
+      controlBarIdx = Array.prototype.indexOf.call(
+        player.el_.children,
+        player.getChild('ControlBar').el_
+      );
+    } else {
+      controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
+    }
+
+    player.touchOverlay = player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
   }
 
-  player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
+  if (options.fullscreen.disabled) {
+    return;
+  }
 
   let locked = false;
 
@@ -101,7 +113,7 @@ const onPlayerReady = (player, options) => {
     if (currentOrientation === 'landscape' && options.fullscreen.enterOnRotate) {
       if (player.paused() === false) {
         player.requestFullscreen();
-        if (options.fullscreen.lockOnRotate &&
+        if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) &&
             screen.orientation && screen.orientation.lock) {
           screen.orientation.lock('landscape').then(() => {
             locked = true;
@@ -134,15 +146,21 @@ const onPlayerReady = (player, options) => {
     }
   }
 
-  player.on('ended', _ => {
-    if (locked === true) {
+  player.on('fullscreenchange', _ => {
+    if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
+      screen.orientation.lock('landscape').then(()=>{
+        locked = true;
+      }).catch((e) => {
+        videojs.log('Browser refused orientation lock:', e);
+      });
+    } else if (!player.isFullscreen() && locked) {
       screen.orientation.unlock();
       locked = false;
     }
   });
 
-  player.on('fullscreenchange', _ => {
-    if (!player.isFullscreen() && locked) {
+  player.on('ended', _ => {
+    if (locked === true) {
       screen.orientation.unlock();
       locked = false;
     }
@@ -161,17 +179,24 @@ const onPlayerReady = (player, options) => {
  *           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]
- *           Whether to disable iOS's native fullscreen so controls can work
+ *           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]

package/test/plugin.test.js

@@ -62,6 +62,24 @@ QUnit.test('inserts element before control bar', function(assert) {
   );
 });
 
+QUnit.test('does not insert if disabled', function(assert) {
+
+  this.player.mobileUi({
+    forceForTesting: true,
+    touchControls: {
+      disabled: true
+    }
+  });
+
+  this.clock.tick(1);
+
+  assert.strictEqual(
+    this.player.touchOverlay,
+    undefined,
+    'TouchOverlay should not be present'
+  );
+});
+
 QUnit.test('iOS event listeners', function(assert) {
 
   const oldBrowser = videojs.browser;
@@ -118,7 +136,7 @@ QUnit[testOrSkip]('Android event listeners', function(assert) {
   assert.strictEqual(
     typeof window.screen.orientation.onchange,
     'function',
-    'screen.orientation.onchange is used for andorid'
+    'screen.orientation.onchange is used for android'
   );
 
   this.player.dispose();
@@ -133,3 +151,30 @@ QUnit[testOrSkip]('Android event listeners', function(assert) {
 
   videojs.browser = oldBrowser;
 });
+
+QUnit[testOrSkip]('Android event listeners skipped if disabled', function(assert) {
+
+  const oldBrowser = videojs.browser;
+
+  videojs.browser = videojs.mergeOptions(videojs.browser, {
+    IS_IOS: false,
+    IS_ANDROID: true
+  });
+
+  this.player.mobileUi({
+    forceForTesting: true,
+    fullscreen: {
+      disabled: true
+    }
+  });
+
+  this.clock.tick(1);
+
+  assert.notStrictEqual(
+    typeof window.screen.orientation.onchange,
+    'function',
+    'screen.orientation.onchange skipped for android'
+  );
+
+  videojs.browser = oldBrowser;
+});