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

Compare commits

base: Resume:d1a426fdfcc675307ab4c6c71251010ab87bd7d7
Branches Tags
Resume:main
Resume:tailwind
..
compare: Resume:432312e0dc3e316ac80f13a3430e74f548d91e57
Branches Tags
Resume:main
Resume:tailwind

2 Commits
d1a426fdfc ... 432312e0dc

Author SHA1 Message Date
andrzej 432312e0dc install react-crossfade-image 2024-05-17 14:43:16 +02:00
andrzej 3da67eafb5 improve transitions 2024-05-17 14:43:02 +02:00
6 changed files with 106 additions and 33 deletions
Show Stats 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>

70
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@types/axios": "^0.14.0", "@types/axios": "^0.14.0",
"axios": "^1.6.8", "axios": "^1.6.8",
"react": "^18.2.0", "react": "^18.2.0",
"react-crossfade-image": "^1.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
@ -2730,6 +2731,14 @@
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
"dev": true "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": { "node_modules/once": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@ -2889,6 +2898,16 @@
"node": ">= 0.8.0" "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": { "node_modules/proxy-from-env": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@ -2934,6 +2953,52 @@
"node": ">=0.10.0" "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": { "node_modules/react-dom": {
"version": "18.3.1", "version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@ -2946,6 +3011,11 @@
"react": "^18.3.1" "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": { "node_modules/react-refresh": {
"version": "0.14.2", "version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"@types/axios": "^0.14.0", "@types/axios": "^0.14.0",
"axios": "^1.6.8", "axios": "^1.6.8",
"react": "^18.2.0", "react": "^18.2.0",
"react-crossfade-image": "^1.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {

1
src/App.css
View File

@ -156,6 +156,7 @@ img {
} }
#background { #background {
background-color: black;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;

23
src/App.tsx
View File

@ -7,6 +7,7 @@ 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,
@ -34,8 +35,9 @@ function App() {
useEffect(() => { tmdb.getPopular(config, setMovies) }, []) useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
useEffect(() => { useEffect(() => {
if (chosenMovie.backdrop_path) { const bgString = chosenMovie.backdrop_path ?
const bgString = tmdb.makeBgImgUrl(chosenMovie.backdrop_path) tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
: tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
setBackdrop(prev => { setBackdrop(prev => {
console.log("NEW PREVIMG: " + prev.currImg) console.log("NEW PREVIMG: " + prev.currImg)
console.log("NE CURRIMG: " + bgString) console.log("NE CURRIMG: " + bgString)
@ -44,28 +46,23 @@ function App() {
currImg: bgString currImg: bgString
} }
}) })
} else {
setBackdrop(prev => {
return {
...prev,
currImg: tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
}
})
}
}, [movies]) }, [movies])
interface BackgroundProps extends React.ComponentPropsWithRef<"div"> { interface BackgroundProps extends React.ComponentPropsWithRef<"div"> {
backDrop: {
currImg: string; currImg: string;
prevImg: string; prevImg: string;
} }
}
const Background = (props: BackgroundProps) => { const Background = (props: BackgroundProps) => {
return <div id="background"> return <div id="background">
<img id="current-bg" src={props.currImg} /> <img id="current-bg" src={props.backDrop.currImg} />
<img id="previous-bg" src={props.prevImg} /> <img id="previous-bg" src={props.backDrop.prevImg} />
</div> </div>
} }
return ( return (
<> <>
<Background prevImg={backdrop.prevImg} currImg={backdrop.currImg} /> <Background backDrop={backdrop} />
<div id="loader"></div> <div id="loader"></div>
<div className='main-container'> <div className='main-container'>
<main > <main >

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>