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

package/README.md

@@ -1,51 +1,54 @@
 # videojs-mobile-ui
 
-Mobile UI for Video.js.
+A more native mobile user experience for Video.js.
 
-Touch controls:
+**videojs-mobile-ui** augments the standard Video.js experience into a touch-optimized, mobile-first interface. It adds the intuitive gestures and smart behaviors users expect from top-tier video apps to your browser-based player.
 
-- Double-tap the left side of the player to rewind ten seconds
-- Double-tap the right side of the player to fast-forward ten seconds
-- Single-tap the screen to show a play/pause toggle
+## Key Features
 
-Fullscreen control:
+### 👆 Touch Controls
 
-- Rotate to landscape to enter Fullscreen
-- Lock to fullscreen on rotate
-- Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
+Double-tap to Seek: Just like popular video apps, users can double-tap the left or right side of the video to rewind or fast-forward.
 
-## Table of Contents
+Large play/pause overlay: A large, screen-wide touch zone allows for easy Play/Pause toggling without hunting for tiny buttons.
 
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Installation
+### 📱 Fullscreen Orientation:
 
-- [Installation](#installation)
-- [Plugin Options](#plugin-options)
-  - [Default options](#default-options)
-  - [Options](#options)
-- [Usage](#usage)
-  - [`<script>` Tag](#script-tag)
-  - [Browserify/CommonJS](#browserifycommonjs)
-  - [RequireJS/AMD](#requirejsamd)
-- [License](#license)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-## Installation
+Rotate to Watch: Automatically enter fullscreen when the user rotates their phone to landscape.
 
-```sh
-npm install video.js
-npm install videojs-mobile-ui
-```
+Orientation Lock: Keeps the video fullscreen and locked to landscape mode even if the user tilts their phone back slightly, preventing accidental exits (works on supported devices).
 
-Version 1.x requires video.js 8.x as a peer dependency. Lowever video.js versions are not supported. 0.7.0 supports video.js 7.x. To install the latest version that works with Video.js 7, use the `latest7` tag:
+### 🚀 Swipe Gestures (Optional)
 
-```sh
-npm install videojs-mobile-ui@latest7
-```
+Enable modern swipe gestures to control the viewing mode.
+
+Swipe Up to enter fullscreen with a smooth zoom-in effect.
+
+Swipe Down to exit fullscreen naturally.
+
+### 🎨 Configuration Options
+
+Visual indicators show exactly how many seconds are being skipped during a seek.
+
+Adjust seek times and tap sensitivity to match your specific content needs.
+
+## Compatibility Notes
+
+- iOS Safari does not support orientation lock. The fullscreen video on iOS is native and not influenced by this plugin.
+- Android Firefox has native rotate and lock behaviour when an element containing a video is made fullscreen, which will override this plugin.
 
 ## Plugin Options
 
+Newer functionality is opt-in, to not force new features on existing players. Things you might want to add:
+
+- `fullscreen.swipeToFullScreen`, to enter fullscreen by swiping up on the video.
+- `fullscreen.swipeFromFullScreen`, to exit fullscreen by swiping down on the video (except iPhone).
+- `touchControls.disableOnEnd`, to disable the touch controls at the end of the video. Useful if you have any sort of endcard displayed at the end of the video that might otherwise conflict.
+
+The [demo] page lets you try out the configuration options.
+
+![QR code link to demo page][demo-qr]
+
 ### Default options
 
 ```js
@@ -55,30 +58,70 @@ npm install videojs-mobile-ui@latest7
     exitOnRotate: true,
     lockOnRotate: true,
     lockToLandscapeOnEnter: false,
+    swipeToFullscreen: false,
+    swipeFromFullscreen: false,
     disabled: false
   },
   touchControls: {
     seekSeconds: 10,
     tapTimeout: 300,
     disableOnEnd: false,
-    disabled: false,
+    disabled: false
   }
 };
 ```
 
 ### Options
 
-- *fullscreen.enterOnRotate* `boolean` Whether to go fullscreen when rotating to landscape
-- *fullscreen.exitOnRotate* `boolean` Whether to leave fullscreen when rotating to portrait (if not locked)
-- *fullscreen.lockOnRotate* `boolean` Whether to lock to fullscreen when rotating to landscape
-- *fullscreen.lockToLandscapeOnEnter* `boolean` Whether to lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
-- *fullscreen.disabled* `boolean` If true no fullscreen handling except the *deprecated* iOS fullwindow hack
-- *touchControls.seekSeconds* `int` Seconds to seek when double-tapping
-- *touchControls.tapTimeout* `int` Milliseconds to consider a double-tap
-- *touchControls.disableOnEnd* `boolean` Whether to disable touch controls when the video has ended, e.g. if an endscreen is used. Automatically disables if the endscreen plugin is present when this plugin initialises
-- *touchControls.disabled* `boolean` If true no touch controls are added.
+- **`fullscreen`** {Object}  
+  Options for fullscreen behaviours.
+- **`fullscreen.enterOnRotate`** {boolean}  
+  If the device is rotated, enter fullscreen.  
+  Default `true`.
+- **`fullscreen.exitOnRotate`** {boolean}  
+  If the device is rotated, exit fullscreen, unless `lockOnRotate` is used.  
+  Default `true`.
+- **`fullscreen.lockOnRotate`** {boolean}  
+  When going fullscreen in response to rotation (`enterOnRotate`), also lock the orientation (not supported by iOS).  
+  Default `true`.
+- **`fullscreen.lockToLandscapeOnEnter`** {boolean}  
+  When fullscreen is entered by any means, lock the orientation (not supported by iOS).  
+  Default `false`.
+- **`fullscreen.swipeToFullscreen`** {boolean}  
+  Swipe up to enter fullscreen.  
+  Default `false`.
+- **`fullscreen.swipeFromFullscreen`** {boolean}  
+  Swipe down to exit fullscreen.  
+  Won't do anything on iOS native fullscreen, which has its own swipe down exit gesture.  
+  Default `false`.
+- **`fullscreen.disabled`** {boolean}  
+  All fullscreen functionality provided by this plugin disabled.  
+  Default `false`.
+- **`touchControls`** {Object}  
+  Options for tap overlay.
+- **`touchControls.seekSeconds`** {number}  
+  Increment to seek in seconds.  
+  Default `10`.
+- **`touchControls.tapTimeout`** {number}  
+  Timeout to consider multiple taps as double rather than two single.  
+  Default `300`.
+- **`touchControls.disableOnEnd`** {boolean}  
+  Disable the touch overlay when the video ends.  
+  Useful if an end screen overlay is used to avoid conflict.  
+  Default `false`.
+- **`touchControls.disabled`** {boolean}  
+  All tap overlay functionality provided by this plugin disabled.  
+  Default `false`.
 
-## Usage
+## Installation
+
+Version 1.x requires video.js 8.x as a peer dependency. Lower video.js versions are not supported.
+
+The last version to support video.js 7.x was 0.7.0. To install the latest version that works with Video.js 7, use the `latest7` tag:
+
+```sh
+npm install videojs-mobile-ui@latest7
+```
 
 To include videojs-mobile-ui on your website or web application, use any of the following methods.
 
@@ -91,16 +134,23 @@ This is the simplest case. Get the script in whatever way you prefer and include
 <script src="//path/to/video.min.js"></script>
 <script src="//path/to/videojs-mobile-ui.min.js"></script>
 <script>
-  var player = videojs('my-video');
-
-  player.mobileUi();
+  const player = videojs('my-video');
+  const pluginOptions = {
+    {
+      fullscreen: {
+        swipeToFullscreen: true
+      } 
+    }
+  };
+
+  player.mobileUi(pluginOptions);
 </script>
 ```
 
 The release versions will be available on jdselivr, unpkg etc.
 
-* https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js
-* https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css
+- https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js
+- https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css
 
 ### Browserify/CommonJS
 
@@ -119,7 +169,7 @@ var player = videojs('my-video');
 player.mobileUi();
 ```
 
-Also include the CSS.
+Also include the CSS!
 
 ### RequireJS/AMD
 
@@ -133,7 +183,7 @@ require(['video.js', 'videojs-mobile-ui'], function(videojs) {
 });
 ```
 
-Also include the CSS.
+Also include the CSS!
 
 ### Import
 
@@ -149,5 +199,6 @@ import 'videojs-mobile-ui';
 
 MIT. Copyright (c) mister-ben &lt;git@misterben.me&gt;
 
-
-[videojs]: http://videojs.com/
+[videojs]: http://videojs.org/
+[demo]: https://videojs-mobile-ui.netlify.app
+[demo-qr]: /demo-qr.svg

package/dist/lang/de.js

@@ -1,3 +1 @@
-videojs.addLanguage('de', {
-  "seconds": "Sekunden"
-});
+videojs.addLanguage('de', {"seconds":"Sekunden"});

package/dist/lang/en.js

@@ -1,3 +1 @@
-videojs.addLanguage('en', {
-  "seconds": "seconds"
-});
+videojs.addLanguage('en', {"seconds":"seconds"});

package/dist/lang/it.js

@@ -1,3 +1 @@
-videojs.addLanguage('it', {
-  "seconds": "secondi"
-});
+videojs.addLanguage('it', {"seconds":"secondi"});

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

@@ -1,20 +1,23 @@
-/*! @name videojs-mobile-ui @version 1.2.0-alpha.0 @license MIT */
+/*! @name videojs-mobile-ui @version 1.2.0 @license MIT */
 'use strict';
 
 var videojs = require('video.js');
-var window = require('@ungap/global-this');
+var window = require('global/window');
 
 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.2.0-alpha.0";
+var version = "1.2.0";
 
 /**
  * @file touchOverlay.js
  * Touch UI component
  */
+
+/** @import Player from 'video.js/dist/types/player' */
+
 const Component = videojs__default["default"].getComponent('Component');
 const dom = videojs__default["default"].dom || videojs__default["default"];
 
@@ -30,7 +33,7 @@ class TouchOverlay extends Component {
   * @param  {Player} player
   *         The `Player` that this class should be attached to.
   *
-  * @param  {Object} [options]
+  * @param  {options} [options]
   *         The key/value store of player options.
   */
   constructor(player, options) {
@@ -119,7 +122,9 @@ class TouchOverlay extends Component {
     if (event.target !== this.el_) {
       return;
     }
-    event.preventDefault();
+    if (event.cancelable) {
+      event.preventDefault();
+    }
     this.taps += 1;
     if (this.taps === 1) {
       this.removeClass('skip');
@@ -145,13 +150,184 @@ class TouchOverlay extends Component {
 }
 Component.registerComponent('TouchOverlay', TouchOverlay);
 
-// Default options for the plugin.
+/** @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 && !swipeToFullscreen || isFullscreen && !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 && 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 && deltaY < 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 && !player.isFullscreen()) {
+      player.requestFullscreen().catch(err => {
+        player.log.warn('Browser refused fullscreen', err);
+      });
+    } else if (deltaY < -swipeThreshold && 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 = '';
+  });
+};
+
+/**
+ * @typedef {Object} MobileUiOptions
+ * @property {Object} [fullscreen]
+ *  Options for fullscreen behaviours.
+ * @property {boolean} [fullscreen.enterOnRotate]
+ *  If the device is rotated, enter fullscreen.
+ *  Default `true`.
+ * @property {boolean} [fullscreen.exitOnRotate]
+ *  If the device is rotated, exit fullscreen, unless `lockOnRotate` is used.
+ *  Default `true`.
+ * @property {boolean} [fullscreen.lockOnRotate]
+ *  When going fullscreen in response to rotation (`enterOnRotate`), also lock the orientation (not supported by iOS).
+ *  Default `true`.
+ * @property {boolean} [fullscreen.lockToLandscapeOnEnter]
+ *  When fullscreen is entered by any means, lock the orientation (not supported by iOS).
+ *  Default `false`.
+ * @property {boolean} [fullscreen.swipeToFullscreen]
+ *  Swipe up to enter fullscreen.
+ *  Default `false`.
+ * @property {boolean} [fullscreen.swipeFromFullscreen]
+ *  Swipe down to exit fullscreen.
+ *  Won't do anything on iOS native fullscreen, which has its own swipe down exit gesture.
+ *  Default `false`.
+ * @property {boolean} [fullscreen.disabled]
+ *  All fullscreen functionality provided by this plugin disabled.
+ *  Default `false`.
+ * @property {Object} [touchControls]
+ *  Options for tap overlay.
+ * @property {number} [touchControls.seekSeconds]
+ *  Increment to seek in seconds.
+ *  Default `10`.
+ * @property {number} [touchControls.tapTimeout]
+ *  Timeout to consider multiple taps as double rather than two single.
+ *  Default `300`.
+ * @property {boolean} [touchControls.disableOnEnd]
+ *  Disable the touch overlay when the video ends.
+ *  Useful if an end screen overlay is used to avoid conflict.
+ *  Default `false`.
+ * @property {boolean} [touchControls.disabled]
+ *  All tap overlay functionality provided by this plugin disabled.
+ *  Default `false`.
+ * @internal
+ * @property {boolean} [forceForTesting]
+ *  Used in unit tests
+ */
+
+/** @type {MobileUiOptions} */
 const defaults = {
   fullscreen: {
     enterOnRotate: true,
     exitOnRotate: true,
     lockOnRotate: true,
     lockToLandscapeOnEnter: false,
+    swipeToFullscreen: false,
+    swipeFromFullscreen: false,
     disabled: false
   },
   touchControls: {
@@ -194,7 +370,7 @@ const getOrientation = () => {
  * @param    {Player} player
  *           A Video.js player object.
  *
- * @param    {Object} [options={}]
+ * @param    {MobileUiOptions} [options={}]
  *           A plain object containing options for the plugin.
  */
 const onPlayerReady = (player, options) => {
@@ -211,17 +387,22 @@ const onPlayerReady = (player, options) => {
   if (options.fullscreen.disabled) {
     return;
   }
+  if (options.fullscreen.swipeToFullscreen || options.fullscreen.swipeFromFullscreen) {
+    initSwipe(player, options);
+  }
   let locked = false;
   const rotationHandler = () => {
     const currentOrientation = getOrientation();
     if (currentOrientation === 'landscape' && options.fullscreen.enterOnRotate) {
-      if (player.paused() === false) {
-        player.requestFullscreen();
+      if (!player.paused() && !player.isFullscreen()) {
+        player.requestFullscreen().catch(err => {
+          player.log.warn('Browser refused fullscreen request:', err);
+        });
         if ((options.fullscreen.lockOnRotate || options.fullscreen.lockToLandscapeOnEnter) && screen.orientation && screen.orientation.lock) {
           screen.orientation.lock('landscape').then(() => {
             locked = true;
-          }).catch(e => {
-            videojs__default["default"].log('Browser refused orientation lock:', e);
+          }).catch(err => {
+            videojs__default["default"].log.warn('Browser refused orientation lock:', err);
           });
         }
       }
@@ -246,6 +427,7 @@ const onPlayerReady = (player, options) => {
     }
   }
   player.on('fullscreenchange', _ => {
+    player.log('fullscreenchange', player.isFullscreen(), options.fullscreen.lockToLandscapeOnEnter, getOrientation());
     if (player.isFullscreen() && options.fullscreen.lockToLandscapeOnEnter && getOrientation() === 'portrait') {
       screen.orientation.lock('landscape').then(() => {
         locked = true;
@@ -266,40 +448,10 @@ const onPlayerReady = (player, options) => {
 };
 
 /**
- * A video.js plugin.
- *
- * Adds a monile UI for player control, and fullscreen orientation control
+ * Adds a mobile UI for player control, and fullscreen orientation control
  *
  * @function mobileUi
- * @param    {Object} [options={}]
- *           Plugin options.
- * @param    {boolean} [options.forceForTesting=false]
- *           Enables the display regardless of user agent, for testing purposes
- * @param    {Object} [options.fullscreen={}]
- *           Fullscreen options.
- * @param    {boolean} [options.fullscreen.disabled=false]
- *           If true no fullscreen handling except the *deprecated* iOS fullwindow hack
- * @param    {boolean} [options.fullscreen.enterOnRotate=true]
- *           Whether to go fullscreen when rotating to landscape
- * @param    {boolean} [options.fullscreen.exitOnRotate=true]
- *           Whether to leave fullscreen when rotating to portrait (if not locked)
- * @param    {boolean} [options.fullscreen.lockOnRotate=true]
- *           Whether to lock orientation when rotating to landscape
- *           Unlocked when exiting fullscreen or on 'ended
- * @param    {boolean} [options.fullscreen.lockToLandscapeOnEnter=false]
- *           Whether to always lock orientation to landscape on fullscreen mode
- *           Unlocked when exiting fullscreen or on 'ended'
- * @param    {Object} [options.touchControls={}]
- *           Touch UI options.
- * @param    {boolean} [options.touchControls.disabled=false]
- *           If true no touch controls are added.
- * @param    {int} [options.touchControls.seekSeconds=10]
- *           Number of seconds to seek on double-tap
- * @param    {int} [options.touchControls.tapTimeout=300]
- *           Interval in ms to be considered a doubletap
- * @param    {boolean} [options.touchControls.disableOnEnd=false]
- *           Whether to disable when the video ends (e.g., if there is an endscreen)
- *           Never shows if the endscreen plugin is present
+ * @param    {MobileUiOptions} [options={}] Plugin options
  */
 const mobileUi = function (options = {}) {
   if (options.forceForTesting || videojs__default["default"].browser.IS_ANDROID || videojs__default["default"].browser.IS_IOS) {

package/dist/videojs-mobile-ui.css

@@ -1,2 +1,104 @@
-/*! @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}
+/**
+ * css for videojs-mobile-ui
+ */
+
+@keyframes fadeAndScale {
+  0% {
+    opacity: 0
+  }
+  25% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.video-js.vjs-mobile-ui {
+
+  &.vjs-has-started:not(.vjs-ad-playing) .vjs-touch-overlay {
+    position: absolute;
+    pointer-events: auto;
+    top: 0;
+  }
+
+  .vjs-touch-overlay {
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    &.skip {
+      opacity: 0;
+      animation: fadeAndScale 0.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>');
+
+      &:after {
+        content: attr(data-skip-text);
+        position: absolute;
+        top: 60%;
+        left: 70%;
+      }
+    }
+
+    &.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>');
+
+      &:after {
+        right: 70%;
+        left: unset;
+      }
+    }
+
+    .vjs-play-control {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      width: 30%;
+      height: 80%;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+
+      .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>');
+      }
+
+      &.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>');
+      }
+
+      &.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>');
+      }
+    }
+
+    &.show-play-toggle .vjs-play-control {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+  }
+
+  &.vjs-mobile-ui-disable-end.vjs-ended .vjs-touch-overlay {
+    display: none;
+  }
+
+  &:not(:fullscreen).using-fs-swipe-up,
+  &:fullscreen.using-fs-swipe-down {
+    touch-action: none;
+    overflow: hidden;
+  }
+
+}