cloudinary-video-player 2.3.4-edge.5 → 2.3.4-edge.7

package/dist/cld-video-player.css

@@ -545,21 +545,20 @@
   }
 }
 .cld-video-player .vjs-text-track-display {
-  margin: auto;
-  bottom: 0 !important;
-}
-
-.cld-video-player .vjs-text-track-display > div {
-  margin: 3% !important;
+  bottom: 5em;
+  z-index: 2;
 }
 
 .cld-video-player .vjs-text-track-display.cld-paced-text-tracks b {
   color: var(--color-accent);
 }
 
+.cld-video-player.vjs-controls-disabled .vjs-text-track-display, .cld-video-player.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 1em;
+}
+
 .cld-video-player .vjs-text-track-cue {
-  top: auto !important;
-  bottom: 3.4rem !important;
+  max-width: 100%;
 }
 
 .cld-video-player .vjs-text-track-cue > div {
@@ -568,10 +567,6 @@
   background-color: rgba(0, 0, 0, 0.5) !important;
 }
 
-.cld-video-player.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-text-track-cue {
-  bottom: 1.5rem !important;
-}
-
 .cld-video-player .cld-paced-text-tracks .vjs-text-track-cue b {
   color: var(--color-accent);
 }
@@ -715,7 +710,7 @@
   visibility: visible;
 }
 .cld-video-player.vjs-error .vjs-error-display {
-  background: #90A0B3;
+  background: #90a0b3;
 }
 .cld-video-player.vjs-error .vjs-error-display:before {
   display: none;
@@ -743,18 +738,28 @@
   visibility: hidden;
   opacity: 0;
 }
