Resume
/
movie-explorer
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve transitions

This commit is contained in:
andrzej 2024-05-17 13:54:28 +02:00
parent 6d645c3dc0
commit 3da67eafb5
6 changed files with 103 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -1,13 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
<body>
<body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

49
src/App.css
View File

@ -40,7 +40,6 @@ main {
height: 100%; height: 100%;
display: flex; display: flex;
gap: 1em; gap: 1em;
background-size: cover;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -102,6 +101,8 @@ img {
img { img {
height: 100%; height: 100%;
animation: fadeImage 0.5s;
animation-fill-mode: forwards;
} }
} }
@ -131,3 +132,49 @@ img {
.overlay:hover { .overlay:hover {
opacity: 1; 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;
}

41
src/App.tsx
View File

@ -2,11 +2,12 @@ import './defaults.css'
import './App.css' import './App.css'
import './spinner.css' import './spinner.css'
import { MovieWall } from './objects/movie-wall' import { MovieWall } from './objects/movie-wall'
import { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import tmdb from './objects/tmdb' import tmdb from './objects/tmdb'
import { Sidebar } from './objects/sidebar' import { Sidebar } from './objects/sidebar'
import { Movie } from './objects/movie-wall' import { Movie } from './objects/movie-wall'
export type Config = { export type Config = {
language: string, language: string,
region: string, region: string,
@ -28,36 +29,52 @@ function App() {
page: 1 page: 1
}) })
const [movies, setMovies] = useState([new MovieClass()]) const [movies, setMovies] = useState([new MovieClass()])
const [backdrop, setBackdrop] = useState("") const [backdrop, setBackdrop] = useState({ currImg: "", prevImg: "" })
const [chosenMovie, setChosenMovie] = useState(new MovieClass()) const [chosenMovie, setChosenMovie] = useState(new MovieClass())
const [loadedMovies, setLoadedMovies] = useState(0)
const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true) const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
useEffect(() => { tmdb.getPopular(config, setMovies) }, []) useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
useEffect(() => { useEffect(() => {
setLoadedMovies(movies.length) const bgString = chosenMovie.backdrop_path ?
if (movies[0].backdrop_path) { tmdb.makeBgImgUrl(chosenMovie.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) : tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
setBackdrop(bgString) setBackdrop(prev => {
console.log("NEW PREVIMG: " + prev.currImg)
console.log("NE CURRIMG: " + bgString)
return {
prevImg: prev.currImg,
currImg: bgString
} }
})
}, [movies]) }, [movies])
useEffect(() => { console.log("SIMILAR AVAILABLE: " + similarMoviesAvailable) }, [similarMoviesAvailable])
interface BackgroundProps extends React.ComponentPropsWithRef<"div"> {
backDrop: {
currImg: string;
prevImg: string;
}
}
const Background = (props: BackgroundProps) => {
return <div id="background">
<img id="current-bg" src={props.backDrop.currImg} />
<img id="previous-bg" src={props.backDrop.prevImg} />
</div>
}
return ( return (
<> <>
<Background backDrop={backdrop} />
<div id="loader"></div> <div id="loader"></div>
<div className='main-container' style={{ backgroundImage: backdrop }}> <div className='main-container'>
<main > <main >
<Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} /> <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
<div id="movie-wall-container"> <div id="movie-wall-container">
{loadedMovies === movies.length ?
<MovieWall movies={movies} <MovieWall movies={movies}
setMovies={setMovies} setMovies={setMovies}
config={config} config={config}
setChosenMovie={setChosenMovie} setChosenMovie={setChosenMovie}
setLoadedMovies={setLoadedMovies}
setSimilarMoviesAvailable={setSimilarMoviesAvailable} setSimilarMoviesAvailable={setSimilarMoviesAvailable}
/> />
: "LOADING " + loadedMovies} </div> </div>
</main> </main>
</div> </div>
</> </>

1
src/main.tsx
View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import App from './App.tsx' import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>

9
src/objects/movie-wall.tsx
View File

@ -33,22 +33,18 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
movies: Array<Movie>; movies: Array<Movie>;
setMovies: Function; setMovies: Function;
setChosenMovie: Function; setChosenMovie: Function;
setLoadedMovies: Function;
setSimilarMoviesAvailable: Function; setSimilarMoviesAvailable: Function;
config: Config; config: Config;
} }
export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies, setSimilarMoviesAvailable }: MovieWallProps) { export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable }: MovieWallProps) {
const posters: Array<React.Component> = [] const posters: Array<React.Component> = []
for (let i = 0; i < movies.length; i++) { for (let i = 0; i < movies.length; i++) {
const movie = movies[i] const movie = movies[i]
console.log("VOTE AVG: " + movie.vote_average)
const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
console.log("IS HIGHLIGHTED: " + isHighlighted)
posters.push( posters.push(
<Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setLoadedMovies={setLoadedMovies} <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setSimilarMoviesAvailable={setSimilarMoviesAvailable}
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
/> />
) )
} }
@ -64,7 +60,6 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
config: Config; config: Config;
setMovies: Function; setMovies: Function;
setChosenMovie: Function; setChosenMovie: Function;
setLoadedMovies: Function;
setSimilarMoviesAvailable: Function; setSimilarMoviesAvailable: Function;
isHighlighted: boolean; isHighlighted: boolean;
} }

6
src/objects/tmdb.tsx
View File

@ -85,15 +85,15 @@ export default {
}, },
makeBgImgUrl: makeBgImgUrl:
/** /**
* Returns a complete tmdb image url formatted for css * Returns a complete tmdb image url in large format
*/ */
function(path: string) { function(path: string) {
return "url(https://image.tmdb.org/t/p/w1280" + path + ")" return "https://image.tmdb.org/t/p/w1280" + path
}, },
makeImgUrl: makeImgUrl:
/** /**
* Returns a complete tmdb img url * Returns a complete tmdb img url
*/ # */
function(path: string) { function(path: string) {
return "https://image.tmdb.org/t/p/w500" + path return "https://image.tmdb.org/t/p/w500" + path
}, },