feat(project): add an image label as a custom param for playlists

jwplayer · Aug 3, 2023 · 63a85b5 · 63a85b5
1 parent 6216bd2
commit 63a85b5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/src/services/api.service.ts b/src/services/api.service.ts
@@ -19,23 +19,31 @@ enum ImageProperty {
 
 const PAGE_LIMIT = 20;
 
-const generateAlternateImageURL = (item: PlaylistItem, label: string) =>
-  `https://img.jwplayer.com/v1/media/${item.mediaid}/images/${label}.webp?poster_fallback=1`;
+/**
+ * We use playlistLabel prop to define the label used for all media items inside.
+ * That way we can change the behavior of the same media items being in different playlists
+ */
+const generateAlternateImageURL = ({ item, label, playlistLabel }: { item: PlaylistItem; label: string; playlistLabel?: string }) => {
+  const pathname = `/v2/media/${item.mediaid}/images/${playlistLabel || label}.webp`;
+  const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, { poster_fallback: 1, fallback: playlistLabel ? label : null });
+
+  return url;
+};
 
 /**
  * Transform incoming media items
  * - Parses productId into MediaOffer[] for all cleeng offers
  */
-export const transformMediaItem = (item: PlaylistItem) => {
+export const transformMediaItem = (item: PlaylistItem, playlist?: Playlist) => {
   const config = ConfigStore.getState().config;
-
   const offerKeys = Object.keys(config?.integrations)[0];
+  const playlistLabel = playlist?.imageLabel;
 
   const transformedMediaItem = {
     ...item,
-    cardImage: generateAlternateImageURL(item, ImageProperty.CARD),
-    backgroundImage: generateAlternateImageURL(item, ImageProperty.BACKGROUND),
-    channelLogoImage: generateAlternateImageURL(item, ImageProperty.CHANNEL_LOGO),
+    cardImage: generateAlternateImageURL({ item, label: ImageProperty.CARD, playlistLabel }),
+    channelLogoImage: generateAlternateImageURL({ item, label: ImageProperty.CHANNEL_LOGO, playlistLabel }),
+    backgroundImage: generateAlternateImageURL({ item, label: ImageProperty.BACKGROUND }),
     mediaOffers: item.productIds ? filterMediaOffers(offerKeys, item.productIds) : undefined,
     scheduledStart: item['VCH.ScheduledStart'] ? parseISO(item['VCH.ScheduledStart'] as string) : undefined,
     scheduledEnd: item['VCH.ScheduledEnd'] ? parseISO(item['VCH.ScheduledEnd'] as string) : undefined,
@@ -54,7 +62,7 @@ export const transformMediaItem = (item: PlaylistItem) => {
  * @param relatedMediaId
  */
 export const transformPlaylist = (playlist: Playlist, relatedMediaId?: string) => {
-  playlist.playlist = playlist.playlist.map((item) => transformMediaItem(item));
+  playlist.playlist = playlist.playlist.map((item) => transformMediaItem(item, playlist));
 
   // remove the related media item (when this is a recommendations playlist)
   if (relatedMediaId) playlist.playlist.filter((item) => item.mediaid !== relatedMediaId);

diff --git a/test-e2e/tests/live_channel_test.ts b/test-e2e/tests/live_channel_test.ts
@@ -229,22 +229,22 @@ Scenario('I can navigate through the epg', async ({ I }) => {
 
 Scenario('I can see the channel logo for Channel 1', async ({ I }) => {
   await I.openVideoCard('Channel 1');
-  await I.seeEpgChannelLogoImage('Uh7zcqVm', 'https://img.jwplayer.com/v1/media/Uh7zcqVm/images/channel_logo.webp?poster_fallback=1&width=320');
+  await I.seeEpgChannelLogoImage('Uh7zcqVm', 'https://cdn.jwplayer.com/v2/media/Uh7zcqVm/images/channel_logo.webp?poster_fallback=1&width=320');
 });
 
 Scenario('I can see the channel logo for Channel 2', async ({ I }) => {
   await I.openVideoCard('Channel 2');
-  await I.seeEpgChannelLogoImage('Z2evecey', 'https://img.jwplayer.com/v1/media/Z2evecey/images/channel_logo.webp?poster_fallback=1&width=320');
+  await I.seeEpgChannelLogoImage('Z2evecey', 'https://cdn.jwplayer.com/v2/media/Z2evecey/images/channel_logo.webp?poster_fallback=1&width=320');
 });
 
 Scenario('I can see the background image for Channel 3', async ({ I }) => {
   await I.openVideoCard('Channel 3');
-  await I.seeVideoDetailsBackgroundImage('Channel 3', 'https://img.jwplayer.com/v1/media/wewsVyR7/images/background.webp?poster_fallback=1&width=1280');
+  await I.seeVideoDetailsBackgroundImage('Channel 3', 'https://cdn.jwplayer.com/v2/media/wewsVyR7/images/background.webp?poster_fallback=1&width=1280');
 });
 
 Scenario('I can see the background image for Channel 4', async ({ I }) => {
   await I.openVideoCard('Channel 4');
-  await I.seeVideoDetailsBackgroundImage('Channel 4', 'https://img.jwplayer.com/v1/media/kH7LozaK/images/background.webp?poster_fallback=1&width=1280');
+  await I.seeVideoDetailsBackgroundImage('Channel 4', 'https://cdn.jwplayer.com/v2/media/kH7LozaK/images/background.webp?poster_fallback=1&width=1280');
 });
 
 async function isSelectedProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string) {

diff --git a/types/playlist.d.ts b/types/playlist.d.ts
@@ -79,5 +79,6 @@ export type Playlist = {
    */
   shelfImageAspectRatio?: string;
   cardImageAspectRatio?: string;
+  imageLabel?: string;
   [key: string]: unknown;
 };