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

related anime fix

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-30 22:03:05 +05:30
parent 42623886a3
commit 2e21de2317
2 changed files with 63 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/sidecard/Sidecard.jsx
View File

@@ -5,13 +5,12 @@ import {
faMicrophone, faMicrophone,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { useLanguage } from "@/src/context/LanguageContext"; import { useLanguage } from "@/src/context/LanguageContext";
import { Link, useNavigate } from "react-router-dom"; import { Link } from "react-router-dom";
import useToolTipPosition from "@/src/hooks/useToolTipPosition"; import useToolTipPosition from "@/src/hooks/useToolTipPosition";
import Qtip from "../qtip/Qtip"; import Qtip from "../qtip/Qtip";
function Sidecard({ data, label, className }) { function Sidecard({ data, label, className }) {
const { language } = useLanguage(); const { language } = useLanguage();
const navigate = useNavigate();
const [hoverTimeout, setHoverTimeout] = useState(null); const [hoverTimeout, setHoverTimeout] = useState(null);
const handleMouseEnter = (item, index) => { const handleMouseEnter = (item, index) => {
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
@@ -37,70 +36,71 @@ function Sidecard({ data, label, className }) {
key={index} key={index}
className="group" className="group"
ref={(el) => (cardRefs.current[index] = el)} ref={(el) => (cardRefs.current[index] = el)}
onMouseEnter={() => handleMouseEnter(item, index)}
onMouseLeave={handleMouseLeave}
> >
<div className="flex items-start gap-3 p-2 rounded-lg transition-colors hover:bg-[#1f1f1f]"> <Link
{hoveredItem === item.id + index && window.innerWidth > 1024 && ( to={`/${item.id}`}
<div onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className={`absolute ${tooltipPosition} ${tooltipHorizontalPosition} ${ className="block"
tooltipPosition === "top-1/2" >
? "translate-y-[50px]" <div className="flex items-start gap-3 p-2 rounded-lg transition-colors hover:bg-[#1f1f1f]">
: "translate-y-[-50px]" {hoveredItem === item.id + index && window.innerWidth > 1024 && (
} z-[100000] transform transition-all duration-300 ease-in-out ${ <div
hoveredItem === item.id + index className={`absolute ${tooltipPosition} ${tooltipHorizontalPosition} ${
? "opacity-100 translate-y-0" tooltipPosition === "top-1/2"
: "opacity-0 translate-y-2" ? "translate-y-[50px]"
}`} : "translate-y-[-50px]"
> } z-[100000] transform transition-all duration-300 ease-in-out ${
<Qtip id={item.id} /> hoveredItem === item.id + index
</div> ? "opacity-100 translate-y-0"
)} : "opacity-0 translate-y-2"
<img }`}
src={`${item.poster}`} >
alt={item.title} <Qtip id={item.id} />
className="w-[50px] h-[70px] rounded object-cover cursor-pointer transition-transform group-hover:scale-105" </div>
onClick={() => navigate(`/watch/${item.id}`)} )}
onMouseEnter={() => handleMouseEnter(item, index)} <img
onMouseLeave={handleMouseLeave} src={`${item.poster}`}
/> alt={item.title}
<div className="flex flex-col gap-1.5 flex-1 min-w-0"> className="w-[50px] h-[70px] rounded object-cover"
<Link />
to={`/${item.id}`} <div className="flex flex-col gap-1.5 flex-1 min-w-0">
className="text-sm font-medium text-gray-200 hover:text-white transition-colors line-clamp-1" <span className="text-sm font-medium text-gray-200 group-hover:text-white transition-colors line-clamp-1">
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} {language === "EN" ? item.title : item.japanese_title}
> </span>
{language === "EN" ? item.title : item.japanese_title} <div className="flex flex-wrap items-center gap-2">
</Link> {item.tvInfo?.sub && (
<div className="flex flex-wrap items-center gap-2"> <div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300">
{item.tvInfo?.sub && ( <FontAwesomeIcon
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300"> icon={faClosedCaptioning}
<FontAwesomeIcon className="text-[10px]"
icon={faClosedCaptioning} />
className="text-[10px]" <span className="text-[10px] font-medium">
/> {item.tvInfo.sub}
<span className="text-[10px] font-medium"> </span>
{item.tvInfo.sub} </div>
)}
{item.tvInfo?.dub && (
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[10px]"
/>
<span className="text-[10px] font-medium">
{item.tvInfo.dub}
</span>
</div>
)}
{item.tvInfo?.showType && (
<span className="text-xs text-gray-400">
{item.tvInfo.showType}
</span> </span>
</div> )}
)} </div>
{item.tvInfo?.dub && (
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-[#2a2a2a] rounded text-gray-300">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[10px]"
/>
<span className="text-[10px] font-medium">
{item.tvInfo.dub}
</span>
</div>
)}
{item.tvInfo?.showType && (
<span className="text-xs text-gray-400">
{item.tvInfo.showType}
</span>
)}
</div> </div>
</div> </div>
</div> </Link>
</div> </div>
))} ))}
</div> </div>

2
src/pages/watch/Watch.jsx
View File

@@ -226,7 +226,7 @@ export default function Watch() {
}, [animeId, animeInfo]); }, [animeId, animeInfo]);
return ( return (
<div className="w-full min-h-screen bg-[#0a0a0a]"> <div className="w-full min-h-screen bg-[#0a0a0a]">
<div className="w-full max-w-[1920px] mx-auto px-6 pt-[80px] pb-12 max-[1200px]:pt-[48px] max-[1024px]:px-4 max-md:pt-[32px]"> <div className="w-full max-w-[1920px] mx-auto px-6 pt-[80px] pb-6 max-[1200px]:pt-[48px] max-[1024px]:px-4 max-md:pt-[32px]">
<div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col"> <div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
{/* Left Column - Player, Controls, Servers */} {/* Left Column - Player, Controls, Servers */}
<div className="flex flex-col w-full gap-6"> <div className="flex flex-col w-full gap-6">