Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v0 #1

Merged
merged 70 commits into from
Jan 28, 2025
Merged

v0 #1

Changes from 1 commit
Commits
Show all changes
70 commits
Select commit Hold shift + click to select a range
97ffdeb
added an navbar component
GokuxSS4 Oct 1, 2024
ac2cdff
added an spotlight slider
GokuxSS4 Oct 2, 2024
99a8ef9
move to react-slick for carosual and some minor changes
GokuxSS4 Oct 3, 2024
3d44e7b
update linear grident in spotlight and modified the order of btns in …
GokuxSS4 Oct 3, 2024
cfe3256
modified trending and spotlight component
GokuxSS4 Oct 5, 2024
65eccbd
modified layout and trending
GokuxSS4 Oct 5, 2024
f830fa1
modified the navbar
GokuxSS4 Oct 6, 2024
b3dbaeb
fix prev and next btn styles and modified the layout and added boilar…
GokuxSS4 Oct 8, 2024
987e2b2
temp
GokuxSS4 Oct 26, 2024
1bba5df
Added an LatestEpisode and TopUpcoming
GokuxSS4 Oct 26, 2024
a3c8172
added an footer
GokuxSS4 Oct 27, 2024
c8d80ec
added an types for better type safety
GokuxSS4 Oct 27, 2024
4b24b89
updated an navbar & layout structure
GokuxSS4 Oct 27, 2024
d05c3bc
restructure the home page
GokuxSS4 Oct 27, 2024
ce55589
updated an top10anime component
GokuxSS4 Oct 27, 2024
51d1bf3
make an common componet dir,add primary and secondary color in tailwi…
GokuxSS4 Oct 28, 2024
78e698d
Added an search bar component
GokuxSS4 Oct 28, 2024
fac7b59
added show more/less functionality on top10 & estrimated scheduel com…
GokuxSS4 Oct 28, 2024
77a3e2f
update treding component & scheduel component episode item
GokuxSS4 Oct 28, 2024
b03aa64
Added an debounce in search component
GokuxSS4 Oct 29, 2024
eed20d5
make responsive search bar,latest epsiodes top upcoming
GokuxSS4 Oct 29, 2024
23098cc
make the responsive spotlight component
GokuxSS4 Oct 30, 2024
eb1d3c0
make trending component responsive
GokuxSS4 Oct 30, 2024
f531926
made an estimated scheduel responsive
GokuxSS4 Oct 30, 2024
90e6cc9
make the responsive the topanime component
GokuxSS4 Oct 30, 2024
0827e8e
make the responsive the topanime component
GokuxSS4 Oct 30, 2024
42378d9
make the footer responsive
GokuxSS4 Oct 30, 2024
05463b5
added an skeleton for estimated scheduel
GokuxSS4 Oct 30, 2024
77c6bcb
filter out unique top airing animes
GokuxSS4 Oct 30, 2024
1dddc6e
update an fonts
GokuxSS4 Oct 30, 2024
2329cf5
added an details button in spotlight
GokuxSS4 Oct 31, 2024
4505527
intial setup for details page
GokuxSS4 Nov 1, 2024
b4dbe1d
make the breakpoints changes onto trending component
GokuxSS4 Nov 1, 2024
82bc3f0
added an related anime component updates the content on home page
GokuxSS4 Nov 1, 2024
b58e019
add an seasons and lead characters component
GokuxSS4 Nov 2, 2024
a118f61
updated the slidebar buttons
GokuxSS4 Nov 2, 2024
5597233
added an redirection to details page for necessary components and imp…
GokuxSS4 Nov 2, 2024
3a13544
added an watch page
GokuxSS4 Nov 9, 2024
459788b
update the layout of watch page
GokuxSS4 Nov 9, 2024
5c3d33b
fix the skeleton
GokuxSS4 Nov 9, 2024
76ba4f9
search results show all displayed
GokuxSS4 Nov 10, 2024
b78b893
added hover effects on components
GokuxSS4 Nov 10, 2024
e84741d
add an error and not found page
GokuxSS4 Nov 10, 2024
78fc4bf
fix the watch now bug for top upcomings
GokuxSS4 Nov 10, 2024
8a08861
fix the redirection of details page in latest episode and recommended…
GokuxSS4 Nov 10, 2024
5608e12
fix(carousel):Update the trending and related anime carosuel
GokuxSS4 Dec 7, 2024
d8ab913
temp(video player):Improve the videoplayer style
GokuxSS4 Dec 16, 2024
7bfd410
fix(styles):Improved the styles
GokuxSS4 Dec 16, 2024
42d64dc
fix(style):fix the small device style in carousel items
GokuxSS4 Dec 16, 2024
d5a77fe
fix(style):Watch page
GokuxSS4 Dec 27, 2024
46e449d
fix(docker)
GokuxSS4 Dec 27, 2024
2d65ce3
feat(docker):added an docker compose
GokuxSS4 Dec 28, 2024
7b7c712
feat(app):make a pwa app
GokuxSS4 Dec 28, 2024
1c47049
fix(major):add eslint
GokuxSS4 Dec 28, 2024
c3a71fa
added dev docker image for app and update and docker compose
GokuxSS4 Dec 31, 2024
654e353
added an lint and format stage in ci
GokuxSS4 Dec 31, 2024
e3d5ab6
added an docker image of hls proxy also added into docker compose
GokuxSS4 Dec 31, 2024
a34d702
updated an production docker image and update build cmd for next app
GokuxSS4 Jan 4, 2025
f70861c
added ci-cd workflow
GokuxSS4 Jan 4, 2025
31bbfc1
added the infra image update in ci
GokuxSS4 Jan 13, 2025
eec5dff
support https hls proxy
GokuxSS4 Jan 15, 2025
98d7e5a
hls tls image
GokuxSS4 Jan 18, 2025
751b5e9
added an hls prod image
GokuxSS4 Jan 18, 2025
6ccdbee
fix the show more/less for the anime overview
GokuxSS4 Jan 21, 2025
7eab9cb
added an aniweeb logos
GokuxSS4 Jan 25, 2025
430b4ee
added an opengraph image along with metadata
GokuxSS4 Jan 26, 2025
248abfe
Replace img tag with nextjs Image component
GokuxSS4 Jan 26, 2025
07d2300
fix the seek forward and backward for video player
GokuxSS4 Jan 26, 2025
87178c0
fix opengraph image issue
GokuxSS4 Jan 26, 2025
28037d1
added an google analytics support
GokuxSS4 Jan 26, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
modified trending and spotlight component
  • Loading branch information
