npm - videojs-mobile-ui - Versions diffs - 1.2.0-alpha.0 → 1.2.0 - Mend

videojs-mobile-ui 1.2.0-alpha.0 → 1.2.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 (53) hide show

package/README.md +104 -53
package/dist/lang/de.js +1 -3
package/dist/lang/en.js +1 -3
package/dist/lang/it.js +1 -3
package/dist/videojs-mobile-ui.cjs.js +195 -43
package/dist/videojs-mobile-ui.css +104 -2
package/dist/videojs-mobile-ui.es.js +195 -43
package/dist/videojs-mobile-ui.js +204 -53
package/dist/videojs-mobile-ui.min.js +2 -2
package/docs/api/TouchOverlay.html +772 -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 +1485 -0
package/docs/api/index.html +159 -0
package/docs/api/plugin.js.html +266 -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/swipeFullscreen.js.html +173 -0
package/docs/api/touchOverlay.js.html +203 -0
package/index.html +238 -170
package/package.json +23 -13
package/scripts/lang.js +24 -0
package/scripts/netlify.js +16 -0
package/scripts/postcss.config.js +29 -5
package/scripts/readme-options.js +370 -0
package/scripts/rollup.config.js +0 -8
package/src/plugin.css +6 -0
package/src/plugin.js +65 -39
package/src/swipeFullscreen.js +122 -0
package/src/touchOverlay.js +7 -3
package/test/plugin.test.js +125 -18
package/test/swipeFullscreen.test.js +365 -0

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

@@ -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/docs/api/touchOverlay.js.html ADDED Viewed

@@ -0,0 +1,203 @@
+<!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';
+/** @import Player from 'video.js/dist/types/player' */
+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  {options} [options]
+  *         The key/value store of player options.
+  */
+  constructor(player, options) {
+    super(player, options);
+    this.seekSeconds = options.seekSeconds;
+    this.tapTimeout = options.tapTimeout;
+    this.taps = 0;
+    // 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;
+    }
+    /**
+     * Debounced tap handler.
+     * Seeks number of (taps - 1) * configured seconds to skip.
+     * One tap is a non-op
+     *
+     * @param {Event} event
+     */
+    this.handleTaps_ = videojs.fn.debounce(event => {
+      const increment = (this.taps - 1) * this.seekSeconds;
+      this.taps = 0;
+      if (increment &lt; 1) {
+        return;
+      }
+      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() - increment));
+        this.addClass('reverse');
+      } else if (x > rect.width - (rect.width * 0.4)) {
+        this.player_.currentTime(Math.min(this.player_.duration(), this.player_.currentTime() + increment));
+        this.removeClass('reverse');
+      } else {
+        return;
+      }
+      // Remove play toggle if showing
+      this.removeClass('show-play-toggle');
+      // Remove and readd class to trigger animation
+      this.setAttribute('data-skip-text', `${increment} ${this.localize('seconds')}`);
+      this.removeClass('skip');
+      window.requestAnimationFrame(() => {
+        this.addClass('skip');
+      });
+    }, this.tapTimeout);
+    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;
+    }
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    this.taps += 1;
+    if (this.taps === 1) {
+      this.removeClass('skip');
+      this.toggleClass('show-play-toggle');
+    }
+    this.handleTaps_(event);
+  }
+  /**
+   * 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#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>