feat(project): remove ImageData type

src/components/Card/Card.test.tsx

@@ -6,7 +6,7 @@ import Card from './Card';
 import type { PlaylistItem } from '#types/playlist';
 
 const item = { title: 'aa', duration: 120 } as PlaylistItem;
-const itemWithImage = { title: 'This is a movie', duration: 120, shelfImage: 'http://movie.jpg' } as PlaylistItem;
+const itemWithImage = { title: 'This is a movie', duration: 120, cardImage: 'http://movie.jpg' } as PlaylistItem;
 
 describe('<Card>', () => {
   it('renders card with video title', () => {

src/components/Card/Card.tsx

@@ -43,7 +43,7 @@ function Card({
   isLocked = true,
   currentLabel,
 }: CardProps): JSX.Element {
-  const { title, duration, episodeNumber, seasonNumber, shelfImage: image, mediaStatus, scheduledStart } = item;
+  const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart } = item;
   const {
     t,
     i18n: { language },

src/components/CardGrid/CardGrid.tsx

@@ -55,7 +55,7 @@ function CardGrid({
   onCardHover,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
-  const posterAspect = parseAspectRatio(playlist.shelfImageAspectRatio);
+  const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio);
   const visibleTiles = cols[breakpoint] + parseTilesDelta(posterAspect);
   const [rowCount, setRowCount] = useState(INITIAL_ROW_COUNT);
 

src/components/VideoListItem/VideoListItem.tsx

@@ -25,7 +25,7 @@ type VideoListItemProps = {
 };
 
 function VideoListItem({ onClick, onHover, progress, activeLabel, item, loading = false, isActive = false, isLocked = true }: VideoListItemProps): JSX.Element {
-  const { title, duration, seasonNumber, episodeNumber, shelfImage: image, mediaStatus, scheduledStart } = item;
+  const { title, duration, seasonNumber, episodeNumber, cardImage: image, mediaStatus, scheduledStart } = item;
 
   const {
     t,

src/containers/ShelfList/ShelfList.tsx

@@ -60,7 +60,7 @@ const ShelfList = ({ rows }: Props) => {
           <PlaylistContainer type={row.type} playlistId={row.contentId} key={`${row.contentId || row.type}_${index}`}>
             {({ playlist, error, isLoading, style }) => {
               const title = row?.title || playlist.title;
-              const posterAspect = parseAspectRatio(playlist.shelfImageAspectRatio);
+              const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio);
               const visibleTilesDelta = parseTilesDelta(posterAspect);
 
               return (

src/hooks/usePlanByEpg.ts

@@ -4,7 +4,6 @@ import { startOfDay, startOfToday, startOfTomorrow } from 'date-fns';
 
 import type { EpgChannel } from '#src/services/epg.service';
 import { is12HourClock } from '#src/utils/datetime';
-import { getImage } from '#src/utils/image';
 
 const isBaseTimeFormat = is12HourClock();
 
@@ -16,19 +15,19 @@ const usePlanByEpg = (channels: EpgChannel[], sidebarWidth: number, itemHeight:
     return [
       channels.map(({ id, channelLogoImage, backgroundImage }) => ({
         uuid: id,
-        logo: getImage(channelLogoImage),
-        channelLogoImage: getImage(channelLogoImage),
-        backgroundImage: getImage(backgroundImage),
+        logo: channelLogoImage,
+        channelLogoImage: channelLogoImage,
+        backgroundImage: backgroundImage,
       })),
       channels.flatMap((channel) =>
-        channel.programs.map(({ id, title, shelfImage, backgroundImage, description, endTime, startTime }) => ({
+        channel.programs.map(({ id, title, cardImage, backgroundImage, description, endTime, startTime }) => ({
           channelUuid: channel.id,
           id: id,
           title,
-          image: getImage(shelfImage),
-          // programs have the same shelfImage/backgroundImage (different API)
-          shelfImage: getImage(shelfImage),
-          backgroundImage: getImage(backgroundImage),
+          image: cardImage || '',
+          // programs have the same cardImage/backgroundImage (different API)
+          cardImage: cardImage || '',
+          backgroundImage: backgroundImage || '',
           description: description || '',
           till: endTime,
           since: startTime,

src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx

@@ -24,7 +24,6 @@ import { generateMovieJSONLD } from '#src/utils/structuredData';
 import type { ScreenComponent } from '#types/screens';
 import type { Playlist } from '#types/playlist';
 import Loading from '#src/pages/Loading/Loading';
-import { getImage } from '#src/utils/image';
 
 const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playlist } }) => {
   const { t } = useTranslation('epg');
@@ -58,7 +57,7 @@ const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playl
       return {
         title: program.title,
         description: program.description || '',
-        image: getImage(program.backgroundImage),
+        image: program.backgroundImage,
         canWatch: isLive || (isVod && isWatchableFromBeginning),
         canWatchFromBeginning: isEntitled && isLive && isWatchableFromBeginning,
       };
@@ -67,7 +66,7 @@ const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playl
     return {
       title: channel?.title || '',
       description: channel?.description || '',
-      image: getImage(channel?.backgroundImage),
+      image: channel?.backgroundImage,
       canWatch: true,
       canWatchFromBeginning: false,
     };

src/services/api.service.ts

@@ -33,7 +33,7 @@ export const transformMediaItem = (item: PlaylistItem) => {
 
   const transformedMediaItem = {
     ...item,
-    shelfImage: generateAlternateImageURL(item, ImageProperty.CARD),
+    cardImage: generateAlternateImageURL(item, ImageProperty.CARD),
     backgroundImage: generateAlternateImageURL(item, ImageProperty.BACKGROUND),
     channelLogoImage: generateAlternateImageURL(item, ImageProperty.CHANNEL_LOGO),
     mediaOffers: item.productIds ? filterMediaOffers(offerKeys, item.productIds) : undefined,

src/services/epg.service.test.ts

@@ -313,7 +313,7 @@ describe('epgService', () => {
       endTime: '2022-07-19T15:00:00Z',
       description: undefined,
       image: undefined,
-      shelfImage: undefined,
+      cardImage: undefined,
       backgroundImage: undefined,
     });
 
@@ -324,7 +324,7 @@ describe('epgService', () => {
       endTime: '2022-07-19T15:00:00Z',
       description: undefined,
       image: undefined,
-      shelfImage: undefined,
+      cardImage: undefined,
       backgroundImage: undefined,
     });
 
@@ -334,7 +334,7 @@ describe('epgService', () => {
       startTime: '2022-07-19T12:00:00Z',
       endTime: '2022-07-19T15:00:00Z',
       description: 'A description',
-      shelfImage: 'https://cdn.jwplayer/logo.jpg',
+      cardImage: 'https://cdn.jwplayer/logo.jpg',
       backgroundImage: 'https://cdn.jwplayer/logo.jpg',
     });
   });

src/services/epg.service.ts

@@ -1,7 +1,7 @@
 import { array, object, string } from 'yup';
 import { addDays, differenceInDays, endOfDay, isValid, startOfDay, subDays } from 'date-fns';
 
-import type { PlaylistItem, ImageData } from '#types/playlist';
+import type { PlaylistItem } from '#types/playlist';
 import { getDataOrThrow } from '#src/utils/api';
 import { logDev } from '#src/utils/common';
 
@@ -20,8 +20,8 @@ export type EpgChannel = {
   id: string;
   title: string;
   description: string;
-  channelLogoImage: string | ImageData;
-  backgroundImage: string | ImageData;
+  channelLogoImage: string;
+  backgroundImage: string;
   programs: EpgProgram[];
   catchupHours: number;
 };
@@ -32,8 +32,8 @@ export type EpgProgram = {
   startTime: string;
   endTime: string;
   description?: string;
-  shelfImage?: string | ImageData;
-  backgroundImage?: string | ImageData;
+  cardImage?: string;
+  backgroundImage?: string;
 };
 
 const epgProgramSchema = object().shape({
@@ -64,7 +64,7 @@ class EpgService {
       description,
       startTime: subDays(startOfDay(new Date()), 1).toJSON(),
       endTime: addDays(endOfDay(new Date()), 1).toJSON(),
-      shelfImage: undefined,
+      cardImage: undefined,
       backgroundImage: undefined,
     };
   }
@@ -103,7 +103,7 @@ class EpgService {
       title: program.title,
       startTime: program.startTime,
       endTime: program.endTime,
-      shelfImage: image,
+      cardImage: image,
       backgroundImage: image,
       description: program.chapterPointCustomProperties?.find((item) => item.key === 'description')?.value || undefined,
     };

src/utils/collection.ts

@@ -40,7 +40,7 @@ const generatePlaylistPlaceholder = (playlistLength: number = 15): Playlist => (
         feedid: '',
         image: '',
         images: [],
-        shelfImage: '',
+        cardImage: '',
         backgroundImage: '',
         channelLogoImage: '',
         link: '',

test/fixtures/epgChannels.json

@@ -12,15 +12,15 @@
         "title": "Program 1",
         "startTime": "2022-07-15T10:00:00Z",
         "endTime": "2022-07-15T10:30:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       },
       {
         "id": "program2",
         "title": "Program 2",
         "startTime": "2022-07-15T10:30:00Z",
         "endTime": "2022-07-15T11:00:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       }
     ],
@@ -39,15 +39,15 @@
         "title": "Program 3",
         "startTime": "2022-07-15T10:00:00Z",
         "endTime": "2022-07-15T10:30:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       },
       {
         "id": "program4",
         "title": "Program 4",
         "startTime": "2022-07-15T10:30:00Z",
         "endTime": "2022-07-15T11:00:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       }
     ],

test/fixtures/epgChannelsUpdate.json

@@ -12,23 +12,23 @@
         "title": "Program 1",
         "startTime": "2022-07-15T10:00:00Z",
         "endTime": "2022-07-15T10:45:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       },
       {
         "id": "program2",
         "title": "Program 2",
         "startTime": "2022-07-15T10:45:00Z",
         "endTime": "2022-07-15T11:00:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       },
       {
         "id": "program5",
         "title": "Program 5",
         "startTime": "2022-07-15T11:00:00Z",
         "endTime": "2022-07-15T11:30:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       }
     ],
@@ -47,23 +47,23 @@
         "title": "Program 3",
         "startTime": "2022-07-15T10:00:00Z",
         "endTime": "2022-07-15T10:45:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       },
       {
         "id": "program4",
         "title": "Program 4",
         "startTime": "2022-07-15T10:45:00Z",
         "endTime": "2022-07-15T11:00:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       },
       {
         "id": "program6",
         "title": "Program 6",
         "startTime": "2022-07-15T11:30:00Z",
         "endTime": "2022-07-15T12:00:00Z",
-        "shelfImage": "",
+        "cardImage": "",
         "backgroundImage": ""
       }
     ],

types/playlist.d.ts

@@ -8,11 +8,6 @@ export type Image = {
   width: number;
 };
 
-export type ImageData = {
-  image: string;
-  fallbackImage?: string;
-};
-
 export type Source = {
   file: string;
   type: string;
@@ -30,7 +25,7 @@ export type PlaylistItem = {
   feedid: string;
   image: string;
   images: Image[];
-  shelfImage?: string;
+  cardImage?: string;
   backgroundImage?: string;
   channelLogoImage?: string;
   link: string;