fix landing screen

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@types/axios": "^0.14.0",
         "axios": "^1.6.8",
+        "lucide-react": "^0.451.0",
         "react": "^18.2.0",
         "react-crossfade-image": "^1.2.0",
         "react-dom": "^18.2.0",
@@ -2998,6 +2999,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.451.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.451.0.tgz",
+      "integrity": "sha512-OwQ3uljZLp2cerj8sboy5rnhtGTCl9UCJIhT1J85/yOuGVlEH+xaUPR7tvNdddPvmV5M5VLdr7cQuWE3hzA4jw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@types/axios": "^0.14.0",
     "axios": "^1.6.8",
+    "lucide-react": "^0.451.0",
     "react": "^18.2.0",
     "react-crossfade-image": "^1.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -24,6 +24,15 @@ class MovieClass implements Movie {
   vote_average = 0
 }
 
+const splash: Movie = {
+  id: 0,
+  overview: "Select a movie to see others like it. Keep going until you find something to watch!",
+  title: "Welcome to Movie Explorer!",
+  vote_average: 0,
+  poster_path: null,
+  backdrop_path: null
+}
+
 class WatchProvidersClass implements WatchProviders {
   flatrate = [];
   rent = [];
@@ -41,7 +50,7 @@ function App() {
   })
   const [movies, setMovies] = useState([new MovieClass()])
   const [backdrop, setBackdrop] = useState("")
-  const [chosenMovie, setChosenMovie] = useState(new MovieClass())
+  const [chosenMovie, setChosenMovie] = useState(splash)
   const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
   const [watchProviders, setWatchProviders] = useState(new WatchProvidersClass())
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
@@ -95,6 +104,7 @@ function App() {
           <HamburgerMenu setConfig={setConfig} />
         </header>
         <main className="flex flex-col-reverse xl:flex-row justify-start sm:justify-center items-center sm:gap-8 grow">
+          {/* //TODO: fix initial screen  */}
           <Sidebar className="flex flex-col justify-around sm:justify-between items-center bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
           <MovieWall
             className={"flex flex-wrap gap-2 flex-grow w-full md:w-11/12 justify-center items-center xl:max-w-5xl p-2"}

src/objects/movie-wall.tsx

@@ -56,7 +56,6 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
     ]
     const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
     posters.push(
-      // TODO: tailwind merge so that these break points actually work
       <Poster className={twMerge("aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor + widths.join(" "))} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}

src/objects/sidebar.tsx

@@ -4,6 +4,7 @@ import tmdb from "./tmdb";
 import { WatchProviders, WhereToWatch } from "./whereToWatch";
 import CrossfadeImage from 'react-crossfade-image'
 import { Config } from "../App";
+import { Popcorn } from "lucide-react";
 
 export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   movie: Movie;
@@ -18,22 +19,23 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
     config.language == "en" ?
       "Summary unavailable." :
       ""
-  //TODO: fix initial screen 
   return <div id="sidebar" className={className}>
     <div className="sm:h-14 w-fit flex justify-center items-center">
       <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
     </div>
     <div className="flex flex-row sm:flex-col gap-2 justify-center items-center">
       <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="w-3/12 sm:h-96 aspect-poster flex justify-center">
-        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
-          objectFit: "clip",
-          height: "100%",
-          apectRatio: "2 / 3"
-        }} />
+        {movie.poster_path ?
+          <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path)} style={{
+            objectFit: "clip",
+            height: "100%",
+            apectRatio: "2 / 3"
+          }} />
+          : <Popcorn height="100%" size="100%" />
+        }
       </a>
       {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
       <div className="h-36 sm:h-72 w-8/12 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
-        {/* TODO: make the apology vertically centered */}
         {movie.overview === null ?
           <p>Loading...</p>
           : movie.overview === "" ?