fix(epg): use default epg background

jwplayer · Oct 29, 2024 · 4c86b42 · 4c86b42
1 parent 738f127
commit 4c86b42
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 19 deletions.
diff --git a/packages/hooks-react/src/usePlanByEpg.ts b/packages/hooks-react/src/usePlanByEpg.ts
@@ -72,8 +72,8 @@ const usePlanByEpg = ({
 
 export const makeTheme = () => ({
   primary: {
-    600: 'var(--epg-background-color)',
-    900: 'var(--epg-background-color)',
+    600: 'var(--epg-background-color, var(--body-background-color))',
+    900: 'var(--epg-background-color, var(--body-background-color))',
   },
   grey: {
     300: '#fff',

diff --git a/packages/ui-react/src/components/Epg/Epg.module.scss b/packages/ui-react/src/components/Epg/Epg.module.scss
@@ -11,7 +11,7 @@ $control-z-index: $base-z-index + 2;
   width: 100%;
   height: 100%;
   padding: calc(variables.$base-spacing * 3) 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
-  background-color: var(--epg-background-color);
+  background-color: var(--epg-background-color, var(--body-background-color));
 
   // EpgContainer
   > div:nth-child(2) {

diff --git a/packages/ui-react/src/components/EpgChannel/EpgChannelItem.module.scss b/packages/ui-react/src/components/EpgChannel/EpgChannelItem.module.scss
@@ -5,7 +5,7 @@
 .epgChannelBox {
   position: absolute;
   padding: 8px 0;
-  background-color: var(--epg-background-color);
+  background-color: var(--epg-background-color, var(--body-background-color));
 }
 
 .epgChannel {

diff --git a/packages/ui-react/src/utils/theming.ts b/packages/ui-react/src/utils/theming.ts
@@ -26,9 +26,8 @@ export const setThemingVariables = (config: Config) => {
     if (bodyColor === '#000000') {
       // disable text shadows when using a light background
       root.style.setProperty('--body-text-shadow', 'none');
-    } else {
       // currently, the EPG only supports a dark background
-      root.style.setProperty('--epg-background-color', backgroundColor);
+      root.style.setProperty('--epg-background-color', '#262626');
     }
   }
 

diff --git a/platforms/web/src/styles/main.scss b/platforms/web/src/styles/main.scss
@@ -17,8 +17,6 @@
   --card-color: #{theme.$card-color};
   --card-border-hover-color: #{theme.$card-border-hover-color};
   --card-tag-bg: #{theme.$card-tag-bg};
-
-  --epg-background-color: #262626;
 }
 
 @include accessibility.globalClassNames;

diff --git a/platforms/web/test-e2e/tests/live_channel_test.ts b/platforms/web/test-e2e/tests/live_channel_test.ts
@@ -5,7 +5,7 @@ import { testConfigs } from '@jwp/ott-testing/constants';
 
 import { ShelfId } from '#utils/constants';
 
-const programSelectedBackgroundColor = '#fff';
+const programSelectedBackgroundColor = 'rgb(255, 255, 255)';
 const programLiveBorder = '2px solid rgb(255, 255, 255)';
 
 const programBackgroundColor = 'rgba(255, 255, 255, 0.08)';
@@ -158,6 +158,7 @@ Scenario('I can select an upcoming program on the same channel', async ({ I }) =
 
 Scenario('I can select a previous program on the same channel and watch the video', async ({ I }) => {
   await I.openVideoCard('Channel 1');
+  waitForEpgAnimation(I);
   I.seeElement(channel1LiveProgramLocator);
   await isSelectedProgram(I, channel1LiveProgramLocator, 'channel 1', true);
 
@@ -184,6 +185,7 @@ Scenario('I can select a previous program on the same channel and watch the vide
 
 Scenario('I can select a program on another channel', async ({ I }) => {
   await I.openVideoCard('Channel 1');
+  waitForEpgAnimation(I);
   I.click(channel2Locator);
 
   waitForEpgAnimation(I);
@@ -268,7 +270,7 @@ Scenario('I can see the background image for Channel 4', async ({ I }) => {
 async function isSelectedProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string, isLive: boolean) {
   I.moveCursorTo('body', 0, 0); // This prevents accidentally triggering the hover state
 
-  await checkStyle(I, locator, {
+  await I.seeCssProperties(locator, {
     'background-color': programSelectedBackgroundColor,
     border: isLive ? programLiveBorder : programBorder,
   });
@@ -277,7 +279,7 @@ async function isSelectedProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, c
 }
 
 async function isLiveProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string) {
-  await checkStyle(I, locator, {
+  await I.seeCssProperties(locator, {
     'background-color': programBackgroundColor,
     border: programLiveBorder,
   });
@@ -286,18 +288,14 @@ async function isLiveProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, chann
 }
 
 async function isProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string) {
-  await checkStyle(I, locator, {
+  await I.seeCssProperties(locator, {
     'background-color': programBackgroundColor,
     border: programBorder,
   });
 
   I.say(`I see the program is not active nor selected on ${channel}`);
 }
 
-async function checkStyle(I: CodeceptJS.I, locator: CodeceptJS.LocatorOrString, styles: Record<string, string>) {
-  I.seeCssPropertiesOnElements(locator, styles);
-}
-
 function waitForEpgAnimation(I: CodeceptJS.I, sec: number = 1) {
   I.waitForLoaderDone();
   return I.wait(sec);

diff --git a/platforms/web/test-e2e/tests/playlist_test.ts b/platforms/web/test-e2e/tests/playlist_test.ts
@@ -91,13 +91,14 @@ async function checkSelectedFilterButton(I: CodeceptJS.I, expectedButton) {
   } else {
     I.seeAll(allFilters);
     I.see(expectedButton, 'div[class*=filterRow] button[class*=active]');
+    I.wait(0.1); // animation
 
     // Check that the 'All' button is visually active
-    I.seeCssPropertiesOnElements({ xpath: `//button[contains(., "${expectedButton}")]` }, { color: 'rgb(0, 0, 0)', 'background-color': 'rgb(204, 204, 204)' });
+    await I.seeCssProperties({ xpath: `//button[contains(., "${expectedButton}")]` }, { color: 'rgb(0, 0, 0)', 'background-color': 'rgb(204, 204, 204)' });
     // Check that the other filter buttons are not visually active
-    I.seeCssPropertiesOnElements(
+    await I.seeCssProperties(
       { xpath: `//div[contains(@class, "filterRow")]/button[not(contains(., "${expectedButton}"))]` },
-      { color: 'rgb(255, 255, 255)', 'background-color': 'rgba(0, 0, 0, 0.6)' },
+      { color: 'rgb(255, 255, 255)', 'background-color': 'rgba(0, 0, 0, 0.3)' },
     );
   }
 }
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
@@ -554,6 +554,15 @@ const stepsObj = {
   clickHome: function (this: CodeceptJS.I) {
     this.click('a[href="/"]');
   },
+  seeCssProperties: async function (this: CodeceptJS.I, locatorOrString: CodeceptJS.LocatorOrString, cssProperties: Record<string, string>) {
+    for (const property in cssProperties) {
+      const locator = locate(locatorOrString);
+      const actual = await this.grabCssPropertyFrom(locator, property);
+      const expected = cssProperties[property];
+
+      assert.equal(actual, expected, `CSS property '${property}' for ${locator.toString()} doesn't match the expected value.`);
+    }
+  },
 };
 declare global {
   // noinspection JSUnusedGlobalSymbols