cloudinary-video-player 2.3.3-edge.3 → 2.3.3-edge.4

package/dist/cld-video-player.css

@@ -925,6 +925,9 @@
   padding: clamp(1.3em, 4cqw, 2em);
   pointer-events: none;
   container-type: inline-size;
+  text-shadow: 0 0 0.5em var(--color-base);
+  color: var(--color-text);
+  background-image: linear-gradient(color-mix(in srgb, var(--color-base) 70%, transparent), transparent 100%);
 }
 .cld-video-player .vjs-title-bar .vjs-title-bar-title {
   width: 100%;
@@ -1362,7 +1365,9 @@
   transform: translateX(-50%);
   bottom: 2.7em;
   position: absolute;
-  text-shadow: 0 0 4px color-mix(in srgb, var(--color-base) 40%, transparent);
+  padding: 0 0.3em;
+  font-weight: bold;
+  text-shadow: 0 0 8px var(--color-base), 0 0 1px var(--color-base), 0 0 1px var(--color-base);
 }
 .cld-video-player .vjs-chapter-display:not(:empty) ~ .vjs-vtt-thumbnail-display {
   bottom: 4em;
@@ -1809,7 +1814,7 @@
   box-sizing: border-box;
 }
 .cld-video-player-skin-dark .cld-plw-item-info-wrap {
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 1px var(--color-base);
 }
 @media only screen and (max-width: 768px) {
   .cld-video-player-skin-dark .cld-plw-item-info-wrap {
@@ -1935,14 +1940,12 @@
   bottom: 0;
   left: 0;
   background: linear-gradient(to top, var(--color-base), transparent 80%);
-  opacity: 0.6;
+  opacity: 0.9;
 }
 .cld-thumbnail.cld-plw-panel-item-active {
   border: 1px solid var(--color-accent);
   box-sizing: border-box;
-}
-.cld-thumbnail.cld-plw-panel-item-active .cld-plw-item-info-wrap {
-  color: var(--color-accent);
+  box-shadow: 0 0 3em -0.5em var(--color-accent) inset;
 }
 
 .cld-plw-panel-item:hover:after {

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.3-edge.3"
+        videoPlayerVersion: "2.3.3-edge.4"
       });
     } 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.3-edge.3"}`
