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

watch page on progress

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-29 20:18:32 +05:30
parent b514546a0f
commit c0c1e93660
3 changed files with 270 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/episodelist/Episodelist.jsx
View File

@@ -138,20 +138,20 @@ function Episodelist({
return (
<div className="relative flex flex-col w-full h-full max-[1200px]:max-h-[500px]">
<div className="sticky top-0 z-10 flex flex-col gap-y-[5px] justify-start px-3 py-4 bg-[#0D0D15]">
<h1 className="text-[13px] font-bold">List of episodes:</h1>
<div className="sticky top-0 z-10 flex flex-col gap-y-[5px] justify-start px-4 py-5 bg-[#1a1a1a] border-b border-[#2a2a2a]">
<h1 className="text-[14px] font-semibold text-white mb-2">Episodes</h1>
{totalEpisodes > 100 && (
<div className="w-full flex gap-x-4 items-center max-[1200px]:justify-between">
<div className="min-w-fit flex text-[13px]">
<div
onClick={() => setShowDropDown((prev) => !prev)}
className="text-white w-fit mt-1 text-[13px] relative cursor-pointer bg-[#0D0D15] flex justify-center items-center"
className="text-gray-300 w-fit mt-1 text-[13px] relative cursor-pointer flex justify-center items-center hover:text-white transition-colors"
ref={dropDownRef}
>
<FontAwesomeIcon icon={faList} />
<FontAwesomeIcon icon={faList} className="text-gray-400" />
<div className="w-fit flex justify-center items-center gap-x-2 ml-4">
<p className="text-white text-[12px]">
EPS:&nbsp;{selectedRange[0]}-{selectedRange[1]}
<p className="text-[12px]">
{selectedRange[0]}-{selectedRange[1]}
</p>
<FontAwesomeIcon
icon={faAngleDown}
@@ -159,7 +159,7 @@ function Episodelist({
/>
</div>
{showDropDown && (
<div className="absolute flex flex-col top-full mt-[10px] left-0 z-30 bg-white w-[150px] max-h-[200px] overflow-y-auto rounded-l-[8px]">
<div className="absolute flex flex-col top-full mt-[10px] left-0 z-30 bg-[#2a2a2a] w-[150px] max-h-[200px] overflow-y-auto rounded-lg border border-[#3a3a3a] shadow-lg">
{generateRangeOptions(totalEpisodes).map((item, index) => (
<div
key={index}
@@ -167,14 +167,14 @@ function Episodelist({
handleRangeSelect(item);
setActiveRange(item);
}}
className={`hover:bg-gray-200 cursor-pointer text-black ${
item === activeRange ? "bg-[#EFF0F4]" : ""
className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${
item === activeRange ? "bg-[#404040]" : ""
}`}
>
<p className="font-semibold text-[12px] p-3 flex justify-between items-center">
EPS:&nbsp;{item}
<p className="font-medium text-[12px] p-3 flex justify-between items-center text-gray-300 hover:text-white">
{item}
{item === activeRange ? (
<FontAwesomeIcon icon={faCheck} />
<FontAwesomeIcon icon={faCheck} className="text-white" />
) : null}
</p>
</div>
@@ -183,26 +183,26 @@ function Episodelist({
)}
</div>
</div>
<div className="border-[1px] border-[#ffffff34] rounded-sm py-[4px] px-[8px] flex items-center gap-x-[10px]">
<div className="border border-[#3a3a3a] rounded-lg py-2 px-3 flex items-center gap-x-3 bg-[#2a2a2a] focus-within:border-gray-500 transition-colors">
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="text-[11px]"
className="text-[12px] text-gray-400"
/>
<input
type="text"
className="w-full bg-transparent focus:outline-none rounded-sm text-[13px] font-bold placeholder:text-[12px] placeholder:font-medium"
placeholder="Number of Ep"
className="w-full bg-transparent focus:outline-none rounded-sm text-[13px] text-white placeholder:text-gray-500"
placeholder="Go to episode..."
onChange={handleChange}
/>
</div>
</div>
)}
</div>
<div ref={listContainerRef} className="w-full h-full overflow-y-auto">
<div ref={listContainerRef} className="w-full h-full overflow-y-auto bg-[#1a1a1a]">
<div
className={`${
totalEpisodes > 30
? "p-3 grid grid-cols-5 gap-1 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5"
? "p-4 grid grid-cols-5 gap-2 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5"
: ""
}`}
>
@@ -220,19 +220,19 @@ function Episodelist({
<div
key={item?.id}
ref={isActive ? activeEpisodeRef : null}
className={`flex items-center justify-center rounded-[3px] h-[30px] text-[13.5px] font-medium cursor-pointer group ${
className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all ${
item?.filler
? isActive
? "bg-[#ffbade]"
: "bg-gradient-to-r from-[#5a4944] to-[#645a4b]"
? "bg-white text-black"
: "bg-[#2a2a2a] text-gray-400"
: ""
} md:hover:bg-[#67686F]
md:hover:text-white
} hover:bg-[#404040]
hover:text-white
${
isActive
? "bg-[#ffbade] text-black"
: "bg-[#35373D] text-gray-400"
} ${isSearched ? "glow-animation" : ""} `}
? "bg-white text-black ring-1 ring-white"
: "bg-[#2a2a2a] text-gray-400"
} ${isSearched ? "ring-2 ring-white" : ""}`}
onClick={() => {
if (episodeNumber) {
onEpisodeClick(episodeNumber);
@@ -241,13 +241,7 @@ function Episodelist({
}
}}
>
<span
className={`${
item?.filler
? "text-white md:group-hover:text-[#ffbade]"
: ""
}`}
>
<span className="transition-colors">
{index + selectedRange[0]}
</span>
</div>
@@ -264,13 +258,13 @@ function Episodelist({
<div
key={item?.id}
ref={isActive ? activeEpisodeRef : null}
className={`w-full pl-5 pr-2 py-3 flex items-center justify-start gap-x-8 cursor-pointer ${
className={`w-full px-4 py-3 flex items-center justify-start gap-x-6 cursor-pointer transition-all ${
(index + 1) % 2 && !isActive
? "bg-[#201F2D] text-gray-400"
: "bg-none"
} group md:hover:bg-[#2B2A42] ${
isActive ? "text-[#ffbade] bg-[#2B2A42]" : ""
} ${isSearched ? "glow-animation" : ""}`}
? "bg-[#202020]"
: "bg-[#1a1a1a]"
} hover:bg-[#2a2a2a] ${
isActive ? "bg-[#2a2a2a]" : ""
} ${isSearched ? "ring-1 ring-white" : ""}`}
onClick={() => {
if (episodeNumber) {
onEpisodeClick(episodeNumber);
@@ -279,15 +273,19 @@ function Episodelist({
}
}}
>
<p className="text-[14px] font-medium">{index + 1}</p>
<p className={`text-[14px] font-medium ${isActive ? "text-white" : "text-gray-400"}`}>
{index + 1}
</p>
<div className="w-full flex items-center justify-between gap-x-[5px]">
<h1 className="line-clamp-1 text-[15px] font-light group-hover:text-[#ffbade]">
<h1 className={`line-clamp-1 text-[14px] transition-colors ${
isActive ? "text-white font-medium" : "text-gray-400 font-normal"
}`}>
{language === "EN" ? item?.title : item?.japanese_title}
</h1>
{isActive && (
<FontAwesomeIcon
icon={faCirclePlay}
className="w-[20px] h-[20px] text-[#ffbade]"
className="w-[18px] h-[18px] text-white"
/>
)}
</div>

26
src/components/servers/Servers.jsx
View File

@@ -54,17 +54,17 @@ function Servers({
localStorage.setItem("server_type", server.type);
};
return (
<div className="relative bg-[#11101A] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#14151A]">
<div className="relative bg-[#111111] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#151515]">
{serverLoading ? (
<div className="w-full h-full rounded-lg flex justify-center items-center max-[600px]:rounded-none">
<BouncingLoader />
</div>
) : servers ? (
<div className="w-full h-full rounded-lg grid grid-cols-[minmax(0,30%),minmax(0,70%)] overflow-hidden max-[800px]:grid-cols-[minmax(0,40%),minmax(0,60%)] max-[600px]:flex max-[600px]:flex-col max-[600px]:rounded-none">
<div className="h-full bg-[#ffbade] px-6 text-black flex flex-col justify-center items-center gap-y-2 max-[600px]:bg-transparent max-[600px]:h-1/2 max-[600px]:text-white max-[600px]:mb-4">
<div className="h-full bg-[#e0e0e0] px-6 text-black flex flex-col justify-center items-center gap-y-2 max-[600px]:bg-transparent max-[600px]:h-1/2 max-[600px]:text-white max-[600px]:mb-4">
<p className="text-center leading-5 font-medium text-[14px]">
You are watching <br />
<span className="font-semibold max-[600px]:text-[#ffbade]">
<span className="font-semibold max-[600px]:text-[#e0e0e0]">
Episode {activeEpisodeNum}
</span>
</p>
@@ -73,7 +73,7 @@ function Servers({
beside.
</p>
</div>
<div className="bg-[#201F31] flex flex-col max-[600px]:h-full">
<div className="bg-[#1f1f1f] flex flex-col max-[600px]:h-full">
{rawServers.length > 0 && (
<div
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
@@ -85,7 +85,7 @@ function Servers({
<div className="flex items-center gap-x-2">
<FontAwesomeIcon
icon={faFile}
className="text-[#ffbade] text-[13px]"
className="text-[#e0e0e0] text-[13px]"
/>
<p className="font-bold text-[14px]">RAW:</p>
</div>
@@ -95,8 +95,8 @@ function Servers({
key={index}
className={`px-6 py-[5px] rounded-lg cursor-pointer ${
activeServerId === item?.data_id
? "bg-[#ffbade] text-black"
: "bg-[#373646] text-white"
? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white"
} max-[700px]:px-3`}
onClick={() => handleServerSelect(item)}
>
@@ -117,7 +117,7 @@ function Servers({
<div className="flex items-center gap-x-2">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[#ffbade] text-[13px]"
className="text-[#e0e0e0] text-[13px]"
/>
<p className="font-bold text-[14px]">SUB:</p>
</div>
@@ -127,8 +127,8 @@ function Servers({
key={index}
className={`px-6 py-[5px] rounded-lg cursor-pointer ${
activeServerId === item?.data_id
? "bg-[#ffbade] text-black"
: "bg-[#373646] text-white"
? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white"
} max-[700px]:px-3`}
onClick={() => handleServerSelect(item)}
>
@@ -149,7 +149,7 @@ function Servers({
<div className="flex items-center gap-x-3">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[#ffbade] text-[13px]"
className="text-[#e0e0e0] text-[13px]"
/>
<p className="font-bold text-[14px]">DUB:</p>
</div>
@@ -159,8 +159,8 @@ function Servers({
key={index}
className={`px-6 py-[5px] rounded-lg cursor-pointer ${
activeServerId === item?.data_id
? "bg-[#ffbade] text-black"
: "bg-[#373646] text-white"
? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white"
} max-[700px]:px-3`}
onClick={() => handleServerSelect(item)}
>