File size: 5,210 Bytes
0879a03 f672bdc 0879a03 a67c433 418a632 0879a03 a67c433 0879a03 418a632 0879a03 f672bdc 0879a03 f672bdc 0879a03 e787e40 0879a03 0504ed2 0879a03 0504ed2 0879a03 0504ed2 0879a03 0504ed2 0879a03 f672bdc 0879a03 418a632 0879a03 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import "./movie.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faPlay,
faBookmark as faBookmarkSolid,
} from "@fortawesome/free-solid-svg-icons";
import { faBookmark as faBookmarkRegular } from "@fortawesome/free-regular-svg-icons";
import apiClient from "@/api/apiClient";
import { Spinner } from "@/components/Spinner";
import CastSection from "@/components/CastSection";
export default function MovieDetailsPage({ params }) {
const [metadata, setMetadata] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const decodedTitle = decodeURIComponent(params.title);
const data = await apiClient.getMovieMetadataByTitle(decodedTitle);
if (data) {
setMetadata(data);
} else {
setError("Movie metadata not found.");
}
} catch (err) {
setError("An error occurred while fetching movie metadata.");
} finally {
setLoading(false);
}
}
fetchData();
}, [params.title]);
if (loading) {
return (
<div className="loading">
<Spinner />
</div>
);
}
if (error) {
return <div className="movie-details-page-container">Error: {error}</div>;
}
const englishTitle =
metadata?.data?.translations?.nameTranslations?.find(
(translation) => translation.language === "eng"
)?.name ||
metadata?.data?.name ||
"Title not available";
const englishOverview =
metadata?.data?.translations?.overviewTranslations?.find(
(translation) => translation.language === "eng"
)?.overview || "Overview not available";
const backdropImage = metadata?.data?.artworks?.find(
(artwork) => artwork.type === 15
)?.image;
const genres = metadata?.data?.genres || [];
const cast = metadata?.data?.characters || [];
return (
<div className="movie-details-page">
<div
className="movie-details-backdrop"
style={{
backgroundImage: `
linear-gradient(to right, rgb(17 18 31 / 80%) 50%, transparent 50%),
linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 70%),
url("${backdropImage}")
`,
}}
></div>
<div className="movie-details-page-container">
<div className="movie-details-header">
<h1>
{englishTitle} {"(" + metadata?.data?.year + ")" || ""}
</h1>
</div>
<div className="movie-details-poster">
<Image
src={
metadata?.data?.image ||
"https://via.placeholder.com/800x450?text=No+Image+Available"
}
alt={`${englishTitle} Poster`}
height={300}
width={250}
/>
</div>
<div className="movie-details-actions">
<Link href={`/player/movie/${params.title}`}>
<button className="play-button">
<FontAwesomeIcon icon={faPlay} size="lg" /> Play
</button>
</Link>
<button className="add-list-button">
<FontAwesomeIcon icon={faBookmarkRegular} size="lg" /> MyList
</button>
</div>
<div className="movie-details-info">
<div className="movie-details-metadata">
<label className="movie-geners-section">
<strong>Genre:</strong>{" "}
{genres.length > 0 ? (
<ul className="movie-genre-list">
{genres.map((genre) => (
<li key={genre.id} className="movie-genre-item">
<Link href={`/genres/${genre.name}`} passHref>
<label className="movie-genre-link">{genre.name}</label>
</Link>
</li>
))}
</ul>
) : (
"Genres not available"
)}
</label>
<p>
<strong>Director / Writer:</strong> Jon Watts, Steve Ditko, Stan
Lee, Chris McKenna, Erik Sommers
</p>
<p>
<strong>Stars:</strong> Tom Holland, Angourie Rice, Samuel L.
Jackson, Zendaya, Jon Favreau, Jake Gyllenhaal, Marisa Tomei
</p>
<p>
<strong>Release Year:</strong> {metadata?.data?.year || "N/A"}
</p>
<p>
<strong>Runtime:</strong>{" "}
{metadata?.data?.runtime
? `${metadata.data.runtime} minutes`
: "N/A"}
</p>
</div>
<div className="movie-details-overview">
<h2>Storyline</h2>
<p>{englishOverview}</p>
<p>
<strong>Content Rating:</strong>{" "}
{metadata?.data?.contentRatings?.[0]?.fullname || "Not Rated"}
</p>
</div>
<div className="movie-details-metadata"><CastSection cast={cast} /></div>
</div>
</div>
</div>
);
}
|