Compare commits
2 Commits
d1a426fdfc
...
432312e0dc
| Author | SHA1 | Date |
|---|---|---|
 andrzej
|
432312e0dc | |
|
andrzej
|
3da67eafb5 |
|
|
@ -1,13 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"@types/axios": "^0.14.0",
|
||||
"axios": "^1.6.8",
|
||||
"react": "^18.2.0",
|
||||
"react-crossfade-image": "^1.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -2730,6 +2731,14 @@
|
|||
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
|
|
@ -2889,6 +2898,16 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
|
|
@ -2934,6 +2953,52 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-crossfade-image": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-crossfade-image/-/react-crossfade-image-1.2.0.tgz",
|
||||
"integrity": "sha512-y/rYGRc9Wmgw3UPHyfnjTB4bwaIwfr4fHArn6GwwYvuiLiJ2+yJGskN9J+qJJdQXEhwB8Oi+g8wNtD+svxdOkg==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-crossfade-image/node_modules/react": {
|
||||
"version": "16.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
|
||||
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-crossfade-image/node_modules/react-dom": {
|
||||
"version": "16.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
|
||||
"integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"scheduler": "^0.19.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-crossfade-image/node_modules/scheduler": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
|
||||
"integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
|
|
@ -2946,6 +3011,11 @@
|
|||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.2",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"@types/axios": "^0.14.0",
|
||||
"axios": "^1.6.8",
|
||||
"react": "^18.2.0",
|
||||
"react-crossfade-image": "^1.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
49
src/App.css
49
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;
|
||||
}
|
||||
|
|
|
|||
41
src/App.tsx
41
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 <div id="background">
|
||||
<img id="current-bg" src={props.backDrop.currImg} />
|
||||
<img id="previous-bg" src={props.backDrop.prevImg} />
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Background backDrop={backdrop} />
|
||||
<div id="loader"></div>
|
||||
<div className='main-container' style={{ backgroundImage: backdrop }}>
|
||||
<div className='main-container'>
|
||||
<main >
|
||||
<Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
|
||||
<div id="movie-wall-container">
|
||||
{loadedMovies === movies.length ?
|
||||
<MovieWall movies={movies}
|
||||
setMovies={setMovies}
|
||||
config={config}
|
||||
setChosenMovie={setChosenMovie}
|
||||
setLoadedMovies={setLoadedMovies}
|
||||
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
|
||||
/>
|
||||
: "LOADING " + loadedMovies} </div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<React.StrictMode>
|
||||
|
|
|
|||
|
|
@ -33,22 +33,18 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
|
|||
movies: Array<Movie>;
|
||||
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<React.Component> = []
|
||||
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(
|
||||
<Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setLoadedMovies={setLoadedMovies}
|
||||
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
|
||||
<Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setSimilarMoviesAvailable={setSimilarMoviesAvailable}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -64,7 +60,6 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
|
|||
config: Config;
|
||||
setMovies: Function;
|
||||
setChosenMovie: Function;
|
||||
setLoadedMovies: Function;
|
||||
setSimilarMoviesAvailable: Function;
|
||||
isHighlighted: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue