From 44ebd6ef861d8d8555b2e3039e7c71098839775c Mon Sep 17 00:00:00 2001 From: Anton Lantukh Date: Tue, 11 Jul 2023 16:07:39 +0200 Subject: [PATCH] feat(project): remove ImageData type --- src/components/Card/Card.test.tsx | 2 +- src/components/Card/Card.tsx | 2 +- src/components/CardGrid/CardGrid.tsx | 2 +- src/components/VideoListItem/VideoListItem.tsx | 2 +- src/containers/ShelfList/ShelfList.tsx | 2 +- src/hooks/usePlanByEpg.ts | 17 ++++++++--------- .../PlaylistLiveChannels.tsx | 5 ++--- src/services/api.service.ts | 2 +- src/services/epg.service.test.ts | 6 +++--- src/services/epg.service.ts | 14 +++++++------- src/utils/collection.ts | 2 +- src/utils/image.ts | 10 ---------- test/fixtures/epgChannels.json | 8 ++++---- test/fixtures/epgChannelsUpdate.json | 12 ++++++------ types/playlist.d.ts | 7 +------ 15 files changed, 38 insertions(+), 55 deletions(-) delete mode 100644 src/utils/image.ts diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx index c1a16252a..5c948ea3d 100644 --- a/src/components/Card/Card.test.tsx +++ b/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('', () => { it('renders card with video title', () => { diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 5a92080ac..43592d783 100644 --- a/src/components/Card/Card.tsx +++ b/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 }, diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx index b028d4a39..7834142dc 100644 --- a/src/components/CardGrid/CardGrid.tsx +++ b/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); diff --git a/src/components/VideoListItem/VideoListItem.tsx b/src/components/VideoListItem/VideoListItem.tsx index de37da5b5..016130eb1 100644 --- a/src/components/VideoListItem/VideoListItem.tsx +++ b/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, diff --git a/src/containers/ShelfList/ShelfList.tsx b/src/containers/ShelfList/ShelfList.tsx index eddb5213b..2fd407880 100644 --- a/src/containers/ShelfList/ShelfList.tsx +++ b/src/containers/ShelfList/ShelfList.tsx @@ -60,7 +60,7 @@ const ShelfList = ({ rows }: Props) => { {({ 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 ( diff --git a/src/hooks/usePlanByEpg.ts b/src/hooks/usePlanByEpg.ts index 6e6c339e6..d132da02c 100644 --- a/src/hooks/usePlanByEpg.ts +++ b/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, diff --git a/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx b/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx index e915c4a01..17d4d023e 100644 --- a/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx +++ b/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 = ({ data: { feedid, playlist } }) => { const { t } = useTranslation('epg'); @@ -58,7 +57,7 @@ const PlaylistLiveChannels: ScreenComponent = ({ 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 = ({ data: { feedid, playl return { title: channel?.title || '', description: channel?.description || '', - image: getImage(channel?.backgroundImage), + image: channel?.backgroundImage, canWatch: true, canWatchFromBeginning: false, }; diff --git a/src/services/api.service.ts b/src/services/api.service.ts index c99b50b59..b5626dcc0 100644 --- a/src/services/api.service.ts +++ b/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, diff --git a/src/services/epg.service.test.ts b/src/services/epg.service.test.ts index 5a80809c8..04cae444d 100644 --- a/src/services/epg.service.test.ts +++ b/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', }); }); diff --git a/src/services/epg.service.ts b/src/services/epg.service.ts index 62d2abefc..fea96f910 100644 --- a/src/services/epg.service.ts +++ b/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, }; diff --git a/src/utils/collection.ts b/src/utils/collection.ts index 01fbc05bb..cdd02e44c 100644 --- a/src/utils/collection.ts +++ b/src/utils/collection.ts @@ -40,7 +40,7 @@ const generatePlaylistPlaceholder = (playlistLength: number = 15): Playlist => ( feedid: '', image: '', images: [], - shelfImage: '', + cardImage: '', backgroundImage: '', channelLogoImage: '', link: '', diff --git a/src/utils/image.ts b/src/utils/image.ts deleted file mode 100644 index dc60f9d7a..000000000 --- a/src/utils/image.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { ImageData } from '#types/playlist'; - -/** For backward compatibility (ImageData type support) */ -export const getImage = (item: ImageData | string | undefined): string => { - if (typeof item === 'object') { - return item?.image || ''; - } - - return item || ''; -}; diff --git a/test/fixtures/epgChannels.json b/test/fixtures/epgChannels.json index ba221ed0a..d02fc539f 100644 --- a/test/fixtures/epgChannels.json +++ b/test/fixtures/epgChannels.json @@ -12,7 +12,7 @@ "title": "Program 1", "startTime": "2022-07-15T10:00:00Z", "endTime": "2022-07-15T10:30:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" }, { @@ -20,7 +20,7 @@ "title": "Program 2", "startTime": "2022-07-15T10:30:00Z", "endTime": "2022-07-15T11:00:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" } ], @@ -39,7 +39,7 @@ "title": "Program 3", "startTime": "2022-07-15T10:00:00Z", "endTime": "2022-07-15T10:30:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" }, { @@ -47,7 +47,7 @@ "title": "Program 4", "startTime": "2022-07-15T10:30:00Z", "endTime": "2022-07-15T11:00:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" } ], diff --git a/test/fixtures/epgChannelsUpdate.json b/test/fixtures/epgChannelsUpdate.json index 3b0bdd803..4c51cb601 100644 --- a/test/fixtures/epgChannelsUpdate.json +++ b/test/fixtures/epgChannelsUpdate.json @@ -12,7 +12,7 @@ "title": "Program 1", "startTime": "2022-07-15T10:00:00Z", "endTime": "2022-07-15T10:45:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" }, { @@ -20,7 +20,7 @@ "title": "Program 2", "startTime": "2022-07-15T10:45:00Z", "endTime": "2022-07-15T11:00:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" }, { @@ -28,7 +28,7 @@ "title": "Program 5", "startTime": "2022-07-15T11:00:00Z", "endTime": "2022-07-15T11:30:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" } ], @@ -47,7 +47,7 @@ "title": "Program 3", "startTime": "2022-07-15T10:00:00Z", "endTime": "2022-07-15T10:45:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" }, { @@ -55,7 +55,7 @@ "title": "Program 4", "startTime": "2022-07-15T10:45:00Z", "endTime": "2022-07-15T11:00:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" }, { @@ -63,7 +63,7 @@ "title": "Program 6", "startTime": "2022-07-15T11:30:00Z", "endTime": "2022-07-15T12:00:00Z", - "shelfImage": "", + "cardImage": "", "backgroundImage": "" } ], diff --git a/types/playlist.d.ts b/types/playlist.d.ts index 74c8eea07..9bd64c21b 100644 --- a/types/playlist.d.ts +++ b/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;