diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx index bc14a64..585f470 100644 --- a/src/containers/EntityImage/index.tsx +++ b/src/containers/EntityImage/index.tsx @@ -32,6 +32,7 @@ const EntityImage: React.FC = ({ hideSubtitle, showEmpty, isLoading, + showModal, ...entity }) => { const history = useHistory(); @@ -62,6 +63,26 @@ const EntityImage: React.FC = ({ } }, [disabled, history, entity.id, entity.mediaType, successCloseModal]); + const handleShowModal = useCallback(() => { + setModalContent({ + value: ( + + + + ), + props: { hideCloseButton: true, center: true }, + }); + }, [entity.featuredImage, setModalContent]); + + const handleClick = useCallback(() => { + if (showModal) { + handleShowModal(); + return; + } + + handleRedirect(); + }, [showModal, handleShowModal, handleRedirect]); + // Check if entity is in favorite list and change status useEffect(() => { if (user) { @@ -101,7 +122,7 @@ const EntityImage: React.FC = ({ size={size} showInfo={showInfo} disabled={disabled} - onClick={handleRedirect} + onClick={handleClick} > = ({ disabled, showInfo, hideSubtitle, + showModal, }) => { const itemsContainer = createRef(); const [showPreviousButton, setShowPreviousButton] = useState(false); @@ -112,6 +113,7 @@ const EntityImageList: React.FC = ({ disabled={disabled} showInfo={showInfo} hideSubtitle={hideSubtitle} + showModal={showModal} {...entity} /> ))} diff --git a/src/domains/Person/api/Details/index.ts b/src/domains/Person/api/Details/index.ts index 3127c77..8b0c597 100644 --- a/src/domains/Person/api/Details/index.ts +++ b/src/domains/Person/api/Details/index.ts @@ -97,7 +97,16 @@ const parseResponse = (person: RawResponse): Response => { Date.parse(a.originalDate) < Date.parse(b.originalDate) ? 1 : -1, ); - parsedPerson = { ...parsedPerson, knownFor, filmography }; + const images = person.images?.profiles.map(image => ({ + aspectRatio: image.aspect_ratio, + featuredImage: getFeaturedImage(image) || undefined, + height: image.height, + voteAverage: image.vote_average, + voteCount: image.vote_count, + width: image.width, + })); + + parsedPerson = { ...parsedPerson, knownFor, filmography, images }; return parsedPerson; }; diff --git a/src/domains/Person/api/Details/types/RawResponse.ts b/src/domains/Person/api/Details/types/RawResponse.ts index 493a171..c9896cc 100644 --- a/src/domains/Person/api/Details/types/RawResponse.ts +++ b/src/domains/Person/api/Details/types/RawResponse.ts @@ -20,5 +20,16 @@ export default interface RawResponse { imdb_id: string; homepage?: string; + images?: { + profiles: Array<{ + aspect_ratio: number; + file_path: string; + height: number; + vote_average: number; + vote_count: number; + width: number; + }>; + }; + combined_credits?: { cast: RawMovie[] }; } diff --git a/src/domains/Person/api/Details/types/Response.ts b/src/domains/Person/api/Details/types/Response.ts index 03b48fa..591d3bc 100644 --- a/src/domains/Person/api/Details/types/Response.ts +++ b/src/domains/Person/api/Details/types/Response.ts @@ -21,6 +21,15 @@ export default interface Response { knownFor?: Movie[]; filmography?: Movie[]; + images?: Array<{ + aspectRatio: number; + featuredImage?: string; + height: number; + voteAverage: number; + voteCount: number; + width: number; + }>; + favorite: boolean; mediaType: number; featuredImage?: string; diff --git a/src/pages/Movie/styles.ts b/src/pages/Movie/styles.ts index f50a423..5feffad 100644 --- a/src/pages/Movie/styles.ts +++ b/src/pages/Movie/styles.ts @@ -52,6 +52,7 @@ export const MovieDetailsContainer = styled.div` color: ${Color.Text}; margin-top: ${Size.Large}; width: 100%; + justify-content: space-between; @media (min-width: 715px) { height: 50rem; diff --git a/src/pages/Person/index.tsx b/src/pages/Person/index.tsx index 6eb257c..3a980f7 100644 --- a/src/pages/Person/index.tsx +++ b/src/pages/Person/index.tsx @@ -119,6 +119,16 @@ const Person: React.FC = () => { message="Recomendações indisponíveis." /> + {person?.images && ( + + )} + { return formatTmdbImage({ - value: value.poster_path || value.profile_path, + value: value.poster_path || value.profile_path || value.file_path, }); };