shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

voice actor

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-29 19:34:45 +05:30
parent 9de49d8ba5
commit c1e27447b0
3 changed files with 141 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/pageslider/PageSlider.jsx
View File

@@ -26,51 +26,59 @@ function PageSlider({ page, totalPages, handlePageChange, start = false, style }
<button <button
key={p} key={p}
onClick={() => handlePageChange(p)} onClick={() => handlePageChange(p)}
className={`w-[40px] text-[15px] mx-1 flex justify-center items-center p-2 rounded-full font-bold ${page === p ? 'bg-[#ffbade] text-[#2B2A3C] cursor-default' : 'bg-[#2B2A3C] text-[#999] hover:text-[#ffbade]'} ${start ? "bg-[#353537]" : "bg-[#2B2A3C]"} `} className={`w-9 h-9 mx-1 flex justify-center items-center rounded-lg text-sm font-medium transition-all duration-300 ${
page === p
? 'bg-zinc-100 text-zinc-900 cursor-default'
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'
}`}
> >
{p} {p}
</button> </button>
)); ));
}; };
return ( return (
<div className={`w-full flex ${start ? "justify-start" : "justify-center"} items-center mt-12 overflow-hidden`} style={style}> <div
<div className="flex justify-center mt-4 w-fit"> className={`w-full flex ${start ? "justify-start" : "justify-center"} items-center overflow-hidden`}
style={style}
>
<div className="flex justify-center items-center w-fit">
{page > 1 && totalPages > 2 && ( {page > 1 && totalPages > 2 && (
<button <button
onClick={() => handlePageChange(1)} onClick={() => handlePageChange(1)}
className={`w-[40px] mx-1 p-2 ${start ? "bg-[#353537]" : "bg-[#2B2A3C]"} rounded-full text-[#999] text-[8px] hover:text-[#ffbade]`} className="w-9 h-9 mx-1 flex justify-center items-center rounded-lg bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200 transition-all duration-300"
> >
<FontAwesomeIcon icon={faAngleDoubleLeft} /> <FontAwesomeIcon icon={faAngleDoubleLeft} className="text-xs" />
</button> </button>
)} )}
{page > 1 && ( {page > 1 && (
<button <button
onClick={() => { if (page > 0) handlePageChange(page - 1) }} onClick={() => { if (page > 0) handlePageChange(page - 1) }}
className={`w-[40px] mx-1 p-2 ${start ? "bg-[#353537]" : "bg-[#2B2A3C]"} rounded-full text-[#999] text-[8px] hover:text-[#ffbade]`} className="w-9 h-9 mx-1 flex justify-center items-center rounded-lg bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200 transition-all duration-300"
> >
<FontAwesomeIcon icon={faChevronLeft} /> <FontAwesomeIcon icon={faChevronLeft} className="text-xs" />
</button> </button>
)} )}
{renderPageNumbers()} {renderPageNumbers()}
{page < totalPages && ( {page < totalPages && (
<button <button
onClick={() => { if (page < totalPages) handlePageChange(page + 1) }} onClick={() => { if (page < totalPages) handlePageChange(page + 1) }}
className={`w-[40px] mx-1 p-2 ${start ? "bg-[#353537]" : "bg-[#2B2A3C]"} rounded-full text-[#999] text-[8px] hover:text-[#ffbade]`} className="w-9 h-9 mx-1 flex justify-center items-center rounded-lg bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200 transition-all duration-300"
> >
<FontAwesomeIcon icon={faChevronRight} /> <FontAwesomeIcon icon={faChevronRight} className="text-xs" />
</button> </button>
)} )}
{page < totalPages && totalPages > 2 && ( {page < totalPages && totalPages > 2 && (
<button <button
onClick={() => handlePageChange(totalPages)} onClick={() => handlePageChange(totalPages)}
className={`w-[40px] mx-1 p-2 ${start ? "bg-[#353537]" : "bg-[#2B2A3C]"} rounded-full text-[#999] text-[8px] hover:text-[#ffbade]`} className="w-9 h-9 mx-1 flex justify-center items-center rounded-lg bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200 transition-all duration-300"
> >
<FontAwesomeIcon icon={faAngleDoubleRight} /> <FontAwesomeIcon icon={faAngleDoubleRight} className="text-xs" />
</button> </button>
)} )}
</div> </div>
</div> </div>
) );
} }
export default PageSlider export default PageSlider;

40
src/components/voiceactor/Voiceactor.jsx
View File

