From 655bcacbc5f263f062f88432066e96264b6d9a72 Mon Sep 17 00:00:00 2001
From: therohantomar <therohantomar@gmail.com>
Date: Sat, 18 Nov 2023 17:59:44 +0530
Subject: [PATCH] watch page

---
 {src/assets => public}/postermovieimg.jpg       | Bin
 {src/assets => public}/postermoviesearchimg.jpg | Bin
 src/Components/CarouselBox.tsx                  |  16 ++++++++--------
 src/Components/WatchPage.tsx                    |   2 +-
 src/utils/hooks/useTrailer.ts                   |   4 ++--
 tailwind.config.js                              |   4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)
 rename {src/assets => public}/postermovieimg.jpg (100%)
 rename {src/assets => public}/postermoviesearchimg.jpg (100%)

diff --git a/src/assets/postermovieimg.jpg b/public/postermovieimg.jpg
similarity index 100%
rename from src/assets/postermovieimg.jpg
rename to public/postermovieimg.jpg
diff --git a/src/assets/postermoviesearchimg.jpg b/public/postermoviesearchimg.jpg
similarity index 100%
rename from src/assets/postermoviesearchimg.jpg
rename to public/postermoviesearchimg.jpg
diff --git a/src/Components/CarouselBox.tsx b/src/Components/CarouselBox.tsx
index d9a2f66..215134a 100644
--- 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
index dac1411..1664ff1 100644
--- 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
index a868bce..3593859 100644
--- 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
index 49cf416..c1e014d 100644
--- 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"