diff --git a/package-lock.json b/package-lock.json index 732c658..f7a61b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.1.0", "dependencies": { "@heroicons/react": "^2.2.0", + "@vercel/analytics": "^1.5.0", + "@vercel/speed-insights": "^1.2.0", "hls.js": "^1.5.7", "next": "latest", "proxy-from-env": "^1.1.0", @@ -1611,6 +1613,79 @@ "win32" ] }, + "node_modules/@vercel/analytics": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.5.0.tgz", + "integrity": "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==", + "license": "MPL-2.0", + "peerDependencies": { + "@remix-run/react": "^2", + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@remix-run/react": { + "optional": true + }, + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, + "node_modules/@vercel/speed-insights": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.2.0.tgz", + "integrity": "sha512-y9GVzrUJ2xmgtQlzFP2KhVRoCglwfRQgjyfY607aU0hh0Un6d0OUyrJkjuAlsV18qR4zfoFPs/BiIj9YDS6Wzw==", + "hasInstallScript": true, + "license": "Apache-2.0", + "peerDependencies": { + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/acorn": { "version": "8.14.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", diff --git a/package.json b/package.json index 58976c1..48b5f2e 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@heroicons/react": "^2.2.0", + "@vercel/analytics": "^1.5.0", + "@vercel/speed-insights": "^1.2.0", "hls.js": "^1.5.7", "next": "latest", "proxy-from-env": "^1.1.0", diff --git a/src/app/anime/[id]/page.js b/src/app/anime/[id]/page.js index d430982..a50221a 100644 --- a/src/app/anime/[id]/page.js +++ b/src/app/anime/[id]/page.js @@ -72,14 +72,9 @@ const NotFoundState = () => ( // Main anime content component const AnimeContent = async ({ id }) => { try { - console.log('[AnimeInfo] Fetching info for ID:', id); - const anime = await fetchAnimeInfo(id); - console.log('[AnimeInfo] API Response received:', anime ? 'success' : 'empty'); - if (!anime || !anime.info) { - console.error('[AnimeInfo] Missing required anime data'); return ; } @@ -89,7 +84,6 @@ const AnimeContent = async ({ id }) => { ); } catch (error) { - console.error('[AnimeInfo] Error:', error.message); return ; } }; diff --git a/src/app/layout.js b/src/app/layout.js index 06fce65..d25115b 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,4 +1,6 @@ import { Geist, Geist_Mono } from "next/font/google"; +import { Analytics } from "@vercel/analytics/next"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import "./globals.css"; const geistSans = Geist({ @@ -24,6 +26,8 @@ export default function RootLayout({ children }) {
{children}
+ + ); diff --git a/src/components/AnimeDetails.js b/src/components/AnimeDetails.js index e1ca730..192ca8e 100644 --- a/src/components/AnimeDetails.js +++ b/src/components/AnimeDetails.js @@ -13,8 +13,6 @@ export default function AnimeDetails({ anime }) { const [synopsisOverflows, setSynopsisOverflows] = useState(false); const synopsisRef = useRef(null); - console.log('AnimeDetails received:', anime); - // Check if synopsis overflows when component mounts or when content changes useEffect(() => { if (synopsisRef.current) { @@ -24,7 +22,6 @@ export default function AnimeDetails({ anime }) { }, [anime?.info?.description, activeTab]); if (!anime?.info) { - console.error('Invalid anime data structure:', anime); return null; } @@ -37,13 +34,13 @@ export default function AnimeDetails({ anime }) { if (!video) return null; return ( -
-
+
+
@@ -75,8 +72,8 @@ export default function AnimeDetails({ anime }) { {/* Video Modal */} {activeVideo && setActiveVideo(null)} />} - {/* Background Image with Gradient Overlay */} -
+ {/* Background Image with Gradient Overlay - Desktop Only */} +
{info.poster && ( <> {/* Main Content */} -
- {/* Header Section - Title and Basic Info */} -
+
+ {/* MOBILE LAYOUT - Only visible on mobile */} +
+
+ {/* Mobile Header with Title + Rating */} +
+

{info.name}

+ {info.stats?.rating && ( +
+ + + + {info.stats.rating} +
+ )} +
+ + {/* Japanese Title */} + {moreInfo?.japanese && ( +

{moreInfo.japanese}

+ )} + + {/* Mobile Two-Column Layout */} +
+ {/* Left Column - Poster */} +
+
+
+ {info.name} +
+
+
+ + {/* Right Column - Info Card */} +
+ {/* Type & Episodes on same row */} +
+ {info.stats?.type && ( +
{info.stats.type}
+ )} + + {info.stats?.episodes && ( +
+ {info.stats.episodes.sub > 0 && `Sub: ${info.stats.episodes.sub}`} + {info.stats.episodes.dub > 0 && info.stats.episodes.sub > 0 && ' • '} + {info.stats.episodes.dub > 0 && `Dub: ${info.stats.episodes.dub}`} +
+ )} +
+ + {/* Clean Info Layout */} +
+ {/* Status */} + {moreInfo?.status && ( +
+ Status: + {getStatusWithAired()} +
+ )} + + {/* Quality */} + {info.stats?.quality && ( +
+ Quality: + {info.stats.quality} +
+ )} + + {/* Duration */} + {info.stats?.duration && ( +
+ Duration: + {info.stats.duration} +
+ )} + + {/* Studio */} + {moreInfo?.studios && ( +
+ Studio: + {moreInfo.studios} +
+ )} +
+ + {/* Mobile Genres */} + {moreInfo?.genres && moreInfo.genres.length > 0 && ( +
+ {moreInfo.genres.slice(0, 5).map((genre, index) => ( + + {genre} + + ))} + {moreInfo.genres.length > 5 && ( + +{moreInfo.genres.length - 5} + )} +
+ )} +
+
+ + {/* Watch Button - Full Width on Mobile */} + {info.stats?.episodes && (info.stats.episodes.sub > 0 || info.stats.episodes.dub > 0) && ( + + + + + Start Watching + + )} +
+
+ + {/* DESKTOP LAYOUT - Only visible on desktop */} +
{/* Poster */} -
+
- {/* Watch Button - Mobile & Desktop */} + {/* Watch Button - Desktop */} {info.stats?.episodes && (info.stats.episodes.sub > 0 || info.stats.episodes.dub > 0) && ( @@ -129,56 +261,56 @@ export default function AnimeDetails({ anime }) {
{/* Title and Metadata */} -
+
{/* Title Section */} -
-

+
+

{info.name}

{moreInfo?.japanese && ( -

{moreInfo.japanese}

+

{moreInfo.japanese}

)} {/* Synonyms */} {moreInfo?.synonyms && ( -
-

{moreInfo.synonyms}

+
+

{moreInfo.synonyms}

)}
{/* Status Badges */} -
+
{info.stats?.rating && ( -
+
- {info.stats.rating} + {info.stats.rating}
)} {/* Status with Aired Date */} {moreInfo?.status && ( -
+
{getStatusWithAired()}
)} {info.stats?.type && ( -
+
{info.stats.type}
)} {info.stats?.episodes && ( -
+
{info.stats.episodes.sub > 0 && `SUB ${info.stats.episodes.sub}`} {info.stats.episodes.dub > 0 && info.stats.episodes.sub > 0 && ' | '} {info.stats.episodes.dub > 0 && `DUB ${info.stats.episodes.dub}`} @@ -186,30 +318,30 @@ export default function AnimeDetails({ anime }) { )} {info.stats?.quality && ( -
+
{info.stats.quality}
)} {info.stats?.duration && ( -
+
{info.stats.duration}
)}
{/* Genres & Studios */} -
+
{/* Genres */} {moreInfo?.genres && moreInfo.genres.length > 0 && (
-

Genres

-
+

Genres

+
{moreInfo.genres.map((genre, index) => ( {genre} @@ -221,9 +353,9 @@ export default function AnimeDetails({ anime }) { {/* Studios */} {moreInfo?.studios && (
-

Studios

-
-
+

Studios

+
+
{moreInfo.studios}
@@ -233,51 +365,54 @@ export default function AnimeDetails({ anime }) {
- {/* Details Tabs - Synopsis, Characters, Videos */} -
+ {/* Tabs Section - Different for Mobile/Desktop */} +
{/* Tab Navigation */} -
+
+ {/* Synopsis Tab */} + {/* Characters Tab */} {hasCharacters && ( )} + {/* Videos Tab */} {hasVideos && ( )}
{/* Tab Content */} -
+
{/* Synopsis Tab */} {activeTab === 'synopsis' && ( -
+

{info.description || 'No description available for this anime.'}

{synopsisOverflows && ( @@ -287,46 +422,44 @@ export default function AnimeDetails({ anime }) { {/* Characters Tab */} {activeTab === 'characters' && hasCharacters && ( -
+
{(info.characterVoiceActor || info.charactersVoiceActors || []).map((item, index) => ( -
-
- {/* Character Image - No padding */} -
- {item.character.name} -
- - {/* Text content in the middle */} -
-
- {/* Character Name */} -
-

{item.character.name}

-

{item.character.cast || 'Main'}

-
- - {/* Voice Actor Name */} -
-

{item.voiceActor.name}

-

{item.voiceActor.cast || 'Japanese'}

-
+
+ {/* Character Image */} +
+ {item.character.name} +
+ + {/* Text content in the middle */} +
+
+ {/* Character Name */} +
+

{item.character.name}

+

{item.character.cast || 'Main'}

+
+ + {/* Voice Actor Name */} +
+

{item.voiceActor.name}

+

{item.voiceActor.cast || 'Japanese'}

- - {/* Voice Actor Image - No padding */} -
- {item.voiceActor.name} -
+
+ + {/* Voice Actor Image */} +
+ {item.voiceActor.name}
))} @@ -335,16 +468,16 @@ export default function AnimeDetails({ anime }) { {/* Videos Tab */} {activeTab === 'videos' && hasVideos && ( -
+
{info.promotionalVideos.map((video, index) => (
setActiveVideo(video)} >
-
- +
+
diff --git a/src/lib/api.js b/src/lib/api.js index 1f8be12..6c881de 100644 --- a/src/lib/api.js +++ b/src/lib/api.js @@ -174,13 +174,11 @@ export const fetchTrending = async () => { export const fetchAnimeInfo = async (id) => { try { if (!id) { - console.error('Invalid anime ID provided'); return null; } const encodedId = encodeURIComponent(id); const url = `${API_BASE_URL}/anime/${encodedId}`; - console.log('[API Call] Fetching anime info from:', url); // Server-side fetch doesn't need credentials or mode settings const requestOptions = { @@ -192,37 +190,29 @@ export const fetchAnimeInfo = async (id) => { // Handle failed requests gracefully if (!response.ok) { - console.error(`[API Error] Status: ${response.status}`); return createFallbackAnimeData(id); } // Parse the JSON response const data = await response.json(); - console.log('[API Response]', data); // Check if the response is successful if (!data.success && data.status !== 200) { - console.error('[API Error] Invalid response format:', data); return createFallbackAnimeData(id); } // The data structure might be nested in different ways depending on the API const responseData = data.data || data; - - // Log the data structure for debugging - console.log('[API Data Structure]', JSON.stringify(responseData, null, 2)); // Extract the anime data from the response const animeData = responseData.anime; if (!animeData) { - console.error('[API Error] Missing anime data in response:', responseData); return createFallbackAnimeData(id); } // Create mock characterVoiceActor data if missing if (!animeData.info?.characterVoiceActor || !Array.isArray(animeData.info?.characterVoiceActor) || animeData.info?.characterVoiceActor.length === 0) { - console.log('[API Fix] Adding mock characterVoiceActor data'); // Ensure the info object exists if (!animeData.info) animeData.info = {}; @@ -269,7 +259,6 @@ export const fetchAnimeInfo = async (id) => { // Check the raw API response structure for characterVoiceActor if (animeData.info) { - console.log('[API Debug] Raw info keys:', Object.keys(animeData.info)); console.log('[API Debug] Raw charactersVoiceActors type:', animeData.info.charactersVoiceActors ? typeof animeData.info.charactersVoiceActors + ' ' + @@ -300,11 +289,9 @@ export const fetchAnimeInfo = async (id) => { // Explicit validation of charactersVoiceActors data (note the "s" in characters) const charData = animeData.info?.charactersVoiceActors; if (!charData) { - console.warn('[API Warning] charactersVoiceActors is missing'); return []; } if (!Array.isArray(charData)) { - console.warn('[API Warning] charactersVoiceActors is not an array:', typeof charData); return []; } @@ -374,7 +361,6 @@ export const fetchAnimeInfo = async (id) => { : [] }; } catch (error) { - console.error('[API Error] Error fetching anime info:', error); return createFallbackAnimeData(id); } };