diff --git a/src/App.tsx b/src/App.tsx index 105384b..12c68ee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import './spinner.css' import { MovieWall } from './objects/movie-wall' import { HamburgerMenu } from './objects/HamburgerMenu' -import { useState, useEffect } from 'react' +import { useState, useEffect, useRef, useLayoutEffect } from 'react' import tmdb from './objects/tmdb' import { Sidebar } from './objects/sidebar' import { Movie } from './objects/movie-wall' @@ -44,7 +44,7 @@ function App() { const [chosenMovie, setChosenMovie] = useState(new MovieClass()) const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true) const [watchProviders, setWatchProviders] = useState(new WatchProvidersClass()) - useEffect(() => { tmdb.getPopular(config, setMoviesHandler) }, []) + useEffect(() => { tmdb.getPopular(config, setMovies) }, []) useEffect(() => { const bgString = chosenMovie.backdrop_path ? tmdb.makeBgImgUrl(chosenMovie.backdrop_path) @@ -58,26 +58,26 @@ function App() { useEffect(() => { console.log("CONFIG CHANGED!!") tmdb.getMovie(config, chosenMovie.id, setChosenMovie) - tmdb.getSimilar(config, chosenMovie, setMoviesHandler, setSimilarMoviesAvailable) + tmdb.getSimilar(config, chosenMovie, setMovies, setSimilarMoviesAvailable) }, [config]) const crossfadeImageStyles = { width: "100vw", height: "100vh", aspectRatio: "16/9", - objectFit: "clip" + objectFit: "clip", + opacity: "40%" } const { width } = useWindowDimensions() - function setMoviesHandler(movies: Movie[]) { - setMovies(trimMoviesForScreen(movies)) - } function trimMoviesForScreen(movies: Movie[]) { let desiredLength = 0 - if (width > 640) { + if (width > 1280) { desiredLength = 18 - } else { desiredLength = 12 } + } else if (width > 640) { + desiredLength = 16 + } else { desiredLength = 15 } //ensure movies.length is a multiple of 6 (so it makes an orphanless grid) while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 } return movies.slice(0, desiredLength) @@ -87,24 +87,23 @@ function App() { <>
-
+
-
- +
+
-
) diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts index dae3790..77ad568 100644 --- a/src/hooks/useWindowDimensions.ts +++ b/src/hooks/useWindowDimensions.ts @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; function getWindowDimensions() { const { innerWidth: width, innerHeight: height } = window; @@ -22,3 +22,4 @@ export default function useWindowDimensions() { return windowDimensions; } + diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx index dfe4539..c0d6cbc 100644 --- a/src/objects/movie-wall.tsx +++ b/src/objects/movie-wall.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react" +import React, { useEffect, useLayoutEffect, useRef, useState } from "react" import { Config } from "../App" import tmdb from "./tmdb" @@ -35,17 +35,20 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> { setChosenMovie: React.Dispatch>; setSimilarMoviesAvailable: React.Dispatch>; config: Config; - className: string + className: string; } export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable, className }: MovieWallProps) { + const posters: React.ReactElement[] = [] for (let i = 0; i < movies.length; i++) { const movie = movies[i] const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false + + const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300" posters.push( -
{isLoading ? -
-
- :
clickHandler()}>
+
+
+ :
clickHandler()}>
} {hasError ??
⚠️
} setIsLoading(false)} onError={() => setHasError(true)} diff --git a/src/objects/sidebar.tsx b/src/objects/sidebar.tsx index efc2bb5..05df2b4 100644 --- a/src/objects/sidebar.tsx +++ b/src/objects/sidebar.tsx @@ -19,19 +19,24 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, "Summary unavailable." : "" return diff --git a/src/objects/tmdb.tsx b/src/objects/tmdb.tsx index c2137e8..f1d87f4 100644 --- a/src/objects/tmdb.tsx +++ b/src/objects/tmdb.tsx @@ -53,6 +53,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, setMovies: Function, setSimilarMoviesAvailable: Function) { + let res = await tmdb.get(movie.id + '/similar', { params: { language, diff --git a/src/objects/whereToWatch.tsx b/src/objects/whereToWatch.tsx index a438eae..86647eb 100644 --- a/src/objects/whereToWatch.tsx +++ b/src/objects/whereToWatch.tsx @@ -77,7 +77,7 @@ function watchProvidersExist(watchProviders: any) { } export function WhereToWatch({ watchProviders, config, className }: WhereToWatchProps) { - return <>