diff --git a/src/App.css b/src/App.css index e682a3b..9b3045b 100644 --- a/src/App.css +++ b/src/App.css @@ -32,13 +32,17 @@ body { height: 100%; background-size: cover; display: flex; + justify-content: center; align-items: center; } main { + height: 100%; display: flex; + gap: 1em; background-size: cover; justify-content: center; + align-items: center; } @@ -49,34 +53,42 @@ main { flex-basis: 60%; align-items: center; gap: 1em; + height: fit-content; } img { aspect-ratio: 2/3; - - } #sidebar { flex-basis: calc(var(--poster-width)*2); font-size: 1.6rem; + background-color: rgba(0, 0, 0, 0.5); h1 { font-size: 2em; - margin-bottom: 0.2em; + margin: 0; /* line-height: 0.8em; */ font-family: RobotoBold; - padding: 0.1em 0.2em 0 0.2em; + padding: 0.1em 0.2em 0.1em 0.2em; } p { font-family: Jura; + padding: 0.2em; + overflow: scroll; + height: 10em; + margin: 0.1em 0.2em 0.1em 0.2em; } - img { - width: 90%; - aspect-ratio: 2/3; - box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5); + figure { + width: 100%; + float: left; + + img { + aspect-ratio: 2/3; + + } } } @@ -84,6 +96,9 @@ img { .poster { width: var(--poster-width); display: grid; + box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5); + border-radius: 1em; + overflow: hidden; img { height: 100%; @@ -109,3 +124,7 @@ img { .overlay:hover { opacity: 1; } + +.highlighted { + border: 0.1em solid gold; +} diff --git a/src/App.tsx b/src/App.tsx index 62e1762..de21ec7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,6 +17,7 @@ class MovieClass implements Movie { backdrop_path = null title = null overview = null + vote_average = 0 } function App() { @@ -29,20 +30,23 @@ function App() { const [backdrop, setBackdrop] = useState("") const [chosenMovie, setChosenMovie] = useState(new MovieClass()) const [loadedMovies, setLoadedMovies] = useState(0) + const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true) useEffect(() => { tmdb.getPopular(config, setMovies) }, []) useEffect(() => { setLoadedMovies(movies.length) if (movies[0].backdrop_path) { - const bgString = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), " + tmdb.makeBgImgUrl(movies[0].backdrop_path) + const bgString = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), " + tmdb.makeBgImgUrl(chosenMovie.backdrop_path ? chosenMovie.backdrop_path : movies[0].backdrop_path) setBackdrop(bgString) } }, [movies]) + useEffect(() => { console.log("SIMILAR AVAILABLE: " + similarMoviesAvailable) }, [similarMoviesAvailable]) return ( <> +
- +
{loadedMovies === movies.length ? : "LOADING " + loadedMovies}
diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx index 3542647..ed55050 100644 --- a/src/objects/movie-wall.tsx +++ b/src/objects/movie-wall.tsx @@ -8,6 +8,7 @@ export interface Movie { backdrop_path: string | null title: string | null overview: string | null + vote_average: number | null } @@ -33,15 +34,22 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> { setMovies: Function; setChosenMovie: Function; setLoadedMovies: Function; + setSimilarMoviesAvailable: Function; config: Config; } -export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies }: MovieWallProps) { +export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies, setSimilarMoviesAvailable }: MovieWallProps) { const posters: Array = [] for (let i = 0; i < movies.length; i++) { + const movie = movies[i] + console.log("VOTE AVG: " + movie.vote_average) + const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false + console.log("IS HIGHLIGHTED: " + isHighlighted) posters.push( - + ) } return <> @@ -57,18 +65,21 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> { setMovies: Function; setChosenMovie: Function; setLoadedMovies: Function; + setSimilarMoviesAvailable: Function; + isHighlighted: boolean; } -function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setLoadedMovies }: PosterProps) { +function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) { function clickHandler() { setChosenMovie(movie) - listSimilar(config, movie, setMovies) + listSimilar(config, movie, setMovies, setSimilarMoviesAvailable) } - const style = { - // backgroundImage: img.src - } - return
+ const classes = [ + "poster", + isHighlighted ? "highlighted" : "" + ].join(" ") + return
clickHandler()}>
{ movie: Movie; + similarMoviesAvailable: boolean; } -export function Sidebar({ movie }: SidebarProps) { +export function Sidebar({ movie, similarMoviesAvailable }: SidebarProps) { return diff --git a/src/objects/tmdb.tsx b/src/objects/tmdb.tsx index 483b558..7dc121a 100644 --- a/src/objects/tmdb.tsx +++ b/src/objects/tmdb.tsx @@ -37,7 +37,7 @@ export default { /** * Calls TMDB/similar, then fires the callback with res.data.results.unshift(movie) as argument */ - getSimilar: async function({ language, page }: Config, movie: Movie, callback: Function) { + getSimilar: async function({ language, page }: Config, movie: Movie, setMovies: Function, setSimilarMoviesAvailable: Function) { let res = await tmdb.get(movie.id + '/similar', { params: { language, @@ -50,9 +50,14 @@ export default { .filter((e: Movie) => { return e.poster_path }) - array.splice(19) - // array.unshift(movie) - callback(array) + // array.splice(19) + if (array.length > 0) { + setMovies(array) + setSimilarMoviesAvailable(true) + } else { + setSimilarMoviesAvailable(false) + console.log("SIMILAR NOT AVAILABLE") + } return true } else { throw Error("API call failed! Response: " + JSON.stringify(res)) @@ -91,5 +96,12 @@ export default { */ function(path: string) { return "https://image.tmdb.org/t/p/w500" + path + }, + makeMovieLink: + /** + * + */ + function(movie: Movie) { + return "https://www.themoviedb.org/movie/" + movie.id } }