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

updated continue watching

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-31 22:35:03 +05:30
parent 8ee1ff1754
commit 4b71110a95
1 changed files with 32 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/continue/ContinueWatching.jsx
View File

@@ -20,7 +20,6 @@ const ContinueWatching = () => {
setWatchList(data); setWatchList(data);
}, []); }, []);
// Memoize watchList to avoid unnecessary re-renders
const memoizedWatchList = useMemo(() => watchList, [watchList]); const memoizedWatchList = useMemo(() => watchList, [watchList]);
const removeFromWatchList = (episodeId) => { const removeFromWatchList = (episodeId) => {
@@ -36,37 +35,37 @@ const ContinueWatching = () => {
if (memoizedWatchList.length === 0) return null; if (memoizedWatchList.length === 0) return null;
return ( return (
<div className="mt-6 max-[1200px]:px-6 max-md:px-0"> <div className="mt-8 max-[1200px]:px-6 max-md:px-0">
<div className="flex items-center justify-between max-md:pl-4"> <div className="flex items-center justify-between max-md:pl-4 mb-6">
<div className="flex items-center gap-x-2 justify-center"> <div className="flex items-center gap-x-3 justify-center">
<FaHistory className="text-[#ffbade]" /> <FaHistory className="text-gray-200 text-xl" />
<h1 className="text-[#ffbade] text-2xl font-bold max-[450px]:text-xl max-[450px]:mb-1 max-[350px]:text-lg"> <h1 className="text-gray-200 text-2xl font-bold tracking-tight max-[450px]:text-xl max-[450px]:mb-1 max-[350px]:text-lg">
Continue Watching Continue Watching
</h1> </h1>
</div> </div>
<div className="flex gap-x-2 pr-2 max-[350px]:hidden"> <div className="flex gap-x-3 pr-2 max-[350px]:hidden">
<button className="continue-btn-prev bg-gray-700 text-white p-3 rounded-full hover:bg-gray-500 transition max-[768px]:p-2"> <button className="continue-btn-prev bg-gray-800 text-gray-300 p-3 rounded-lg hover:bg-gray-700 hover:text-white transition-all duration-300 shadow-lg">
<FaChevronLeft className="text-xs" /> <FaChevronLeft className="text-sm" />
</button> </button>
<button className="continue-btn-next bg-gray-700 text-white p-3 rounded-full hover:bg-gray-500 transition max-[768px]:p-2"> <button className="continue-btn-next bg-gray-800 text-gray-300 p-3 rounded-lg hover:bg-gray-700 hover:text-white transition-all duration-300 shadow-lg">
<FaChevronRight className="text-xs" /> <FaChevronRight className="text-sm" />
</button> </button>
</div> </div>
</div> </div>
<div className="relative mx-auto overflow-hidden z-[1] mt-6 max-[450px]:mt-3"> <div className="relative mx-auto overflow-hidden z-[1]">
<Swiper <Swiper
ref={swiperRef} ref={swiperRef}
className="w-full h-full" className="w-full h-full"
slidesPerView={3} slidesPerView={3}
spaceBetween={15} spaceBetween={20}
breakpoints={{ breakpoints={{
640: { slidesPerView: 4, spaceBetween: 15 }, 640: { slidesPerView: 4, spaceBetween: 20 },
768: { slidesPerView: 4, spaceBetween: 15 }, 768: { slidesPerView: 4, spaceBetween: 20 },
1024: { slidesPerView: 5, spaceBetween: 15 }, 1024: { slidesPerView: 5, spaceBetween: 24 },
1300: { slidesPerView: 6, spaceBetween: 15 }, 1300: { slidesPerView: 6, spaceBetween: 24 },
1600: { slidesPerView: 7, spaceBetween: 20 }, 1600: { slidesPerView: 7, spaceBetween: 28 },
}} }}
modules={[Navigation]} modules={[Navigation]}
navigation={{ navigation={{
@@ -79,9 +78,9 @@ const ContinueWatching = () => {
key={index} key={index}
className="text-center flex justify-center items-center" className="text-center flex justify-center items-center"
> >
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden"> <div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group">
<button <button
className="absolute top-2 right-2 bg-black text-white px-3 py-2 bg-opacity-60 rounded-full text-sm z-10 font-extrabold hover:bg-white hover:text-black transition-all" className="absolute top-3 right-3 bg-black/70 text-gray-300 w-8 h-8 flex items-center justify-center rounded-lg text-sm z-10 font-medium hover:bg-white hover:text-black transition-all duration-300"
onClick={() => removeFromWatchList(item.episodeId)} onClick={() => removeFromWatchList(item.episodeId)}
> >
✖ ✖
@@ -89,34 +88,36 @@ const ContinueWatching = () => {
<Link <Link
to={`/watch/${item?.id}?ep=${item.episodeId}`} to={`/watch/${item?.id}?ep=${item.episodeId}`}
className="inline-block bg-[#2a2c31] absolute left-0 top-0 w-full h-full group" className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group"
> >
<img <img
src={`${item?.poster}`} src={`${item?.poster}`}
alt={item?.title} alt={item?.title}
className="block w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:blur-[4px]" className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
title={item?.title} title={item?.title}
loading="lazy" loading="lazy"
/> />
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon <FontAwesomeIcon
icon={faPlay} icon={faPlay}
className="text-[50px] text-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[10000] max-[450px]:text-[36px]" className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/> />
</div> </div>
</div>
</Link> </Link>
{item?.adultContent === true && ( {item?.adultContent === true && (
<div className="text-white px-2 rounded-md bg-[#FF5700] absolute top-2 left-2 flex items-center justify-center text-[14px] font-bold"> <div className="text-white px-3 py-1 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[14px] font-bold">
18+ 18+
</div> </div>
)} )}
<div className="absolute bottom-0 left-0 flex flex-col gap-y-2 right-0 p-2 bg-gradient-to-t from-black via-black/80 to-transparent max-[450px]:gap-y-1"> <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/90 to-transparent">
<p className="text-white text-md font-bold text-left truncate max-[450px]:text-sm"> <p className="text-gray-100 text-md font-bold text-left truncate mb-2 max-[450px]:text-sm">
{language === "EN" {language === "EN"
? item?.title ? item?.title
: item?.japanese_title} : item?.japanese_title}
</p> </p>
<p className="text-gray-300 text-sm font-semibold text-left max-[450px]:text-[12px]"> <p className="text-gray-400 text-sm font-medium text-left max-[450px]:text-[12px]">
Episode {item.episodeNum} Episode {item.episodeNum}
</p> </p>
</div> </div>