-.cld-video-player .vjs-progress-control.vjs-control::before, .cld-video-player .vjs-control-bar .vjs-control.vjs-progress-control-events-blocker::before {
+.cld-video-player::before {
   content: "";
   pointer-events: none;
   position: absolute;
-  bottom: 0;
+  bottom: 3em;
   left: 0;
   right: 0;
   width: 100%;
   height: 5rem;
-  background: linear-gradient(to bottom, transparent 0%, currentColor 100%);
+  background: linear-gradient(to bottom, transparent 0%, var(--color-base) 100%);
   opacity: 0.4;
-  z-index: 0;
+  z-index: 1;
+  font-size: 120%;
+  display: none;
+}
+.cld-video-player.vjs-audio-only-mode::before, .cld-video-player.vjs-has-started::before {
+  display: flex;
+  transition: opacity 0.1s;
+}
+.cld-video-player.vjs-has-started.vjs-user-inactive.vjs-playing::before {
+  opacity: 0;
+  transition: opacity 1s;
 }
 .cld-video-player .vjs-control {
   width: 2.5em;

package/dist/cld-video-player.js

@@ -9384,7 +9384,7 @@ class CloudinaryAnalytics {
       this.cloudinaryAnalytics.startManualTracking(metadata, {
         ...(lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1___default()(this.analyticsOptions) ? this.analyticsOptions : {}),
         videoPlayerType: 'cloudinary video player',
-        videoPlayerVersion: "2.3.4-edge.5"
+        videoPlayerVersion: "2.3.4-edge.7"
       });
     } else if (this.currentVideMetadata.cloudName !== metadata.cloudName || this.currentVideMetadata.publicId !== metadata.publicId) {
       this.cloudinaryAnalytics.stopManualTracking();
@@ -9757,7 +9757,7 @@ class CloudinaryContext {
       options.sourceTypes = options.sourceTypes || _this.sourceTypes();
       options.poster = options.poster || posterOptionsForCurrent();
       options.queryParams = Object.assign(options.queryParams || {}, options.usageReport ? {
-        _s: `vp-${"2.3.4-edge.5"}`
+        _s: `vp-${"2.3.4-edge.7"}`
       } : {});
       if (options.sourceTypes.indexOf('audio') > -1) {
         builtSrc = new _models_audio_source_audio_source__WEBPACK_IMPORTED_MODULE_7__["default"](publicId, options);
@@ -11012,7 +11012,7 @@ const contextMenuContent = player => {
   const isFullscreen = player.isFullscreen();
   const aboutMenuItem = {
     class: 'player-version',
-    label: 'Cloudinary Player v' + "2.3.4-edge.5"
+    label: 'Cloudinary Player v' + "2.3.4-edge.7"
   };
   if (!player.controls()) {
     return [aboutMenuItem];
@@ -13217,6 +13217,7 @@ const getAnalyticsFromPlayerOptions = playerOptions => filterDefaultsAndNulls({
   width: playerOptions.width,
   withCredentials: playerOptions.withCredentials,
   debug: playerOptions.debug,
+  type: playerOptions.type,
   colors: playerOptions.colors && JSON.stringify(playerOptions.colors),
   controlBar: JSON.stringify(playerOptions.controlBar) !== JSON.stringify(config_defaults__WEBPACK_IMPORTED_MODULE_0__["default"].controlBar) && JSON.stringify(playerOptions.controlBar),
   ...getCloudinaryOptions(playerOptions.cloudinary),
@@ -13448,6 +13449,41 @@ function sliceAndUnsetProperties(obj) {
 }
 
 
+/***/ }),
+
+/***/ "./utils/video-retry.js":
+/*!******************************!*\
+  !*** ./utils/video-retry.js ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   checkIfVideoIsAvailable: () => (/* binding */ checkIfVideoIsAvailable),
+/* harmony export */   isVideoInReadyState: () => (/* binding */ isVideoInReadyState)
+/* harmony export */ });
+const checkIfVideoIsAvailable = function (videoUrl) {
+  let videoType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  return new Promise((resolve, reject) => {
+    const tempVideo = document.createElement('video');
+    tempVideo.setAttribute('crossorigin', 'anonymous');
+    const targetEvent = videoType === 'live' ? 'onprogress' : 'canplay';
+    tempVideo[targetEvent] = () => {
+      tempVideo.onerror = null;
+      tempVideo[targetEvent] = null;
+      resolve();
+    };
+    tempVideo.onerror = () => reject();
+    tempVideo.src = videoUrl;
+    tempVideo.load();
+  });
+};
+const isVideoInReadyState = readyState => {
+  return readyState >= (/iPad|iPhone|iPod/.test(navigator.userAgent) ? 1 : 4);
+};
+
+
 /***/ }),
 
 /***/ "./validators/validators-functions.js":
@@ -13566,7 +13602,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);
 
 const CLOUDINARY_PARAMS = ['cloudinaryConfig', 'transformation', 'sourceTypes', 'sourceTransformation', 'posterOptions', 'autoShowRecommendations', 'fontFace', 'secure'];
-const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat(['_internalAnalyticsMetadata', 'debug', 'publicId', 'source', 'autoplayMode', 'playedEventPercents', 'playedEventTimes', 'analytics', 'cloudinaryAnalytics', 'allowUsageReport', 'fluid', 'ima', 'playlistWidget', 'hideContextMenu', 'colors', 'floatingWhenNotVisible', 'ads', 'showJumpControls', 'chaptersButton', 'pictureInPictureToggle', 'textTracks', 'qualitySelector', 'fetchErrorUsingGet', 'withCredentials', 'seekThumbnails', 'aiHighlightsGraph', 'chapters', 'queryParams']);
+const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat(['_internalAnalyticsMetadata', 'debug', 'publicId', 'source', 'autoplayMode', 'playedEventPercents', 'playedEventTimes', 'analytics', 'cloudinaryAnalytics', 'allowUsageReport', 'fluid', 'ima', 'playlistWidget', 'hideContextMenu', 'colors', 'floatingWhenNotVisible', 'ads', 'showJumpControls', 'chaptersButton', 'pictureInPictureToggle', 'textTracks', 'qualitySelector', 'fetchErrorUsingGet', 'withCredentials', 'seekThumbnails', 'aiHighlightsGraph', 'chapters', 'queryParams', 'type']);
 const CLOUDINARY_CONFIG_PARAM = ['cloud_name', 'secure', 'private_cdn', 'secure_distribution', 'cdn_subdomain', 'secure_cdn_subdomain', 'cname', 'shorten', 'sign_url', 'api_secret', 'url_suffix', 'use_root_path', 'auth_token'];
 const DEFAULT_HLS_OPTIONS = {
   html5: {
@@ -13612,7 +13648,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ "../node_modules/video.js/dist/video.es-exposed.js");
 /* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! uuid */ "../node_modules/uuid/dist/esm-browser/v4.js");
+/* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! uuid */ "../node_modules/uuid/dist/esm-browser/v4.js");
 /* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/isEmpty */ "../node_modules/lodash/isEmpty.js");
 /* harmony import */ var lodash_isEmpty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_isEmpty__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/get */ "../node_modules/lodash/get.js");
