Merge pull request #35 from Mridul2820/update-site

TV series credit data expand

src/components/details/CastnCrew.js → src/components/details/CastMovie.js

@@ -4,7 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { img200, noUserImg } from '../../config/imgConfig';
 import SearchWithIcon from '../search/SearchWithIcon';
 
-const CastnCrew = ({ credits, title }) => {
+const CastMovie = ({ credits, title }) => {
   const [search, setSearch] = useState('');
 
   const handleChange = (e) => {
@@ -33,7 +33,7 @@ const CastnCrew = ({ credits, title }) => {
           {filtered.map((credit) => (
             <a href={`/person/${credit.id}`} key={uuidv4()}>
               <Cast>
-                <div className="p-2">
+                <div>
                   <img
                     src={
                       credit.profile_path
@@ -44,10 +44,10 @@ const CastnCrew = ({ credits, title }) => {
                     className="w-14 h-14 rounded-full object-cover align-top"
                   />
                 </div>
-                <div className="flex flex-col justify-center px-3 py-1">
+                <div className="flex flex-col justify-center w-[calc(100%-72px)]">
                   <h4 className="text-black font-bold">{credit.name}</h4>
                   {credit.character && (
-                    <p className="text-slate-500">
+                    <p className="text-slate-500 text-sm">
                       as <span className="font-medium">{credit.character}</span>
                     </p>
                   )}
@@ -67,11 +67,12 @@ const Cast = styled.div`
   display: flex;
   align-items: center;
   border-left: 5px solid #f99185;
-  padding-left: 2px;
+  padding: 7px 10px;
+  gap: 10px;
   width: 350px;
   min-width: 280px;
   box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
   border-radius: 5px;
 `;
 
-export default CastnCrew;
+export default CastMovie;

src/components/details/CastTV.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import { img200, noUserImg } from '../../config/imgConfig';
+import SearchWithIcon from '../search/SearchWithIcon';
+
+const CastTV = ({ credits, title }) => {
+  const [search, setSearch] = useState('');
+
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+  };
+
+  const filtered = credits.filter((person) => {
+    return (
+      person?.name?.toLowerCase().includes(search.toLowerCase()) ||
+      person?.roles[0]?.character?.toLowerCase().includes(search.toLowerCase())
+    );
+  });
+
+  return (
+    <section className="tab-section">
+      <h2 className="detail-tab-title">Cast of {title}</h2>
+      <SearchWithIcon
+        search={search}
+        handleChange={handleChange}
+        placeHolder="Search in Cast"
+        searchId="cast-search"
+      />
+
+      {credits && credits.length > 0 && filtered && filtered.length > 0 ? (
+        <div className="flex justify-center items-center flex-wrap mb-6 gap-4">
+          {filtered.map((credit) => (
+            <a href={`/person/${credit.id}`} key={uuidv4()}>
+              <Cast title={credit.name}>
+                <div>
+                  <img
+                    src={
+                      credit.profile_path
+                        ? `${img200}${credit.profile_path}`
+                        : noUserImg
+                    }
+                    alt={credit?.name}
+                    className="w-14 h-14 rounded-full object-cover align-top"
+                  />
+                </div>
+                <div className="flex flex-col justify-center w-[calc(100%-72px)]">
+                  <h4 className="text-black font-bold">{credit.name}</h4>
+                  {credit.roles && (
+                    <div className="text-sm space-x-2">
+                      {credit.roles.map((role, index) => (
+                        <span key={uuidv4()}>
+                          {index > 0 && ', '}
+                          <span className="font-medium text-slate-700">
+                            {role.character}
+                          </span>
+                          <span className="text-slate-500">
+                            {' (' + role.episode_count + ' episodes)'}
+                          </span>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </Cast>
+            </a>
+          ))}
+        </div>
+      ) : (
+        <p className="text-center text-slate-500 mt-3">No Cast Found</p>
+      )}
+    </section>
+  );
+};
+
+const Cast = styled.div`
+  display: flex;
+  align-items: center;
+  border-left: 5px solid #f99185;
+  padding: 7px 10px;
+  gap: 10px;
+  width: 350px;
+  min-width: 280px;
+  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+`;
+
+export default CastTV;

src/pages/withid/DetailsPage.js

@@ -5,7 +5,8 @@ import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 import BannerInfo from '../../components/details/BannerInfo';
-import CastnCrew from '../../components/details/CastnCrew';
+import CastMovie from '../../components/details/CastMovie';
+import CastTV from '../../components/details/CastTV';
 import Trailers from '../../components/details/Trailers';
 import FactBox from '../../components/details/FactBox';
 import Recommended from '../../components/details/Recomamded';
@@ -29,19 +30,21 @@ const DetailsPage = () => {
   const [photos, setPhotos] = useState();
   const [recommended, setRecommended] = useState();
   const [credits, setCredits] = useState();
+  const [creditsAll, setCreditsAll] = useState();
   const [loading, setLoading] = useState(false);
 
   const fetchData = async () => {
     setLoading(true);
     const { data } = await axios.get(
-      `${detailURL}${type}/${id}?${apiKey}&language=en&append_to_response=external_ids,videos,images,recommendations,credits,collection,keywords`
+      `${detailURL}${type}/${id}?${apiKey}&language=en&append_to_response=external_ids,videos,images,recommendations,aggregate_credits,credits,collection,keywords`
     );
 
     setContent(data);
     setVideos(data.videos.results);
     setPhotos(data.images);
     setRecommended(data.recommendations.results);
-    setCredits(data.credits.cast);
+    setCredits(data.credits?.cast);
+    setCreditsAll(data.aggregate_credits?.cast);
     setLoading(false);
   };
 
@@ -50,12 +53,6 @@ const DetailsPage = () => {
     // eslint-disable-next-line
   }, []);
 
-  useEffect(() => {
-    document.title = content
-      ? `${content.name || content.title} - CineParadis`
-      : 'CineParadis';
-  }, [content]);
-
   const getSlug = `${type}/${id}`;
   const getBackdrop = content?.backdrop_path
     ? `${img500}${content.backdrop_path}`
@@ -149,10 +146,20 @@ const DetailsPage = () => {
           </div>
           <>
             {active === 0 && content && (
-              <CastnCrew
-                credits={credits}
-                title={content?.name || content?.title}
-              />
+              <>
+                {type === 'movie' && (
+                  <CastMovie
+                    credits={credits}
+                    title={content?.name || content?.title}
+                  />
+                )}
+                {type === 'tv' && (
+                  <CastTV
+                    credits={creditsAll}
+                    title={content?.name || content?.title}
+                  />
+                )}
+              </>
             )}
             {active === 1 && content && (
               <FactBox content={content} type={type} />

tailwind.config.js

@@ -70,6 +70,7 @@ module.exports = {
     extend: {
       fontSize: {
         normal: '18px',
+        small: '15px',
       },
       boxShadow: {
         bs1: '0px 10px 36px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(0, 0, 0, 0.06)',