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

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

@@ -1,2 +1,2 @@
-/*! @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}));
+/*! @name videojs-mobile-ui @version 0.9.0-beta.3 @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 s=n.default.getComponent("Component"),i=n.default.dom||n.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_=((e,t)=>{let n=null;return(...s)=>{window.clearTimeout(n),n=window.setTimeout(()=>{e.apply(null,s)},t)}})(e=>{const t=(this.taps-1)*this.seekSeconds;if(this.taps=0,t<1)return;const n=this.el_.getBoundingClientRect(),s=e.changedTouches[0].clientX-n.left;if(s<.4*n.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-t)),this.addClass("reverse");else{if(!(s>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.cancelable&&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 o={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,lockToLandscapeOnEnter:!1,swipeToFullscreen:!1,swipeFromFullscreen:!1,disabled:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1,disabled:!1}},l=window.screen,r=n.default.registerPlugin||n.default.plugin,a=()=>{if(l){const e=((l.orientation||{}).type||l.mozOrientation||l.msOrientation||"").split("-")[0];if("landscape"===e||"portrait"===e)return e}return"number"==typeof window.orientation?0===window.orientation||180===window.orientation?"portrait":"landscape":"portrait"},c=(e,t)=>{if(e.addClass("vjs-mobile-ui"),!t.touchControls.disabled){let s;(t.touchControls.disableOnEnd||"function"==typeof e.endscreen)&&e.addClass("vjs-mobile-ui-disable-end");const i=n.default.VERSION.split("."),o=parseInt(i[0],10),l=parseInt(i[1],10);s=o<7||7===o&&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,s)}if(t.fullscreen.disabled)return;(t.fullscreen.swipeToFullscreen||t.fullscreen.swipeFromFullscreen)&&((e,t)=>{const{swipeToFullscreen:n,swipeFromFullscreen:s}=t.fullscreen;n&&e.addClass("using-fs-swipe-up"),s&&e.addClass("using-fs-swipe-down");let i=0,o=!1;const l=t=>{const l=e.isFullscreen();!l&&!n||l&&!s?o=!1:(i=t.changedTouches[0].clientY,o=!0,e.tech_.el().style.transition="")},r=t=>{if(!o)return;const n=t.touches[0].clientY,s=i-n,l=e.isFullscreen();let r=1;!l&&s>0?(r=1+Math.min(.1,s/500),e.tech_.el().style.transform=`scale(${r})`):l&&s<0&&(r=1-Math.min(.1,Math.abs(s)/500),e.tech_.el().style.transform=`scale(${r})`)},a=t=>{if(!o)return;if(o=!1,e.tech_.el().style.transition="transform 0.3s ease-out",e.tech_.el().style.transform="scale(1)","touchcancel"===t.type)return;const n=t.changedTouches[0].clientY,s=i-n;s>30&&!e.isFullscreen()?e.requestFullscreen().catch(t=>{e.log.warn("Browser refused fullscreen",t)}):s<-30&&e.isFullscreen()&&e.exitFullscreen()};e.el().addEventListener("touchstart",l,{passive:!0}),e.el().addEventListener("touchmove",r,{passive:!0}),e.el().addEventListener("touchend",a,{passive:!0}),e.el().addEventListener("touchcancel",a,{passive:!0}),e.on("dispose",()=>{e.el().removeEventListener("touchstart",l,{passive:!0}),e.el().removeEventListener("touchmove",r,{passive:!0}),e.el().removeEventListener("touchend",a,{passive:!0}),e.el().removeEventListener("touchcancel",a,{passive:!0}),e.tech_.el().style.transform="",e.tech_.el().style.transition=""})})(e,t);let s=!1;const i=()=>{const i=a();"landscape"===i&&t.fullscreen.enterOnRotate?e.paused()||e.isFullscreen()||(e.requestFullscreen().catch(t=>{e.log.warn("Browser refused fullscreen request:",t)}),(t.fullscreen.lockOnRotate||t.fullscreen.lockToLandscapeOnEnter)&&l.orientation&&l.orientation.lock&&l.orientation.lock("landscape").then(()=>{s=!0}).catch(e=>{n.default.log.warn("Browser refused orientation lock:",e)})):"portrait"===i&&t.fullscreen.exitOnRotate&&!s&&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)})):l.orientation&&(l.orientation.onchange=i,e.on("dispose",()=>{l.orientation.onchange=null}))),e.on("fullscreenchange",i=>{e.isFullscreen()&&t.fullscreen.lockToLandscapeOnEnter&&"portrait"===a()?l.orientation.lock("landscape").then(()=>{s=!0}).catch(e=>{n.default.log("Browser refused orientation lock:",e)}):!e.isFullscreen()&&s&&(l.orientation.unlock(),s=!1)}),e.on("ended",e=>{!0===s&&(l.orientation.unlock(),s=!1)})},u=function(e={}){(e.forceForTesting||n.default.browser.IS_ANDROID||n.default.browser.IS_IOS)&&this.ready(()=>{c(this,n.default.mergeOptions(o,e))})};return r("mobileUi",u),u.VERSION="0.9.0-beta.3",u});

package/docs/api/swipeFullscreen.js.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: swipeFullscreen.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: swipeFullscreen.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/** @import Player from 'video.js/dist/types/player' */
+/** @import Plugin from 'video.js/dist/types/plugin' */
+/** @import {MobileUiOptions} from './plugin' */
+
+/**
+ * Sets up swiping to enter and exit fullscreen.
+ *
+ * @this {Plugin}
+ * @param {Player} player
+ *  The player to initialise on.
+ * @param {MobileUiOptions} pluginOptions
+ *  The options used by the mobile ui plugin.
+ */
+const initSwipe = (player, pluginOptions) => {
+  const {swipeToFullscreen, swipeFromFullscreen} = pluginOptions.fullscreen;
+
+  if (swipeToFullscreen) {
+    player.addClass('using-fs-swipe-up');
+  }
+  if (swipeFromFullscreen) {
+    player.addClass('using-fs-swipe-down');
+  }
+
+  let touchStartY = 0;
+  let couldBeSwiping = false;
+  const swipeThreshold = 30;
+
+  /**
+   * Monitor the possible start of a swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
+   */
+  const onStart = (e) => {
+    const isFullscreen = player.isFullscreen();
+
+    if (
+      (!isFullscreen &amp;&amp; !swipeToFullscreen) ||
+      (isFullscreen &amp;&amp; !swipeFromFullscreen)
+    ) {
+      couldBeSwiping = false;
+      return;
+    }
+
+    touchStartY = e.changedTouches[0].clientY;
+    couldBeSwiping = true;
+    player.tech_.el().style.transition = '';
+  };
+
+  /**
+   * Monitor the movement of a swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
+   */
+  const onMove = (e) => {
+    if (!couldBeSwiping) {
+      return;
+    }
+
+    const currentY = e.touches[0].clientY;
+    const deltaY = touchStartY - currentY;
+    const isFullscreen = player.isFullscreen();
+
+    let scale = 1;
+
+    if (!isFullscreen &amp;&amp; deltaY > 0) {
+      // Swiping up to enter fullscreen: Zoom in (Max 1.1)
+      scale = 1 + Math.min(0.1, deltaY / 500);
+      player.tech_.el().style.transform = `scale(${scale})`;
+    } else if (isFullscreen &amp;&amp; deltaY &lt; 0) {
+      // Swiping down to exit fullscreen: Zoom out (Min 0.9)
+      scale = 1 - Math.min(0.1, Math.abs(deltaY) / 500);
+      player.tech_.el().style.transform = `scale(${scale})`;
+    }
+  };
+
+  /**
+   * Monitor the touch end to determine a valid swipe
+   *
+   * @param {TouchEvent} e Triggering touch event
+   */
+  const onEnd = (e) => {
+    if (!couldBeSwiping) {
+      return;
+    }
+    couldBeSwiping = false;
+
+    player.tech_.el().style.transition = 'transform 0.3s ease-out';
+    player.tech_.el().style.transform = 'scale(1)';
+
+    if (e.type === 'touchcancel') {
+      return;
+    }
+
+    const touchEndY = e.changedTouches[0].clientY;
+    const deltaY = touchStartY - touchEndY;
+
+    if (deltaY > swipeThreshold &amp;&amp; !player.isFullscreen()) {
+      player.requestFullscreen().catch((err) => {
+        player.log.warn('Browser refused fullscreen', err);
+      });
+    } else if (deltaY &lt; -swipeThreshold &amp;&amp; player.isFullscreen()) {
+      player.exitFullscreen();
+    }
+  };
+
+  player.el().addEventListener('touchstart', onStart, { passive: true });
+  player.el().addEventListener('touchmove', onMove, { passive: true });
+  player.el().addEventListener('touchend', onEnd, { passive: true });
+  player.el().addEventListener('touchcancel', onEnd, { passive: true });
+
+  player.on('dispose', () => {
+    player.el().removeEventListener('touchstart', onStart, { passive: true });
+    player.el().removeEventListener('touchmove', onMove, { passive: true });
+    player.el().removeEventListener('touchend', onEnd, { passive: true });
+    player.el().removeEventListener('touchcancel', onEnd, { passive: true });
+    player.tech_.el().style.transform = '';
+    player.tech_.el().style.transition = '';
+  });
+
+};
+
+export default initSwipe;
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="TouchOverlay.html">TouchOverlay</a></li></ul><h3>Global</h3><ul><li><a href="global.html#Component">Component</a></li><li><a href="global.html#defaults">defaults</a></li><li><a href="global.html#getOrientation">getOrientation</a></li><li><a href="global.html#initSwipe">initSwipe</a></li><li><a href="global.html#mobileUi">mobileUi</a></li><li><a href="global.html#onPlayerReady">onPlayerReady</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Fri Jan 23 2026 14:03:20 GMT+0100 (Mitteleuropäische Normalzeit)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

