diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx new file mode 100644 index 00000000..dd6af067 --- /dev/null +++ b/src/components/CompanyCard/index.tsx @@ -0,0 +1,46 @@ +import Link from 'next/link'; +import React, { useState } from 'react'; + +interface CompanyCardProps { + name: string; + image: string; + url: string; +} + +const CompanyCard: React.FC = ({ image, url, name }) => { + const [isHovered, setHovered] = useState(false); + + return ( + + { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + setHovered(true); + } + }} + role="link" + tabIndex={0} + > + {name} +
+ + + ); +}; + +export default CompanyCard; diff --git a/src/components/Discover/DiscoverNetwork/index.tsx b/src/components/Discover/DiscoverNetwork/index.tsx index 66b8c1a6..c2e96421 100644 --- a/src/components/Discover/DiscoverNetwork/index.tsx +++ b/src/components/Discover/DiscoverNetwork/index.tsx @@ -49,7 +49,7 @@ const DiscoverTvNetwork: React.FC = () => { {firstResultData?.network.logoPath ? (
{firstResultData.network.name} diff --git a/src/components/Discover/DiscoverStudio/index.tsx b/src/components/Discover/DiscoverStudio/index.tsx index f7fd7f7a..bc7e270d 100644 --- a/src/components/Discover/DiscoverStudio/index.tsx +++ b/src/components/Discover/DiscoverStudio/index.tsx @@ -49,7 +49,7 @@ const DiscoverMovieStudio: React.FC = () => { {firstResultData?.studio.logoPath ? (
{firstResultData.studio.name} diff --git a/src/components/Discover/NetworkSlider/index.tsx b/src/components/Discover/NetworkSlider/index.tsx new file mode 100644 index 00000000..69b2b2bb --- /dev/null +++ b/src/components/Discover/NetworkSlider/index.tsx @@ -0,0 +1,151 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import CompanyCard from '../../CompanyCard'; +import Slider from '../../Slider'; + +const messages = defineMessages({ + networks: 'Networks', +}); + +interface Network { + name: string; + image: string; + url: string; +} + +const networks: Network[] = [ + { + name: 'Netflix', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/wwemzKWzjKYJFfCeiB57q3r4Bcm.png', + url: '/discover/tv/network/213', + }, + { + name: 'Disney+', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/gJ8VX6JSu3ciXHuC2dDGAo2lvwM.png', + url: '/discover/tv/network/2739', + }, + { + name: 'Prime Video', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ifhbNuuVnlwYy5oXA5VIb2YR8AZ.png', + url: '/discover/tv/network/1024', + }, + { + name: 'HBO', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/tuomPhY2UtuPTqqFnKMVHvSb724.png', + url: '/discover/tv/network/49', + }, + { + name: 'ABC', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ndAvF4JLsliGreX87jAc9GdjmJY.png', + url: '/discover/tv/network/2', + }, + { + name: 'FOX', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/1DSpHrWyOORkL9N2QHX7Adt31mQ.png', + url: '/discover/tv/network/19', + }, + { + name: 'Cinemax', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/6mSHSquNpfLgDdv6VnOOvC5Uz2h.png', + url: '/discover/tv/network/359', + }, + { + name: 'AMC', + image: + 'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/pmvRmATOCaDykE6JrVoeYxlFHw3.png', + url: '/discover/tv/network/174', + }, + { + name: 'Showtime', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/Allse9kbjiP6ExaQrnSpIhkurEi.png', + url: '/discover/tv/network/67', + }, + { + name: 'Starz', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/8GJjw3HHsAJYwIWKIPBPfqMxlEa.png', + url: '/discover/tv/network/318', + }, + { + name: 'The CW', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ge9hzeaU7nMtQ4PjkFlc68dGAJ9.png', + url: '/discover/tv/network/71', + }, + { + name: 'NBC', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/o3OedEP0f9mfZr33jz2BfXOUK5.png', + url: '/discover/tv/network/6', + }, + { + name: 'CBS', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/nm8d7P7MJNiBLdgIzUK0gkuEA4r.png', + url: '/discover/tv/network/16', + }, + { + name: 'BBC One', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/mVn7xESaTNmjBUyUtGNvDQd3CT1.png', + url: '/discover/tv/network/4', + }, + { + name: 'Cartoon Network', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/c5OC6oVCg6QP4eqzW6XIq17CQjI.png', + url: '/discover/tv/network/56', + }, + { + name: 'Adult Swim', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/9AKyspxVzywuaMuZ1Bvilu8sXly.png', + url: '/discover/tv/network/80', + }, + { + name: 'Nickelodeon', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ikZXxg6GnwpzqiZbRPhJGaZapqB.png', + url: '/discover/tv/network/13', + }, +]; + +const NetworkSlider: React.FC = () => { + const intl = useIntl(); + + return ( + <> +
+
+
+ {intl.formatMessage(messages.networks)} +
+
+
+ ( + + ))} + emptyMessage="" + /> + + ); +}; + +export default NetworkSlider; diff --git a/src/components/Discover/StudioSlider/index.tsx b/src/components/Discover/StudioSlider/index.tsx new file mode 100644 index 00000000..b3ec8fef --- /dev/null +++ b/src/components/Discover/StudioSlider/index.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import CompanyCard from '../../CompanyCard'; +import Slider from '../../Slider'; + +const messages = defineMessages({ + studios: 'Studios', +}); + +interface Studio { + name: string; + image: string; + url: string; +} + +const studios: Studio[] = [ + { + name: 'Disney', + image: + 'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/wdrCwmRnLFJhEoH8GSfymY85KHT.png', + url: '/discover/movies/studio/2', + }, + { + name: '20th Century Fox', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/qZCc1lty5FzX30aOCVRBLzaVmcp.png', + url: '/discover/movies/studio/25', + }, + { + name: 'Sony Pictures', + image: + 'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/GagSvqWlyPdkFHMfQ3pNq6ix9P.png', + url: '/discover/movies/studio/34', + }, + { + name: 'Warner Bros. Pictures', + image: + 'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ky0xOc5OrhzkZ1N6KyUxacfQsCk.png', + url: '/discover/movies/studio/174', + }, + { + name: 'Universal', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/8lvHyhjr8oUKOOy2dKXoALWKdp0.png', + url: '/discover/movies/studio/33', + }, + { + name: 'Paramount', + image: + 'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/fycMZt242LVjagMByZOLUGbCvv3.png', + url: '/discover/movies/studio/4', + }, + { + name: 'Pixar', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/1TjvGVDMYsj6JBxOAkUHpPEwLf7.png', + url: '/discover/movies/studio/3', + }, + { + name: 'Dreamworks', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/kP7t6RwGz2AvvTkvnI1uteEwHet.png', + url: '/discover/movies/studio/521', + }, + { + name: 'Marvel Studios', + image: + 'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/hUzeosd33nzE5MCNsZxCGEKTXaQ.png', + url: '/discover/movies/studio/420', + }, + { + name: 'DC', + image: + 'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/2Tc1P3Ac8M479naPp1kYT3izLS5.png', + url: '/discover/movies/studio/9993', + }, +]; + +const StudioSlider: React.FC = () => { + const intl = useIntl(); + + return ( + <> +
+
+
+ {intl.formatMessage(messages.studios)} +
+
+
+ ( + + ))} + emptyMessage="" + /> + + ); +}; + +export default StudioSlider; diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx index 1af3b58e..bea1b414 100644 --- a/src/components/Discover/index.tsx +++ b/src/components/Discover/index.tsx @@ -9,6 +9,8 @@ import type { RequestResultsResponse } from '../../../server/interfaces/api/requ import RequestCard from '../RequestCard'; import MediaSlider from '../MediaSlider'; import PageTitle from '../Common/PageTitle'; +import StudioSlider from './StudioSlider'; +import NetworkSlider from './NetworkSlider'; const messages = defineMessages({ discover: 'Discover', @@ -112,6 +114,7 @@ const Discover: React.FC = () => { linkUrl="/discover/movies/upcoming" url="/api/v1/discover/movies/upcoming" /> + { url="/api/v1/discover/tv/upcoming" linkUrl="/discover/tv/upcoming" /> + ); }; diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx index 169675c0..d61f262e 100644 --- a/src/components/MediaSlider/ShowMoreCard/index.tsx +++ b/src/components/MediaSlider/ShowMoreCard/index.tsx @@ -32,7 +32,7 @@ const ShowMoreCard: React.FC = ({ url, posters }) => { >
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx index f0175687..5e5416f4 100644 --- a/src/components/PersonCard/index.tsx +++ b/src/components/PersonCard/index.tsx @@ -37,8 +37,8 @@ const PersonCard: React.FC = ({
@@ -47,7 +47,7 @@ const PersonCard: React.FC = ({ {profilePath ? ( ) : ( @@ -79,7 +79,11 @@ const PersonCard: React.FC = ({ {subName}
)} -
+
diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx index 7edaa593..40c82605 100644 --- a/src/components/RequestCard/index.tsx +++ b/src/components/RequestCard/index.tsx @@ -31,7 +31,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { const RequestCardPlaceholder: React.FC = () => { return ( -
+
@@ -98,7 +98,7 @@ const RequestCard: React.FC = ({ request, onTitleData }) => { return (
= ({ if (!title && !error) { return (
); @@ -112,7 +112,7 @@ const RequestItem: React.FC = ({ if (!title || !requestData) { return (
); @@ -132,7 +132,7 @@ const RequestItem: React.FC = ({ setShowEditModal(false); }} /> -
+
= ({ canExpand = false }) => { return (
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx index edf13600..250debdf 100644 --- a/src/components/TitleCard/index.tsx +++ b/src/components/TitleCard/index.tsx @@ -81,8 +81,8 @@ const TitleCard: React.FC = ({ onCancel={closeModal} />
= ({ role="link" tabIndex={0} > -
+
= ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -194,10 +194,10 @@ const TitleCard: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -