92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import './defaults.css'
|
|
import './App.css'
|
|
import './spinner.css'
|
|
import { MovieWall } from './objects/movie-wall'
|
|
import { HamburgerMenu } from './objects/HamburgerMenu'
|
|
import { useState, useEffect } from 'react'
|
|
import tmdb from './objects/tmdb'
|
|
import { Sidebar } from './objects/sidebar'
|
|
import { Movie } from './objects/movie-wall'
|
|
import CrossfadeImage from 'react-crossfade-image'
|
|
import { WatchProviders } from './objects/whereToWatch'
|
|
|
|
export type Config = {
|
|
language: string,
|
|
region: string,
|
|
page: number,
|
|
locale: string
|
|
}
|
|
class MovieClass implements Movie {
|
|
id = 0
|
|
poster_path = null
|
|
backdrop_path = null
|
|
title = null
|
|
overview = null
|
|
vote_average = 0
|
|
}
|
|
|
|
class WatchProvidersClass implements WatchProviders {
|
|
flatrate = [];
|
|
rent = [];
|
|
buy = [];
|
|
link = "";
|
|
}
|
|
|
|
export interface Movies { Array<Movie>};
|
|
|
|
function App() {
|
|
const [config, setConfig] = useState<Config>({
|
|
language: "es",
|
|
region: "spain",
|
|
page: 1,
|
|
locale: "ES"
|
|
})
|
|
const [movies, setMovies] = useState([new MovieClass()])
|
|
const [backdrop, setBackdrop] = useState("")
|
|
const [chosenMovie, setChosenMovie] = useState(new MovieClass())
|
|
const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
|
|
const [watchProviders, setWatchProviders] = useState(new WatchProvidersClass())
|
|
useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
|
|
useEffect(() => {
|
|
const bgString = chosenMovie.backdrop_path ?
|
|
tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
|
|
: tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
|
|
setBackdrop(bgString)
|
|
}, [movies])
|
|
useEffect(() => {
|
|
tmdb.getWhereToWatch(chosenMovie, setWatchProviders, config)
|
|
}, [chosenMovie])
|
|
//Whenever config changes, refresh data for current selection
|
|
useEffect(() => {
|
|
console.log("CONFIG CHANGED!!")
|
|
tmdb.getMovie(config, chosenMovie.id, setChosenMovie)
|
|
tmdb.getSimilar(config, chosenMovie, setMovies, setSimilarMoviesAvailable)
|
|
}, [config])
|
|
const crossfadeImageStyles = {
|
|
width: "2560px",
|
|
minHeight: "100%",
|
|
aspectRatio: "16/9"
|
|
}
|
|
return (
|
|
<>
|
|
<div id="background">
|
|
<CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
|
|
</div>
|
|
<main >
|
|
<HamburgerMenu setConfig={setConfig} />
|
|
<Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
|
|
<div id="movie-wall-container">
|
|
<MovieWall movies={movies}
|
|
setMovies={setMovies}
|
|
config={config}
|
|
setChosenMovie={setChosenMovie}
|
|
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
|
|
/>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|