GokuxSS4 committed Oct 5, 2024
commit cfe3256016b3be03395abf8f77730b958ec9722a
2 changes: 1 addition & 1 deletion app/layout.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import "slick-carousel/slick/slick-theme.css";

export const metadata: Metadata = {
title:
"Aniweeb · Watch Free Anime Online · Stream Subbed & Dubbed Anime in HD",
"Aniweeb · Free Anime Streaming",
description: "Streaming anime platfrom for hardcore anime fans",
icons: {
icon: "icons/aniweeb_icon.svg",
5 changes: 4 additions & 1 deletion app/page.tsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import { Trending } from "@/components/Trending";

export default async function Home() {
const homePageDetails = await getHomePage();
console.log(homePageDetails.trendingAnimes);
console.log(homePageDetails.spotlightAnimes);
return (
<div className="w-screen h-screen text-white">
<div className="relative">
@@ -16,6 +16,9 @@ export default async function Home() {
<div className="mt-[540px]"></div>
<div className="w-full">
<Trending aniList={homePageDetails.trendingAnimes} />
<div className="w-full h-11">

</div>
</div>
</div>
);
3 changes: 2 additions & 1 deletion components/SpotLight.tsx
Original file line number Diff line number Diff line change
@@ -54,7 +54,8 @@ export function SpotLight({ spotLightAnimes }: { spotLightAnimes: any }) {
<div
className="absolute inset-0 bg-gradient-to-r from-black via-black/50 to-transparent "
style={{
background: 'linear-gradient(0deg, #201f31 0%, rgba(32,31,49,0) 50%, #201f31 100%), linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%)',
background:
"linear-gradient(0deg, #201f31 0%, rgba(32,31,49,0) 50%, #201f31 100%), linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%)",
}}
/>
</div>
167 changes: 105 additions & 62 deletions components/Trending.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
"use client";

import React, { useRef, useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import Slider from "react-slick";
import Image from "next/image";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa6";

export function Trending({ aniList }: { aniList: any }) {
let sliderRef = useRef(null);
const sliderRef = useRef(null);

const next = () => {
if (sliderRef && sliderRef.current) {
@@ -20,88 +20,131 @@ export function Trending({ aniList }: { aniList: any }) {
}
};

const [isLoading,setIsloading] = useState(true);

const [currentSlide, setCurrentSlide] = useState(0);
const [slidesToShow, setSlidesToShow] = useState(6);

const updateSlidesToShow = () => {
const width = window.innerWidth;

if (width < 500) { // For mobile screens
setSlidesToShow(1);
} else if (width < 700) { // For tablets
setSlidesToShow(2);
} else if (width < 900) { // For larger tablets
setSlidesToShow(3);
} else if (width < 1100) { // For small desktops
setSlidesToShow(4);
} else if (width < 1356) { // For larger desktops
setSlidesToShow(5);
} else { // For very large screens
setSlidesToShow(6);
}
};


useEffect(() => {
// Set initial slidesToShow based on the window size
updateSlidesToShow();
setIsloading(false)


// Define the resize handler
const handleResize = () => {
updateSlidesToShow();
};

// Add resize event listener
window.addEventListener("resize", handleResize);

// Cleanup listener on component unmount
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);


const settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 6,
slidesToShow: slidesToShow, // default for large screens
slidesToScroll: 1,
arrows: false,
swipeToSlide: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
beforeChange: (current: any, next: any) => {
setCurrentSlide(next);
},
};

const numItems = aniList.length;
const showPrevArrow = currentSlide > 0;
const showNextArrow = currentSlide + settings.slidesToShow < numItems;

return (
<div className="w-11/12 h-full mx-auto p-6 relative">
<p className="text-2xl text-white mb-4">Trending Anime</p>
<div className="relative slider-container">
<div
className="absolute right-0 top-0 bottom-0 z-10 flex flex-col h-11/12 w-4 p-2"
style={{ right: "-10px" }}
>
<div className="h-full rounded-full flex flex-col-reverse items-center justify-around gap-2 -mt-1">
<div className="w-11/12 h-full p-6 mx-auto">
<p className="text-2xl text-purple-500 font-bold mb-4">Trending</p>
{
!isLoading && (
<div className="slider-container flex">
<div className="w-full">
<Slider
ref={(slider: any) => {
sliderRef.current = slider;
}}
{...settings}
>
{aniList.map((anime: any) => (
<div key={anime.id} className="transform transition-transform duration-500 hover:-translate-y-2 group">
<div className="w-48 gap-2 p-2 flex flex-col flex-shrink-0">
<Image
src={anime.poster}
alt={anime.name}
width={185}
height={265}
priority={true}
className="rounded-md"
/>
<p className="line-clamp-2 text-white text-sm">
<span className="font-bold text-purple-400 mr-2">#{anime.rank}</span>{anime.name}
</p>
</div>
</div>
))}
</Slider>
</div>

<div className="rounded-full flex flex-col-reverse items-center justify-around gap-2">
<button
onClick={previous}
className="grow bg-white-10 hover:bg-purple-500 rounded-lg p-2 text-white flex items-center justify-center hover:bg-opacity-75 transition-all duration-200 focus:outline-none"
disabled={!showPrevArrow}
className={`grow rounded-lg p-2 text-white flex items-center justify-center transition-all duration-200 focus:outline-none
${
!showPrevArrow
? "bg-gray-400 cursor-not-allowed opacity-50"
: "bg-white bg-opacity-10 hover:bg-purple-500 hover:bg-opacity-75"
}`}
>
<FaChevronLeft size={24} />
</button>
<button
onClick={next}
className="grow bg-white-10 hover:bg-purple-500 rounded-lg p-2 text-white flex items-center justify-center hover:bg-opacity-75 transition-all duration-200 focus:outline-none"
disabled={!showNextArrow}
className={`grow rounded-lg p-2 text-white flex items-center justify-center transition-all duration-200 focus:outline-none
${
!showNextArrow
? "bg-gray-400 cursor-not-allowed opacity-50"
: "bg-white bg-opacity-10 hover:bg-purple-500 hover:bg-opacity-75"
}`}
>
<FaChevronRight size={24} />
</button>
</div>
</div>

<Slider
ref={(slider: null) => {
sliderRef.current = slider;
}}
{...settings}
>
{aniList.map((anime: any) => (
<div key={anime.id}>
<div className="w-48 h-72 flex flex-col flex-shrink-0">
<Image
src={anime.poster}
alt={anime.name}
width={185}
height={265}
priority={true}
className="rounded-md"
/>
<p className="line-clamp-2 text-white mt-2 text-sm">
{anime.name}
</p>
</div>
</div>
))}
</Slider>
</div>
)
}

</div>
);
}