+        _s: `vp-${"2.3.3-edge.4"}`
       } : {});
       if (options.sourceTypes.indexOf('audio') > -1) {
         builtSrc = new _models_audio_source_audio_source__WEBPACK_IMPORTED_MODULE_7__["default"](publicId, options);
@@ -10682,11 +10682,6 @@ const playerColors = `
     color: rgba(--text-color, 0.3);
   }
 
-  .PLAYER-CLASS-PREFIX .vjs-title-bar {
-    color: --text-color;
-    background-image: linear-gradient(rgba(--base-color, 0.4), rgba(255, 255, 255, 0) 100%);
-  }
-
   .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay {
     color: --text-color;
     background-color: rgba(--base-color, 0.4);
@@ -11021,7 +11016,7 @@ const contextMenuContent = player => {
   const isFullscreen = player.isFullscreen();
   const aboutMenuItem = {
     class: 'player-version',
-    label: 'Cloudinary Player v' + "2.3.3-edge.3"
+    label: 'Cloudinary Player v' + "2.3.3-edge.4"
   };
   if (!player.controls()) {
     return [aboutMenuItem];
@@ -13749,7 +13744,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.3-edge.3",
+        vpVersion: "2.3.3-edge.4",
         vpInstanceId: this.getVPInstanceId(),
         // #if (process.env.WEBPACK_BUILD_LIGHT)
         //         vpLightBuild: true,
@@ -14458,9 +14453,9 @@ const extractOptions = (elem, options) => {
 const overrideDefaultVideojsComponents = () => {
   const Player = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Player');
   let children = Player.prototype.options_.children;
-
-  // Add TitleBar as default
-  children.push('titleBar');
+  if (children.indexOf('titleBar') === -1) {
+    children.push('titleBar');
+  }
   const ControlBar = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ControlBar');
   if (ControlBar) {
     children = ControlBar.prototype.options_.children;

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

@@ -925,6 +925,9 @@
   padding: clamp(1.3em, 4cqw, 2em);
   pointer-events: none;
   container-type: inline-size;
+  text-shadow: 0 0 0.5em var(--color-base);
+  color: var(--color-text);
+  background-image: linear-gradient(color-mix(in srgb, var(--color-base) 70%, transparent), transparent 100%);
 }
 .cld-video-player .vjs-title-bar .vjs-title-bar-title {
   width: 100%;
@@ -1351,7 +1354,9 @@
   transform: translateX(-50%);
   bottom: 2.7em;
   position: absolute;
-  text-shadow: 0 0 4px color-mix(in srgb, var(--color-base) 40%, transparent);
+  padding: 0 0.3em;
+  font-weight: bold;
+  text-shadow: 0 0 8px var(--color-base), 0 0 1px var(--color-base), 0 0 1px var(--color-base);
 }
 .cld-video-player .vjs-chapter-display:not(:empty) ~ .vjs-vtt-thumbnail-display {
   bottom: 4em;
@@ -1798,7 +1803,7 @@
   box-sizing: border-box;
 }
 .cld-video-player-skin-dark .cld-plw-item-info-wrap {
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 1px var(--color-base);
 }
 @media only screen and (max-width: 768px) {
   .cld-video-player-skin-dark .cld-plw-item-info-wrap {
@@ -1924,14 +1929,12 @@
   bottom: 0;
   left: 0;
   background: linear-gradient(to top, var(--color-base), transparent 80%);
-  opacity: 0.6;
+  opacity: 0.9;
 }
 .cld-thumbnail.cld-plw-panel-item-active {
   border: 1px solid var(--color-accent);
   box-sizing: border-box;
-}
-.cld-thumbnail.cld-plw-panel-item-active .cld-plw-item-info-wrap {
-  color: var(--color-accent);
+  box-shadow: 0 0 3em -0.5em var(--color-accent) inset;
 }
 
 .cld-plw-panel-item:hover:after {

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

@@ -1413,7 +1413,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.3-edge.3"
+        videoPlayerVersion: "2.3.3-edge.4"
       });
     } else if (this.currentVideMetadata.cloudName !== metadata.cloudName || this.currentVideMetadata.publicId !== metadata.publicId) {
       this.cloudinaryAnalytics.stopManualTracking();
@@ -1786,7 +1786,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.3-edge.3"}`
+        _s: `vp-${"2.3.3-edge.4"}`
       } : {});
       if (options.sourceTypes.indexOf('audio') > -1) {
         builtSrc = new _models_audio_source_audio_source__WEBPACK_IMPORTED_MODULE_7__["default"](publicId, options);
@@ -2711,11 +2711,6 @@ const playerColors = `
     color: rgba(--text-color, 0.3);
   }
 
-  .PLAYER-CLASS-PREFIX .vjs-title-bar {
-    color: --text-color;
-    background-image: linear-gradient(rgba(--base-color, 0.4), rgba(255, 255, 255, 0) 100%);
-  }
-
   .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay {
     color: --text-color;
     background-color: rgba(--base-color, 0.4);
@@ -3050,7 +3045,7 @@ const contextMenuContent = player => {
   const isFullscreen = player.isFullscreen();
   const aboutMenuItem = {
     class: 'player-version',
-    label: 'Cloudinary Player v' + "2.3.3-edge.3"
+    label: 'Cloudinary Player v' + "2.3.3-edge.4"
   };
   if (!player.controls()) {
     return [aboutMenuItem];
@@ -5490,7 +5485,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.3-edge.3",
+        vpVersion: "2.3.3-edge.4",
         vpInstanceId: this.getVPInstanceId(),
         // #if (process.env.WEBPACK_BUILD_LIGHT)
         vpLightBuild: true,
@@ -6198,9 +6193,9 @@ const extractOptions = (elem, options) => {
 const overrideDefaultVideojsComponents = () => {
   const Player = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Player');
   let children = Player.prototype.options_.children;
-
-  // Add TitleBar as default
-  children.push('titleBar');
+  if (children.indexOf('titleBar') === -1) {
+    children.push('titleBar');
+  }
   const ControlBar = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ControlBar');
   if (ControlBar) {
     children = ControlBar.prototype.options_.children;