@@ -13638,7 +13674,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./utils/consts */ "./utils/consts.js");
 /* harmony import */ var _utils_get_analytics_player_options__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./utils/get-analytics-player-options */ "./utils/get-analytics-player-options.js");
 /* harmony import */ var _plugins_cloudinary_common__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./plugins/cloudinary/common */ "./plugins/cloudinary/common.js");
-/* harmony import */ var _components_qualitySelector_qualitySelector_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./components/qualitySelector/qualitySelector.js */ "./components/qualitySelector/qualitySelector.js");
+/* harmony import */ var _utils_video_retry__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./utils/video-retry */ "./utils/video-retry.js");
+/* harmony import */ var _components_qualitySelector_qualitySelector_js__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./components/qualitySelector/qualitySelector.js */ "./components/qualitySelector/qualitySelector.js");
+
 
 
 
@@ -13665,6 +13703,7 @@ __webpack_require__.r(__webpack_exports__);
 // #endif
 
 const INTERNAL_ANALYTICS_URL = 'https://analytics-api-s.cloudinary.com';
+const RETRY_DEFAULT_TIMEOUT = 5 * 1000;
 
 // Register all plugins
 Object.keys(_plugins__WEBPACK_IMPORTED_MODULE_8__["default"]).forEach(key => {
@@ -13684,7 +13723,6 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
   }
   constructor(elem, initOptions, ready) {
     super();
-    this.nbCalls = 0;
     this.videoElement = (0,_video_player_utils__WEBPACK_IMPORTED_MODULE_14__.getResolveVideoElement)(elem);
     this.options = (0,_video_player_utils__WEBPACK_IMPORTED_MODULE_14__.extractOptions)(this.videoElement, initOptions);
     this._videojsOptions = this.options.videojsOptions;
@@ -13725,7 +13763,7 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
   }
   getVPInstanceId() {
     if (!this.vpInstanceId) {
-      this.vpInstanceId = (0,uuid__WEBPACK_IMPORTED_MODULE_21__["default"])();
+      this.vpInstanceId = (0,uuid__WEBPACK_IMPORTED_MODULE_22__["default"])();
     }
     return this.vpInstanceId;
   }
@@ -13740,7 +13778,7 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
       const analyticsData = (0,_utils_get_analytics_player_options__WEBPACK_IMPORTED_MODULE_18__.getAnalyticsFromPlayerOptions)(options);
       const analyticsParams = new URLSearchParams(analyticsData).toString();
       const baseParams = new URLSearchParams({
-        vpVersion: "2.3.4-edge.5",
+        vpVersion: "2.3.4-edge.7",
         vpInstanceId: this.getVPInstanceId(),
         // #if (process.env.WEBPACK_BUILD_LIGHT)
         //         vpLightBuild: true,
@@ -13753,8 +13791,9 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
       console.warn(err);
     }
   }
-  _clearTimeOut = () => {
-    this.videojs.clearTimeout(this.reTryId);
+  _resetReTryVideoState = () => {
+    this.reTryVideoStateRetriesCount = 0;
+    this.videojs.clearTimeout(this.reTryVideoStateTimeoutId);
   };
   _setVideoJsListeners(ready) {
     this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.ERROR, () => {
@@ -13764,27 +13803,35 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
 
         /*
          error codes :
-           3 - media playback was aborted due to a corruption problem
-           4 - media error, media source not supported
+         3 - media playback was aborted due to a corruption problem
+         4 - media error, media source not supported
          */
         const isCorrupted = error.code === 3 && (video_js__WEBPACK_IMPORTED_MODULE_0___default().browser).IS_SAFARI;
         if ([isCorrupted, error.code === 4].includes(true) && [_utils_consts__WEBPACK_IMPORTED_MODULE_17__.SOURCE_TYPE.AUDIO, _utils_consts__WEBPACK_IMPORTED_MODULE_17__.SOURCE_TYPE.VIDEO].includes(type)) {
-          this.videojs.error(null);
-          _utils__WEBPACK_IMPORTED_MODULE_9__["default"].handleCldError(this, this.playerOptions);
+          if (this.isLiveStream) {
+            this.videojs.error({
+              code: _plugins_cloudinary_common__WEBPACK_IMPORTED_MODULE_19__.ERROR_CODE.CUSTOM,
+              message: 'Live Stream not started'
+            });
+            this.reloadVideoUntilAvailable();
+          } else {
+            this.videojs.error(null);
+            _utils__WEBPACK_IMPORTED_MODULE_9__["default"].handleCldError(this, this.playerOptions);
+          }
         } else {
-          this._clearTimeOut();
+          this._resetReTryVideoState();
         }
       }
     });
     this.videojs.tech_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.RETRY_PLAYLIST, () => {
       const mediaRequestsErrored = lodash_get__WEBPACK_IMPORTED_MODULE_2___default()(this.videojs, 'hls.stats.mediaRequestsErrored', 0);
       if (mediaRequestsErrored > 0) {
-        this._clearTimeOut();
+        this._resetReTryVideoState();
         _utils__WEBPACK_IMPORTED_MODULE_9__["default"].handleCldError(this, this.playerOptions);
       }
     });