package/index.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>videojs-mobile-ui Demo</title>
+  <link href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%231f1f1f%22%3E%3Cpath%20d%3D%22M419-80q-28%200-52.5-12T325-126L124-381q-8-9-7-21.5t9-20.5q20-21%2048-25t52%2011l74%2045v-328q0-17%2011.5-28.5T340-760q17%200%2029%2011.5t12%2028.5v200h299q50%200%2085%2035t35%2085v160q0%2066-47%20113T640-80H419Zm60-520q-17%200-28.5-11.5T439-640q0-2%205-20%208-14%2012-28.5t4-31.5q0-50-35-85t-85-35q-50%200-85%2035t-35%2085q0%2017%204%2031.5t12%2028.5q3%205%204%2010t1%2010q0%2017-11%2028.5T202-600q-11%200-20.5-6T167-621q-13-22-20-47t-7-52q0-83%2058.5-141.5T340-920q83%200%20141.5%2058.5T540-720q0%2027-7%2052t-20%2047q-5%209-14%2015t-20%206Z%22%2F%3E%3C%2Fsvg%3E" rel="icon" type="image/x-icon" />
   <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet" />
   <link href="dist/videojs-mobile-ui.css" rel="stylesheet" />
   <style>
@@ -15,192 +17,252 @@
       pointer-events: none;
       display: none;
     }
