Add youtube package to handle youtube error iframe

package.json

@@ -41,6 +41,7 @@
     "react-router-bootstrap": "^0.26.0",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.1",
+    "react-youtube": "^10.1.0",
     "slugify": "^1.6.6",
     "swiper": "^7.4.1"
   },

src/Components/Content/AiringScheduleENGComp/index.js

@@ -98,7 +98,7 @@ function AiringScheduleENGComp({ airingSchedule }) {
 											<p className="text-white/40">{item.countryOfOrigin}</p>
 										</div>
 										<div className="flex items-center gap-2">
-											<div className="aspect-2/3 w-[50px] h-[75px] relative flex-shrink-0">
+											<div className="aspect-[2/3] w-[50px] h-[75px] relative flex-shrink-0">
 												<Image
 													className="w-full h-full rounded bg-white/10 duration-500 ease-in-out"
 													src={item.coverImage}

src/Components/Content/CharacterList/index.js

@@ -7,17 +7,17 @@ function CharacterList({ characters }) {
 			<h4 className="font-black pt-4 font-bebas-neue text-3xl">CHARACTERS</h4>
 			<div className="grid gap-4 xl:grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 px-4 md:px-12 lg:px-20 xl:px-28 2xl:px-36 w-full py-4 [&>div]:max-lg:shrink-0 [&>div]:max-lg:flex overflow-y-scroll h-[500px] scrollbar-hide">
 				{characters.map((character, i) => (
-					<div className="min-h-28" key={character.id || character.name}>
+					<div key={character.id || character.name}>
 						<div className="flex bg-[#0D0D0D] h-full w-full">
-							<div className="w-1/3">
+							<div className="aspect-[2/3] h-[90px]">
 								<Image
-									className="h-full aspect-[2/3] duration-500 ease-in-out "
+									className="h-full w-full duration-500 ease-in-out rounded"
 									src={character.image || ""}
 									alt={character.name.full || character.name}
 									loading="lazy"
 								/>
 							</div>
-							<div className="mx-2 flex flex-col w-2/3">
+							<div className="mx-2 flex flex-col w-full">
 								<p
 									className="text-lg font-bold"
 									style={{ color: COLORLIST[i] }}

src/Components/Content/InfoDetailENG/index.js

@@ -102,10 +102,10 @@ function InfoDetailENG({
 							<Link
 								to={`/eng/anime/${encodeURIComponent(genre)}`}
 								key={genre}
-								className="lg:first:ml-[6px] lg:last:mr-[6px] hover:opacity-80 duration-200 ease-in-out"
+								className="lg:first:ml-[6px] lg:last:mr-[6px] hover:brightness-150 duration-200 ease-in-out"
 								aria-label={genre}
 							>
-								<div className="cursor-pointer rounded p-[10px] bg-[#5f5f5f29] mx-[10px] my-[6px] duration-200 hover:opacity-80 ease-in-out">
+								<div className="rounded p-[10px] bg-[#5f5f5f29] mx-[10px] my-[6px]">
 									{genre}
 								</div>
 							</Link>

src/Components/Content/RandomAnimeENGComp/index.js

@@ -1,17 +1,16 @@
-import "swiper/css"
-import "swiper/css/pagination"
-import "./movieanime.css"
+import React, { useState, useEffect } from "react"
+import YouTube from "react-youtube"
 import { Link } from "react-router-dom"
 import Image from "../Image"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faClosedCaptioning } from "@fortawesome/free-solid-svg-icons"
 import { MdOutlinePermDeviceInformation } from "react-icons/md"
-import { useEffect } from "react"
 import axios from "axios"
-import { useState } from "react"
+import "./movieanime.css"
 
 function RandomAnimeENGComp({ randomAnime }) {
 	const [isVideoAvailable, setIsVideoAvailable] = useState(true)
+
 	useEffect(() => {
 		const checkVideoAvailability = async () => {
 			if (randomAnime?.trailer?.site === "youtube") {
@@ -26,6 +25,7 @@ function RandomAnimeENGComp({ randomAnime }) {
 					}
 				} catch (error) {
 					console.error("Error checking video availability: ", error)
+					setIsVideoAvailable(false) // Set to false on error
 				}
 			}
 		}
@@ -39,6 +39,7 @@ function RandomAnimeENGComp({ randomAnime }) {
 		randomAnime.title.romaji ||
 		randomAnime.title.userPreferred ||
 		randomAnime.native
+
 	return (
 		<div className="w-full">
 			<h1 className="font-black ml-6 mr-6 mt-2 mb-0 max-sm:text-center font-bebas-neue whitespace-nowrap overflow-hidden gap flex gap-4">
@@ -58,15 +59,27 @@ function RandomAnimeENGComp({ randomAnime }) {
 			</h1>
 			<div className="h-[44vh] sm:h-[77vh] lg:h-[85vh] z-0 relative aspect-3/1">
 				{isVideoAvailable && randomAnime?.trailer?.site === "youtube" ? (
-					<div className="youtube-container">
-						<iframe
-							className="brightness-70"
-							src={`https://www.youtube.com/embed/${randomAnime.trailer.id}?autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&playsinline=1&color=white&mute=1&playlist=${randomAnime.trailer.id}`}
-							title="YouTube video player"
-							allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; autoplay"
-							allowFullScreen
-						/>
-					</div>
+					<YouTube
+						className="youtube-container"
+						videoId={randomAnime.trailer.id}
+						opts={{
+							playerVars: {
+								autoplay: 1,
+								controls: 0,
+								disablekb: 1,
+								loop: 1,
+								modestbranding: 1,
+								playsinline: 1,
+								color: "white",
+								mute: 1,
+								playlist: randomAnime.trailer.id,
+							},
+						}}
+						onError={(event) => {
+							console.log("Youtube error: ", event.data)
+							setIsVideoAvailable(false)
+						}}
+					/>
 				) : (
 					<Image
 						src={randomAnime.bannerImage}

src/Components/Content/TopAiringENGComp/index.js

@@ -32,7 +32,9 @@ function TopAiringENGComp({ topAiring }) {
 			{topAiring.map((item, i) => (
 				<SwiperSlide key={i}>
 					<div
-						style={{ backgroundImage: `url(${item.cover})` }}
+						style={{
+							backgroundImage: `url(${item.bannerImage})`,
+						}}
 						className={`bg-cover bg-center h-full w-full bg-no-repeat rounded overflow-hidden`}
 						loading="lazy"
 					>
@@ -42,7 +44,7 @@ function TopAiringENGComp({ topAiring }) {
 									to={`/eng/info/${item.id}`}
 									className="hover:opacity-80 duration-200 ease-in-out"
 									style={{
-										color: item?.color || "#fffc",
+										color: item?.coverImage?.color || "#fffc",
 										textShadow: `3px 3px 3px rgba(0,0,0,0.7)`,
 									}}
 									aria-label={item.id}
@@ -80,7 +82,9 @@ function TopAiringENGComp({ topAiring }) {
 											key < item.genres.length - 1 ? (
 												<span
 													className={`mx-[2px] w-1.5 h-1.5 rounded-full inline-block mt-[4px] max-md:hidden`}
-													style={{ backgroundColor: item?.color || "#fffc" }}
+													style={{
+														backgroundColor: item?.coverImage?.color || "#fffc",
+													}}
 												></span>
 											) : (
 												""

src/Components/Content/TopAllTimeENG/index.js

@@ -42,7 +42,7 @@ const TopAllTimeENG = ({ topAnime, topLoading }) => {
 										className="w-full flex gap-4 justify-between p-2 rounded-md overflow-hidden bg-white/5 hover:brightness-125 hover:bg-white/20 duration-300 ease-in-out"
 									>
 										<div className="w-full flex gap-3 sm:gap-4 h-full items-center">
-											<div className="aspect-2/3 w-[90px] min-w-[90px]">
+											<div className="aspect-[2/3] w-[90px] min-w-[90px]">
 												<Image
 													className="duration-500 ease-in-out object-cover w-full h-full rounded"
 													src={image}