install react-crossfade-image

improve transitions
2024-05-17 14:43:16 +02:00 · 2024-05-17 14:43:02 +02:00
8 changed files with 174 additions and 40 deletions
--- a/index.html
+++ b/index.html
@ -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>
+
+<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>
--- a/package-lock.json
+++ b/package-lock.json
@ -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",
--- a/package.json
+++ b/package.json
@ -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": {
--- a/src/App.css
+++ b/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;
+}
--- a/src/App.tsx
+++ b/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>
+            <MovieWall movies={movies}
+              setMovies={setMovies}
+              config={config}
+              setChosenMovie={setChosenMovie}
+              setSimilarMoviesAvailable={setSimilarMoviesAvailable}
+            />
+          </div>
        </main>
      </div>
    </>
--- a/src/main.tsx
+++ b/src/main.tsx
@ -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>
--- a/src/objects/movie-wall.tsx
+++ b/src/objects/movie-wall.tsx
@ -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;
 }
--- a/src/objects/tmdb.tsx
+++ b/src/objects/tmdb.tsx
@ -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
    },
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