diff --git a/index.html b/index.html index e4b78ea..1a51ca1 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - - - - - Vite + React + TS - - -
- - + + + + + + Vite + React + TS + + + +
+ + + diff --git a/src/App.css b/src/App.css index 5e4ac4c..5422ae4 100644 --- a/src/App.css +++ b/src/App.css @@ -40,7 +40,6 @@ main { height: 100%; display: flex; gap: 1em; - background-size: cover; justify-content: center; align-items: center; } @@ -102,6 +101,8 @@ img { img { height: 100%; + animation: fadeImage 0.5s; + animation-fill-mode: forwards; } } @@ -131,3 +132,49 @@ img { .overlay:hover { opacity: 1; } + +@keyframes fadeImage { + from { + filter: blur(5rem); + } + + to { + filter: blur(0); + } +} + +@keyframes fadeBg { + from { + opacity: 0; + filter: blur(5rem); + } + + to { + opacity: 1; + filter: blur(0); + } +} + +#background { + background-color: black; + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + + img { + width: 100%; + aspect-ratio: 16/9; + position: absolute; + } +} + +#current-bg { + z-index: -1; + animation: fadeBg 1s; + animation-fill-mode: forwards; +} + +#previous-bg { + z-index: -2; +} diff --git a/src/App.tsx b/src/App.tsx index 8c35890..8ef3d0f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,11 +2,12 @@ import './defaults.css' import './App.css' import './spinner.css' import { MovieWall } from './objects/movie-wall' -import { useState, useEffect } from 'react' +import React, { useState, useEffect } from 'react' import tmdb from './objects/tmdb' import { Sidebar } from './objects/sidebar' import { Movie } from './objects/movie-wall' + export type Config = { language: string, region: string, @@ -28,36 +29,52 @@ function App() { page: 1 }) const [movies, setMovies] = useState([new MovieClass()]) - const [backdrop, setBackdrop] = useState("") + const [backdrop, setBackdrop] = useState({ currImg: "", prevImg: "" }) 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(chosenMovie.backdrop_path ? chosenMovie.backdrop_path : movies[0].backdrop_path) - setBackdrop(bgString) - } + const bgString = chosenMovie.backdrop_path ? + tmdb.makeBgImgUrl(chosenMovie.backdrop_path) + : tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "") + setBackdrop(prev => { + console.log("NEW PREVIMG: " + prev.currImg) + console.log("NE CURRIMG: " + bgString) + return { + prevImg: prev.currImg, + currImg: bgString + } + }) }, [movies]) - useEffect(() => { console.log("SIMILAR AVAILABLE: " + similarMoviesAvailable) }, [similarMoviesAvailable]) + + interface BackgroundProps extends React.ComponentPropsWithRef<"div"> { + backDrop: { + currImg: string; + prevImg: string; + } + } + const Background = (props: BackgroundProps) => { + return
+ + +
+ } return ( <> +
-
+
- {loadedMovies === movies.length ? - - : "LOADING " + loadedMovies}
+ +
diff --git a/src/main.tsx b/src/main.tsx index e63eef4..3d7150d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' +import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/objects/movie-wall.tsx b/src/objects/movie-wall.tsx index 3da4581..1630667 100644 --- a/src/objects/movie-wall.tsx +++ b/src/objects/movie-wall.tsx @@ -33,22 +33,18 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> { movies: Array; setMovies: Function; setChosenMovie: Function; - setLoadedMovies: Function; setSimilarMoviesAvailable: Function; config: Config; } -export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies, setSimilarMoviesAvailable }: MovieWallProps) { +export function MovieWall({ movies, setMovies, config, setChosenMovie, 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( - ) } @@ -64,7 +60,6 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> { config: Config; setMovies: Function; setChosenMovie: Function; - setLoadedMovies: Function; setSimilarMoviesAvailable: Function; isHighlighted: boolean; } diff --git a/src/objects/tmdb.tsx b/src/objects/tmdb.tsx index 7dc121a..241d724 100644 --- a/src/objects/tmdb.tsx +++ b/src/objects/tmdb.tsx @@ -85,15 +85,15 @@ export default { }, makeBgImgUrl: /** - * Returns a complete tmdb image url formatted for css + * Returns a complete tmdb image url in large format */ function(path: string) { - return "url(https://image.tmdb.org/t/p/w1280" + path + ")" + return "https://image.tmdb.org/t/p/w1280" + path }, makeImgUrl: /** * Returns a complete tmdb img url - */ +# */ function(path: string) { return "https://image.tmdb.org/t/p/w500" + path },