From ef5797687da3d24c158ae9454736d89b8df56333 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 11 Oct 2022 10:44:42 +0200
Subject: [PATCH] fix: styling bug fixes (#176)

* fix(videodetails): fading poster on top of page elements

* fix(player): epg elements on top of player

* fix(videodetails): normal poster clipping

* chore: revert smooth scrolling on EPG screen

* chore(epg): fix e2e tests

* chore: fix prettier errors

* fix(inlineplayer): player autostart setting not respected
---
 .../__snapshots__/ConfigSelect.test.tsx.snap  |  6 ++
 src/components/Player/Player.tsx              | 13 ++-
 .../VideoDetails/VideoDetails.module.scss     | 38 +++++---
 src/containers/Cinema/Cinema.module.scss      |  4 +-
 src/containers/Cinema/Cinema.tsx              |  1 +
 src/containers/InlinePlayer/InlinePlayer.tsx  |  3 +
 .../PlayerContainer/PlayerContainer.tsx       |  4 +-
 .../mediaScreens/MediaMovie/MediaMovie.tsx    |  1 +
 .../MediaSeriesEpisode/MediaSeriesEpisode.tsx |  1 +
 .../PlaylistLiveChannels.tsx                  |  2 +-
 test-e2e/data/config.test--normal-poster.json | 70 ++++++++++++++
 test-e2e/tests/live_channel_test.ts           | 95 +++++++++++--------
 12 files changed, 178 insertions(+), 60 deletions(-)
 create mode 100644 test-e2e/data/config.test--normal-poster.json

diff --git a/src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap b/src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap
index 95d54fc54..50123777d 100644
--- a/src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap
+++ b/src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap
@@ -56,6 +56,12 @@ exports[`<ConfigSelect> > renders and matches snapshot 1`] = `
         >
           test--no-watchlists
         </option>
+        <option
+          class="_option_bb73c6"
+          value="test--normal-poster"
+        >
+          test--normal-poster
+        </option>
         <option
           class="_option_bb73c6"
           value="test--subscription"
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 5aa389aa3..e2b0cbfe7 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -152,15 +152,22 @@ const Player: React.FC<Props> = ({
 
       playerRef.current = window.jwplayer(playerElementRef.current) as JWPlayer;
 
-      playerRef.current.setup({
+      // player options are untyped
+      const playerOptions: { [key: string]: unknown } = {
         aspectratio: false,
         playlist: [deepCopy({ ...item, starttime: startTimeRef.current })],
         width: '100%',
         height: '100%',
         mute: false,
-        autostart,
         repeat: false,
-      });
+      };
+
+      // only set the autostart parameter when it is defined or it will override the player.defaults autostart setting
+      if (typeof autostart !== 'undefined') {
+        playerOptions.autostart = autostart;
+      }
+
+      playerRef.current.setup(playerOptions);
 
       setPlayer(playerRef.current);
       attachEvents();
diff --git a/src/components/VideoDetails/VideoDetails.module.scss b/src/components/VideoDetails/VideoDetails.module.scss
index facbb8d56..41b357e7e 100644
--- a/src/components/VideoDetails/VideoDetails.module.scss
+++ b/src/components/VideoDetails/VideoDetails.module.scss
@@ -29,7 +29,6 @@
 .main {
   display: flex;
   max-width: 100vw;
-  overflow: hidden;
 
   &.hidden {
     display: none;
@@ -44,11 +43,15 @@
   position: relative;
   width: 70%;
   max-width: 650px;
-  min-height: 300px;
+  min-height: 440px;
+
+  @include responsive.desktop-small-only() {
+    min-height: 335px;
+  }
 
   @include responsive.tablet-only() {
     width: 350px;
-    min-height: 380px;
+    min-height: 335px;
   }
 
   @include responsive.mobile-only() {
@@ -140,31 +143,42 @@
   position: absolute;
   top: 0;
   right: 0;
+  z-index: -1;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
+  // fix for Safari (poster will render below the dynamic blur)
+  transform: translateZ(0);
 
   &.normal {
-    width: 720px;
-    height: 405px;
-    margin: 37px 56px;
+    right: 56px;
+    width: auto;
+    height: 100%;
     border-radius: 4px;
     mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
     -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); /* stylelint-disable-line */
 
+    @include responsive.desktop-small-only() {
+      right: 34px;
+    }
+
     @include responsive.tablet-only() {
-      width: 600px;
-      height: 338px;
-      margin: 24px 34px;
+      right: 24px;
+      max-width: 80vw;
+      max-height: 350px;
     }
 
     @include responsive.mobile-only() {
+      top: -#{variables.$header-height-mobile + 16};
+      right: -16px;
+      left: -16px;
       width: 100vw;
-      margin: 0 16px;
+      height: 400px;
+      border-radius: 0;
 
-      mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
+      mask-image: radial-gradient(191% 141% at 100% 10%, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%);
       //noinspection CssInvalidPropertyValue
-      -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
+      -webkit-mask-image: radial-gradient(191% 141% at 100% 10%, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
     }
   }
 
diff --git a/src/containers/Cinema/Cinema.module.scss b/src/containers/Cinema/Cinema.module.scss
index 5d7a5f440..f16b83a6a 100644
--- a/src/containers/Cinema/Cinema.module.scss
+++ b/src/containers/Cinema/Cinema.module.scss
@@ -5,14 +5,14 @@
 
 .fade {
   position: relative;
-  z-index: 1;
+  // make sure the fade animation happens on top of page elements
+  z-index: variables.$player-z-index;
 }
 
 .cinema {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: variables.$player-z-index;
   width: 100vw;
   height: calc(100vh - calc(100vh - 100%));
   overflow: hidden;
diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx
index b0fb1b999..d261293c3 100644
--- a/src/containers/Cinema/Cinema.tsx
+++ b/src/containers/Cinema/Cinema.tsx
@@ -82,6 +82,7 @@ const Cinema: React.FC<Props> = ({
         <PlayerContainer
           item={item}
           feedId={feedId}
+          autostart={true}
           onPlay={handlePlay}
           onPause={handlePause}
           onComplete={handleComplete}
diff --git a/src/containers/InlinePlayer/InlinePlayer.tsx b/src/containers/InlinePlayer/InlinePlayer.tsx
index b5bd18604..12b90348b 100644
--- a/src/containers/InlinePlayer/InlinePlayer.tsx
+++ b/src/containers/InlinePlayer/InlinePlayer.tsx
@@ -26,6 +26,7 @@ type Props = {
   startWatchingButton: React.ReactNode;
   isLoggedIn: boolean;
   paywall: boolean;
+  autostart?: boolean;
 };
 
 const InlinePlayer: React.FC<Props> = ({
@@ -40,6 +41,7 @@ const InlinePlayer: React.FC<Props> = ({
   startWatchingButton,
   isLoggedIn,
   paywall,
+  autostart,
 }: Props) => {
   const siteName = useConfigStore((s) => s.config.siteName);
   const { t } = useTranslation();
@@ -66,6 +68,7 @@ const InlinePlayer: React.FC<Props> = ({
         <PlayerContainer
           item={item}
           feedId={feedId}
+          autostart={autostart}
           onPlay={onPlay}
           onPause={onPause}
           onComplete={onComplete}
diff --git a/src/containers/PlayerContainer/PlayerContainer.tsx b/src/containers/PlayerContainer/PlayerContainer.tsx
index 885b8e4a5..1a56e5cb5 100644
--- a/src/containers/PlayerContainer/PlayerContainer.tsx
+++ b/src/containers/PlayerContainer/PlayerContainer.tsx
@@ -9,7 +9,6 @@ import Player from '#src/components/Player/Player';
 import type { JWPlayer } from '#types/jwplayer';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import { VideoProgressMinMax } from '#src/config';
-import useQueryParam from '#src/hooks/useQueryParam';
 
 type Props = {
   item: PlaylistItem;
@@ -23,6 +22,7 @@ type Props = {
   liveStartDateTime?: string | null;
   liveEndDateTime?: string | null;
   liveFromBeginning?: boolean;
+  autostart?: boolean;
 };
 
 const PlayerContainer: React.FC<Props> = ({
@@ -36,8 +36,8 @@ const PlayerContainer: React.FC<Props> = ({
   liveEndDateTime,
   liveFromBeginning,
   liveStartDateTime,
+  autostart,
 }: Props) => {
-  const autostart = useQueryParam('play') === '1';
   const { player, features } = useConfigStore((s) => s.config);
   const continueWatchingList = features?.continueWatchingList;
   const watchHistoryEnabled = !!continueWatchingList;
diff --git a/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
index b51440c9a..fb0253428 100644
--- a/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
+++ b/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
@@ -157,6 +157,7 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
               paywall={isLocked(accessModel, isLoggedIn, hasSubscription, data)}
+              autostart={play || undefined}
             />
           ) : (
             <Cinema
diff --git a/src/pages/ScreenRouting/mediaScreens/MediaSeriesEpisode/MediaSeriesEpisode.tsx b/src/pages/ScreenRouting/mediaScreens/MediaSeriesEpisode/MediaSeriesEpisode.tsx
index 21d9ad858..9cf07da2a 100644
--- a/src/pages/ScreenRouting/mediaScreens/MediaSeriesEpisode/MediaSeriesEpisode.tsx
+++ b/src/pages/ScreenRouting/mediaScreens/MediaSeriesEpisode/MediaSeriesEpisode.tsx
@@ -198,6 +198,7 @@ const MediaSeriesEpisode: ScreenComponent<PlaylistItem> = ({ data }) => {
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
               paywall={isLocked(accessModel, isLoggedIn, hasSubscription, episodeItem)}
+              autostart={play || undefined}
             />
           ) : (
             <Cinema
diff --git a/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx b/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
index e58b923f3..0dba60e8f 100644
--- a/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
+++ b/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
@@ -109,7 +109,7 @@ const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playl
     setActiveChannel(channelId, programId);
 
     // scroll to top when clicking a program
-    (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.scrollingElement || document.body).scroll({ top: 0, behavior: 'smooth' });
   };
 
   const handleChannelClick = (channelId: string) => {
diff --git a/test-e2e/data/config.test--normal-poster.json b/test-e2e/data/config.test--normal-poster.json
new file mode 100644
index 000000000..105c86283
--- /dev/null
+++ b/test-e2e/data/config.test--normal-poster.json
@@ -0,0 +1,70 @@
+{
+  "assets": {
+    "banner": "https://cdn.jwplayer.com/images/nwthWC1U.png"
+  },
+  "content": [
+    {
+      "enableText": true,
+      "featured": true,
+      "contentId": "JSKF03bk",
+      "type": "playlist"
+    },
+    {
+      "enableText": true,
+      "type": "favorites"
+    },
+    {
+      "enableText": true,
+      "type": "continue_watching"
+    },
+    {
+      "enableText": true,
+      "type": "playlist",
+      "contentId": "dGSUzs9o"
+    },
+    {
+      "enableText": true,
+      "type": "playlist",
+      "contentId": "xQaFzykq"
+    }
+  ],
+  "menu": [
+    {
+      "label": "Films",
+      "contentId": "dGSUzs9o",
+      "filterTags": "Action,Comedy,Fantasy,Drama",
+      "type": "playlist"
+    },
+    {
+      "label": "Courses",
+      "contentId": "xQaFzykq",
+      "filterTags": "Beginner,Advanced",
+      "type": "playlist"
+    }
+  ],
+  "features": {
+    "recommendationsPlaylist": "IHBjjkSN",
+    "searchPlaylist": "D4soEviP",
+    "favoritesList": "34CFUkws",
+    "continueWatchingList": "IJvotI4w"
+  },
+  "integrations": {
+    "cleeng": {
+      "id": "440058292",
+      "useSandbox": true
+    }
+  },
+  "styling": {
+    "backgroundColor": null,
+    "highlightColor": null,
+    "headerBackground": null,
+    "dynamicBlur": false,
+    "posterFading": false,
+    "shelfTitles": true,
+    "footerText": "\u00a9 Blender Foundation | [cloud.blender.org](https://cloud.blender.org)"
+  },
+  "description": "Blender demo site",
+  "analyticsToken": "lDd_MCg4EeuMunbqcIJccw",
+  "player": "ou7L8htR",
+  "siteName": "Blender (authvod)"
+}
diff --git a/test-e2e/tests/live_channel_test.ts b/test-e2e/tests/live_channel_test.ts
index 4adfce4be..6fbb0d2bc 100644
--- a/test-e2e/tests/live_channel_test.ts
+++ b/test-e2e/tests/live_channel_test.ts
@@ -13,7 +13,7 @@ const channel2Id = 'Z2evecey';
 
 const channel1LiveProgramId = 'f99402a4-783d-4298-9ca2-d392db317927';
 const channel1PreviousProgramId = 'a2f80690-86e6-46e7-8a78-b243d5c8237e';
-const channel1UpcomingProgram = '6ffd595b-3cdb-431b-b444-934a0e4f63dc';
+const channel1UpcomingProgramId = '6ffd595b-3cdb-431b-b444-934a0e4f63dc';
 const channel2LiveProgramId = 'b628784b-1061-4a61-98f3-fa48ce3ce81f';
 
 Feature('live channel')
@@ -27,12 +27,21 @@ Before(async ({ I }) => {
 });
 
 const videoDetailsLocator = locate({ css: 'div[data-testid="video-details"]' });
-
 const shelfContainerLocator = locate({ css: 'div[role="row"]' });
 const shelfLocator = locate({ css: 'div[role="cell"]' }).inside(shelfContainerLocator);
 const epgContainerLocator = locate({ css: 'div[data-testid="container"]' });
+
 const makeEpgProgramLocator = (id: string) => locate({ css: `div[data-testid="${id}"]` }).inside(epgContainerLocator);
 const makeEpgChannelLocator = (id: string) => locate({ css: `div[data-testid="${id}"]` }).inside(epgContainerLocator);
+
+const channel1Locator = makeEpgChannelLocator(channel1Id);
+const channel2Locator = makeEpgChannelLocator(channel2Id);
+
+const channel1LiveProgramLocator = makeEpgProgramLocator(channel1LiveProgramId);
+const channel1PreviousProgramLocator = makeEpgProgramLocator(channel1PreviousProgramId);
+const channel1UpcomingProgramLocator = makeEpgProgramLocator(channel1UpcomingProgramId);
+const channel2LiveProgramLocator = makeEpgProgramLocator(channel2LiveProgramId);
+
 const liveChannelsCount = 5;
 
 Scenario('I can navigate to live channels from the live channels shelf', async ({ I }) => {
@@ -84,33 +93,34 @@ Scenario('I see the epg on the live channel screen', async ({ I }) => {
   I.see('LIVEOn Channel 1');
   I.see('Start watching');
 
-  I.seeElement(makeEpgProgramLocator(channel1LiveProgramId));
-  await isSelectedProgram(I, channel1LiveProgramId, 'channel 1');
+  I.seeElement(channel1LiveProgramLocator);
+  await isSelectedProgram(I, channel1LiveProgramLocator, 'channel 1');
 
-  I.seeElement(makeEpgProgramLocator(channel1PreviousProgramId));
-  await isProgram(I, channel1PreviousProgramId, 'channel 1');
+  I.seeElement(channel1PreviousProgramLocator);
+  await isProgram(I, channel1PreviousProgramLocator, 'channel 1');
 
-  I.seeElement(makeEpgProgramLocator(channel1UpcomingProgram));
-  await isProgram(I, channel1UpcomingProgram, 'channel 1');
+  I.seeElement(channel1UpcomingProgramLocator);
+  await isProgram(I, channel1UpcomingProgramLocator, 'channel 1');
 
-  I.seeElement(makeEpgProgramLocator(channel2LiveProgramId));
-  await isLiveProgram(I, channel2LiveProgramId, 'channel 2');
+  I.seeElement(channel2LiveProgramLocator);
+  await isLiveProgram(I, channel2LiveProgramLocator, 'channel 2');
 
   I.see('The Flash');
 });
 
 Scenario('I can select an upcoming program on the same channel', async ({ I }) => {
   await I.openVideoCard('Channel 1');
-  I.seeElement(makeEpgProgramLocator(channel1LiveProgramId));
-  await isSelectedProgram(I, channel1LiveProgramId, 'channel 1');
+  I.seeElement(channel1LiveProgramLocator);
+  await isSelectedProgram(I, channel1LiveProgramLocator, 'channel 1');
 
-  I.seeElement(makeEpgProgramLocator(channel1UpcomingProgram));
-  await isProgram(I, channel1UpcomingProgram, 'channel 1');
+  I.seeElement(channel1UpcomingProgramLocator);
+  await isProgram(I, channel1UpcomingProgramLocator, 'channel 1');
 
-  I.click(makeEpgProgramLocator(channel1UpcomingProgram));
+  I.click(channel1UpcomingProgramLocator);
 
   waitForEpgAnimation(I);
-  await isSelectedProgram(I, channel1UpcomingProgram, 'channel 1');
+  I.scrollTo(channel1UpcomingProgramLocator);
+  await isSelectedProgram(I, channel1UpcomingProgramLocator, 'channel 1');
 
   I.see('The Flash', locate('div').inside(videoDetailsLocator));
 
@@ -118,27 +128,29 @@ Scenario('I can select an upcoming program on the same channel', async ({ I }) =
 
   I.seeElement(locate('button[disabled]').withText('Start watching'));
 
-  I.seeElement(makeEpgProgramLocator(channel1LiveProgramId));
-  await isLiveProgram(I, channel1LiveProgramId, 'channel 1');
+  I.seeElement(channel1LiveProgramLocator);
+  await isLiveProgram(I, channel1LiveProgramLocator, 'channel 1');
 });
 
 Scenario('I can select a previous program on the same channel and watch the video', async ({ I }) => {
   await I.openVideoCard('Channel 1');
-  I.seeElement(makeEpgProgramLocator(channel1LiveProgramId));
-  await isSelectedProgram(I, channel1LiveProgramId, 'channel 1');
+  I.seeElement(channel1LiveProgramLocator);
+  await isSelectedProgram(I, channel1LiveProgramLocator, 'channel 1');
 
-  I.seeElement(makeEpgProgramLocator(channel1PreviousProgramId));
-  await isProgram(I, channel1PreviousProgramId, 'channel 1');
+  I.seeElement(channel1PreviousProgramLocator);
+  await isProgram(I, channel1PreviousProgramLocator, 'channel 1');
 
-  I.click(makeEpgProgramLocator(channel1PreviousProgramId));
+  I.click(channel1PreviousProgramLocator);
 
   waitForEpgAnimation(I);
-  await isSelectedProgram(I, channel1PreviousProgramId, 'channel 1');
+
+  I.scrollTo(channel1PreviousProgramLocator);
+  await isSelectedProgram(I, channel1PreviousProgramLocator, 'channel 1');
 
   I.dontSee('LIVEOn Channel 1', locate('div').inside(videoDetailsLocator));
 
-  I.seeElement(makeEpgProgramLocator(channel1LiveProgramId));
-  await isLiveProgram(I, channel1LiveProgramId, 'channel 1');
+  I.seeElement(channel1LiveProgramLocator);
+  await isLiveProgram(I, channel1LiveProgramLocator, 'channel 1');
 
   I.see('The Flash', locate('h2').inside(videoDetailsLocator));
 
@@ -148,7 +160,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');
-  I.click(makeEpgChannelLocator(channel2Id));
+  I.click(channel2Locator);
 
   waitForEpgAnimation(I);
 
@@ -157,10 +169,11 @@ Scenario('I can select a program on another channel', async ({ I }) => {
   I.see('The Flash', locate('h2').inside(videoDetailsLocator));
   I.see('LIVEOn Channel 2', locate('div').inside(videoDetailsLocator));
 
-  I.seeElement(makeEpgProgramLocator(channel2LiveProgramId));
-  await isSelectedProgram(I, channel2LiveProgramId, 'channel 2');
+  I.scrollTo(channel2LiveProgramLocator);
+  I.seeElement(channel2LiveProgramLocator);
+  await isSelectedProgram(I, channel2LiveProgramLocator, 'channel 2');
 
-  I.click(makeEpgChannelLocator(channel1Id));
+  I.click(channel1Locator);
   waitForEpgAnimation(I);
   I.dontSee('LIVEOn Channel 2', locate('div').inside(videoDetailsLocator));
   I.see('LIVEOn Channel 1', locate('div').inside(videoDetailsLocator));
@@ -186,11 +199,13 @@ Scenario('I can navigate through the epg', async ({ I }) => {
   I.click('Now');
 
   waitForEpgAnimation(I);
-  I.seeElement(makeEpgProgramLocator(channel1LiveProgramId));
-  await isSelectedProgram(I, channel1LiveProgramId, 'channel 1');
+  I.scrollTo(channel1LiveProgramLocator);
+  I.seeElement(channel1LiveProgramLocator);
+  await isSelectedProgram(I, channel1LiveProgramLocator, 'channel 1');
 
-  I.seeElement(makeEpgProgramLocator(channel2LiveProgramId));
-  await isLiveProgram(I, channel2LiveProgramId, 'channel 2');
+  I.seeElement(channel2LiveProgramLocator);
+  I.scrollTo(channel2LiveProgramLocator);
+  await isLiveProgram(I, channel2LiveProgramLocator, 'channel 2');
 });
 
 Scenario('I can see an alternate channel logo for Channel 1', async ({ I }) => {
@@ -213,24 +228,24 @@ Scenario('I can see the default background image for Channel 4', async ({ I }) =
   await I.seeVideoDetailsBackgroundImage('Channel 4', 'https://cdn.jwplayer.com/v2/media/kH7LozaK/poster.jpg?width=1280');
 });
 
-async function isSelectedProgram(I: CodeceptJS.I, programId: string, channel: string) {
-  await checkStyle(I, makeEpgProgramLocator(programId), {
+async function isSelectedProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string) {
+  await checkStyle(I, locator, {
     'background-color': programSelectedBackgroundColor,
     border: programLiveBorder,
   });
   await I.say(`I see the program is selected on ${channel}`);
 }
 
-async function isLiveProgram(I: CodeceptJS.I, programId: string, channel: string) {
-  await checkStyle(I, makeEpgProgramLocator(programId), {
+async function isLiveProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string) {
+  await checkStyle(I, locator, {
     'background-color': programBackgroundColor,
     border: programLiveBorder,
   });
   await I.say(`I see the program is live on ${channel}`);
 }
 
-async function isProgram(I: CodeceptJS.I, programId: string, channel: string) {
-  await checkStyle(I, makeEpgProgramLocator(programId), {
+async function isProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string) {
+  await checkStyle(I, locator, {
     'background-color': programBackgroundColor,
     border: programBorder,
   });