videojs-mobile-ui 1.1.1 → 1.2.0-alpha.0

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

@@ -1,15 +1,15 @@
-/*! @name videojs-mobile-ui @version 1.1.1 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0-alpha.0 @license MIT */
 'use strict';
 
 var videojs = require('video.js');
-var window = require('global/window');
+var window = require('@ungap/global-this');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
 
-var version = "1.1.1";
+var version = "1.2.0-alpha.0";
 
 /**
  * @file touchOverlay.js

package/dist/videojs-mobile-ui.css

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 1.1.1 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0-alpha.0 @license MIT */
 @keyframes fadeAndScale{0%,to{opacity:0}25%{opacity:1}}.video-js.vjs-mobile-ui.vjs-has-started:not(.vjs-ad-playing) .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

@@ -1,8 +1,8 @@
-/*! @name videojs-mobile-ui @version 1.1.1 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0-alpha.0 @license MIT */
 import videojs from 'video.js';
-import window from 'global/window';
+import window from '@ungap/global-this';
 
-var version = "1.1.1";
+var version = "1.2.0-alpha.0";
 
 /**
  * @file touchOverlay.js

package/dist/videojs-mobile-ui.js

@@ -1,15 +1,16 @@
-/*! @name videojs-mobile-ui @version 1.1.1 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0-alpha.0 @license MIT */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
-  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs));
-})(this, (function (videojs) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js'), require('@ungap/global-this')) :
+  typeof define === 'function' && define.amd ? define(['video.js', '@ungap/global-this'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsMobileUi = factory(global.videojs, global.window));
+})(this, (function (videojs, window) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+  var window__default = /*#__PURE__*/_interopDefaultLegacy(window);
 
-  var version = "1.1.1";
+  var version = "1.2.0-alpha.0";
 
   /**
    * @file touchOverlay.js
@@ -85,7 +86,7 @@
         // Remove and readd class to trigger animation
         this.setAttribute('data-skip-text', `${increment} ${this.localize('seconds')}`);
         this.removeClass('skip');
-        window.requestAnimationFrame(() => {
+        window__default["default"].requestAnimationFrame(() => {
           this.addClass('skip');
         });
       }, this.tapTimeout);
@@ -161,7 +162,7 @@
       disabled: false
     }
   };
-  const screen = window.screen;
+  const screen = window__default["default"].screen;
 
   /**
    * Gets 'portrait' or 'lanscape' from the two orientation APIs
@@ -178,8 +179,8 @@
     }
 
     // iOS only supports window.orientation
-    if (typeof window.orientation === 'number') {
-      if (window.orientation === 0 || window.orientation === 180) {
+    if (typeof window__default["default"].orientation === 'number') {
+      if (window__default["default"].orientation === 0 || window__default["default"].orientation === 180) {
         return 'portrait';
       }
       return 'landscape';
@@ -233,9 +234,9 @@
     };
     if (options.fullscreen.enterOnRotate || options.fullscreen.exitOnRotate) {
       if (videojs__default["default"].browser.IS_IOS) {
-        window.addEventListener('orientationchange', rotationHandler);
+        window__default["default"].addEventListener('orientationchange', rotationHandler);
         player.on('dispose', () => {
-          window.removeEventListener('orientationchange', rotationHandler);
+          window__default["default"].removeEventListener('orientationchange', rotationHandler);
         });
       } else if (screen.orientation) {
         // addEventListener('orientationchange') is not a user interaction on Android

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

@@ -1,2 +1,2 @@
-/*! @name videojs-mobile-ui @version 1.1.1 @license MIT */
-!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.1",l}));
+/*! @name videojs-mobile-ui @version 1.2.0-alpha.0 @license MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("@ungap/global-this")):"function"==typeof define&&define.amd?define(["video.js","@ungap/global-this"],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);const s=o.default.getComponent("Component"),a=o.default.dom||o.default;s.registerComponent("TouchOverlay",class extends s{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_=o.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"),i.default.requestAnimationFrame((()=>{this.addClass("skip")}))}),this.tapTimeout),this.enable()}createEl(){return a.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 l={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},r=i.default.screen,d=()=>{if(r){const e=((r.orientation||{}).type||r.mozOrientation||r.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"},u=function(e={}){(e.forceForTesting||o.default.browser.IS_ANDROID||o.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 n=!1;const s=()=>{const i=d();"landscape"===i&&t.fullscreen.enterOnRotate?!1===e.paused()&&(e.requestFullscreen(),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&r.orientation&&r.orientation.lock&&r.orientation.lock("landscape").then((()=>{n=!0})).catch((e=>{o.default.log("Browser refused orientation lock:",e)}))):"portrait"===i&&t.fullscreen.exitOnRotate&&!n&&e.isFullscreen()&&e.exitFullscreen()};(t.fullscreen.enterOnRotate||t.fullscreen.exitOnRotate)&&(o.default.browser.IS_IOS?(i.default.addEventListener("orientationchange",s),e.on("dispose",(()=>{i.default.removeEventListener("orientationchange",s)}))):r.orientation&&(r.orientation.onchange=s,e.on("dispose",(()=>{r.orientation.onchange=null})))),e.on("fullscreenchange",(i=>{e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===d()?r.orientation.lock("landscape").then((()=>{n=!0})).catch((e=>{o.default.log("Browser refused orientation lock:",e)})):!e.isFullscreen()&&n&&(r.orientation.unlock(),n=!1)})),e.on("ended",(e=>{!0===n&&(r.orientation.unlock(),n=!1)}))})(this,o.default.obj.merge(l,e))}))};return o.default.registerPlugin("mobileUi",u),u.VERSION="1.2.0-alpha.0",u}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-mobile-ui",
-  "version": "1.1.1",
+  "version": "1.2.0-alpha.0",
   "description": "Mobile tap controls and fullscreen on rotate for Video.js",
   "main": "dist/videojs-mobile-ui.cjs.js",
   "module": "dist/videojs-mobile-ui.es.js",
@@ -67,9 +67,6 @@
     "*.js": "vjsstandard --fix",
     "README.md": "doctoc --notitle"
   },
-  "dependencies": {
-    "global": "^4.4.0"
-  },
   "peerDependencies": {
     "video.js": "^8"
   },
@@ -82,7 +79,7 @@
     "postcss": "^8.2.13",
     "postcss-cli": "^8.3.1",
     "rollup": "^2.46.0",
-    "sinon": "^15.0.0",
+    "sinon": "^16.0.0",
     "video.js": "^8.0.0",
     "videojs-generate-karma-config": "~8.0.0",
     "videojs-generate-postcss-config": "~3.0.0",
@@ -90,5 +87,8 @@
     "videojs-generator-verify": "^4.1.0",
     "videojs-languages": "^2.0.0",
     "videojs-standard": "^9.0.1"
+  },
+  "dependencies": {
+    "@ungap/global-this": "^0.4.4"
   }
 }

package/scripts/rollup.config.js

@@ -7,5 +7,13 @@ const config = generate(options);
 
 // Add additonal builds/customization here!
 
+config.settings.globals.browser['@ungap/global-this'] = 'window';
+config.settings.globals.module['@ungap/global-this'] = 'window';
+config.settings.externals.browser.push('@ungap/global-this');
+config.settings.externals.module.push('@ungap/global-this');
+
+// eslint-disable-next-line no-console
+console.log(JSON.stringify(config.settings, null, 2));
+
 // export the builds to rollup
 export default Object.values(config.builds);

package/src/plugin.js

@@ -1,7 +1,7 @@
 import videojs from 'video.js';
 import {version as VERSION} from '../package.json';
 import './touchOverlay.js';
-import window from 'global/window';
+import window from '@ungap/global-this';
 
 // Default options for the plugin.
 const defaults = {

package/src/touchOverlay.js

@@ -4,7 +4,7 @@
  */
 
 import videojs from 'video.js';
-import window from 'global/window';
+import window from '@ungap/global-this';
 
 const Component = videojs.getComponent('Component');
 const dom = videojs.dom || videojs;

package/test/plugin.test.js

@@ -1,5 +1,4 @@
-import document from 'global/document';
-import window from 'global/window';
+import window from '@ungap/global-this';
 
 import QUnit from 'qunit';
 import sinon from 'sinon';
@@ -26,8 +25,8 @@ QUnit.module('videojs-mobile-ui', {
     // with the actual timer methods!
     this.clock = sinon.useFakeTimers();
 
-    this.fixture = document.getElementById('qunit-fixture');
-    this.video = document.createElement('video');
+    this.fixture = window.document.getElementById('qunit-fixture');
+    this.video = window.document.createElement('video');
     this.fixture.appendChild(this.video);
     this.player = videojs(this.video);
   },
@@ -84,7 +83,7 @@ QUnit.test('iOS event listeners', function(assert) {
 
   const oldBrowser = videojs.browser;
 
-  videojs.browser = videojs.mergeOptions(videojs.browser, {
+  videojs.browser = videojs.obj.merge(videojs.browser, {
     IS_IOS: true,
     IS_ANDROID: false
   });
@@ -124,7 +123,7 @@ QUnit[testOrSkip]('Android event listeners', function(assert) {
 
   const oldBrowser = videojs.browser;
 
-  videojs.browser = videojs.mergeOptions(videojs.browser, {
+  videojs.browser = videojs.obj.merge(videojs.browser, {
     IS_IOS: false,
     IS_ANDROID: true
   });
@@ -156,7 +155,7 @@ QUnit[testOrSkip]('Android event listeners skipped if disabled', function(assert
 
   const oldBrowser = videojs.browser;
 
-  videojs.browser = videojs.mergeOptions(videojs.browser, {
+  videojs.browser = videojs.obj.merge(videojs.browser, {
     IS_IOS: false,
     IS_ANDROID: true
   });