Compare commits
2 Commits
d1a426fdfc
...
432312e0dc
| Author | SHA1 | Date |
|---|---|---|
 andrzej
|
432312e0dc | |
|
andrzej
|
3da67eafb5 |
11
index.html
11
index.html
|
|
@ -1,13 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</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": {
|
||||
|
|
|
|||
|
|
@ -156,6 +156,7 @@ img {
|
|||
}
|
||||
|
||||
#background {
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
23
src/App.tsx
23
src/App.tsx
|
|
@ -7,6 +7,7 @@ import tmdb from './objects/tmdb'
|
|||
import { Sidebar } from './objects/sidebar'
|
||||
import { Movie } from './objects/movie-wall'
|
||||
|
||||
|
||||
export type Config = {
|
||||
language: string,
|
||||
region: string,
|
||||
|
|
@ -34,8 +35,9 @@ function App() {
|
|||
|
||||
useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
|
||||
useEffect(() => {
|
||||
if (chosenMovie.backdrop_path) {
|
||||
const bgString = tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
|
||||
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)
|
||||
|
|
@ -44,28 +46,23 @@ function App() {
|
|||
currImg: bgString
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setBackdrop(prev => {
|
||||
return {
|
||||
...prev,
|
||||
currImg: tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [movies])
|
||||
|
||||
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.currImg} />
|
||||
<img id="previous-bg" src={props.prevImg} />
|
||||
<img id="current-bg" src={props.backDrop.currImg} />
|
||||
<img id="previous-bg" src={props.backDrop.prevImg} />
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Background prevImg={backdrop.prevImg} currImg={backdrop.currImg} />
|
||||
<Background backDrop={backdrop} />
|
||||
<div id="loader"></div>
|
||||
<div className='main-container'>
|
||||
<main >
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue