videojs-mobile-ui 0.8.0 → 1.0.0

package/src/plugin.js

@@ -10,7 +10,6 @@ const defaults = {
     exitOnRotate: true,
     lockOnRotate: true,
     lockToLandscapeOnEnter: false,
-    iOS: false,
     disabled: false
   },
   touchControls: {
@@ -29,9 +28,9 @@ const screen = window.screen;
  * @return {string} orientation
  */
 const getOrientation = () => {
-  if (screen) {
+  if (window.screen) {
     // Prefer the string over angle, as 0° can be landscape on some tablets
-    const orientationString = ((screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation || '').split('-')[0];
+    const orientationString = ((window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation || '').split('-')[0];
 
     if (orientationString === 'landscape' || orientationString === 'portrait') {
       return orientationString;
@@ -49,9 +48,6 @@ const getOrientation = () => {
   return 'portrait';
 };
 
-// Cross-compatibility for Video.js 5 and 6.
-const registerPlugin = videojs.registerPlugin || videojs.plugin;
-
 /**
  * Add UI and event listeners
  *
@@ -65,17 +61,6 @@ const registerPlugin = videojs.registerPlugin || videojs.plugin;
 const onPlayerReady = (player, options) => {
   player.addClass('vjs-mobile-ui');
 
-  if (options.fullscreen.iOS) {
-    videojs.log.warn('videojs-mobile-ui: `fullscreen.iOS` is deprecated. Use Video.js option `preferFullWindow` instead.');
-    if (videojs.browser.IS_IOS && videojs.browser.IOS_VERSION > 9 &&
-        !player.el_.ownerDocument.querySelector('.bc-iframe')) {
-      player.tech_.el_.setAttribute('playsinline', 'playsinline');
-      player.tech_.supportsFullScreen = function() {
-        return false;
-      };
-    }
-  }
-
   if (!options.touchControls.disabled) {
 
     if (options.touchControls.disableOnEnd || typeof player.endscreen === 'function') {
@@ -83,20 +68,7 @@ const onPlayerReady = (player, options) => {
     }
 
     // Insert before the control bar
-    let controlBarIdx;
-    const versionParts = videojs.VERSION.split('.');
-    const major = parseInt(versionParts[0], 10);
-    const minor = parseInt(versionParts[1], 10);
-
-    // Video.js < 7.7.0 doesn't account for precedding components that don't have elements
-    if (major < 7 || (major === 7 && minor < 7)) {
-      controlBarIdx = Array.prototype.indexOf.call(
-        player.el_.children,
-        player.getChild('ControlBar').el_
-      );
-    } else {
-      controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
-    }
+    const controlBarIdx = player.children_.indexOf(player.getChild('ControlBar'));
 
     player.touchOverlay = player.addChild('TouchOverlay', options.touchControls, controlBarIdx);
   }
@@ -208,13 +180,13 @@ const onPlayerReady = (player, options) => {
 const mobileUi = function(options = {}) {
   if (options.forceForTesting || videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
     this.ready(() => {
-      onPlayerReady(this, videojs.mergeOptions(defaults, options));
+      onPlayerReady(this, videojs.obj.merge(defaults, options));
     });
   }
 };
 
 // Register the plugin with video.js.
-registerPlugin('mobileUi', mobileUi);
+videojs.registerPlugin('mobileUi', mobileUi);
 
 // Include the version number.
 mobileUi.VERSION = VERSION;

package/src/touchOverlay.js

@@ -30,6 +30,7 @@ class TouchOverlay extends Component {
 
     this.seekSeconds = options.seekSeconds;
     this.tapTimeout = options.tapTimeout;
+    this.taps = 0;
 
     // Add play toggle overlay
     this.addChild('playToggle', {});
@@ -44,6 +45,46 @@ class TouchOverlay extends Component {
       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 < 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 < 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();
   }
 
@@ -78,63 +119,12 @@ class TouchOverlay extends Component {
 
     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);
+    this.taps += 1;
+    if (this.taps === 1) {
+      this.removeClass('skip');
+      this.toggleClass('show-play-toggle');
     }
-  }
-
-  /**
-   * 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 < 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');
-    });
+    this.handleTaps_(event);
   }
 
   /**

package/CHANGELOG.md

@@ -1,95 +0,0 @@
-<a name="0.8.0"></a>
-# [0.8.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.5.3...v0.8.0) (2022-04-13)
-
-### Features
-
-* Add disable options (#33) ([59e5f89](https://github.com/mister-ben/videojs-mobile-ui/commit/59e5f89)), closes [#33](https://github.com/mister-ben/videojs-mobile-ui/issues/33)
-* Add option to lock to landscape when entering fullscreen (#49) ([26c58d4](https://github.com/mister-ben/videojs-mobile-ui/commit/26c58d4)), closes [#49](https://github.com/mister-ben/videojs-mobile-ui/issues/49)
-
-### Bug Fixes
-
-* Detect angle correctly where no window.orientation (#17) ([c85ac35](https://github.com/mister-ben/videojs-mobile-ui/commit/c85ac35)), closes [#17](https://github.com/mister-ben/videojs-mobile-ui/issues/17)
-* Fix typo in iOS orientation (#27) ([7e05afb](https://github.com/mister-ben/videojs-mobile-ui/commit/7e05afb)), closes [#27](https://github.com/mister-ben/videojs-mobile-ui/issues/27)
-* orientation string (#37) ([177f326](https://github.com/mister-ben/videojs-mobile-ui/commit/177f326)), closes [#37](https://github.com/mister-ben/videojs-mobile-ui/issues/37)
-* Remove event listeners on player dispose (#21) ([25c8fb1](https://github.com/mister-ben/videojs-mobile-ui/commit/25c8fb1)), closes [#21](https://github.com/mister-ben/videojs-mobile-ui/issues/21)
-* Split orientation string ([0eebd64](https://github.com/mister-ben/videojs-mobile-ui/commit/0eebd64))
-
-### Chores
-
-* **deps-dev:** bump karma from 6.3.14 to 6.3.16 (#46) ([7bd42f1](https://github.com/mister-ben/videojs-mobile-ui/commit/7bd42f1)), closes [#46](https://github.com/mister-ben/videojs-mobile-ui/issues/46)
-* **deps-dev:** bump karma from 6.3.2 to 6.3.14 (#44) ([ddff196](https://github.com/mister-ben/videojs-mobile-ui/commit/ddff196)), closes [#44](https://github.com/mister-ben/videojs-mobile-ui/issues/44)
-* **deps:** bump engine.io from 4.1.1 to 4.1.2 (#39) ([5031c93](https://github.com/mister-ben/videojs-mobile-ui/commit/5031c93)), closes [#39](https://github.com/mister-ben/videojs-mobile-ui/issues/39)
-* **deps:** bump follow-redirects from 1.14.0 to 1.14.7 (#41) ([6fcbb49](https://github.com/mister-ben/videojs-mobile-ui/commit/6fcbb49)), closes [#41](https://github.com/mister-ben/videojs-mobile-ui/issues/41)
-* **deps:** bump follow-redirects from 1.14.7 to 1.14.8 (#45) ([cf20418](https://github.com/mister-ben/videojs-mobile-ui/commit/cf20418)), closes [#45](https://github.com/mister-ben/videojs-mobile-ui/issues/45)
-* **deps:** bump log4js from 6.3.0 to 6.4.0 (#42) ([f9c69ff](https://github.com/mister-ben/videojs-mobile-ui/commit/f9c69ff)), closes [#42](https://github.com/mister-ben/videojs-mobile-ui/issues/42)
-* **deps:** bump minimist from 1.2.5 to 1.2.6 (#50) ([6faea79](https://github.com/mister-ben/videojs-mobile-ui/commit/6faea79)), closes [#50](https://github.com/mister-ben/videojs-mobile-ui/issues/50)
-* **deps:** bump nanoid from 3.1.22 to 3.2.0 (#43) ([70e3440](https://github.com/mister-ben/videojs-mobile-ui/commit/70e3440)), closes [#43](https://github.com/mister-ben/videojs-mobile-ui/issues/43)
-* **deps:** bump shelljs from 0.8.4 to 0.8.5 (#40) ([bf57915](https://github.com/mister-ben/videojs-mobile-ui/commit/bf57915)), closes [#40](https://github.com/mister-ben/videojs-mobile-ui/issues/40)
-* make video.js a peer dependency (#51) ([1e1ae5d](https://github.com/mister-ben/videojs-mobile-ui/commit/1e1ae5d)), closes [#51](https://github.com/mister-ben/videojs-mobile-ui/issues/51)
-* update dependencies ([6fb5a7b](https://github.com/mister-ben/videojs-mobile-ui/commit/6fb5a7b))
-* Update to Node 14 / Generator 8 (#16) ([660dc86](https://github.com/mister-ben/videojs-mobile-ui/commit/660dc86)), closes [#16](https://github.com/mister-ben/videojs-mobile-ui/issues/16)
-
-<a name="0.7.0"></a>
-# [0.7.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.6.1...v0.7.0) (2021-11-09)
-
-### Features
-
-* Add disable options (#33) ([59e5f89](https://github.com/mister-ben/videojs-mobile-ui/commit/59e5f89)), closes [#33](https://github.com/mister-ben/videojs-mobile-ui/issues/33)
-
-### Bug Fixes
-
-* orientation string (#37) ([177f326](https://github.com/mister-ben/videojs-mobile-ui/commit/177f326)), closes [#37](https://github.com/mister-ben/videojs-mobile-ui/issues/37)
-
-### Chores
-
-* update dependencies ([6fb5a7b](https://github.com/mister-ben/videojs-mobile-ui/commit/6fb5a7b))
-
-<a name="0.6.1"></a>
-## [0.6.1](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.6.0...v0.6.1) (2021-08-27)
-
-### Bug Fixes
-
-* Split orientation string ([0eebd64](https://github.com/mister-ben/videojs-mobile-ui/commit/0eebd64))
-
-<a name="0.6.0"></a>
-# 0.6.0 (2021-08-27)
-
-### Bug Fixes
-
-* Detect angle correctly where no window.orientation (#17) ([c85ac35](https://github.com/mister-ben/videojs-mobile-ui/commit/c85ac35)), closes [#17](https://github.com/mister-ben/videojs-mobile-ui/issues/17)
-* Fix fullscreen on rotate (#14) ([33093e4](https://github.com/mister-ben/videojs-mobile-ui/commit/33093e4)), closes [#14](https://github.com/mister-ben/videojs-mobile-ui/issues/14)
-* Fix typo in iOS orientation (#27) ([7e05afb](https://github.com/mister-ben/videojs-mobile-ui/commit/7e05afb)), closes [#27](https://github.com/mister-ben/videojs-mobile-ui/issues/27)
-* Remove event listeners on player dispose (#21) ([25c8fb1](https://github.com/mister-ben/videojs-mobile-ui/commit/25c8fb1)), closes [#21](https://github.com/mister-ben/videojs-mobile-ui/issues/21)
-
-### Chores
-
-* Update to Node 14 / Generator 8 (#16) ([660dc86](https://github.com/mister-ben/videojs-mobile-ui/commit/660dc86)), closes [#16](https://github.com/mister-ben/videojs-mobile-ui/issues/16)
-
-<a name="0.5.3"></a>
-## [0.5.3](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.5.2...v0.5.3) (2021-05-25)
-
-### Bug Fixes
-
-* Fix fullscreen on rotate (#14) ([33093e4](https://github.com/mister-ben/videojs-mobile-ui/commit/33093e4)), closes [#14](https://github.com/mister-ben/videojs-mobile-ui/issues/14)
-
-<a name="0.5.2"></a>
-## [0.5.2](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.5.1...v0.5.2) (2021-01-29)
-
-<a name="0.5.1"></a>
-## [0.5.1](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.5.0...v0.5.1) (2021-01-29)
-
-<a name="0.5.0"></a>
-# 0.5.0 (2021-01-16)
-
-<a name="0.4.1"></a>
-## [0.4.1](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.4.0...v0.4.1) (2018-04-30)
-
-<a name="0.4.0"></a>
-# [0.4.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.3.0...v0.4.0) (2018-04-30)
-
-<a name="0.3.0"></a>
-# [0.3.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.2.0...v0.3.0) (2018-04-28)
-
-<a name="0.2.0"></a>
-# 0.2.0 (2018-04-28)
-