Add correct render

mitchiemt11 · Nov 2, 2024 · a10ba32 · a10ba32
1 parent 37a5ada
commit a10ba32
Showing 1 changed file with 74 additions and 55 deletions.
diff --git a/src/App.js b/src/App.js
@@ -44,7 +44,7 @@ function App() {
 
   const handleGetStarted = React.useCallback(() => {
     setAppState(prev => ({ ...prev, showConfetti: true }));
-    
+
     setTimeout(() => {
       setAppState(prev => ({
         ...prev,
@@ -59,7 +59,7 @@ function App() {
     const filtered = movies.filter((movie) =>
       movie.title.toLowerCase().includes(appState.searchTerm.toLowerCase())
     );
-    
+
     setAppState(prev => ({
       ...prev,
       filteredMovies: filtered,
@@ -88,64 +88,83 @@ function App() {
     }
   }, [filteredMovies]);
 
-  const renderTrailer = (trailer) => {
-    const opts = {
-      height: 500,
-      width: '100%',
-      playerVars: {
-        autoplay: 1,
-        controls: 0,
-      },
-    };
-
-    return (
-      <div className='absolute left-0 top-0 right-0 bottom-0 w-full h-full'>
-        <YouTube
-          videoId={trailer}
-          opts={opts}
-          className='absolute left-0 top-0 right-0 bottom-0 w-full h-full'
-          onEnd={() => setPlayTrailer(false)}
-        />
+  const renderTrailer = () => (
+    <div className="absolute inset-0 w-full h-full">
+      <YouTube
+        videoId={selectedMovie.trailer}
+        opts={YOUTUBE_OPTS}
+        className="absolute inset-0 w-full h-full"
+        onEnd={() => toggleTrailer(false)}
+      />
+    </div>
+  );
+
+
+  const renderMovieContent = () => (
+    <>
+      <Header
+        onSearch={handleSearchTrailer}
+        searchTerm={searchTerm}
+        setSearchTerm={handleSetSearchTerm}
+      />
+      <div
+        className="relative min-h-[500px] bg-top flex items-end bg-cover"
+        style={{
+          backgroundImage: `url(${selectedMovie.backgroundImage || './thumbnails/po.jpeg'})`
+        }}
+      >
+        <div className="pb-[60px] max-w-[1000px] mx-auto">
+          {playTrailer && (
+            <button
+              className="bg-[#000030] hover:bg-red-700 border-solid border-[#000030] text-white px-5 py-2 text-[1.2rem] mt-4 mb-2 rounded-lg absolute z-10 left-[30px] bottom-[30px]"
+              onClick={() => toggleTrailer(false)}
+            >
+              Close
+            </button>
+          )}
+
+          {selectedMovie.trailer && playTrailer && renderTrailer()}
+
+          <button
+            ref={playTrailerButtonRef}
+            onClick={() => toggleTrailer(true)}
+            className="inline-flex items-center justify-center px-5 py-3 text-[1.2rem] font-medium text-white bg-[#000030] rounded-lg hover:bg-[#001330cf] border-solid border-[#000030]"
+          >
+            Watch Trailer
+          </button>
+
+          <h1 className="text-[aliceblue] text-[3rem]">{selectedMovie.title}</h1>
+          <p className="text-[aliceblue] text-[1.3] font-medium">
+            {selectedMovie.description}
+          </p>
+        </div>
       </div>
-    )
-  }
+
+      {noResults ? (
+        <NoResults />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[25px] p-[25px] max-w-[1000px] mx-auto">
+          {filteredMovies.map((movie) => (
+            <MovieCard
+              key={movie.id || movie.title}
+              movie={movie}
+              setSelectedMovie={handleSelectMovie}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
 
   return (
-    <div>
+    <div className="min-h-screen">
       {showLanding ? (
-        <Landing handleGetStarted={handleGetStarted} showConfetti={showConfetti} />
+        <Landing
+          handleGetStarted={handleGetStarted}
+          showConfetti={showConfetti}
+        />
       ) : (
-        <>
-          <Header onSearch={handleSearchTrailer} searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
-          <div className='relative min-h-[500px] bg-top flex items-end bg-cover' style={{ backgroundImage: `url(${selectedMovie.backgroundImage || './thumbnails/po.jpeg'})` }}>
-            <div className='pb-[60px] max-w-[1000px] ml-auto mr-auto' >
-              {playTrailer ? <button className='bg-[#000030] hover:bg-red-700 border-solid border-[#000030] text-white px-5 py-2 decoration-none inline-block text-[1.2rem] mt-4 mb-2 cursor-pointer rounded-lg absolute z-10 left-[30px] bottom-[30px]' onClick={() => setPlayTrailer(false)} >
-                Close
-              </button>
-                : null}
-              {selectedMovie.trailer && playTrailer ? renderTrailer(selectedMovie.trailer) : null}
-              <button ref={playTrailerButtonRef} onClick={() => setPlayTrailer(true)} className='cursor-pointer border-solid border-[#000030] inline-flex items-center justify-center px-5 py-3 text-[1.2rem] text-base font-medium text-center text-white bg-[#000030] rounded-lg hover:bg-[#001330cf]'>
-                Watch Trailer
-              </button>
-              <p className='text-[aliceblue] text-[3rem]'>{selectedMovie.title}</p>
-              <p className='text-[aliceblue] text-[1.3] font-medium'>{selectedMovie.description}</p>
-            </div>
-          </div>
-
-          {noResults ? (
-            <NoResults/>
-          ) : (
-            <div className="grid grid-cols-3 gap-[25px] p-[25px] max-w-[1000px] mx-auto my-auto">
-              {filteredMovies.map((movie, index) => (
-                <MovieCard
-                  key={index}
-                  movie={movie}
-                  setSelectedMovie={setSelectedMovie}
-                />
-              ))}
-            </div>
-          )}
-        </>
+        renderMovieContent()
       )}
     </div>
   );