npm - videojs-mobile-ui - Versions diffs - 0.6.0 → 0.8.0 - Mend

videojs-mobile-ui 0.6.0 → 0.8.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 (41) hide show

package/CHANGELOG.md +53 -0
package/README.md +10 -2
package/dist/videojs-mobile-ui.cjs.js +55 -28
package/dist/videojs-mobile-ui.css +1 -1
package/dist/videojs-mobile-ui.es.js +55 -28
package/dist/videojs-mobile-ui.js +55 -28
package/dist/videojs-mobile-ui.min.js +2 -2
package/docs/api/TouchOverlay.html +964 -0
package/docs/api/fonts/OpenSans-Bold-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Bold-webfont.svg +1830 -0
package/docs/api/fonts/OpenSans-Bold-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-BoldItalic-webfont.svg +1830 -0
package/docs/api/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-Italic-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Italic-webfont.svg +1830 -0
package/docs/api/fonts/OpenSans-Italic-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-Light-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Light-webfont.svg +1831 -0
package/docs/api/fonts/OpenSans-Light-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-LightItalic-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-LightItalic-webfont.svg +1835 -0
package/docs/api/fonts/OpenSans-LightItalic-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-Regular-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Regular-webfont.svg +1831 -0
package/docs/api/fonts/OpenSans-Regular-webfont.woff +0 -0
package/docs/api/global.html +957 -0
package/docs/api/index.html +159 -0
package/docs/api/plugin.js.html +221 -0
package/docs/api/scripts/linenumber.js +25 -0
package/docs/api/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/api/scripts/prettify/lang-css.js +2 -0
package/docs/api/scripts/prettify/prettify.js +28 -0
package/docs/api/styles/jsdoc-default.css +358 -0
package/docs/api/styles/prettify-jsdoc.css +111 -0
package/docs/api/styles/prettify-tomorrow.css +132 -0
package/docs/api/touchOverlay.js.html +211 -0
package/index.html +185 -92
package/package.json +10 -13
package/src/plugin.js +59 -34
package/test/plugin.test.js +46 -1

package/docs/api/touchOverlay.js.html ADDED Viewed

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: touchOverlay.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: touchOverlay.js</h1>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * @file touchOverlay.js
+ * Touch UI component
+ */
+import videojs from 'video.js';
+import window from 'global/window';
+const Component = videojs.getComponent('Component');
+const dom = videojs.dom || videojs;
+/**
+ * The `TouchOverlay` is an overlay to capture tap events.
+ *
+ * @extends Component
+ */
+class TouchOverlay extends Component {
+  /**
+  * Creates an instance of the this class.
+  *
+  * @param  {Player} player
+  *         The `Player` that this class should be attached to.
+  *
+  * @param  {Object} [options]
+  *         The key/value store of player options.
+  */
+  constructor(player, options) {
+    super(player, options);
+    this.seekSeconds = options.seekSeconds;
+    this.tapTimeout = options.tapTimeout;
+    // Add play toggle overlay
+    this.addChild('playToggle', {});
+    // Clear overlay when playback starts or with control fade
+    player.on(['playing', 'userinactive'], e => {
+      this.removeClass('show-play-toggle');
+    });
+    // A 0 inactivity timeout won't work here
+    if (this.player_.options_.inactivityTimeout === 0) {
+      this.player_.options_.inactivityTimeout = 5000;
+    }
+    this.enable();
+  }
+  /**
+   * Builds the DOM element.
+   *
+   * @return {Element}
+   *         The DOM element.
+   */
+  createEl() {
+    const el = dom.createEl('div', {
+      className: 'vjs-touch-overlay',
+      // Touch overlay is not tabbable.
+      tabIndex: -1
+    });
+    return el;
+  }
+  /**
+  * Debounces to either handle a delayed single tap, or a double tap
+   *
+   * @param {Event} event
+   *        The touch event
+   *
+   */
+  handleTap(event) {
+    // Don't handle taps on the play button
+    if (event.target !== this.el_) {
+      return;
+    }
+    event.preventDefault();
+    if (this.firstTapCaptured) {
+      this.firstTapCaptured = false;
+      if (this.timeout) {
+        window.clearTimeout(this.timeout);
+      }
+      this.handleDoubleTap(event);
+    } else {
+      this.firstTapCaptured = true;
+      this.timeout = window.setTimeout(() => {
+        this.firstTapCaptured = false;
+        this.handleSingleTap(event);
+      }, this.tapTimeout);
+    }
+  }
+  /**
+   * Toggles display of play toggle
+   *
+   * @param {Event} event
+   *        The touch event
+   *
+   */
+  handleSingleTap(event) {
+    this.removeClass('skip');
+    this.toggleClass('show-play-toggle');
+  }
+  /**
+   * Seeks by configured number of seconds if left or right part of video double tapped
+   *
+   * @param {Event} event
+   *        The touch event
+   *
+   */
+  handleDoubleTap(event) {
+    const rect = this.el_.getBoundingClientRect();
+    const x = event.changedTouches[0].clientX - rect.left;
+    // Check if double tap is in left or right area
+    if (x &lt; rect.width * 0.4) {
+      this.player_.currentTime(Math.max(
+        0, this.player_.currentTime() - this.seekSeconds));
+      this.addClass('reverse');
+    } else if (x > rect.width - (rect.width * 0.4)) {
+      this.player_.currentTime(Math.min(
+        this.player_.duration(), this.player_.currentTime() + this.seekSeconds));
+      this.removeClass('reverse');
+    } else {
+      return;
+    }
+    // Remove play toggle if showing
+    this.removeClass('show-play-toggle');
+    // Remove and readd class to trigger animation
+    this.removeClass('skip');
+    window.requestAnimationFrame(() => {
+      this.addClass('skip');
+    });
+  }
+  /**
+   * Enables touch handler
+   */
+  enable() {
+    this.firstTapCaptured = false;
+    this.on('touchend', this.handleTap);
+  }
+  /**
+   * Disables touch handler
+   */
+  disable() {
+    this.off('touchend', this.handleTap);
+  }
+}
+Component.registerComponent('TouchOverlay', TouchOverlay);
+export default TouchOverlay;
+</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#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/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 02 2021 09:43:56 GMT+0100 (CET)
+</footer>
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