+
+    body {
+      font-size: 16px;
+      line-height: 1.4;
+      margin-bottom: 60px;
+    }
+
+    .video-container {
+      width: 100vw;
+      margin-left: calc(50% - 50vw);
+    }
+
+    video-js:fullscreen .vjs-control-bar {
+      font-size: 1.1em;
+      padding-bottom: 20px;
+      height: calc(3em + 20px);
+    }
+
+    #demoOptions {
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      li {
+        margin-bottom: 10px;
+      }
+
+      label {
+        min-height: 44px;
+        /* Apple/Google tap target guidance */
+        cursor: pointer;
+        font-family: ui-monospace, 'Courier New', Courier, monospace;
+      }
+
+      /* Text inputs */
+      input[type="text"],
+      input[type="email"],
+      input[type="number"],
+      input[type="password"],
+      textarea {
+        width: 90%;
+        padding: 10px 12px;
+        font-size: 16px;
+        /* Prevents iOS zoom */
+        border: 1px solid #ccc;
+        border-radius: 6px;
+      }
+
+      /* Checkboxes (simple but usable) */
+      input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+
+      /* Optional: subtle focus style */
+      input:focus,
+      textarea:focus {
+        outline: none;
+        border-color: #007aff;
+        /* iOS blue */
+      }
+
+      /* Optional: slightly separate groups */
+      li+li {
+        border-top: 1px solid #eee;
+        padding-top: 8px;
+      }
+
+      button {
+        font-size: 16px;
+        margin-bottom: 10px;
+      }
+    }
   </style>
 </head>
+
 <body>
