videojs-mobile-ui 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +6 -3
  2. package/dist/videojs-mobile-ui.cjs.js +19 -21
  3. package/dist/videojs-mobile-ui.css +2 -2
  4. package/dist/videojs-mobile-ui.es.js +5 -7
  5. package/dist/videojs-mobile-ui.js +15 -17
  6. package/dist/videojs-mobile-ui.min.js +2 -2
  7. package/package.json +2 -2
  8. package/src/plugin.css +1 -1
  9. package/src/plugin.js +2 -4
package/README.md CHANGED
@@ -38,7 +38,11 @@ npm install video.js
38
38
  npm install videojs-mobile-ui
39
39
  ```
40
40
 
41
- Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js versions are not supported. 0.7.0 supports video.js 7.x.
41
+ Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js versions are not supported. 0.7.0 supports video.js 7.x. To install the latest version that works with Video.js 7, use the `latest7` tag:
42
+
43
+ ```sh
44
+ npm install videojs-mobile-ui@latest7
45
+ ```
42
46
 
43
47
  ## Plugin Options
44
48
 
@@ -51,7 +55,6 @@ Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js version
51
55
  exitOnRotate: true,
52
56
  lockOnRotate: true,
53
57
  lockToLandscapeOnEnter: false,
54
- iOS: false,
55
58
  disabled: false
56
59
  },
57
60
  touchControls: {
@@ -73,7 +76,7 @@ Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js version
73
76
  - *touchControls.seekSeconds* `int` Seconds to seek when double-tapping
74
77
  - *touchControls.tapTimeout* `int` Milliseconds to consider a double-tap
75
78
  - *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
76
- - *touchControls.disableOnEnd* `boolean` If true no touch controls are added.
79
+ - *touchControls.disabled* `boolean` If true no touch controls are added.
77
80
 
78
81
  ## Usage
79
82
 
package/dist/videojs-mobile-ui.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
1
+ /*! @name videojs-mobile-ui @version 1.1.0 @license MIT */
2
2
  'use strict';
3
3
 
4
4
  var videojs = require('video.js');
@@ -9,14 +9,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
10
10
  var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
11
11
 
12
- var version = "1.0.0";
12
+ var version = "1.1.0";
13
13
 
14
14
  /**
15
15
  * @file touchOverlay.js
16
16
  * Touch UI component
17
17
  */
18
- const Component = videojs__default['default'].getComponent('Component');
19
- const dom = videojs__default['default'].dom || videojs__default['default'];
18
+ const Component = videojs__default["default"].getComponent('Component');
19
+ const dom = videojs__default["default"].dom || videojs__default["default"];
20
20
 
21
21
  /**
22
22
  * The `TouchOverlay` is an overlay to capture tap events.
@@ -59,7 +59,7 @@ class TouchOverlay extends Component {
59
59
  *
60
60
  * @param {Event} event
61
61
  */
62
- this.handleTaps_ = videojs__default['default'].fn.debounce(event => {
62
+ this.handleTaps_ = videojs__default["default"].fn.debounce(event => {
63
63
  const increment = (this.taps - 1) * this.seekSeconds;
64
64
  this.taps = 0;
65
65
  if (increment < 1) {
@@ -85,7 +85,7 @@ class TouchOverlay extends Component {
85
85
  // Remove and readd class to trigger animation
86
86
  this.setAttribute('data-skip-text', `${increment} ${this.localize('seconds')}`);
87
87
  this.removeClass('skip');
88
- window__default['default'].requestAnimationFrame(() => {
88
+ window__default["default"].requestAnimationFrame(() => {
89
89
  this.addClass('skip');
90
90
  });
91
91
  }, this.tapTimeout);
@@ -161,7 +161,7 @@ const defaults = {
161
161
  disabled: false
162
162
  }
163
163
  };
164
- const screen = window__default['default'].screen;
164
+ const screen = window__default["default"].screen;
165
165
 
166
166
  /**
167
167
  * Gets 'portrait' or 'lanscape' from the two orientation APIs
@@ -169,17 +169,17 @@ const screen = window__default['default'].screen;
169
169
  * @return {string} orientation
170
170
  */
171
171
  const getOrientation = () => {
172
- if (window__default['default'].screen) {
172
+ if (screen) {
173
173
  // Prefer the string over angle, as 0° can be landscape on some tablets
174
- const orientationString = ((window__default['default'].screen.orientation || {}).type || window__default['default'].screen.mozOrientation || window__default['default'].screen.msOrientation || '').split('-')[0];
174
+ const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
175
175
  if (orientationString === 'landscape' || orientationString === 'portrait') {
176
176
  return orientationString;
177
177
  }
178
178
  }
179
179
 
180
180
  // iOS only supports window.orientation
181
- if (typeof window__default['default'].orientation === 'number') {
182
- if (window__default['default'].orientation === 0 || window__default['default'].orientation === 180) {
181
+ if (typeof window__default["default"].orientation === 'number') {
182
+ if (window__default["default"].orientation === 0 || window__default["default"].orientation === 180) {
183
183
  return 'portrait';
184
184
  }
185
185
  return 'landscape';
@@ -221,7 +221,7 @@ const onPlayerReady = (player, options) => {
221
221
  screen.orientation.lock('landscape').then(() => {
222
222
  locked = true;
223
223
  }).catch(e => {
224
- videojs__default['default'].log('Browser refused orientation lock:', e);
224
+ videojs__default["default"].log('Browser refused orientation lock:', e);
225
225
  });
226
226
  }
227
227
  }
@@ -232,10 +232,10 @@ const onPlayerReady = (player, options) => {
232
232
  }
233
233
  };
234
234
  if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
235
- if (videojs__default['default'].browser.IS_IOS) {
236
- window__default['default'].addEventListener('orientationchange', rotationHandler);
235
+ if (videojs__default["default"].browser.IS_IOS) {
236
+ window__default["default"].addEventListener('orientationchange', rotationHandler);
237
237
  player.on('dispose', () => {
238
- window__default['default'].removeEventListener('orientationchange', rotationHandler);
238
+ window__default["default"].removeEventListener('orientationchange', rotationHandler);
239
239
  });
240
240
  } else if (screen.orientation) {
241
241
  // addEventListener('orientationchange') is not a user interaction on Android
@@ -250,7 +250,7 @@ const onPlayerReady = (player, options) => {
250
250
  screen.orientation.lock('landscape').then(() => {
251
251
  locked = true;
252
252
  }).catch(e => {
253
- videojs__default['default'].log('Browser refused orientation lock:', e);
253
+ videojs__default["default"].log('Browser refused orientation lock:', e);
254
254
  });
255
255
  } else if (!player.isFullscreen() && locked) {
256
256
  screen.orientation.unlock();
@@ -289,8 +289,6 @@ const onPlayerReady = (player, options) => {
289
289
  * @param {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
290
290
  * Whether to always lock orientation to landscape on fullscreen mode
291
291
  * Unlocked when exiting fullscreen or on 'ended'
292
- * @param {boolean} [options.fullscreen.iOS=false]
293
- * Deprecated: Whether to disable iOS's native fullscreen so controls can work
294
292
  * @param {Object} [options.touchControls={}]
295
293
  * Touch UI options.
296
294
  * @param {boolean} [options.touchControls.disabled=false]
@@ -304,15 +302,15 @@ const onPlayerReady = (player, options) => {
304
302
  * Never shows if the endscreen plugin is present
305
303
  */
306
304
  const mobileUi = function (options = {}) {
307
- if (options.forceForTesting || videojs__default['default'].browser.IS_ANDROID || videojs__default['default'].browser.IS_IOS) {
305
+ if (options.forceForTesting || videojs__default["default"].browser.IS_ANDROID || videojs__default["default"].browser.IS_IOS) {
308
306
  this.ready(() => {
309
- onPlayerReady(this, videojs__default['default'].obj.merge(defaults, options));
307
+ onPlayerReady(this, videojs__default["default"].obj.merge(defaults, options));
310
308
  });
311
309
  }
312
310
  };
313
311
 
314
312
  // Register the plugin with video.js.
315
- videojs__default['default'].registerPlugin('mobileUi', mobileUi);
313
+ videojs__default["default"].registerPlugin('mobileUi', mobileUi);
316
314
 
317
315
  // Include the version number.
318
316
  mobileUi.VERSION = version;
package/dist/videojs-mobile-ui.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
2
- @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;animation:fadeAndScale .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>')}.video-js .vjs-touch-overlay.skip:after{content:attr(data-skip-text);position:absolute;top:60%;left:70%}.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.skip.reverse:after{right:70%;left:unset}.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}
1
+ /*! @name videojs-mobile-ui @version 1.1.0 @license MIT */
2
+ @keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}.video-js.vjs-mobile-ui.vjs-has-started .vjs-touch-overlay{position:absolute;pointer-events:auto;top:0}.video-js.vjs-mobile-ui .vjs-touch-overlay{display:block;width:100%;height:100%;pointer-events:none}.video-js.vjs-mobile-ui .vjs-touch-overlay.skip{opacity:0;animation:fadeAndScale .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>')}.video-js.vjs-mobile-ui .vjs-touch-overlay.skip:after{content:attr(data-skip-text);position:absolute;top:60%;left:70%}.video-js.vjs-mobile-ui .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-mobile-ui .vjs-touch-overlay.skip.reverse:after{right:70%;left:unset}.video-js.vjs-mobile-ui .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-mobile-ui .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-mobile-ui .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-mobile-ui .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-mobile-ui .vjs-touch-overlay.show-play-toggle .vjs-play-control{opacity:1;pointer-events:auto}.video-js.vjs-mobile-ui.vjs-mobile-ui-disable-end.vjs-ended .vjs-touch-overlay{display:none}
package/dist/videojs-mobile-ui.es.js CHANGED
@@ -1,8 +1,8 @@
1
- /*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
1
+ /*! @name videojs-mobile-ui @version 1.1.0 @license MIT */
2
2
  import videojs from 'video.js';
3
3
  import window from 'global/window';
4
4
 
5
- var version = "1.0.0";
5
+ var version = "1.1.0";
6
6
 
7
7
  /**
8
8
  * @file touchOverlay.js
@@ -162,9 +162,9 @@ const screen = window.screen;
162
162
  * @return {string} orientation
163
163
  */
164
164
  const getOrientation = () => {
165
- if (window.screen) {
165
+ if (screen) {
166
166
  // Prefer the string over angle, as 0° can be landscape on some tablets
167
- const orientationString = ((window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation || '').split('-')[0];
167
+ const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
168
168
  if (orientationString === 'landscape' || orientationString === 'portrait') {
169
169
  return orientationString;
170
170
  }
@@ -282,8 +282,6 @@ const onPlayerReady = (player, options) => {
282
282
  * @param {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
283
283
  * Whether to always lock orientation to landscape on fullscreen mode
284
284
  * Unlocked when exiting fullscreen or on 'ended'
285
- * @param {boolean} [options.fullscreen.iOS=false]
286
- * Deprecated: Whether to disable iOS's native fullscreen so controls can work
287
285
  * @param {Object} [options.touchControls={}]
288
286
  * Touch UI options.
289
287
  * @param {boolean} [options.touchControls.disabled=false]
@@ -310,4 +308,4 @@ videojs.registerPlugin('mobileUi', mobileUi);
310
308
  // Include the version number.
311
309
  mobileUi.VERSION = version;
312
310
 
313
- export default mobileUi;
311
+ export { mobileUi as default };
package/dist/videojs-mobile-ui.js CHANGED
@@ -1,22 +1,22 @@
1
- /*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
1
+ /*! @name videojs-mobile-ui @version 1.1.0 @license MIT */
2
2
  (function (global, factory) {
3
3
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
4
4
  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
5
5
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs));
6
- }(this, (function (videojs) { 'use strict';
6
+ })(this, (function (videojs) { 'use strict';
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
9
 
10
10
  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
11
11
 
12
- var version = "1.0.0";
12
+ var version = "1.1.0";
13
13
 
14
14
  /**
15
15
  * @file touchOverlay.js
16
16
  * Touch UI component
17
17
  */
18
- const Component = videojs__default['default'].getComponent('Component');
19
- const dom = videojs__default['default'].dom || videojs__default['default'];
18
+ const Component = videojs__default["default"].getComponent('Component');
19
+ const dom = videojs__default["default"].dom || videojs__default["default"];
20
20
 
21
21
  /**
22
22
  * The `TouchOverlay` is an overlay to capture tap events.
@@ -59,7 +59,7 @@
59
59
  *
60
60
  * @param {Event} event
61
61
  */
62
- this.handleTaps_ = videojs__default['default'].fn.debounce(event => {
62
+ this.handleTaps_ = videojs__default["default"].fn.debounce(event => {
63
63
  const increment = (this.taps - 1) * this.seekSeconds;
64
64
  this.taps = 0;
65
65
  if (increment < 1) {
@@ -169,9 +169,9 @@
169
169
  * @return {string} orientation
170
170
  */
171
171
  const getOrientation = () => {
172
- if (window.screen) {
172
+ if (screen) {
173
173
  // Prefer the string over angle, as 0° can be landscape on some tablets
174
- const orientationString = ((window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation || '').split('-')[0];
174
+ const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
175
175
  if (orientationString === 'landscape' || orientationString === 'portrait') {
176
176
  return orientationString;
177
177
  }
@@ -221,7 +221,7 @@
221
221
  screen.orientation.lock('landscape').then(() => {
222
222
  locked = true;
223
223
  }).catch(e => {
224
- videojs__default['default'].log('Browser refused orientation lock:', e);
224
+ videojs__default["default"].log('Browser refused orientation lock:', e);
225
225
  });
226
226
  }
227
227
  }
@@ -232,7 +232,7 @@
232
232
  }
233
233
  };
234
234
  if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
235
- if (videojs__default['default'].browser.IS_IOS) {
235
+ if (videojs__default["default"].browser.IS_IOS) {
236
236
  window.addEventListener('orientationchange', rotationHandler);
237
237
  player.on('dispose', () => {
238
238
  window.removeEventListener('orientationchange', rotationHandler);
@@ -250,7 +250,7 @@
250
250
  screen.orientation.lock('landscape').then(() => {
251
251
  locked = true;
252
252
  }).catch(e => {
253
- videojs__default['default'].log('Browser refused orientation lock:', e);
253
+ videojs__default["default"].log('Browser refused orientation lock:', e);
254
254
  });
255
255
  } else if (!player.isFullscreen() && locked) {
256
256
  screen.orientation.unlock();
@@ -289,8 +289,6 @@
289
289
  * @param {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
290
290
  * Whether to always lock orientation to landscape on fullscreen mode
291
291
  * Unlocked when exiting fullscreen or on 'ended'
292
- * @param {boolean} [options.fullscreen.iOS=false]
293
- * Deprecated: Whether to disable iOS's native fullscreen so controls can work
294
292
  * @param {Object} [options.touchControls={}]
295
293
  * Touch UI options.
296
294
  * @param {boolean} [options.touchControls.disabled=false]
@@ -304,19 +302,19 @@
304
302
  * Never shows if the endscreen plugin is present
305
303
  */
306
304
  const mobileUi = function (options = {}) {
307
- if (options.forceForTesting || videojs__default['default'].browser.IS_ANDROID || videojs__default['default'].browser.IS_IOS) {
305
+ if (options.forceForTesting || videojs__default["default"].browser.IS_ANDROID || videojs__default["default"].browser.IS_IOS) {
308
306
  this.ready(() => {
309
- onPlayerReady(this, videojs__default['default'].obj.merge(defaults, options));
307
+ onPlayerReady(this, videojs__default["default"].obj.merge(defaults, options));
310
308
  });
311
309
  }
312
310
  };
313
311
 
314
312
  // Register the plugin with video.js.
315
- videojs__default['default'].registerPlugin('mobileUi', mobileUi);
313
+ videojs__default["default"].registerPlugin('mobileUi', mobileUi);
316
314
 
317
315
  // Include the version number.
318
316
  mobileUi.VERSION = version;
319
317
 
320
318
  return mobileUi;
321
319
 
322
- })));
320
+ }));
package/dist/videojs-mobile-ui.min.js CHANGED
@@ -1,2 +1,2 @@
1
- /*! @name videojs-mobile-ui @version 1.0.0 @license MIT */
2
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const o=n.default.getComponent("Component"),i=n.default.dom||n.default;o.registerComponent("TouchOverlay",class extends o{constructor(e,t){super(e,t),this.seekSeconds=t.seekSeconds,this.tapTimeout=t.tapTimeout,this.taps=0,this.addChild("playToggle",{}),e.on(["playing","userinactive"],(e=>{this.removeClass("show-play-toggle")})),0===this.player_.options_.inactivityTimeout&&(this.player_.options_.inactivityTimeout=5e3),this.handleTaps_=n.default.fn.debounce((e=>{const t=(this.taps-1)*this.seekSeconds;if(this.taps=0,t<1)return;const 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()-t)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+t)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.setAttribute("data-skip-text",`${t} ${this.localize("seconds")}`),this.removeClass("skip"),window.requestAnimationFrame((()=>{this.addClass("skip")}))}),this.tapTimeout),this.enable()}createEl(){return i.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})}handleTap(e){e.target===this.el_&&(e.preventDefault(),this.taps+=1,1===this.taps&&(this.removeClass("skip"),this.toggleClass("show-play-toggle")),this.handleTaps_(e))}enable(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)}disable(){this.off("touchend",this.handleTap)}});const s={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},a=window.screen,r=()=>{if(window.screen){const e=((window.screen.orientation||{}).type||window.screen.mozOrientation||window.screen.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof window.orientation?0===window.orientation||180===window.orientation?"portrait":"landscape":"portrait"},l=function(e={}){(e.forceForTesting||n.default.browser.IS_ANDROID||n.default.browser.IS_IOS)&&this.ready((()=>{((e,t)=>{if(e.addClass("vjs-mobile-ui"),!t.touchControls.disabled){(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");const n=e.children_.indexOf(e.getChild("ControlBar"));e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,n)}if(t.fullscreen.disabled)return;let o=!1;const i=()=>{const i=r();"landscape"===i&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&a.orientation&&a.orientation.lock&&a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)}))):"portrait"===i&&t.fullscreen.exitOnRotate&&!o&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(n.default.browser.IS_IOS?(window.addEventListener("orientationchange",i),e.on("dispose",(()=>{window.removeEventListener("orientationchange",i)}))):a.orientation&&(a.orientation.onchange=i,e.on("dispose",(()=>{a.orientation.onchange=null})))),e.on("fullscreenchange",(i=>{e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===r()?a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&o&&(a.orientation.unlock(),o=!1)})),e.on("ended",(e=>{!0===o&&(a.orientation.unlock(),o=!1)}))})(this,n.default.obj.merge(s,e))}))};return n.default.registerPlugin("mobileUi",l),l.VERSION="1.0.0",l}));
1
+ /*! @name videojs-mobile-ui @version 1.1.0 @license MIT */
2
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsMobileUi=t(e.videojs)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const o=n.default.getComponent("Component"),i=n.default.dom||n.default;o.registerComponent("TouchOverlay",class extends o{constructor(e,t){super(e,t),this.seekSeconds=t.seekSeconds,this.tapTimeout=t.tapTimeout,this.taps=0,this.addChild("playToggle",{}),e.on(["playing","userinactive"],(e=>{this.removeClass("show-play-toggle")})),0===this.player_.options_.inactivityTimeout&&(this.player_.options_.inactivityTimeout=5e3),this.handleTaps_=n.default.fn.debounce((e=>{const t=(this.taps-1)*this.seekSeconds;if(this.taps=0,t<1)return;const 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()-t)),this.addClass("reverse");else{if(!(o>n.width-.4*n.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+t)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.setAttribute("data-skip-text",`${t} ${this.localize("seconds")}`),this.removeClass("skip"),window.requestAnimationFrame((()=>{this.addClass("skip")}))}),this.tapTimeout),this.enable()}createEl(){return i.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})}handleTap(e){e.target===this.el_&&(e.preventDefault(),this.taps+=1,1===this.taps&&(this.removeClass("skip"),this.toggleClass("show-play-toggle")),this.handleTaps_(e))}enable(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)}disable(){this.off("touchend",this.handleTap)}});const s={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},a=window.screen,r=()=>{if(a){const e=((a.orientation||{}).type||a.mozOrientation||a.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof window.orientation?0===window.orientation||180===window.orientation?"portrait":"landscape":"portrait"},l=function(e={}){(e.forceForTesting||n.default.browser.IS_ANDROID||n.default.browser.IS_IOS)&&this.ready((()=>{((e,t)=>{if(e.addClass("vjs-mobile-ui"),!t.touchControls.disabled){(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");const n=e.children_.indexOf(e.getChild("ControlBar"));e.touchOverlay=e.addChild("TouchOverlay",t.touchControls,n)}if(t.fullscreen.disabled)return;let o=!1;const i=()=>{const i=r();"landscape"===i&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&a.orientation&&a.orientation.lock&&a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)}))):"portrait"===i&&t.fullscreen.exitOnRotate&&!o&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(n.default.browser.IS_IOS?(window.addEventListener("orientationchange",i),e.on("dispose",(()=>{window.removeEventListener("orientationchange",i)}))):a.orientation&&(a.orientation.onchange=i,e.on("dispose",(()=>{a.orientation.onchange=null})))),e.on("fullscreenchange",(i=>{e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===r()?a.orientation.lock("landscape").then((()=>{o=!0})).catch((e=>{n.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&o&&(a.orientation.unlock(),o=!1)})),e.on("ended",(e=>{!0===o&&(a.orientation.unlock(),o=!1)}))})(this,n.default.obj.merge(s,e))}))};return n.default.registerPlugin("mobileUi",l),l.VERSION="1.1.0",l}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "videojs-mobile-ui",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Mobile tap controls and fullscreen on rotate for Video.js",
5
5
  "main": "dist/videojs-mobile-ui.cjs.js",
6
6
  "module": "dist/videojs-mobile-ui.es.js",
@@ -82,7 +82,7 @@
82
82
  "postcss": "^8.2.13",
83
83
  "postcss-cli": "^8.3.1",
84
84
  "rollup": "^2.46.0",
85
- "sinon": "^14.0.1",
85
+ "sinon": "^15.0.0",
86
86
  "video.js": "^8.0.0",
87
87
  "videojs-generate-karma-config": "~8.0.0",
88
88
  "videojs-generate-postcss-config": "~3.0.0",
package/src/plugin.css CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
  }
16
16
 
17
- .video-js {
17
+ .video-js.vjs-mobile-ui {
18
18
 
19
19
  &.vjs-has-started .vjs-touch-overlay {
20
20
  position: absolute;
package/src/plugin.js CHANGED
@@ -28,9 +28,9 @@ const screen = window.screen;
28
28
  * @return {string} orientation
29
29
  */
30
30
  const getOrientation = () => {
31
- if (window.screen) {
31
+ if (screen) {
32
32
  // Prefer the string over angle, as 0° can be landscape on some tablets
33
- const orientationString = ((window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation || '').split('-')[0];
33
+ const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
34
34
 
35
35
  if (orientationString === 'landscape' || orientationString === 'portrait') {
36
36
  return orientationString;
@@ -163,8 +163,6 @@ const onPlayerReady = (player, options) => {
163
163
  * @param {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
164
164
  * Whether to always lock orientation to landscape on fullscreen mode
165
165
  * Unlocked when exiting fullscreen or on 'ended'
166
- * @param {boolean} [options.fullscreen.iOS=false]
167
- * Deprecated: Whether to disable iOS's native fullscreen so controls can work
168
166
  * @param {Object} [options.touchControls={}]
169
167
  * Touch UI options.
170
168
  * @param {boolean} [options.touchControls.disabled=false]