mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 15:54:39 +00:00
New Home page, New UI, Proxy api requests through next.js api routes
This commit is contained in:
parent
49b9ac069f
commit
a30ddcfc6a
GPG key ID:
858E8EE696525EED
20 changed files with 5385 additions and 0 deletions
3
.eslintrc.json
Normal file
3
.eslintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "next/core-web-vitals"
|
||||||
|
}
|
||||||
36
README.md
Normal file
36
README.md
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
# or
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||||
11
app/App.jsx
Normal file
11
app/App.jsx
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { Navbar } from "./components/Navbar/Navbar";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
export const App = (props) => {
|
||||||
|
return (
|
||||||
|
<body className={`${inter.className} overflow-x-hidden`}>
|
||||||
|
<Navbar />
|
||||||
|
{props.children}
|
||||||
|
</body>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
app/api/config.js
Normal file
27
app/api/config.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
export const API_URL = "https://api.anixart.tv";
|
||||||
|
export const USER_AGENT =
|
||||||
|
"AnixartApp/8.2.1-23121216 (Android 11; SDK 30; arm64-v8a;)";
|
||||||
|
|
||||||
|
export const ENDPOINTS = {
|
||||||
|
release: {
|
||||||
|
info: `${API_URL}/release`,
|
||||||
|
episode: `${API_URL}/episode`,
|
||||||
|
},
|
||||||
|
profile: `${API_URL}/profile`,
|
||||||
|
filter: `${API_URL}/filter`,
|
||||||
|
auth: `${API_URL}/auth/signIn`,
|
||||||
|
user: {
|
||||||
|
history: `${API_URL}/history`,
|
||||||
|
watching: `${API_URL}/profile/list/all/1`,
|
||||||
|
planned: `${API_URL}/profile/list/all/2`,
|
||||||
|
watched: `${API_URL}/profile/list/all/3`,
|
||||||
|
delayed: `${API_URL}/profile/list/all/4`,
|
||||||
|
abandoned: `${API_URL}/profile/list/all/5`,
|
||||||
|
favorite: `${API_URL}/favorite`,
|
||||||
|
},
|
||||||
|
search: `${API_URL}/search/releases`,
|
||||||
|
statistic: {
|
||||||
|
addHistory: `${API_URL}/history/add`,
|
||||||
|
markWatched: `${API_URL}/episode/watch`,
|
||||||
|
},
|
||||||
|
};
|
||||||
42
app/api/home/route.js
Normal file
42
app/api/home/route.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { fetchDataViaPost } from "../utils";
|
||||||
|
import { ENDPOINTS } from "../config";
|
||||||
|
|
||||||
|
export async function GET(request) {
|
||||||
|
const page = parseInt(request.nextUrl.searchParams.get(["page"])) || 0;
|
||||||
|
const status = request.nextUrl.searchParams.get(["status"]) || null;
|
||||||
|
|
||||||
|
let statusId;
|
||||||
|
if (status == "last" || !status) {
|
||||||
|
statusId = null;
|
||||||
|
} else if (status == "finished") {
|
||||||
|
statusId = 1;
|
||||||
|
} else if (status == "ongoing") {
|
||||||
|
statusId = 2;
|
||||||
|
} else if (status == "announce") {
|
||||||
|
statusId = 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
country: null,
|
||||||
|
season: null,
|
||||||
|
sort: 0,
|
||||||
|
studio: null,
|
||||||
|
age_ratings: [],
|
||||||
|
category_id: null,
|
||||||
|
end_year: null,
|
||||||
|
episode_duration_from: null,
|
||||||
|
episode_duration_to: null,
|
||||||
|
episodes_from: null,
|
||||||
|
episodes_to: null,
|
||||||
|
genres: [],
|
||||||
|
profile_list_exclusions: [],
|
||||||
|
start_year: null,
|
||||||
|
status_id: statusId,
|
||||||
|
types: [],
|
||||||
|
is_genres_exclude_mode_enabled: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetchDataViaPost(`${ENDPOINTS.filter}/${page}`, data);
|
||||||
|
return NextResponse.json(response);
|
||||||
|
}
|
||||||
31
app/api/utils.js
Normal file
31
app/api/utils.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { USER_AGENT } from "./config";
|
||||||
|
export const HEADERS = {
|
||||||
|
"User-Agent": USER_AGENT,
|
||||||
|
"Content-Type": "application/json; charset=UTF-8",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fetchDataViaGet = async (url) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
headers: HEADERS,
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fetchDataViaPost = async (url, body) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: "POST",
|
||||||
|
headers: HEADERS,
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
56
app/components/Navbar/Navbar.jsx
Normal file
56
app/components/Navbar/Navbar.jsx
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
"use client"
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
export const Navbar = () => {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const navLinks = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: "material-symbols--home-outline",
|
||||||
|
iconActive: "material-symbols--home",
|
||||||
|
title: "Домашняя",
|
||||||
|
href: "/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
icon: "material-symbols--search",
|
||||||
|
iconActive: "material-symbols--search",
|
||||||
|
title: "Поиск",
|
||||||
|
href: "/search",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
icon: "material-symbols--bookmarks-outline",
|
||||||
|
iconActive: "material-symbols--bookmarks",
|
||||||
|
title: "Закладки",
|
||||||
|
href: "/bookmarks",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
icon: "material-symbols--favorite-outline",
|
||||||
|
iconActive: "material-symbols--favorite",
|
||||||
|
title: "Избранное",
|
||||||
|
href: "/favorites",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
icon: "material-symbols--history",
|
||||||
|
iconActive: "material-symbols--history",
|
||||||
|
title: "История",
|
||||||
|
href: "/history",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-black text-white sm:sticky sm:top-0 left-0 z-50 fixed bottom-0 w-full">
|
||||||
|
<div className="px-4 py-4">
|
||||||
|
<nav className="flex gap-4">
|
||||||
|
{navLinks.map((link) => {
|
||||||
|
return <Link key={link.id} href={link.href} className="flex items-center flex-col sm:flex-row"><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>;
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
25
app/components/ReleaseCourusel/ReleaseCourusel.jsx
Normal file
25
app/components/ReleaseCourusel/ReleaseCourusel.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
"use client";
|
||||||
|
import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
|
||||||
|
export const ReleaseCourusel = (props) => {
|
||||||
|
return (
|
||||||
|
<section className="group relative">
|
||||||
|
<div className="flex justify-between border-b-2 border-black px-4">
|
||||||
|
<h1 className="font-bold text-md sm:text-xl">{props.sectionTitle}</h1>
|
||||||
|
<a href={props.showAllLink}>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<p className="font-bold hidden sm:block text-xl">Показать все</p>
|
||||||
|
<span className="iconify mdi--arrow-right w-6 h-6"></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="flex gap-2 overflow-x-scroll p-4 scrollbar-none"
|
||||||
|
id={props.id}
|
||||||
|
>
|
||||||
|
{props.content.map((release) => {
|
||||||
|
return <ReleaseLink key={release.id} {...release} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
37
app/components/ReleaseLink/ReleaseLink.jsx
Normal file
37
app/components/ReleaseLink/ReleaseLink.jsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export const ReleaseLink = (props) => {
|
||||||
|
const grade = props.grade.toFixed(1);
|
||||||
|
return (
|
||||||
|
<Link href={`/release/${props.id}`} className=" hover:scale-105 transition hover:z-10">
|
||||||
|
<div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px]">
|
||||||
|
<div className="bg-gradient-to-t from-black to-transparent relative w-full h-full">
|
||||||
|
<img
|
||||||
|
className="w-full h-full object-cover absolute mix-blend-overlay"
|
||||||
|
src={props.image}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={`absolute left-2 top-2 rounded-sm ${
|
||||||
|
grade == 0
|
||||||
|
? "hidden"
|
||||||
|
: grade < 2
|
||||||
|
? "bg-red-500"
|
||||||
|
: grade < 3
|
||||||
|
? "bg-orange-500"
|
||||||
|
: grade < 4
|
||||||
|
? "bg-yellow-500"
|
||||||
|
: "bg-green-500"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{grade}</p>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-2 right-2 bg-gray-500 rounded-sm">
|
||||||
|
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{props.status.name}</p>
|
||||||
|
</div>
|
||||||
|
<p className="absolute left-2 bottom-2 text-white">{props.title_ru}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
BIN
app/favicon.ico
Normal file
BIN
app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
33
app/globals.css
Normal file
33
app/globals.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* :root {
|
||||||
|
--foreground-rgb: 0, 0, 0;
|
||||||
|
--background-start-rgb: 214, 219, 220;
|
||||||
|
--background-end-rgb: 255, 255, 255;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--foreground-rgb: 255, 255, 255;
|
||||||
|
--background-start-rgb: 0, 0, 0;
|
||||||
|
--background-end-rgb: 0, 0, 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: rgb(var(--foreground-rgb));
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent,
|
||||||
|
rgb(var(--background-end-rgb))
|
||||||
|
)
|
||||||
|
rgb(var(--background-start-rgb));
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.text-balance {
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
} */
|
||||||
15
app/layout.js
Normal file
15
app/layout.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import "./globals.css";
|
||||||
|
import { App } from "@/app/App";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Create Next App",
|
||||||
|
description: "Generated by create next app",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({ children }) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<App>{children}</App>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
app/page.js
Normal file
46
app/page.js
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
"use client";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { ReleaseCourusel } from "./components/ReleaseCourusel/ReleaseCourusel";
|
||||||
|
const fetcher = (...args) => fetch(...args).then((res) => res.json());
|
||||||
|
|
||||||
|
function fetchReleases(status) {
|
||||||
|
const { data, error, isLoading } = useSWR(
|
||||||
|
`/api/home?status=${status}`,
|
||||||
|
fetcher
|
||||||
|
);
|
||||||
|
return [data, error, isLoading];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [lastReleasesData, lastReleasesError, lastReleasesIsLoading] =
|
||||||
|
fetchReleases("last");
|
||||||
|
const [
|
||||||
|
finishedReleasesData,
|
||||||
|
finishedReleasesError,
|
||||||
|
finishedReleasesIsLoading,
|
||||||
|
] = fetchReleases("finished");
|
||||||
|
const [ongoingReleasesData, ongoingReleasesError, ongoingReleasesIsLoading] =
|
||||||
|
fetchReleases("ongoing");
|
||||||
|
const [
|
||||||
|
announceReleasesData,
|
||||||
|
announceReleasesError,
|
||||||
|
announceReleasesIsLoading,
|
||||||
|
] = fetchReleases("announce");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex flex-col sm:pt-4 sm:pb-0 pb-16">
|
||||||
|
{lastReleasesData && (
|
||||||
|
<ReleaseCourusel id="home-courusel-last" sectionTitle="Последние релизы" showAllLink="/last" content={lastReleasesData.content} />
|
||||||
|
)}
|
||||||
|
{finishedReleasesData && (
|
||||||
|
<ReleaseCourusel id="home-courusel-finished" sectionTitle="Завершенные релизы" showAllLink="/finished" content={finishedReleasesData.content} />
|
||||||
|
)}
|
||||||
|
{ongoingReleasesData && (
|
||||||
|
<ReleaseCourusel id="home-courusel-ongoing" sectionTitle="В эфире" showAllLink="/ongoing" content={ongoingReleasesData.content} />
|
||||||
|
)}
|
||||||
|
{announceReleasesData && (
|
||||||
|
<ReleaseCourusel id="home-courusel-announce" sectionTitle="Анонсированные релизы" showAllLink="/announce" content={announceReleasesData.content} />
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
app/store/preferences.js
Normal file
13
app/store/preferences.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
"use client";
|
||||||
|
import { create } from "zustand";
|
||||||
|
import { persist, createJSONStorage } from "zustand/middleware";
|
||||||
|
|
||||||
|
export const usePreferencesStore = create(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: "preferences",
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
7
jsconfig.json
Normal file
7
jsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
next.config.mjs
Normal file
4
next.config.mjs
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
4949
package-lock.json
generated
Normal file
4949
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
28
package.json
Normal file
28
package.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"name": "new",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "14.2.5",
|
||||||
|
"react": "^18",
|
||||||
|
"react-dom": "^18",
|
||||||
|
"swr": "^2.2.5",
|
||||||
|
"zustand": "^4.5.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@iconify-json/material-symbols": "^1.1.83",
|
||||||
|
"@iconify-json/mdi": "^1.1.67",
|
||||||
|
"@iconify/tailwind": "^1.1.1",
|
||||||
|
"eslint": "^8",
|
||||||
|
"eslint-config-next": "14.2.5",
|
||||||
|
"postcss": "^8",
|
||||||
|
"tailwind-scrollbar": "^3.1.0",
|
||||||
|
"tailwindcss": "^3.4.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
postcss.config.mjs
Normal file
8
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('postcss-load-config').Config} */
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
14
tailwind.config.js
Normal file
14
tailwind.config.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
const { addIconSelectors } = require("@iconify/tailwind");
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
addIconSelectors(["mdi", "material-symbols"]),
|
||||||
|
require('tailwind-scrollbar')
|
||||||
|
],
|
||||||
|
};
|
||||||
Loading…
Add table
Reference in a new issue