-  <video-js
-  id="videojs-mobile-ui-player"
-  class="video-js vjs-default-skin vjs-fluid"
-  controls
-  playsinline
-  >
-  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
-  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm" />
-</video-js>
-<ul>
-  <li><a href="test/">Run unit tests in browser.</a></li>
-  <li><a href="docs/api/">Read generated docs.</a></li>
-</ul>
-<h2>Options</h2>
-<ul id="options">
-  <li>fullscreen:</li>
+  <h1>videojs-mobile-ui test page.</h1>
+  <div class="video-container">
+    <video-js id="videojs-mobile-ui-player" class="video-js vjs-default-skin vjs-fluid" controls playsinline>
+      <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
+        type="application/x-mpegurl" />
+    </video-js>
+  </div>
   <ul>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="enterOnRotate"
-      />enterOnRotate
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="exitOnRotate"
-      />exitOnRotate
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="lockOnRotate"
-      />lockOnRotate
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="alwaysLockToLandscape"
-      />alwaysLockToLandscape
-    </li>
-    <li>
-      <input type="checkbox" data-section="fullscreen" id="iOS" />iOS
-      <b>Deprecated</b>
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="fullscreenDisabled"
-      />disabled
-    </li>
+    <li><a href="test/">Run unit tests in browser.</a></li>
   </ul>
