Merge branch 'master' into ME-19011-a11y-non-text-contrast

tsi · web-flow · commit 563d7220633d · 2025-02-16T11:50:56.000+02:00
diff --git a/docs/colors.html b/docs/colors.html
@@ -58,6 +58,7 @@ <h3 class="text-primary">Player 1</h3>
         data-cld-source='{ "publicId": "dog", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
         data-cld-colors='{ "base": "#0b602b", "accent": "#cddc39", "text": "#fff" }'
         class="cld-video-player cld-fluid"
+        id="player-1"
       ></video>
     </div>
     <h3 class="text-primary">Player 2</h3>
@@ -68,6 +69,7 @@ <h3 class="text-primary">Player 2</h3>
         data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
         data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
         class="cld-video-player cld-fluid cld-video-player-skin-dark"
+        id="player-2"
       ></video>
     </div>
 
@@ -78,6 +80,7 @@ <h3 class="text-primary">Player 3</h3>
         playsinline
         data-cld-source='{ "publicId": "elephants", "info": { "title": "Elephants", "subtitle": "Short movie about elephants" } }'
         data-cld-colors='{ "base": "#ffffff", "accent": "#676a46", "text": "#007d29" }'        class="cld-video-player cld-fluid cld-video-player-skin-light"
+        id="player-3"
       ></video>
     </div>
 
diff --git a/docs/multiple-players.html b/docs/multiple-players.html
@@ -55,6 +55,7 @@ <h3 class="text-primary">Player 1</h3>
         playsinline
         data-cld-public-id="elephants"
         class="cld-video-player cld-video-player-skin-dark"
+        id="player-1"
       ></video>
     </div>
 
@@ -64,8 +65,9 @@ <h3 class="text-primary">Player 2</h3>
         muted
         playsinline
         data-cld-public-id="marmots"
-        class="cld-video-player cld-video-player-skin-light">
-      </video>
+        class="cld-video-player cld-video-player-skin-light"
+        id="player-2"
+      ></video>
     </div>
 
     <h3 class="text-primary">Player 3</h3>
@@ -74,8 +76,9 @@ <h3 class="text-primary">Player 3</h3>
         muted
         playsinline
         data-cld-public-id="snow_deer_short"
-        class="cld-video-player">
-      </video>
+        class="cld-video-player"
+        id="player-3"
+      ></video>
     </div>
 
     <p class="mt-4">
diff --git a/src/assets/styles/components/title-bar.scss b/src/assets/styles/components/title-bar.scss
@@ -16,6 +16,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%);
 
   .vjs-title-bar-title {
     width: 100%;
diff --git a/src/plugins/chapters/chapters.scss b/src/plugins/chapters/chapters.scss
@@ -41,7 +41,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);
     &:not(:empty) ~ .vjs-vtt-thumbnail-display {
       bottom: 4em;
     }
