From 8ffde2704af845ee9ecd7ae02008af48990ec4cb Mon Sep 17 00:00:00 2001
From: Ashish Madan <66418119+am282000@users.noreply.github.com>
Date: Wed, 23 Jun 2021 20:58:31 +0530
Subject: [PATCH 1/2] Overflow img bug fix

---
 src/components/Carousel/Carousel.js | 110 ++++++++++++++--------------
 1 file changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
index abb4d50..81bbfbb 100644
--- a/src/components/Carousel/Carousel.js
+++ b/src/components/Carousel/Carousel.js
@@ -1,62 +1,58 @@
-import axios from "axios";
-import React, { useEffect, useState } from "react";
-import AliceCarousel from "react-alice-carousel";
-import "react-alice-carousel/lib/alice-carousel.css";
-import { img_300, noPicture } from "../../config/config";
-import "./Carousel.css";
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import AliceCarousel from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+import { img_300, noPicture } from '../../config/Config';
+import './Carousel.css';
 
 const handleDragStart = (e) => e.preventDefault();
 
-const Gallery = ({ id, media_type }) => {
-  const [credits, setCredits] = useState([]);
-
-  const items = credits.map((c) => (
-    <div className="carouselItem">
-      <img
-        src={c.profile_path ? `${img_300}/${c.profile_path}` : noPicture}
-        alt={c?.name}
-        onDragStart={handleDragStart}
-        className="carouselItem__img"
-      />
-      <b className="carouselItem__txt">{c?.name}</b>
-    </div>
-  ));
-
-  const responsive = {
-    0: {
-      items: 3,
-    },
-    512: {
-      items: 5,
-    },
-    1024: {
-      items: 7,
-    },
-  };
-
-  const fetchCredits = async () => {
-    const { data } = await axios.get(
-      `https://api.themoviedb.org/3/${media_type}/${id}/credits?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
-    );
-    setCredits(data.cast);
-  };
-
-  useEffect(() => {
-    fetchCredits();
-    // eslint-disable-next-line
-  }, []);
-
-  return (
-    <AliceCarousel
-      mouseTracking
-      infinite
-      disableDotsControls
-      disableButtonsControls
-      responsive={responsive}
-      items={items}
-      autoPlay
-    />
-  );
+const Carousel = ({ id, media_type }) => {
+	const [credits, setCredits] = useState([]);
+
+	const items = credits?.map((c) => (
+		<div className="carouselItem">
+			<img
+				src={c.profile_path ? `${img_300}/${c.profile_path}` : noPicture}
+				alt={c.name}
+				onDragStart={handleDragStart}
+				className="carouselItem__img"
+			/>
+			<b className="carouselItem__txt">{c?.name}</b>
+		</div>
+	));
+
+	const responsive = {
+		0: { items: 3 },
+		512: { items: 4 },
+		666: { items: 5 },
+		1241: { items: 6 },
+		1361: { items: 7 }
+	};
+
+	const fetchCredits = async () => {
+		const { data } = await axios.get(
+			`https://api.themoviedb.org/3/${media_type}/${id}/credits?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
+		);
+		setCredits(data.cast);
+	};
+
+	useEffect(() => {
+		fetchCredits();
+		// eslint-disable-next-line
+	}, []);
+	// console.log(credits);
+	return (
+		<AliceCarousel
+			autoPlay={credits.length > 2}
+			responsive={responsive}
+			disableDotsControls
+			disableButtonsControls
+			infinite
+			mouseTracking
+			items={items}
+		/>
+	);
 };
 
-export default Gallery;
+export default Carousel;

From caf5e76c36a183c3b0728475107a914190b770a2 Mon Sep 17 00:00:00 2001
From: Ashish Madan <66418119+am282000@users.noreply.github.com>
Date: Wed, 23 Jun 2021 21:00:06 +0530
Subject: [PATCH 2/2] Size fixed of Carousal img

---
 src/components/Carousel/Carousel.css | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Carousel/Carousel.css b/src/components/Carousel/Carousel.css
index 4a8554d..b14a41f 100644
--- a/src/components/Carousel/Carousel.css
+++ b/src/components/Carousel/Carousel.css
@@ -1,11 +1,14 @@
 .carouselItem {
-  display: flex;
-  flex-direction: column;
-  object-fit: contain;
-  padding: 10px;
+	display: flex;
+	flex-direction: column;
+	object-fit: contain;
+	padding: 10px;
 }
+
 .carouselItem__img {
-  border-radius: 10px;
-  margin-bottom: 5px;
-  box-shadow: 0px 0px 5px black;
+	border-radius: 10px;
+	height: 150px;
+	width: 100px;
+	margin-bottom: 5px;
+	box-shadow: 0px 0px 5px black;
 }