-  <li>touchControls:</li>
-  <ul>
-    <li>
-      <input
-      type="number"
-      data-section="touchControls"
-      id="seekSeconds"
-      />seekSeconds
-    </li>
-    <li>
-      <input
-      type="number"
-      data-section="touchControls"
-      id="tapTimeout"
-      />tapTimeout
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="touchControls"
-      id="disableOnEnd"
-      />disableOnEnd
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="touchControls"
-      id="touchControlsDisabled"
-      />disabled
-    </li>
-  </ul>
-</ul>
-<button id="reload">Reload with options</button>
-<ul id="log"></ul>
-<script src="node_modules/video.js/dist/video.js"></script>
-<script src="dist/videojs-mobile-ui.js"></script>
-<script>
-  (function (window, videojs) {
-    var options = {
-      fullscreen: {
-        enterOnRotate: true,
-        exitOnRotate: true,
-        lockOnRotate: true,
-        alwaysLockToLandscape: false,
-        iOS: false,
-        disabled: false,
-      },
-      touchControls: {
-        seekSeconds: 10,
-        tapTimeout: 300,
-        disableOnEnd: false,
-        disabled: false,
-      },
-    };
-
-    var url = new URL(window.location);
-    if (url.searchParams.has('options')) {
-      options = JSON.parse(url.searchParams.get('options'));
-    }
+  <h2>Options</h2>
+  <div id="demoOptions">
+    <p>Reload to apply changed options.</p>
+    <button id="reload">Reload with options</button>
+    <ul id="options">
+      <li>
+        <h3>fullscreen:</h3>
+      </li>
+      <ul>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="enterOnRotate" /> <label for="enterOnRotate">enterOnRotate</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="exitOnRotate" />
+          <label for="exitOnRotate">exitOnRotate</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="lockOnRotate" />
+          <label for="lockOnRotate">lockOnRotate</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="alwaysLockToLandscape" />
+          <label for="alwaysLockToLandscape">alwaysLockToLandscape</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="swipeToFullscreen" />
+          <label for="swipeToFullscreen">swipeToFullscreen</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="swipeFromFullscreen" />
+          <label for="swipeFromFullscreen">swipeFromFullscreen</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="fullscreenDisabled" />
+          <label for="disabled">disabled</label>
+        </li>
+      </ul>
+      <li>
+        <h3>touchControls:</h3>
+      </li>
+      <ul>
+        <li>
+          <input type="number" data-section="touchControls" id="seekSeconds" />
+          <label for="seekSeconds">seekSeconds</label>
+        </li>
+        <li>
+          <input type="number" data-section="touchControls" id="tapTimeout" />
+          <label for="tapTimeout">tapTimeout</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="touchControls" id="disableOnEnd" />
+          <label for="disableOnEnd">disableOnEnd</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="touchControls" id="touchControlsDisabled" />
+          <label for="disabled">disabled</label>
+        </li>
+      </ul>
+    </ul>
+  </div>
+  <ul id="log"></ul>
+  <script src="node_modules/video.js/dist/video.js"></script>
+  <script src="dist/videojs-mobile-ui.js"></script>
+  <script>
+    (function (window, videojs) {
+      var options = {
+        fullscreen: {
+          enterOnRotate: true,
+          exitOnRotate: true,
+          lockOnRotate: true,
+          alwaysLockToLandscape: false,
+          swipeToFullscreen: false,
+          swipeFromFullscreen: false,
+          disabled: false,
+        },
+        touchControls: {
+          seekSeconds: 10,
+          tapTimeout: 300,
+          disableOnEnd: false,
+          disabled: false,
+        },
+      };
+
+      var url = new URL(window.location);
+      if (url.searchParams.has('options')) {
+        options = JSON.parse(url.searchParams.get('options'));
+      }
 
-    console.log(JSON.stringify(options, null, 2));
+      console.log(JSON.stringify(options, null, 2));
 
-    Object.keys(options).forEach(function (section) {
-      Object.keys(options[section]).forEach(function (prop) {
-        const val = options[section][prop];
+      Object.keys(options).forEach(function (section) {
+        Object.keys(options[section]).forEach(function (prop) {
+          const val = options[section][prop];
 
-        if (prop === 'disabled') {
-          prop = `${section}Disabled`;
-        }
+          if (prop === 'disabled') {
+            prop = `${section}Disabled`;
+          }
 
-        if (typeof val === 'boolean') {
-          document.getElementById(prop).checked = val;
-        }
-        if (typeof val === 'number') {
-          document.getElementById(prop).value = val;
-        }
+          if (typeof val === 'boolean') {
+            document.getElementById(prop).checked = val;
+          }
+          if (typeof val === 'number') {
+            document.getElementById(prop).value = val;
+          }
+        });
       });
-    });
-
-    document
-    .getElementById('options')
-    .querySelectorAll('input')
-    .forEach(function (opt) {
-      opt.addEventListener('change', function () {
-        if (this.type === 'checkbox') {
-          const param = this.id.endsWith('Disabled')
-          ? 'disabled'
-          : this.id;
-
-          options[this.getAttribute('data-section')][param] =
-          this.checked;
-        } else {
-          options[this.getAttribute('data-section')][this.id] =
-          parseFloat(this.value);
-        }
-        console.log(options);
+
+      document
+        .getElementById('options')
+        .querySelectorAll('input')
+        .forEach(function (opt) {
+          opt.addEventListener('change', function () {
+            if (this.type === 'checkbox') {
+              const param = this.id.endsWith('Disabled')
+                ? 'disabled'
+                : this.id;
+
+              options[this.getAttribute('data-section')][param] =
+                this.checked;
+            } else {
+              options[this.getAttribute('data-section')][this.id] =
+                parseFloat(this.value);
+            }
+            console.log(options);
+          });
+        });
+
+      document
+        .getElementById('reload')
+        .addEventListener('click', function () {
+          url.searchParams.set('options', JSON.stringify(options));
+
+          window.location = url.href;
+        });
+
+      window.addEventListener('orientationchange', function () {
+        var el = document.createElement('li');
+        var message =
+          new Date().toTimeString().split(' ')[0] + ' ' + window.orientation;
+        message +=
+          screen && screen.orientation
+            ? ' ' + screen.orientation.type + ' ' + screen.orientation.angle
+            : '';
+        el.textContent = message;
+        console.log(message);
+        document.getElementById('log').appendChild(el);
       });
-    });
-
-    document
-    .getElementById('reload')
-    .addEventListener('click', function () {
-      url.searchParams.set('options', JSON.stringify(options));
-
-      window.location = url.href;
-    });
-
-    window.addEventListener('orientationchange', function () {
-      var el = document.createElement('li');
-      var message =
-      new Date().toTimeString().split(' ')[0] + ' ' + window.orientation;
-      message +=
-      screen && screen.orientation
-      ? ' ' + screen.orientation.type + ' ' + screen.orientation.angle
-      : '';
-      el.textContent = message;
-      console.log(message);
-      document.getElementById('log').appendChild(el);
-    });
-
-    var testPlayer = (window.testPlayer = videojs(
-      'videojs-mobile-ui-player'
+
+      var testPlayer = (window.testPlayer = videojs(
+        'videojs-mobile-ui-player'
       ));
-    testPlayer.endscreen = function () {};
-    testPlayer.mobileUi(options);
-  })(window, window.videojs);
-</script>
+      testPlayer.endscreen = function () { };
+      testPlayer.mobileUi(options);
+    })(window, window.videojs);
+  </script>
 </body>
-</html>
+
+</html>