139 lines
4.3 KiB
JavaScript
139 lines
4.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import "./SearchPage.css";
|
|
|
|
const SearchPage = () => {
|
|
const [movieDetails, setMovieDetails] = useState(null);
|
|
const [searchResults, setSearchResults] = useState([]);
|
|
const [trailerKey, setTrailerKey] = useState(null); // Store trailer key for embedding
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const queryParams = new URLSearchParams(location.search);
|
|
const query = queryParams.get("q");
|
|
const movieId = queryParams.get("id");
|
|
|
|
// Fetch movie details including trailer video
|
|
useEffect(() => {
|
|
if (movieId) {
|
|
const fetchMovieDetails = async () => {
|
|
const movieResponse = await fetch(
|
|
`https://api.themoviedb.org/3/movie/${movieId}?api_key=59690efd14e375225c4531fcdced2901`
|
|
);
|
|
const movieData = await movieResponse.json();
|
|
setMovieDetails(movieData);
|
|
|
|
// Fetch video details (trailer)
|
|
const videoResponse = await fetch(
|
|
`https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=59690efd14e375225c4531fcdced2901`
|
|
);
|
|
const videoData = await videoResponse.json();
|
|
const trailer = videoData.results.find(
|
|
(video) => video.type === "Trailer"
|
|
);
|
|
if (trailer) {
|
|
setTrailerKey(trailer.key);
|
|
}
|
|
};
|
|
fetchMovieDetails();
|
|
}
|
|
}, [movieId]);
|
|
|
|
// Fetch search results based on query
|
|
useEffect(() => {
|
|
if (query) {
|
|
const fetchSearchResults = async () => {
|
|
const response = await fetch(
|
|
`https://api.themoviedb.org/3/search/movie?api_key=59690efd14e375225c4531fcdced2901&query=${query}`
|
|
);
|
|
const data = await response.json();
|
|
setSearchResults(data.results);
|
|
};
|
|
fetchSearchResults();
|
|
}
|
|
}, [query]);
|
|
|
|
|
|
if (movieDetails) {
|
|
return (
|
|
<div className="movie-detail-container">
|
|
<div className="movie-detail-card">
|
|
<img
|
|
src={`https://image.tmdb.org/t/p/w500/${movieDetails.poster_path}`}
|
|
alt={movieDetails.title}
|
|
className="movie-detail-poster"
|
|
/>
|
|
<div className="movie-detail-info">
|
|
<h2>{movieDetails.title}</h2>
|
|
<p className="movie-detail-release-date">
|
|
<strong>Release Date:</strong> {movieDetails.release_date}
|
|
</p>
|
|
<p className="movie-detail-tagline">
|
|
<em>{movieDetails.tagline}</em>
|
|
</p>
|
|
<p className="movie-detail-overview">{movieDetails.overview}</p>
|
|
<p className="movie-detail-genres">
|
|
<strong>Genres:</strong>{" "}
|
|
{movieDetails.genres.map((genre) => genre.name).join(", ")}
|
|
</p>
|
|
<p className="movie-detail-runtime">
|
|
<strong>Runtime:</strong> {movieDetails.runtime} minutes
|
|
</p>
|
|
<a
|
|
href={movieDetails.homepage}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="movie-detail-link"
|
|
>
|
|
Official Website
|
|
</a>
|
|
|
|
|
|
{trailerKey && (
|
|
<div className="movie-trailer">
|
|
<h3>Watch Trailer:</h3>
|
|
<iframe
|
|
title="movie-trailer"
|
|
width="100%"
|
|
height="400"
|
|
src={`https://www.youtube.com/embed/${trailerKey}`}
|
|
frameBorder="0"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
if (searchResults.length > 0) {
|
|
return (
|
|
<div>
|
|
<h1>Search Results for "{query}"</h1>
|
|
<div className="search-results">
|
|
{searchResults.map((movie) => (
|
|
<div
|
|
key={movie.id}
|
|
className="search-item"
|
|
onClick={() => navigate(`/search?id=${movie.id}`)}
|
|
>
|
|
<img
|
|
src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
|
|
alt={movie.title}
|
|
className="search-item-poster"
|
|
/>
|
|
<h3>{movie.title}</h3>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <p>No results found.</p>;
|
|
};
|
|
|
|
export default SearchPage;
|