diff --git a/src/plugins/colors/index.js b/src/plugins/colors/index.js
@@ -49,11 +49,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);
diff --git a/src/plugins/playlist/ui/playlist.scss b/src/plugins/playlist/ui/playlist.scss
@@ -77,7 +77,7 @@
   box-sizing: border-box;
 
   .cld-video-player-skin-dark & {
-    text-shadow: 1px 1px 1px rgba(#000, 0.3);
+    text-shadow: 0 0 1px var(--color-base);
 
     @media only screen and (max-width: 768px) {
       background: var(--color-base);
diff --git a/src/plugins/playlist/ui/thumbnail/thumbnail.scss b/src/plugins/playlist/ui/thumbnail/thumbnail.scss
@@ -22,15 +22,13 @@
     bottom: 0;
     left: 0;
     background: linear-gradient(to top, var(--color-base), transparent 80%);
-    opacity: 0.6;
+    opacity: 0.9;
   }
 
   &.cld-plw-panel-item-active {
     border: 1px solid var(--color-accent);
     box-sizing: border-box;
-    .cld-plw-item-info-wrap {
-      color: var(--color-accent);
-    }
+    box-shadow: 0 0 3em -0.5em var(--color-accent) inset;
   }
 }
 
diff --git a/src/video-player.utils.js b/src/video-player.utils.js
@@ -108,8 +108,9 @@ export const overrideDefaultVideojsComponents = () => {
   const Player = videojs.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 = videojs.getComponent('ControlBar');
   if (ControlBar) {
diff --git a/test/e2e/src/pom/colorsApiPage.ts b/test/e2e/src/pom/colorsApiPage.ts
@@ -1,9 +1,9 @@
 import { Page } from '@playwright/test';
 import { VideoComponent } from '../../components/videoComponent';
 import { BasePage } from './BasePage';
-const COLORS_API_PAGE_COLOR_SKIN_VIDEO_SELECTOR = '//*[@id="vjs_video_3_html5_api"]';
-const COLORS_API_PAGE_DARK_SKIN_VIDEO_SELECTOR = '//*[@id="vjs_video_627_html5_api"]';
-const COLORS_API_PAGE_LIGHT_SKIN_VIDEO_SELECTOR = '//*[@id="vjs_video_1229_html5_api"]';
+const COLORS_API_PAGE_COLOR_SKIN_VIDEO_SELECTOR = '//*[@id="player-1_html5_api"]';
+const COLORS_API_PAGE_DARK_SKIN_VIDEO_SELECTOR = '//*[@id="player-2_html5_api"]';
+const COLORS_API_PAGE_LIGHT_SKIN_VIDEO_SELECTOR = '//*[@id="player-3_html5_api"]';
 
 /**
  * Video player examples colors API page object
diff --git a/test/e2e/src/pom/multiplePlayersPage.ts b/test/e2e/src/pom/multiplePlayersPage.ts
@@ -1,9 +1,9 @@
 import { Page } from '@playwright/test';
 import { VideoComponent } from '../../components/videoComponent';
 import { BasePage } from './BasePage';
-const MULTIPLE_PLAYERS_PAGE_PLAYER_1_VIDEO_SELECTOR = '//*[@id="vjs_video_3_html5_api"]';
-const MULTIPLE_PLAYERS_PAGE_PLAYER_2_VIDEO_SELECTOR = '//*[@id="vjs_video_627_html5_api"]';
-const MULTIPLE_PLAYERS_PAGE_PLAYER_3_VIDEO_SELECTOR = '//*[@id="vjs_video_1229_html5_api"]';
+const MULTIPLE_PLAYERS_PAGE_PLAYER_1_VIDEO_SELECTOR = '//*[@id="player-1_html5_api"]';
+const MULTIPLE_PLAYERS_PAGE_PLAYER_2_VIDEO_SELECTOR = '//*[@id="player-2_html5_api"]';
+const MULTIPLE_PLAYERS_PAGE_PLAYER_3_VIDEO_SELECTOR = '//*[@id="player-3_html5_api"]';
 
 /**
  * Video player examples colors API page object

Original file line number	Diff line number	Diff line change
`@@ -22,15 +22,13 @@`
`22`	`22`	`bottom: 0;`
`23`	`23`	`left: 0;`
`24`	`24`	`background: linear-gradient(to top, var(--color-base), transparent 80%);`
`25`		`- opacity: 0.6;`
	`25`	`+ opacity: 0.9;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`&.cld-plw-panel-item-active {`
`29`	`29`	`border: 1px solid var(--color-accent);`
`30`	`30`	`box-sizing: border-box;`
`31`		`- .cld-plw-item-info-wrap {`
`32`		`- color: var(--color-accent);`
`33`		`- }`
	`31`	`+ box-shadow: 0 0 3em -0.5em var(--color-accent) inset;`
`34`	`32`	`}`
`35`	`33`	`}`
`36`	`34`