videojs-mobile-ui 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,3 +1,56 @@
+<a name="0.8.0"></a>
+# [0.8.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.5.3...v0.8.0) (2022-04-13)
+
+### Features
+
+* Add disable options (#33) ([59e5f89](https://github.com/mister-ben/videojs-mobile-ui/commit/59e5f89)), closes [#33](https://github.com/mister-ben/videojs-mobile-ui/issues/33)
+* Add option to lock to landscape when entering fullscreen (#49) ([26c58d4](https://github.com/mister-ben/videojs-mobile-ui/commit/26c58d4)), closes [#49](https://github.com/mister-ben/videojs-mobile-ui/issues/49)
+
+### Bug Fixes
+
+* Detect angle correctly where no window.orientation (#17) ([c85ac35](https://github.com/mister-ben/videojs-mobile-ui/commit/c85ac35)), closes [#17](https://github.com/mister-ben/videojs-mobile-ui/issues/17)
+* Fix typo in iOS orientation (#27) ([7e05afb](https://github.com/mister-ben/videojs-mobile-ui/commit/7e05afb)), closes [#27](https://github.com/mister-ben/videojs-mobile-ui/issues/27)
+* orientation string (#37) ([177f326](https://github.com/mister-ben/videojs-mobile-ui/commit/177f326)), closes [#37](https://github.com/mister-ben/videojs-mobile-ui/issues/37)
+* Remove event listeners on player dispose (#21) ([25c8fb1](https://github.com/mister-ben/videojs-mobile-ui/commit/25c8fb1)), closes [#21](https://github.com/mister-ben/videojs-mobile-ui/issues/21)
+* Split orientation string ([0eebd64](https://github.com/mister-ben/videojs-mobile-ui/commit/0eebd64))
+
+### Chores
+
+* **deps-dev:** bump karma from 6.3.14 to 6.3.16 (#46) ([7bd42f1](https://github.com/mister-ben/videojs-mobile-ui/commit/7bd42f1)), closes [#46](https://github.com/mister-ben/videojs-mobile-ui/issues/46)
+* **deps-dev:** bump karma from 6.3.2 to 6.3.14 (#44) ([ddff196](https://github.com/mister-ben/videojs-mobile-ui/commit/ddff196)), closes [#44](https://github.com/mister-ben/videojs-mobile-ui/issues/44)
+* **deps:** bump engine.io from 4.1.1 to 4.1.2 (#39) ([5031c93](https://github.com/mister-ben/videojs-mobile-ui/commit/5031c93)), closes [#39](https://github.com/mister-ben/videojs-mobile-ui/issues/39)
+* **deps:** bump follow-redirects from 1.14.0 to 1.14.7 (#41) ([6fcbb49](https://github.com/mister-ben/videojs-mobile-ui/commit/6fcbb49)), closes [#41](https://github.com/mister-ben/videojs-mobile-ui/issues/41)
+* **deps:** bump follow-redirects from 1.14.7 to 1.14.8 (#45) ([cf20418](https://github.com/mister-ben/videojs-mobile-ui/commit/cf20418)), closes [#45](https://github.com/mister-ben/videojs-mobile-ui/issues/45)
+* **deps:** bump log4js from 6.3.0 to 6.4.0 (#42) ([f9c69ff](https://github.com/mister-ben/videojs-mobile-ui/commit/f9c69ff)), closes [#42](https://github.com/mister-ben/videojs-mobile-ui/issues/42)
+* **deps:** bump minimist from 1.2.5 to 1.2.6 (#50) ([6faea79](https://github.com/mister-ben/videojs-mobile-ui/commit/6faea79)), closes [#50](https://github.com/mister-ben/videojs-mobile-ui/issues/50)
+* **deps:** bump nanoid from 3.1.22 to 3.2.0 (#43) ([70e3440](https://github.com/mister-ben/videojs-mobile-ui/commit/70e3440)), closes [#43](https://github.com/mister-ben/videojs-mobile-ui/issues/43)
+* **deps:** bump shelljs from 0.8.4 to 0.8.5 (#40) ([bf57915](https://github.com/mister-ben/videojs-mobile-ui/commit/bf57915)), closes [#40](https://github.com/mister-ben/videojs-mobile-ui/issues/40)
+* make video.js a peer dependency (#51) ([1e1ae5d](https://github.com/mister-ben/videojs-mobile-ui/commit/1e1ae5d)), closes [#51](https://github.com/mister-ben/videojs-mobile-ui/issues/51)
+* update dependencies ([6fb5a7b](https://github.com/mister-ben/videojs-mobile-ui/commit/6fb5a7b))
+* Update to Node 14 / Generator 8 (#16) ([660dc86](https://github.com/mister-ben/videojs-mobile-ui/commit/660dc86)), closes [#16](https://github.com/mister-ben/videojs-mobile-ui/issues/16)
+
+<a name="0.7.0"></a>
+# [0.7.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.6.1...v0.7.0) (2021-11-09)
+
+### Features
+
+* Add disable options (#33) ([59e5f89](https://github.com/mister-ben/videojs-mobile-ui/commit/59e5f89)), closes [#33](https://github.com/mister-ben/videojs-mobile-ui/issues/33)
+
+### Bug Fixes
+
+* orientation string (#37) ([177f326](https://github.com/mister-ben/videojs-mobile-ui/commit/177f326)), closes [#37](https://github.com/mister-ben/videojs-mobile-ui/issues/37)
+
+### Chores
+
+* update dependencies ([6fb5a7b](https://github.com/mister-ben/videojs-mobile-ui/commit/6fb5a7b))
+
+<a name="0.6.1"></a>
+## [0.6.1](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.6.0...v0.6.1) (2021-08-27)
+
+### Bug Fixes
+
+* Split orientation string ([0eebd64](https://github.com/mister-ben/videojs-mobile-ui/commit/0eebd64))
+
 <a name="0.6.0"></a>
 # 0.6.0 (2021-08-27)
 

package/README.md

@@ -12,6 +12,7 @@ Fullscreen control:
 
 - Rotate to landscape to enter Fullscreen
 - Lock to fullscreen on rotate
+- Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
 
 ## Table of Contents
 
@@ -45,12 +46,16 @@ npm install --save videojs-mobile-ui
   fullscreen: {
     enterOnRotate: true,
     exitOnRotate: true,
-    lockOnRotate: true
+    lockOnRotate: true,
+    lockToLandscapeOnEnter: false,
+    iOS: false,
+    disabled: false
   },
   touchControls: {
     seekSeconds: 10,
     tapTimeout: 300,
-    disableOnEnd: false
+    disableOnEnd: false,
+    disabled: false,
   }
 };
 ```
@@ -60,10 +65,13 @@ npm install --save videojs-mobile-ui
 - *fullscreen.enterOnRotate* `boolean` Whether to go fullscreen when rotating to landscape
 - *fullscreen.exitOnRotate* `boolean` Whether to leave fullscreen when rotating to portrait (if not locked)
 - *fullscreen.lockOnRotate* `boolean` Whether to lock to fullscreen when rotating to landscape
+- *fullscreen.lockToLandscapeOnEnter* `boolean` Whether to lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
 - *fullscreen.iOS* `boolean` Whether to use fake fullscreen on iOS (needed for controls to work)
+- *fullscreen.disabled* `boolean` If true no fullscreen handling except the *deprecated* iOS fullwindow hack
 - *touchControls.seekSeconds* `int` Seconds to seek when double-tapping
 - *touchControls.tapTimeout* `int` Milliseconds to consider a double-tap
 - *touchControls.disableOnEnd* `boolean` Whether to disable touch controls when the video has ended, e.g. if an endscreen is used. Automatically disables if the endscreen plugin is present when this plugin initialises
+- *touchControls.disableOnEnd* `boolean` If true no touch controls are added.
 
 ## Usage
 

package/dist/videojs-mobile-ui.cjs.js

@@ -1,4 +1,4 @@
-/*! @name videojs-mobile-ui @version 0.6.0 @license MIT */
+/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
 'use strict';
 
 var videojs = require('video.js');
@@ -11,7 +11,7 @@ var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
 
-var version = "0.6.0";
+var version = "0.8.0";
 
 var Component = videojs__default['default'].getComponent('Component');
 var dom = videojs__default['default'].dom || videojs__default['default'];
@@ -183,12 +183,15 @@ var 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
   }
 };
 var screen = window__default['default'].screen;
@@ -201,7 +204,7 @@ var screen = window__default['default'].screen;
 var getOrientation = function getOrientation() {
   if (screen) {
     // Prefer the string over angle, as 0° can be landscape on some tablets
-    var orientationString = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || ''.split('-');
+    var orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
 
     if (orientationString === 'landscape' || orientationString === 'portrait') {
       return orientationString;
@@ -236,31 +239,42 @@ var registerPlugin = videojs__default['default'].registerPlugin || videojs__defa
 var onPlayerReady = function 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__default['default'].log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
+
+    if (videojs__default['default'].browser.IS_IOS && videojs__default['default'].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__default['default'].browser.IS_IOS && videojs__default['default'].browser.IOS_VERSION > 9 && !player.el_.ownerDocument.querySelector('.bc-iframe')) {
-    player.tech_.el_.setAttribute('playsinline', 'playsinline');
+  if (!options.touchControls.disabled) {
+    if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
+      player.addClass('vjs-mobile-ui-disable-end');
+    } // Insert before the control bar
 
-    player.tech_.supportsFullScreen = function () {
-      return false;
-    };
-  } // Insert before the control bar
 
+    var controlBarIdx;
+    var versionParts = videojs__default['default'].VERSION.split('.');
+    var major = parseInt(versionParts[0], 10);
+    var minor = parseInt(versionParts[1], 10); // Video.js < 7.7.0 doesn't account for precedding components that don't have elements
 
-  var controlBarIdx;
-  var versionParts = videojs__default['default'].VERSION.split('.');
-  var major = parseInt(versionParts[0], 10);
-  var 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);
+  }
 
-  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'));
+  if (options.fullscreen.disabled) {
+    return;
   }
 
-  player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
   var locked = false;
 
   var rotationHandler = function rotationHandler() {
@@ -270,7 +284,7 @@ var onPlayerReady = function onPlayerReady(player, options) {
       if (player.paused() === false) {
         player.requestFullscreen();
 
-        if (options.fullscreen.lockOnRotate && screen.orientation && screen.orientation.lock) {
+        if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
           screen.orientation.lock('landscape').then(function () {
             locked = true;
           }).catch(function (e) {
@@ -300,14 +314,20 @@ var onPlayerReady = function onPlayerReady(player, options) {
     }
   }
 
-  player.on('ended', function (_) {
-    if (locked === true) {
+  player.on('fullscreenchange', function (_) {
+    if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
+      screen.orientation.lock('landscape').then(function () {
+        locked = true;
+      }).catch(function (e) {
+        videojs__default['default'].log('Browser refused orientation lock:', e);
+      });
+    } else if (!player.isFullscreen() && locked) {
       screen.orientation.unlock();
       locked = false;
     }
   });
-  player.on('fullscreenchange', function (_) {
-    if (!player.isFullscreen() && locked) {
+  player.on('ended', function (_) {
+    if (locked === true) {
       screen.orientation.unlock();
       locked = false;
     }
@@ -325,17 +345,24 @@ var onPlayerReady = function 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/dist/videojs-mobile-ui.css

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 0.6.0 @license MIT */
+/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
 @-webkit-keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}@keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}.video-js.vjs-has-started .vjs-touch-overlay{position:absolute;pointer-events:auto;top:0}.video-js .vjs-touch-overlay{display:block;width:100%;height:100%;pointer-events:none}.video-js .vjs-touch-overlay.skip{opacity:0;-webkit-animation:fadeAndScale .6s linear;animation:fadeAndScale .6s 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>')}.video-js .vjs-touch-overlay.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>')}.video-js .vjs-touch-overlay .vjs-play-control{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;width:30%;height:80%;pointer-events:none;opacity:0;transition:opacity .3s ease}.video-js .vjs-touch-overlay .vjs-play-control .vjs-icon-placeholder::before{content:'';background-size:60%;background-position:center center;background-repeat:no-repeat;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="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-paused .vjs-icon-placeholder::before{content:'';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="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-ended .vjs-icon-placeholder::before{content:'';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="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>')}.video-js .vjs-touch-overlay.show-play-toggle .vjs-play-control{opacity:1;pointer-events:auto}.video-js.vjs-mobile-ui-disable-end.vjs-ended .vjs-touch-overlay{display:none}

package/dist/videojs-mobile-ui.es.js

@@ -1,9 +1,9 @@
-/*! @name videojs-mobile-ui @version 0.6.0 @license MIT */
+/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
 import videojs from 'video.js';
 import _inheritsLoose from '@babel/runtime/helpers/inheritsLoose';
 import window from 'global/window';
 
-var version = "0.6.0";
+var version = "0.8.0";
 
 var Component = videojs.getComponent('Component');
 var dom = videojs.dom || videojs;
@@ -175,12 +175,15 @@ var 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
   }
 };
 var screen = window.screen;
@@ -193,7 +196,7 @@ var screen = window.screen;
 var getOrientation = function getOrientation() {
   if (screen) {
     // Prefer the string over angle, as 0° can be landscape on some tablets
-    var orientationString = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || ''.split('-');
+    var orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
 
     if (orientationString === 'landscape' || orientationString === 'portrait') {
       return orientationString;
@@ -228,31 +231,42 @@ var registerPlugin = videojs.registerPlugin || videojs.plugin;
 var onPlayerReady = function 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');
+  if (!options.touchControls.disabled) {
+    if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
+      player.addClass('vjs-mobile-ui-disable-end');
+    } // Insert before the control bar
 
-    player.tech_.supportsFullScreen = function () {
-      return false;
-    };
-  } // Insert before the control bar
 
+    var controlBarIdx;
+    var versionParts = videojs.VERSION.split('.');
+    var major = parseInt(versionParts[0], 10);
+    var minor = parseInt(versionParts[1], 10); // Video.js < 7.7.0 doesn't account for precedding components that don't have elements
 
-  var controlBarIdx;
-  var versionParts = videojs.VERSION.split('.');
-  var major = parseInt(versionParts[0], 10);
-  var 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);
+  }
 
-  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'));
+  if (options.fullscreen.disabled) {
+    return;
   }
 
-  player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
   var locked = false;
 
   var rotationHandler = function rotationHandler() {
@@ -262,7 +276,7 @@ var onPlayerReady = function onPlayerReady(player, options) {
       if (player.paused() === false) {
         player.requestFullscreen();
 
-        if (options.fullscreen.lockOnRotate && screen.orientation && screen.orientation.lock) {
+        if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
           screen.orientation.lock('landscape').then(function () {
             locked = true;
           }).catch(function (e) {
@@ -292,14 +306,20 @@ var onPlayerReady = function onPlayerReady(player, options) {
     }
   }
 
-  player.on('ended', function (_) {
-    if (locked === true) {
+  player.on('fullscreenchange', function (_) {
+    if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
+      screen.orientation.lock('landscape').then(function () {
+        locked = true;
+      }).catch(function (e) {
+        videojs.log('Browser refused orientation lock:', e);
+      });
+    } else if (!player.isFullscreen() && locked) {
       screen.orientation.unlock();
       locked = false;
     }
   });
-  player.on('fullscreenchange', function (_) {
-    if (!player.isFullscreen() && locked) {
+  player.on('ended', function (_) {
+    if (locked === true) {
       screen.orientation.unlock();
       locked = false;
     }
@@ -317,17 +337,24 @@ var onPlayerReady = function 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/dist/videojs-mobile-ui.js

@@ -1,4 +1,4 @@
-/*! @name videojs-mobile-ui @version 0.6.0 @license MIT */
+/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js'), require('global/window')) :
   typeof define === 'function' && define.amd ? define(['video.js', 'global/window'], factory) :
@@ -10,7 +10,7 @@
   var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
   var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
 
-  var version = "0.6.0";
+  var version = "0.8.0";
 
   function createCommonjsModule(fn, basedir, module) {
   	return module = {
@@ -222,12 +222,15 @@
       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
     }
   };
   var screen = window__default['default'].screen;
@@ -240,7 +243,7 @@
   var getOrientation = function getOrientation() {
     if (screen) {
       // Prefer the string over angle, as 0° can be landscape on some tablets
-      var orientationString = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || ''.split('-');
+      var orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
 
       if (orientationString === 'landscape' || orientationString === 'portrait') {
         return orientationString;
@@ -275,31 +278,42 @@
   var onPlayerReady = function 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__default['default'].log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
+
+      if (videojs__default['default'].browser.IS_IOS && videojs__default['default'].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__default['default'].browser.IS_IOS && videojs__default['default'].browser.IOS_VERSION > 9 && !player.el_.ownerDocument.querySelector('.bc-iframe')) {
-      player.tech_.el_.setAttribute('playsinline', 'playsinline');
+    if (!options.touchControls.disabled) {
+      if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
+        player.addClass('vjs-mobile-ui-disable-end');
+      } // Insert before the control bar
 
-      player.tech_.supportsFullScreen = function () {
-        return false;
-      };
-    } // Insert before the control bar
 
+      var controlBarIdx;
+      var versionParts = videojs__default['default'].VERSION.split('.');
+      var major = parseInt(versionParts[0], 10);
+      var minor = parseInt(versionParts[1], 10); // Video.js < 7.7.0 doesn't account for precedding components that don't have elements
 
-    var controlBarIdx;
-    var versionParts = videojs__default['default'].VERSION.split('.');
-    var major = parseInt(versionParts[0], 10);
-    var 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);
+    }
 
-    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'));
+    if (options.fullscreen.disabled) {
+      return;
     }
 
-    player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
     var locked = false;
 
     var rotationHandler = function rotationHandler() {
@@ -309,7 +323,7 @@
         if (player.paused() === false) {
           player.requestFullscreen();
 
-          if (options.fullscreen.lockOnRotate && screen.orientation && screen.orientation.lock) {
+          if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
             screen.orientation.lock('landscape').then(function () {
               locked = true;
             }).catch(function (e) {
@@ -339,14 +353,20 @@
       }
     }
 
-    player.on('ended', function (_) {
-      if (locked === true) {
+    player.on('fullscreenchange', function (_) {
+      if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
+        screen.orientation.lock('landscape').then(function () {
+          locked = true;
+        }).catch(function (e) {
+          videojs__default['default'].log('Browser refused orientation lock:', e);
+        });
+      } else if (!player.isFullscreen() && locked) {
         screen.orientation.unlock();
         locked = false;
       }
     });
-    player.on('fullscreenchange', function (_) {
-      if (!player.isFullscreen() && locked) {
+    player.on('ended', function (_) {
+      if (locked === true) {
         screen.orientation.unlock();
         locked = false;
       }
@@ -364,17 +384,24 @@
    *           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/dist/videojs-mobile-ui.min.js

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 0.6.0 @license MIT */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs,e.window)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),i=n(t);function r(e,t,n){return e(n={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&n.path)}},n.exports),n.exports}var a=r((function(e){function t(n,o){return e.exports=t=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},e.exports.default=e.exports,e.exports.__esModule=!0,t(n,o)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})),s=r((function(e){e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)},e.exports.default=e.exports,e.exports.__esModule=!0})),l=o.default.getComponent("Component"),u=o.default.dom||o.default,c=function(e){function t(t,n){var o;return(o=e.call(this,t,n)||this).seekSeconds=n.seekSeconds,o.tapTimeout=n.tapTimeout,o.addChild("playToggle",{}),t.on(["playing","userinactive"],(function(e){o.removeClass("show-play-toggle")})),0===o.player_.options_.inactivityTimeout&&(o.player_.options_.inactivityTimeout=5e3),o.enable(),o}s(t,e);var n=t.prototype;return n.createEl=function(){return u.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})},n.handleTap=function(e){var t=this;e.target===this.el_&&(e.preventDefault(),this.firstTapCaptured?(this.firstTapCaptured=!1,this.timeout&&i.default.clearTimeout(this.timeout),this.handleDoubleTap(e)):(this.firstTapCaptured=!0,this.timeout=i.default.setTimeout((function(){t.firstTapCaptured=!1,t.handleSingleTap(e)}),this.tapTimeout)))},n.handleSingleTap=function(e){this.removeClass("skip"),this.toggleClass("show-play-toggle")},n.handleDoubleTap=function(e){var t=this,n=this.el_.getBoundingClientRect(),o=e.changedTouches[0].clientX-n.left;if(o<.4*n.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-this.seekSeconds)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+this.seekSeconds)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.removeClass("skip"),i.default.requestAnimationFrame((function(){t.addClass("skip")}))},n.enable=function(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)},n.disable=function(){this.off("touchend",this.handleTap)},t}(l);l.registerComponent("TouchOverlay",c);var d={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,iOS:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1}},p=i.default.screen,f=o.default.registerPlugin||o.default.plugin,h=function(e,t){var n;e.addClass("vjs-mobile-ui"),(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end"),t.fullscreen.iOS&&o.default.browser.IS_IOS&&o.default.browser.IOS_VERSION>9&&!e.el_.ownerDocument.querySelector(".bc-iframe")&&(e.tech_.el_.setAttribute("playsinline","playsinline"),e.tech_.supportsFullScreen=function(){return!1});var r=o.default.VERSION.split("."),a=parseInt(r[0],10),s=parseInt(r[1],10);n=a<7||7===a&&s<7?Array.prototype.indexOf.call(e.el_.children,e.getChild("ControlBar").el_):e.children_.indexOf(e.getChild("ControlBar")),e.addChild("TouchOverlay",t.touchControls,n);var l=!1,u=function(){var n=function(){if(p){var e=(p.orientation||{}).type||p.mozOrientation||p.msOrientation||"".split("-");if("landscape"===e||"portrait"===e)return e}return"number"==typeof i.default.orientation?0===i.default.orientation||180===i.default.orientation?"portrait":"landscape":"portrait"}();"landscape"===n&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),t.fullscreen.lockOnRotate&&p.orientation&&p.orientation.lock&&p.orientation.lock("landscape").then((function(){l=!0})).catch((function(e){o.default.log("Browser refused orientation lock:",e)}))):"portrait"===n&&t.fullscreen.exitOnRotate&&!l&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(o.default.browser.IS_IOS?(i.default.addEventListener("orientationchange",u),e.on("dispose",(function(){i.default.removeEventListener("orientationchange",u)}))):p.orientation&&(p.orientation.onchange=u,e.on("dispose",(function(){p.orientation.onchange=null})))),e.on("ended",(function(e){!0===l&&(p.orientation.unlock(),l=!1)})),e.on("fullscreenchange",(function(t){!e.isFullscreen()&&l&&(p.orientation.unlock(),l=!1)}))},m=function(e){var t=this;void 0===e&&(e={}),(e.forceForTesting||o.default.browser.IS_ANDROID||o.default.browser.IS_IOS)&&this.ready((function(){h(t,o.default.mergeOptions(d,e))}))};return f("mobileUi",m),m.VERSION="0.6.0",m}));
+/*! @name videojs-mobile-ui @version 0.8.0 @license MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs,e.window)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),i=n(t);function r(e,t,n){return e(n={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&n.path)}},n.exports),n.exports}var a=r((function(e){function t(n,o){return e.exports=t=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},e.exports.default=e.exports,e.exports.__esModule=!0,t(n,o)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0})),l=r((function(e){e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)},e.exports.default=e.exports,e.exports.__esModule=!0})),s=o.default.getComponent("Component"),u=o.default.dom||o.default,c=function(e){function t(t,n){var o;return(o=e.call(this,t,n)||this).seekSeconds=n.seekSeconds,o.tapTimeout=n.tapTimeout,o.addChild("playToggle",{}),t.on(["playing","userinactive"],(function(e){o.removeClass("show-play-toggle")})),0===o.player_.options_.inactivityTimeout&&(o.player_.options_.inactivityTimeout=5e3),o.enable(),o}l(t,e);var n=t.prototype;return n.createEl=function(){return u.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})},n.handleTap=function(e){var t=this;e.target===this.el_&&(e.preventDefault(),this.firstTapCaptured?(this.firstTapCaptured=!1,this.timeout&&i.default.clearTimeout(this.timeout),this.handleDoubleTap(e)):(this.firstTapCaptured=!0,this.timeout=i.default.setTimeout((function(){t.firstTapCaptured=!1,t.handleSingleTap(e)}),this.tapTimeout)))},n.handleSingleTap=function(e){this.removeClass("skip"),this.toggleClass("show-play-toggle")},n.handleDoubleTap=function(e){var t=this,n=this.el_.getBoundingClientRect(),o=e.changedTouches[0].clientX-n.left;if(o<.4*n.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-this.seekSeconds)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+this.seekSeconds)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.removeClass("skip"),i.default.requestAnimationFrame((function(){t.addClass("skip")}))},n.enable=function(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)},n.disable=function(){this.off("touchend",this.handleTap)},t}(s);s.registerComponent("TouchOverlay",c);var d={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,iOS:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},f=i.default.screen,p=function(){if(f){var e=((f.orientation||{}).type||f.mozOrientation||f.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof i.default.orientation?0===i.default.orientation||180===i.default.orientation?"portrait":"landscape":"portrait"},h=o.default.registerPlugin||o.default.plugin,m=function(e){var t=this;void 0===e&&(e={}),(e.forceForTesting||o.default.browser.IS_ANDROID||o.default.browser.IS_IOS)&&this.ready((function(){!function(e,t){if(e.addClass("vjs-mobile-ui"),t.fullscreen.iOS&&(o.default.log.warn("videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead."),o.default.browser.IS_IOS&&o.default.browser.IOS_VERSION>9&&!e.el_.ownerDocument.querySelector(".bc-iframe")&&(e.tech_.el_.setAttribute("playsinline","playsinline"),e.tech_.supportsFullScreen=function(){return!1})),!t.touchControls.disabled){var n;(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");var r=o.default.VERSION.split("."),a=parseInt(r[0],10),l=parseInt(r[1],10);n=a<7||7===a&&l<7?Array.prototype.indexOf.call(e.el_.children,e.getChild("ControlBar").el_):e.children_.indexOf(e.getChild("ControlBar")),e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,n)}if(!t.fullscreen.disabled){var s=!1,u=function(){var n=p();"landscape"===n&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&f.orientation&&f.orientation.lock&&f.orientation.lock("landscape").then((function(){s=!0})).catch((function(e){o.default.log("Browser refused orientation lock:",e)}))):"portrait"===n&&t.fullscreen.exitOnRotate&&!s&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(o.default.browser.IS_IOS?(i.default.addEventListener("orientationchange",u),e.on("dispose",(function(){i.default.removeEventListener("orientationchange",u)}))):f.orientation&&(f.orientation.onchange=u,e.on("dispose",(function(){f.orientation.onchange=null})))),e.on("fullscreenchange",(function(n){e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===p()?f.orientation.lock("landscape").then((function(){s=!0})).catch((function(e){o.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&s&&(f.orientation.unlock(),s=!1)})),e.on("ended",(function(e){!0===s&&(f.orientation.unlock(),s=!1)}))}}(t,o.default.mergeOptions(d,e))}))};return h("mobileUi",m),m.VERSION="0.8.0",m}));