-    this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.PLAY, this._clearTimeOut);
-    this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.CAN_PLAY_THROUGH, this._clearTimeOut);
+    this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.PLAY, this._resetReTryVideoState);
+    this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.CAN_PLAY_THROUGH, this._resetReTryVideoState);
     this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.CLD_SOURCE_CHANGED, this._onSourceChange.bind(this));
     this.videojs.ready(() => {
       this._onReady();
@@ -13950,12 +13997,12 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
         default: 'auto'
       });
       this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.LOADED_METADATA, () => {
-        _components_qualitySelector_qualitySelector_js__WEBPACK_IMPORTED_MODULE_20__["default"].init(this.videojs);
+        _components_qualitySelector_qualitySelector_js__WEBPACK_IMPORTED_MODULE_21__["default"].init(this.videojs);
       });
 
       // Show only if more than one option available
       this.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_17__.PLAYER_EVENT.LOADED_DATA, () => {
-        _components_qualitySelector_qualitySelector_js__WEBPACK_IMPORTED_MODULE_20__["default"].setVisibility(this.videojs);
+        _components_qualitySelector_qualitySelector_js__WEBPACK_IMPORTED_MODULE_21__["default"].setVisibility(this.videojs);
       });
     }
   }
@@ -14016,24 +14063,43 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
       this.videojs.cloudinaryAnalytics(options);
     }
   }
