|
|
|
@ -70,6 +70,7 @@ const messages = defineMessages({
|
|
|
|
|
decline: 'Decline',
|
|
|
|
|
studio: 'Studio',
|
|
|
|
|
viewfullcrew: 'View Full Crew',
|
|
|
|
|
view: 'View',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
interface MovieDetailsProps {
|
|
|
|
@ -206,15 +207,15 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</SlideOver>
|
|
|
|
|
<div className="flex flex-col items-center pt-4 md:flex-row md:items-end">
|
|
|
|
|
<div className="flex-shrink-0 md:mr-4">
|
|
|
|
|
<div className="flex flex-col items-center pt-4 lg:flex-row lg:items-end">
|
|
|
|
|
<div className="lg:mr-4">
|
|
|
|
|
<img
|
|
|
|
|
src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
|
|
|
|
|
alt=""
|
|
|
|
|
className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-52"
|
|
|
|
|
className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-44 lg:w-52"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-col mt-4 text-center text-white md:mr-4 md:mt-0 md:text-left">
|
|
|
|
|
<div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
|
|
|
|
|
<div className="mb-2">
|
|
|
|
|
{data.mediaInfo?.status === MediaStatus.AVAILABLE && (
|
|
|
|
|
<Badge badgeType="success">
|
|
|
|
@ -232,11 +233,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|
|
|
|
</Badge>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<h1 className="text-2xl md:text-4xl">
|
|
|
|
|
<h1 className="text-2xl lg:text-4xl">
|
|
|
|
|
{data.title}{' '}
|
|
|
|
|
<span className="text-2xl">({data.releaseDate.slice(0, 4)})</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<span className="mt-1 text-xs md:text-base md:mt-0">
|
|
|
|
|
<span className="mt-1 text-xs lg:text-base lg:mt-0">
|
|
|
|
|
{(data.runtime ?? 0) > 0 && (
|
|
|
|
|
<>
|
|
|
|
|
<FormattedMessage
|
|
|
|
@ -249,10 +250,30 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|
|
|
|
{data.genres.map((g) => g.name).join(', ')}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex justify-end flex-1 mt-4 md:mt-0">
|
|
|
|
|
<div className="flex justify-end flex-shrink-0 mt-4 lg:mt-0">
|
|
|
|
|
{trailerUrl && (
|
|
|
|
|
<a href={trailerUrl} target={'_blank'} rel="noreferrer">
|
|
|
|
|
<Button buttonType="ghost">
|
|
|
|
|
<svg
|
|
|
|
|
className="w-5 h-5 mr-1"
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
strokeLinecap="round"
|
|
|
|
|
strokeLinejoin="round"
|
|
|
|
|
strokeWidth={2}
|
|
|
|
|
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
strokeLinecap="round"
|
|
|
|
|
strokeLinejoin="round"
|
|
|
|
|
strokeWidth={2}
|
|
|
|
|
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
<FormattedMessage {...messages.watchtrailer} />
|
|
|
|
|
</Button>
|
|
|
|
|
</a>
|
|
|
|
@ -266,7 +287,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|
|
|
|
>
|
|
|
|
|
{activeRequest ? (
|
|
|
|
|
<svg
|
|
|
|
|
className="w-4 mr-1"
|
|
|
|
|
className="w-5 mr-1"
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
viewBox="0 0 20 20"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
@ -279,7 +300,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|
|
|
|
</svg>
|
|
|
|
|
) : (
|
|
|
|
|
<svg
|
|
|
|
|
className="w-4 mr-1"
|
|
|
|
|
className="w-5 mr-1"
|
|
|
|
|
fill="none"
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
@ -464,7 +485,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|
|
|
|
>
|
|
|
|
|
<div className="flex items-center justify-between p-4 text-gray-200 transition duration-300 h-14 group-hover:text-white">
|
|
|
|
|
<div>{data.collection.name}</div>
|
|
|
|
|
<Button buttonSize="sm">View</Button>
|
|
|
|
|
<Button buttonSize="sm">
|
|
|
|
|
{intl.formatMessage(messages.view)}
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|