@@ -5,28 +5,27 @@ import VoiceactorList from "../voiceactorlist/VoiceactorList";
function Voiceactor({ animeInfo, className }) { function Voiceactor({ animeInfo, className }) {
const [showVoiceActors, setShowVoiceActors] = useState(false); const [showVoiceActors, setShowVoiceActors] = useState(false);
return ( return (
<div className={`w-full mt-8 flex flex-col gap-y-4 ${className}`}> <div className={`w-full flex flex-col gap-y-5 ${className}`}>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h1 className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] capitalize"> <h1 className="font-bold text-2xl text-zinc-100 max-[478px]:text-[18px] capitalize">
Characters & Voice Actors Characters & Voice Actors
</h1> </h1>
<button className="flex w-fit items-baseline h-fit rounded-3xl gap-x-1 group"> <button
<p onClick={() => setShowVoiceActors(true)}
className="text-white text-[12px] font-semibold h-fit leading-0" className="flex items-center px-3 py-1.5 rounded-lg bg-zinc-800/80 hover:bg-zinc-700/80 transition-all duration-300 group"
onClick={() => { >
setShowVoiceActors(true); <span className="text-zinc-300 text-sm font-medium group-hover:text-zinc-100">
}}
>
View more View more
</p> </span>
<FaChevronRight className="text-white text-[10px]" /> <FaChevronRight className="text-zinc-400 text-xs ml-1.5 group-hover:text-zinc-300" />
</button> </button>
</div> </div>
<div className="w-full grid grid-cols-3 max-[1024px]:grid-cols-2 max-[758px]:grid-cols-1 gap-4">
<div className="grid grid-cols-3 gap-3 max-lg:grid-cols-2 max-md:grid-cols-1">
{animeInfo.charactersVoiceActors.slice(0, 6).map((character, index) => ( {animeInfo.charactersVoiceActors.slice(0, 6).map((character, index) => (
<div <div
key={index} key={index}
className="flex justify-between items-center px-3 py-4 rounded-md bg-[#373646]" className="flex justify-between items-center px-4 py-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800/70 transition-all duration-300 border border-zinc-700/30"
> >
{character.character && ( {character.character && (
<div className="w-[50%] float-left overflow-hidden max-[350px]:w-[45%]"> <div className="w-[50%] float-left overflow-hidden max-[350px]:w-[45%]">
@@ -39,18 +38,18 @@ function Voiceactor({ animeInfo, className }) {
onError={(e) => { onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg"; e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}} }}
className="w-[45px] h-[45px] flex-shrink-0 rounded-full object-cover" className="w-[48px] h-[48px] flex-shrink-0 rounded-full object-cover border-2 border-zinc-700 hover:border-zinc-500 transition-all duration-300 max-[480px]:w-[36px] max-[480px]:h-[36px]"
loading="lazy" loading="lazy"
/> />
)} )}
<div className="flex justify-center flex-col"> <div className="flex justify-center flex-col">
{character.character.name && ( {character.character.name && (
<h4 className="text-[13px] text-left leading-[1.3em] font-[400] mb-0 overflow-hidden -webkit-box -webkit-line-clamp-2 -webkit-box-orient-vertical"> <h4 className="text-[13px] text-zinc-100 font-medium leading-snug mb-1 overflow-hidden -webkit-box -webkit-line-clamp-2 -webkit-box-orient-vertical">
{character.character.name} {character.character.name}
</h4> </h4>
)} )}
{character.character.cast && ( {character.character.cast && (
<p className="text-[11px] mt-[3px]"> <p className="text-[12px] text-zinc-400">
{character.character.cast} {character.character.cast}
</p> </p>
)} )}
@@ -60,10 +59,10 @@ function Voiceactor({ animeInfo, className }) {
)} )}
{character.voiceActors.length > 0 && character.voiceActors[0] && ( {character.voiceActors.length > 0 && character.voiceActors[0] && (
<div className="w-[50%] float-right overflow-hidden max-[350px]:w-[45%]"> <div className="w-[50%] float-right overflow-hidden max-[350px]:w-[45%]">
<div className="w-full flex justify-end gap-x-2"> <div className="w-full flex justify-end gap-x-3">
<div className="flex flex-col justify-center "> <div className="flex flex-col justify-center">
{character.voiceActors[0].name && ( {character.voiceActors[0].name && (
<span className="text-[13px] text-right leading-[1.3em] font-[400] mb-0 overflow-hidden -webkit-box -webkit-line-clamp-2 -webkit-box-orient-vertical w-fit"> <span className="text-[13px] text-zinc-300 text-right leading-snug mb-0 overflow-hidden -webkit-box -webkit-line-clamp-2 -webkit-box-orient-vertical w-fit">
{character.voiceActors[0].name} {character.voiceActors[0].name}
</span> </span>
)} )}
@@ -77,7 +76,7 @@ function Voiceactor({ animeInfo, className }) {
onError={(e) => { onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg"; e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}} }}
className="w-[45px] h-[45px] rounded-full object-cover grayscale hover:grayscale-0 hover:cursor-pointer flex-shrink-0 transition-all duration-300 ease-in-out" className="w-[48px] h-[48px] rounded-full object-cover opacity-60 hover:opacity-100 cursor-pointer flex-shrink-0 transition-all duration-300 border-2 border-zinc-700 hover:border-zinc-500 max-[480px]:w-[36px] max-[480px]:h-[36px]"
/> />
)} )}
</div> </div>
@@ -86,6 +85,7 @@ function Voiceactor({ animeInfo, className }) {
</div> </div>
))} ))}
</div> </div>
{showVoiceActors && ( {showVoiceActors && (
<VoiceactorList <VoiceactorList
id={animeInfo.id} id={animeInfo.id}

197
src/components/voiceactorlist/VoiceactorList.jsx
View File

@@ -46,6 +46,7 @@ function VoiceactorList({ id, isOpen, onClose }) {
}; };
fetchCategoryInfo(); fetchCategoryInfo();
}, [page]); }, [page]);
if (error) { if (error) {
navigate("/error-page"); navigate("/error-page");
return <Error />; return <Error />;
@@ -54,119 +55,121 @@ function VoiceactorList({ id, isOpen, onClose }) {
navigate("/404-not-found-page"); navigate("/404-not-found-page");
return null; return null;
} }
return ( return (
<div <div
className="fixed top-0 left-0 w-screen h-screen overflow-y-auto bg-black/80 z-50 flex justify-center py-10 max-[575px]:py-3" className="fixed inset-0 flex items-center justify-center bg-black/90 backdrop-blur-sm z-[1000000]"
style={{ onClick={(e) => {
zIndex: 1000000, if (e.target === e.currentTarget) onClose();
pointerEvents: "auto",
}} }}
> >
<div <div className="min-h-screen w-full py-4 sm:py-8 px-2 sm:px-4 flex items-center justify-center">
className={`w-[920px] h-fit flex flex-col relative backdrop-blur-[10px] rounded-lg p-6 bg-white/10 ${ <div
loading ? "h-fit" : "" className="w-full max-w-[920px] bg-zinc-900/80 backdrop-blur-xl rounded-xl border border-zinc-800 shadow-2xl max-h-[85vh] flex flex-col mx-auto max-sm:max-h-[80vh] max-sm:w-[92%] max-sm:my-auto"
} max-[1000px]:w-[80vw] max-md:w-[90vw] max-[480px]:p-3`} onClick={(e) => e.stopPropagation()}
style={{ >
pointerEvents: "auto", {/* Header */}
}} <div className="relative flex items-center justify-between p-3 sm:p-6 border-b border-zinc-800/50 flex-shrink-0">
> {!loading && (
{!loading && ( <h2 className="text-base sm:text-xl font-bold text-zinc-100">
<h2 className="text-2xl font-bold col-span-2 max-[480px]:text-lg"> Characters & Voice Actors
Characters & Voice Actors </h2>
</h2> )}
)} <button
onClick={onClose}
className="absolute right-2 sm:right-4 top-2 sm:top-4 w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200 transition-all duration-300"
>
<span className="text-lg sm:text-xl leading-none mb-0.5">&times;</span>
</button>
</div>
{loading ? ( {/* Content */}
<VoiceActorlistLoader /> <div className="flex-1 overflow-y-auto p-2 sm:p-6 scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent">
) : ( {loading ? (
<div className="w-full grid grid-cols-2 gap-4 mt-5 max-[1000px]:grid-cols-1"> <VoiceActorlistLoader />
{VoiceactorList.map((item, index) => ( ) : (
<div <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
key={index} {VoiceactorList.map((item, index) => (
className="flex p-4 items-center justify-between py-2 bg-[#444445] rounded-lg h-[80px] max-[480px]:p-1 max-[480px]:bg-transparent max-[480px]:rounded-none max-[480px]:border-b-[1px] border-dotted max-[480px]:h-[60px] max-[480px]:pb-4" <div
> key={index}
<div className="flex gap-x-2 items-center w-[50%] overflow-hidden"> className="flex items-center justify-between p-2 sm:p-3 bg-zinc-800/50 hover:bg-zinc-800/70 rounded-lg border border-zinc-700/30 transition-all duration-300"
<img >
src={item.character.poster} {/* Character Section */}
className="w-[45px] h-[45px] rounded-full flex-shrink-0 object-cover hover:cursor-pointer max-[480px]:w-[30px] max-[480px]:h-[30px]" <div className="flex items-center gap-2 sm:gap-3 w-[48%]">
loading="lazy"
onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}}
/>
<div className="flex flex-col text-left gap-y-1 w-full">
{item.character.name && (
<h1 className="text-[13px] font-semibold max-[480px]:text-[11px]">
{item.character.name}
</h1>
)}
{item.character.cast && (
<p className="text-[12px] font-light max-[480px]:text-[10px]">
{item.character.cast}
</p>
)}
</div>
</div>
{item.voiceActors &&
item.voiceActors.length > 0 &&
(item.voiceActors.length > 1 ? (
<div className="flex flex-wrap gap-x-[4px] items-center justify-end w-[50%] max-sm:flex-nowrap max-sm:overflow-auto max-[350px]:justify-start max-sm:py-3">
{item.voiceActors.map((data, index) => (
<img
key={index}
src={data.poster}
className="w-[41px] h-[41px] opacity-70 cursor-pointer rounded-full flex-shrink-0 object-cover grayscale hover:grayscale-0 hover:opacity-100 max-[480px]:w-[30px] max-[480px]:h-[30px] transition-all duration-300 ease-in-out"
title={data.name}
style={{
border: "4px solid rgba(105, 108, 117, 0.8)",
}}
onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}}
/>
))}
</div>
) : (
<div className="flex items-center justify-end gap-x-2 w-[50%] overflow-hidden max-[480px]:flex-wrap max-[480px]:flex-col-reverse max-[480px]:items-end max-[480px]:gap-y-1">
{item?.voiceActors[0]?.name && (
<p className="text-right text-[13px] max-[480px]:text-[11px]">
{item.voiceActors[0].name}
</p>
)}
<img <img
src={item.voiceActors[0].poster} src={item.character.poster}
alt="" className="w-9 h-9 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-zinc-700 hover:border-zinc-500 transition-all duration-300"
title={item.voiceActors.name}
loading="lazy" loading="lazy"
className="w-[45px] h-[45px] rounded-full opacity-70 flex-shrink-0 object-cover grayscale hover:grayscale-0 hover:opacity-100 max-[480px]:w-[30px] max-[480px]:h-[30px] transition-all duration-300 ease-in-out"
onError={(e) => { onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg"; e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}} }}
/> />
<div className="min-w-0">
{item.character.name && (
<h3 className="text-xs sm:text-sm text-zinc-100 font-medium truncate">
{item.character.name}
</h3>
)}
{item.character.cast && (
<p className="text-[10px] sm:text-xs text-zinc-400 truncate">
{item.character.cast}
</p>
)}
</div>
</div> </div>
))}
{/* Voice Actors Section */}
{item.voiceActors && item.voiceActors.length > 0 && (
<div className="flex items-center justify-end gap-2 sm:gap-3 w-[48%]">
{item.voiceActors.length > 1 ? (
<div className="flex items-center justify-end gap-1 sm:gap-2 w-full overflow-x-auto py-1 sm:py-2">
{item.voiceActors.map((actor, idx) => (
<img
key={idx}
src={actor.poster}
className="w-7 h-7 sm:w-10 sm:h-10 rounded-full object-cover flex-shrink-0 opacity-60 hover:opacity-100 border-2 border-zinc-700 hover:border-zinc-500 transition-all duration-300"
title={actor.name}
onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}}
/>
))}
</div>
) : (
<>
<div className="text-right min-w-0">
<p className="text-xs sm:text-sm text-zinc-300 truncate">
{item.voiceActors[0].name}
</p>
</div>
<img
src={item.voiceActors[0].poster}
className="w-9 h-9 sm:w-12 sm:h-12 rounded-full object-cover flex-shrink-0 opacity-60 hover:opacity-100 border-2 border-zinc-700 hover:border-zinc-500 transition-all duration-300"
title={item.voiceActors[0].name}
onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
}}
/>
</>
)}
</div>
)}
</div>
))}
</div> </div>
))} )}
</div> </div>
)}
<div {/* Pagination */}
className="bg-white w-[30px] h-[30px] p-2 rounded-full text-3xl absolute z-[1000] top-[-14px] right-[-14px] hover:text-[#FFBADE] cursor-pointer transform transition-all ease-in-out duration-300 flex items-center justify-center hover:bg-[#ffbade] max-md:top-0 max-md:right-0 max-md:rounded-none max-md:rounded-bl-lg max-md:rounded-tr-lg" <div className="p-2 sm:p-6 sm:pt-2 border-t border-zinc-800/50 flex-shrink-0">
onClick={onClose} <PageSlider
> page={page}
<button className="text-black mb-[6px] font-semibold">&times;</button> totalPages={totalPages}
handlePageChange={setPage}
start={true}
/>
</div>
</div> </div>
<PageSlider
page={page}
totalPages={totalPages}
handlePageChange={setPage}
start={true}
style={{
marginTop: "10px",
}}
/>
</div> </div>
</div> </div>
); );