watch page

therohantomar · Nov 18, 2023 · 655bcac · 655bcac
1 parent 7c06e02
commit 655bcac
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 13 deletions.
diff --git a/src/assets/postermovieimg.jpg → public/postermovieimg.jpg b/src/assets/postermovieimg.jpg → public/postermovieimg.jpg
diff --git a/src/assets/postermoviesearchimg.jpg → public/postermoviesearchimg.jpg b/src/assets/postermoviesearchimg.jpg → public/postermoviesearchimg.jpg
diff --git a/src/Components/CarouselBox.tsx b/src/Components/CarouselBox.tsx
@@ -25,15 +25,15 @@ const CarouselBox = (props: { trendingAll: Movie[]; }) => {
         <div>
             <div id="Carousel_Box" className="flex flex-col items-center bg-movieAlbum w-full justify-center relative transition-all  ">
                 <section key={trendingAll[index]?.id} id="Carousel_Block" className="w-full flex p-4  gap-4 h-full justify-center flex-wrap bg-slate-800 opacity-95">
-                    <img src={IMGURL + trendingAll[index]?.poster_path} alt={trendingAll[index]?.name} className="shadow-xl   w-2/5   h-[35rem] object-center  rounded-md cursor-pointer " />
-                    <div className="flex flex-col absolute  bottom-8 left-20  ">
-                        <h1>{trendingAll[index]?.release_date}</h1>
-                        <h1 className="font-bold">Language: {trendingAll[index]?.original_language.toLocaleUpperCase()}</h1>
-                        <h1 className="px-2 my-2 rounded-sm bg-gray-500 w-max">Country:{trendingAll[index]?.origin_country}</h1>
-                        <p className="my-2 flex items-center px-2  w-max  rounded-sm bg-gray-500 gap-4 ">Ratings: {Math.floor(trendingAll[index]?.vote_average)} <FaStar/></p>
-                        <span className="inline-flex items-center gap-5"><FaCirclePlay onClick={()=>Navigate(`/video/${trendingAll[index]?.id}`)} className="text-xl cursor-pointer" /> Play Trailer</span>
+                    <img src={IMGURL + trendingAll[index]?.poster_path} alt={trendingAll[index]?.name} className="shadow-xl   xs:w-full sm:w-full md:w-3/4 lg:w-3/4 xl:w-2/5 2xl:w-2/5   h-[35rem] object-center  rounded-md cursor-pointer " />
+                    <div className="flex text-slate-900 bg-gray-100  flex-col absolute  bottom-0 opacity-90 w-full p-2  ">
+                        <h1 >Releasing:  {trendingAll[index]?.release_date ?? "N/A"}</h1>
+                       <h1 className="font-bold ">Language: {trendingAll[index]?.original_language.toLocaleUpperCase()}</h1>
+                       <span className="text-white flex gap-4"><h1 className="px-2 my-2 rounded-sm bg-gray-500 w-max">Country:{trendingAll[index]?.origin_country ?? "N/A" }</h1>
+                        <p className="my-2 flex items-center px-2  w-max  rounded-sm bg-gray-500 gap-4 ">Ratings: {Math.floor(trendingAll[index]?.vote_average)} <FaStar/></p></span>
+                        <span className="inline-flex items-center gap-2"><FaCirclePlay onClick={()=>Navigate(`/video/${trendingAll[index]?.id}`)} className="text-xl cursor-pointer" /> Play Trailer</span>
                         <h1 className="text-sm font-bold my-4">Title: {trendingAll[index]?.original_title || trendingAll[index]?.original_name}</h1>
-                        <p className="text-sm my-2 w-96 h-24 overflow-clip">Overview: {trendingAll[index]?.overview}</p>
+                    <p className="xs:text-sm sm:text-md md:text-lg lg:text-xl xl:text-xl 2xl:text-xl font-bold my-2 w-3/4 h-24   overflow-clip">Overview: {trendingAll[index]?.overview}</p>
                     </div>
                 </section>
             </div>

diff --git a/src/Components/WatchPage.tsx b/src/Components/WatchPage.tsx
@@ -6,7 +6,7 @@ import { TrailerInter } from "../utils/Interfaces";
 const WatchPage = () => {
   const { id } = useParams();
   const  {Trailer}  = useTrailer(id) as {Trailer:TrailerInter}
-
+console.log(Trailer)
   if(Trailer){
   return ( <div className="realtive text-white w-full ">
       <iframe

diff --git a/src/utils/hooks/useTrailer.ts b/src/utils/hooks/useTrailer.ts
@@ -2,7 +2,7 @@ import {useEffect, useState} from "react"
 import { TrailerInter } from "../Interfaces";
 
 export default function useTrailer(id:string | undefined){
-  const [Trailer, setTrailer] = useState<TrailerInter>({id:"",name:"",key:""});
+  const [Trailer, setTrailer] = useState<TrailerInter | null>();
 
 
     useEffect(() => {
@@ -13,7 +13,7 @@ export default function useTrailer(id:string | undefined){
             }`
           );
           const data:{results:TrailerInter[]} = await response.json();
-          setTrailer(data.results[3]);
+          setTrailer(data.results[0]);
         }
         fetchTrailer();
       }, [id]);

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,8 +8,8 @@ export default {
   theme: {
     extend: {
       backgroundImage:{
-        "movieAlbum":'url("./src/assets/postermovieimg.jpg")',
-        "movieSearchAlbum":'url("./src/assets/postermoviesearchimg.jpg")'
+        "movieAlbum":'url("./public/postermovieimg.jpg")',
+        "movieSearchAlbum":'url("./public/postermoviesearchimg.jpg")'
       },
     screens:{
       xs:"300px"