+
{/* Image card linking to watch page */}
{
+ const fetchFirstEpisode = async () => {
+ if (anime?.info?.id) {
+ setIsLoadingEpisodes(true);
+ try {
+ const response = await fetchAnimeEpisodes(anime.info.id);
+ if (response.episodes && response.episodes.length > 0) {
+ // Get the first episode's episodeId
+ setFirstEpisodeId(response.episodes[0].episodeId);
+ console.log(`[AnimeDetails] First episode ID: ${response.episodes[0].episodeId}`);
+ }
+ } catch (error) {
+ console.error('[AnimeDetails] Error fetching episodes:', error);
+ } finally {
+ setIsLoadingEpisodes(false);
+ }
+ }
+ };
+
+ fetchFirstEpisode();
+ }, [anime?.info?.id]);
+
if (!anime?.info) {
return null;
}
@@ -29,6 +55,11 @@ export default function AnimeDetails({ anime }) {
const hasCharacters = info.characterVoiceActor?.length > 0 || info.charactersVoiceActors?.length > 0;
const hasVideos = info.promotionalVideos && info.promotionalVideos.length > 0;
+ // Build the watch URL based on the first episode ID or fallback
+ const watchUrl = firstEpisodeId
+ ? `/watch/${firstEpisodeId}`
+ : `/watch/${info.id}?ep=1`; // Fallback to old format if API fetch fails
+
// Video modal for promotional videos
const VideoModal = ({ video, onClose }) => {
if (!video) return null;
@@ -208,7 +239,7 @@ export default function AnimeDetails({ anime }) {
{/* Watch Button - Full Width on Mobile */}
{info.stats?.episodes && (info.stats.episodes.sub > 0 || info.stats.episodes.dub > 0) && (
diff --git a/src/components/EpisodeList.js b/src/components/EpisodeList.js
index 46c783c..fb5e478 100644
--- a/src/components/EpisodeList.js
+++ b/src/components/EpisodeList.js
@@ -52,21 +52,11 @@ export default function EpisodeList({ episodes, currentEpisode, onEpisodeClick,
};
}, [episodes, episodesPerPage]);
- // Helper function to normalize episode IDs for comparison
+ // Helper function for episode ID comparison
+ // The API returns episode IDs in the format: animeId?ep=episodeNumber
const normalizeEpisodeId = (id) => {
- if (!id) return '';
-
- // If it's already in ?ep= format
- if (id.includes('?ep=')) return id;
-
- // If it's in anime-name-number format
- const match = id.match(/^(.*?)-(\d+)$/);
- if (match) {
- const [, animeId, episodeNumber] = match;
- return `${animeId}?ep=${episodeNumber}`;
- }
-
- return id;
+ // Simply return the ID as-is since the API already provides the correct format
+ return id || '';
};
const filteredEpisodes = useMemo(() => {
@@ -97,9 +87,11 @@ export default function EpisodeList({ episodes, currentEpisode, onEpisodeClick,
const handleEpisodeSelect = (episode, e) => {
e.preventDefault();
if (onEpisodeClick && episode.id) {
+ // Use the episode ID directly as it's already in the correct format from the API
+ console.log(`[EpisodeList] Selected episode: ${episode.number}, ID: ${episode.id}`);
onEpisodeClick(episode.id);
+ setActiveEpisodeId(episode.id);
}
- setActiveEpisodeId(episode.id);
};
// Scroll active episode into view when page changes or active episode changes
diff --git a/src/components/SpotlightCarousel.js b/src/components/SpotlightCarousel.js
index 8210baa..c30f153 100644
--- a/src/components/SpotlightCarousel.js
+++ b/src/components/SpotlightCarousel.js
@@ -1,10 +1,11 @@
'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination, EffectFade } from 'swiper/modules';
+import { fetchAnimeEpisodes } from '@/lib/api';
// Import Swiper styles
import 'swiper/css';
@@ -14,12 +15,88 @@ import 'swiper/css/effect-fade';
const SpotlightCarousel = ({ items = [] }) => {
const [isClient, setIsClient] = useState(false);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [autoplay, setAutoplay] = useState(true);
+ const [progress, setProgress] = useState(0);
+ const [episodeIds, setEpisodeIds] = useState({});
+ const intervalRef = useRef(null);
+ const progressIntervalRef = useRef(null);
// Handle hydration mismatch
useEffect(() => {
setIsClient(true);
}, []);
+ // Fetch first episode IDs for all spotlight items
+ useEffect(() => {
+ const fetchEpisodeData = async () => {
+ const episodeData = {};
+
+ for (const item of items) {
+ if (item.id) {
+ try {
+ const response = await fetchAnimeEpisodes(item.id);
+ if (response.episodes && response.episodes.length > 0) {
+ episodeData[item.id] = response.episodes[0].episodeId;
+ }
+ } catch (error) {
+ console.error(`[SpotlightCarousel] Error fetching episodes for ${item.id}:`, error);
+ }
+ }
+ }
+
+ setEpisodeIds(episodeData);
+ };
+
+ if (items && items.length > 0) {
+ fetchEpisodeData();
+ }
+ }, [items]);
+
+ // Autoplay functionality
+ useEffect(() => {
+ if (autoplay && items.length > 1) {
+ // Clear any existing intervals
+ if (intervalRef.current) clearInterval(intervalRef.current);
+ if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+
+ // Set up new intervals
+ setProgress(0);
+ progressIntervalRef.current = setInterval(() => {
+ setProgress(prev => {
+ const newProgress = prev + 1;
+ return newProgress <= 100 ? newProgress : prev;
+ });
+ }, 50); // Update every 50ms to get smooth progress
+
+ intervalRef.current = setTimeout(() => {
+ setCurrentIndex(prevIndex => (prevIndex + 1) % items.length);
+ setProgress(0);
+ }, 5000);
+ }
+
+ return () => {
+ if (intervalRef.current) clearTimeout(intervalRef.current);
+ if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+ };
+ }, [autoplay, currentIndex, items.length]);
+
+ const handleDotClick = (index) => {
+ setCurrentIndex(index);
+ setProgress(0);
+ // Reset autoplay timer when manually changing slides
+ if (intervalRef.current) clearTimeout(intervalRef.current);
+ if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+ if (autoplay) {
+ intervalRef.current = setTimeout(() => {
+ setCurrentIndex((index + 1) % items.length);
+ }, 5000);
+ }
+ };
+
+ const handleMouseEnter = () => setAutoplay(false);
+ const handleMouseLeave = () => setAutoplay(true);
+
// If no items or not on client yet, show loading state
if (!isClient || !items.length) {
return (
@@ -32,6 +109,13 @@ const SpotlightCarousel = ({ items = [] }) => {
);
}
+ const currentItem = items[currentIndex];
+
+ // Get the watch URL for the current item
+ const watchUrl = episodeIds[currentItem.id]
+ ? `/watch/${episodeIds[currentItem.id]}`
+ : `/watch/${currentItem.id}?ep=1`; // Fallback to old format if API fetch fails
+
return (
{
}}
loop={true}
className="rounded-xl overflow-hidden"
+ onSlideChange={(swiper) => {
+ setCurrentIndex(swiper.realIndex);
+ setProgress(0);
+ // Reset autoplay timer when manually changing slides
+ if (intervalRef.current) clearTimeout(intervalRef.current);
+ if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+ if (autoplay) {
+ intervalRef.current = setTimeout(() => {
+ setCurrentIndex((swiper.realIndex + 1) % items.length);
+ }, 5000);
+ }
+ }}
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
>
{items.map((anime, index) => (
@@ -131,7 +229,7 @@ const SpotlightCarousel = ({ items = [] }) => {
{/* Buttons - Below title on mobile, right side on desktop */}