package/index.html CHANGED Viewed

@@ -1,113 +1,206 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>videojs-mobile-ui Demo</title>
-  <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
-  <link href="dist/videojs-mobile-ui.css" rel="stylesheet">
+  <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet" />
+  <link href="dist/videojs-mobile-ui.css" rel="stylesheet" />
   <style>
-  .testEl {
-    width: 10%;
-    height: 10%;
-    position: absolute;
-    top: 0;
-    pointer-events: none;
-    display: none;
-  }
+    .testEl {
+      width: 10%;
+      height: 10%;
+      position: absolute;
+      top: 0;
+      pointer-events: none;
+      display: none;
+    }
   </style>
 </head>
 <body>
-  <video-js id="videojs-mobile-ui-player" class="video-js vjs-default-skin" 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>
+  <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>
   <ul>
-    <li><a href="test/">Run unit tests in browser.</a></li>
-    <li><a href="docs/api/">Read generated docs.</a></li>
+    <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>
   </ul>
-  <h2>Options</h2>
-  <ul id="options">
-    <li>fullscreen:</li>
-    <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="iOS">iOS</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>
-    </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>
-  <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,
-          iOS: false
-        },
-        touchControls: {
-          seekSeconds: 10,
-          tapTimeout: 300,
-          disableOnEnd: false
-        }
-      };
-      var url = new URL(window.location);
-      if (url.searchParams.has('options')) {
-        options = JSON.parse(url.searchParams.get('options'));
-      }
+</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'));
+    }
-      Object.keys(options).forEach(function(section) {
-        Object.keys(options[section]).forEach(function(prop) {
-          const val = options[section][prop];
+    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];
+        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;
-      document.getElementById('options').querySelectorAll('input').forEach(function(opt) {
-        opt.addEventListener('change', function() {
-          if (this.type === 'checkbox') {
-            options[this.getAttribute('data-section')][this.id] = this.checked;
-          } else {
-            options[this.getAttribute('data-section')][this.id] = parseFloat(this.value);
-          }
-          console.log(options);
-        });
+          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));
+    document
+    .getElementById('reload')
+    .addEventListener('click', function () {
+      url.searchParams.set('options', JSON.stringify(options));
-        window.location = url.href;
-      })
+      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);
-      });
+    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');
-      testPlayer.endscreen = function() {};
-      testPlayer.mobileUi(options);
-    }(window, window.videojs));
-  </script>
+    var testPlayer = (window.testPlayer = videojs(
+      'videojs-mobile-ui-player'
+      ));
+    testPlayer.endscreen = function () {};
+    testPlayer.mobileUi(options);
+  })(window, window.videojs);
+</script>
 </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "videojs-mobile-ui",
-  "version": "0.6.0",
+  "version": "0.8.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",
@@ -31,8 +31,7 @@
     "watch": "npm-run-all -p watch:*",
     "watch:css": "npm run build:css -- -w",
     "watch:js": "npm run build:js -- -w",
-    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose",
-    "x-prepare": "husky install"
+    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose"
   },
   "engines": {
     "node": ">=14",
@@ -64,34 +63,32 @@
     "src/",
     "test/"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.js": "vjsstandard --fix",
     "README.md": "doctoc --notitle"
   },
   "dependencies": {
-    "global": "^4.4.0",
-    "video.js": "^7"
+    "global": "^4.4.0"
+  },
+  "peerDependencies": {
+    "video.js": "^6 || ^7"
   },
   "devDependencies": {
     "@babel/runtime": "^7.14.0",
     "@videojs/generator-helpers": "~2.0.2",
+    "husky": "^6.0.0",
     "jsdoc": "^3.6.7",
     "karma": "^6.3.2",
     "postcss": "^8.2.13",
     "postcss-cli": "^8.3.1",
     "rollup": "^2.46.0",
     "sinon": "^9.1.0",
+    "video.js": "^6 || ^7",
     "videojs-generate-karma-config": "~8.0.0",
     "videojs-generate-postcss-config": "~3.0.0",
     "videojs-generate-rollup-config": "~6.2.0",
-    "videojs-generator-verify": "~3.0.3",
+    "videojs-generator-verify": "^4.1.0",
     "videojs-languages": "^2.0.0",
-    "videojs-standard": "^8.0.4",
-    "husky": "^6.0.0"
+    "videojs-standard": "^8.0.4"
   }
 }