New Home page, New UI, Proxy api requests through next.js api routes

2025-04-04 23:34:38 +00:00 · 2024-07-11 07:33:56 +05:00 · 2024-07-11 07:33:56 +05:00 · a30ddcfc6a
commit a30ddcfc6a
parent 49b9ac069f
20 changed files with 5385 additions and 0 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/README.md
+++ b/README.md
@ -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.
--- a/app/App.jsx
+++ b/app/App.jsx
@ -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>
+  );
+}
--- a/app/api/config.js
+++ b/app/api/config.js
@ -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`,
+  },
+};
--- a/app/api/home/route.js
+++ b/app/api/home/route.js
@ -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);
+}
--- a/app/api/utils.js
+++ b/app/api/utils.js
@ -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);
+  }
+};
--- a/app/components/Navbar/Navbar.jsx
+++ b/app/components/Navbar/Navbar.jsx
@ -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>
+  );
+};
--- a/app/components/ReleaseCourusel/ReleaseCourusel.jsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.jsx
@ -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>
+  );
+};
--- a/app/components/ReleaseLink/ReleaseLink.jsx
+++ b/app/components/ReleaseLink/ReleaseLink.jsx
@ -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>
+  );
+};
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@ -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;
+  }
+} */
--- a/app/layout.js
+++ b/app/layout.js
@ -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>
+  );
+}
--- a/app/page.js
+++ b/app/page.js
@ -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>
+  );
+}
--- a/app/store/preferences.js
+++ b/app/store/preferences.js
@ -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",
+    }
+  )
+);
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -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"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -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')
+  ],
+};