-  reTryVideo(maxNumberOfCalls, timeout) {
-    if (!this.isVideoReady()) {
-      if (this.nbCalls < maxNumberOfCalls) {
-        this.nbCalls++;
-        this.reTryId = this.videojs.setTimeout(() => this.reTryVideo(maxNumberOfCalls, timeout), timeout);
+  reTryVideoStateUntilAvailable() {
+    let maxNumberOfCalls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Number.POSITIVE_INFINITY;
+    let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : RETRY_DEFAULT_TIMEOUT;
+    if (typeof this.reTryVideoStateRetriesCount !== 'number') {
+      this.reTryVideoStateRetriesCount = 0;
+    }
+    if (!(0,_utils_video_retry__WEBPACK_IMPORTED_MODULE_20__.isVideoInReadyState)(this.videojs.readyState())) {
+      if (this.reTryVideoStateRetriesCount < maxNumberOfCalls) {
+        this.reTryVideoStateRetriesCount++;
+        this.reTryVideoStateTimeoutId = this.videojs.setTimeout(() => this.reTryVideoStateUntilAvailable(maxNumberOfCalls, timeout), timeout);
       } else {
         let e = new Error('Video is not ready please try later');
         this.videojs.trigger('error', e);
       }
+    } else {
+      this.reTryVideoStateRetriesCount = 0;
     }
   }
-  isVideoReady() {
-    const s = this.videojs.readyState();
-    if (s >= (/iPad|iPhone|iPod/.test(navigator.userAgent) ? 1 : 4)) {
-      this.nbCalls = 0;
-      return true;
+  _resetReloadVideo = () => {
+    this.reloadVideoRetriesCount = 0;
+    this.videojs.clearTimeout(this.reloadVideoTimeoutId);
+  };
+  reloadVideoUntilAvailable() {
+    let maxNumberOfCalls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Number.POSITIVE_INFINITY;
+    let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : RETRY_DEFAULT_TIMEOUT;
+    if (typeof this.reloadVideoRetriesCount !== 'number') {
+      this.reloadVideoRetriesCount = 0;
+    }
+    if (this.reloadVideoRetriesCount < maxNumberOfCalls) {
+      this.reloadVideoRetriesCount++;
+      this.reloadVideoTimeoutId = this.videojs.setTimeout(() => {
+        const videoUrl = this.currentSourceUrl();
+        (0,_utils_video_retry__WEBPACK_IMPORTED_MODULE_20__.checkIfVideoIsAvailable)(videoUrl, this.isLiveStream ? 'live' : 'default').then(() => this.source(videoUrl)).catch(() => this.reloadVideoUntilAvailable(maxNumberOfCalls, timeout));
+      }, timeout);
+    } else {
+      this.videojs.trigger('error', new Error('Sorry, we could not load your video'));
     }
-    return false;
   }
   _initAutoplay() {
     const autoplayMode = this.playerOptions.autoplayMode;
@@ -14069,6 +14135,7 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
   }
   _onSourceChange(e, _ref5) {
     let {
+      source,
       sourceOptions
     } = _ref5;
     this._sendInternalAnalytics({
@@ -14079,6 +14146,7 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
     // #if (!process.env.WEBPACK_BUILD_LIGHT)
     this._initQualitySelector();
     // #endif
+    this.isLiveStream = source.resourceConfig().type === 'live';
   }
   _setExtendedEvents() {
     const events = [];
@@ -14148,11 +14216,11 @@ class VideoPlayer extends _utils__WEBPACK_IMPORTED_MODULE_9__["default"].mixin(_
     if (this.playerOptions.withCredentials) {
       options.withCredentials = true;
     }
-    clearTimeout(this.reTryId);
-    this.nbCalls = 0;
+    this._resetReloadVideo();
+    this._resetReTryVideoState();
     const maxTries = this.videojs.options_.maxTries || 3;
     const videoReadyTimeout = this.videojs.options_.videoTimeout || 55000;
-    this.reTryVideo(maxTries, videoReadyTimeout);
+    this.reTryVideoStateUntilAvailable(maxTries, videoReadyTimeout);
     return this.videojs.cloudinary.source(publicId, options);
   }
   posterOptions(options) {

package/dist/cld-video-player.light.css

@@ -545,21 +545,20 @@
   }
 }
 .cld-video-player .vjs-text-track-display {
-  margin: auto;
-  bottom: 0 !important;
-}
-
-.cld-video-player .vjs-text-track-display > div {
-  margin: 3% !important;
+  bottom: 5em;
+  z-index: 2;
 }
 
 .cld-video-player .vjs-text-track-display.cld-paced-text-tracks b {
   color: var(--color-accent);
 }
 
+.cld-video-player.vjs-controls-disabled .vjs-text-track-display, .cld-video-player.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 1em;
+}
+
 .cld-video-player .vjs-text-track-cue {
-  top: auto !important;
-  bottom: 3.4rem !important;
+  max-width: 100%;
 }
 
 .cld-video-player .vjs-text-track-cue > div {
@@ -568,10 +567,6 @@
   background-color: rgba(0, 0, 0, 0.5) !important;
 }
 
-.cld-video-player.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-text-track-cue {
-  bottom: 1.5rem !important;
-}
-
 .cld-video-player .cld-paced-text-tracks .vjs-text-track-cue b {
   color: var(--color-accent);
 }
@@ -715,7 +710,7 @@
   visibility: visible;
 }
 .cld-video-player.vjs-error .vjs-error-display {
-  background: #90A0B3;
+  background: #90a0b3;
 }
 .cld-video-player.vjs-error .vjs-error-display:before {
   display: none;
@@ -743,18 +738,28 @@
   visibility: hidden;
   opacity: 0;
 }
-.cld-video-player .vjs-progress-control.vjs-control::before, .cld-video-player .vjs-control-bar .vjs-control.vjs-progress-control-events-blocker::before {
+.cld-video-player::before {
   content: "";
   pointer-events: none;
   position: absolute;
-  bottom: 0;
+  bottom: 3em;
   left: 0;
   right: 0;
   width: 100%;
   height: 5rem;
-  background: linear-gradient(to bottom, transparent 0%, currentColor 100%);
+  background: linear-gradient(to bottom, transparent 0%, var(--color-base) 100%);
   opacity: 0.4;
-  z-index: 0;
+  z-index: 1;
+  font-size: 120%;
+  display: none;
+}
+.cld-video-player.vjs-audio-only-mode::before, .cld-video-player.vjs-has-started::before {
+  display: flex;
+  transition: opacity 0.1s;
+}
+.cld-video-player.vjs-has-started.vjs-user-inactive.vjs-playing::before {
+  opacity: 0;
+  transition: opacity 1s;
 }
 .cld-video-player .vjs-control {
   width: 2.5em;