refactor: make related page view as list

app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx

@@ -30,12 +30,12 @@ export const ReleaseLink169Poster = (props: any) => {
         <div className="flex w-full h-full gap-2 overflow-hidden">
           <div className="flex-shrink-0">
             <Image
-                src={props.image}
+              src={props.image}
-                height={250}
+              height={250}
-                width={250}
+              width={250}
-                alt={props.title}
+              alt={props.title}
-                className="object-cover aspect-[9/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
+              className="object-cover aspect-[9/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
-              />
+            />
           </div>
           <div className="flex flex-col flex-1 w-full h-full">
             <div>
@@ -45,7 +45,7 @@ export const ReleaseLink169Poster = (props: any) => {
                 </p>
               )}
               <p className="text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl">
-              {`${props.title_ru.slice(0, 47)}${
+                {`${props.title_ru.slice(0, 47)}${
                   props.title_ru.length > 47 ? "..." : ""
                 }`}
               </p>
@@ -55,9 +55,7 @@ export const ReleaseLink169Poster = (props: any) => {
                 }`}
               </p>
             </div>
-          </div>
+            <div className="flex flex-wrap gap-1 mt-1">
-        </div>
-        <div className="flex flex-wrap gap-1 mt-1">
               <Chip
                 bg_color={
                   grade == 0
@@ -73,51 +71,53 @@ export const ReleaseLink169Poster = (props: any) => {
                 name={grade}
               />
               {user_list && (
-              <Chip bg_color={user_list.bg_color} name={user_list.name} />
+                <Chip bg_color={user_list.bg_color} name={user_list.name} />
-            )}
+              )}
-            {props.status ? (
+              {props.status ? (
-              <Chip name={props.status.name} />
+                <Chip name={props.status.name} />
-            ) : (
+              ) : (
-              props.status_id != 0 && (
+                props.status_id != 0 && (
+                  <Chip
+                    name={
+                      props.status_id == 1
+                        ? "Завершено"
+                        : props.status_id == 2
+                        ? "Онгоинг"
+                        : props.status_id == 3 && "Анонс"
+                    }
+                  />
+                )
+              )}
+              <Chip
+                name={props.episodes_released && props.episodes_released}
+                name_2={
+                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
+                }
+                devider="/"
+              />
+              {props.last_view_episode && (
                 <Chip
                   name={
-                    props.status_id == 1
+                    props.last_view_episode.name
-                      ? "Завершено"
+                      ? props.last_view_episode.name
-                      : props.status_id == 2
+                      : `${props.last_view_episode.position + 1} серия`
-                      ? "Онгоинг"
-                      : props.status_id == 3 && "Анонс"
                   }
+                  name_2={
+                    "last_view_timestamp" in props &&
+                    sinceUnixDate(props.last_view_timestamp)
+                  }
+                  devider=", "
                 />
-              )
+              )}
-            )}
+              {props.category && <Chip name={props.category.name} />}
-            <Chip
+              {props.is_favorite && (
-              name={props.episodes_released && props.episodes_released}
+                <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-              name_2={
+                  <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-                props.episodes_total ? props.episodes_total + " эп." : "? эп."
+                </div>
-              }
+              )}
-              devider="/"
-            />
-            {props.last_view_episode && (
-              <Chip
-                name={
-                  props.last_view_episode.name
-                    ? props.last_view_episode.name
-                    : `${props.last_view_episode.position + 1} серия`
-                }
-                name_2={
-                  "last_view_timestamp" in props &&
-                  sinceUnixDate(props.last_view_timestamp)
-                }
-                devider=", "
-              />
-            )}
-            {props.category && <Chip name={props.category.name} />}
-            {props.is_favorite && (
-              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-              </div>
-            )}
             </div>
+          </div>
+        </div>
       </div>
     </Link>
   );

app/components/ReleaseLink/ReleaseLink.16_9Related.tsx

@@ -0,0 +1,136 @@
+import Link from "next/link";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";
+
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
+};
+const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
+
+export const ReleaseLink169Related = (props: any) => {
+  const grade = props.grade.toFixed(1);
+  const profile_list_status = props.profile_list_status;
+  let user_list = null;
+  if (profile_list_status != null || profile_list_status != 0) {
+    user_list = profile_lists[profile_list_status];
+  }
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={`${
+        props.isLinkDisabled ? "pointer-events-none" : ""
+      } flex gap-4 items-center justify-between mx-auto w-full max-w-[1024px]`}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
+      <div className="items-center justify-center flex-1 hidden lg:flex">
+        <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
+          {props.season ? YearSeason[props.season] : ""}
+          <br/>
+          {props.year ? props.year : ""}
+        </h1>
+      </div>
+      <div className="w-full max-w-[768px] h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
+        <div className="flex w-full h-full gap-2 overflow-hidden">
+          <div className="flex-shrink-0">
+            <Image
+              src={props.image}
+              height={250}
+              width={250}
+              alt={props.title}
+              className="object-cover aspect-[9/16] lg:aspect-[12/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
+            />
+          </div>
+          <div className="flex flex-col flex-1 w-full h-full">
+            <div>
+              {props.genres && (
+                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
+                  {props.genres}
+                </p>
+              )}
+              <p className="block text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:hidden">
+                {`${props.title_ru.slice(0, 47)}${
+                  props.title_ru.length > 47 ? "..." : ""
+                }`}
+              </p>
+              <p className="block text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg md:hidden">
+                {`${props.description.slice(0, 97)}${
+                  props.description.length > 97 ? "..." : ""
+                }`}
+              </p>
+              <p className="hidden text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:block max-w-[512px]">
+                {props.title_ru}
+              </p>
+              <p className="hidden text-xs font-light text-black dark:text-white md:text-sm:text-base xl:text-lg md:block max-w-[512px]">
+                {props.description}
+              </p>
+            </div>
+            <div className="flex flex-wrap gap-1 mt-1">
+              <Chip
+                bg_color={
+                  grade == 0
+                    ? "hidden"
+                    : grade < 2
+                    ? "bg-red-500"
+                    : grade < 3
+                    ? "bg-orange-500"
+                    : grade < 4
+                    ? "bg-yellow-500"
+                    : "bg-green-500"
+                }
+                name={grade}
+              />
+              {user_list && (
+                <Chip bg_color={user_list.bg_color} name={user_list.name} />
+              )}
+              {props.status ? (
+                <Chip name={props.status.name} />
+              ) : (
+                props.status_id != 0 && (
+                  <Chip
+                    name={
+                      props.status_id == 1
+                        ? "Завершено"
+                        : props.status_id == 2
+                        ? "Онгоинг"
+                        : props.status_id == 3 && "Анонс"
+                    }
+                  />
+                )
+              )}
+              <Chip
+                name={props.episodes_released && props.episodes_released}
+                name_2={
+                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
+                }
+                devider="/"
+              />
+              {props.category && <Chip name={props.category.name} />}
+              {props.season || props.year ? (
+                <Chip
+                  bg_color="lg:hidden bg-gray-500"
+                  name={props.season ? YearSeason[props.season] : ""}
+                  name_2={props.year ? `${props.year} год` : ""}
+                  devider=" "
+                />
+              ) : (
+                ""
+              )}
+              {props.is_favorite && (
+                <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+                  <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};

app/pages/Related.tsx

@@ -1,11 +1,11 @@
 "use client";
 import useSWRInfinite from "swr/infinite";
-import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
 import { Spinner } from "#/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
+import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -26,9 +26,9 @@ export function RelatedPage(props: {id: number|string, title: string}) {
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
     if (token) {
-      return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}?token=${token}`;
+      return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}?token=${token}&API-Version=v2`;
     }
-    return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}`;
+    return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}?API-Version=v2`;
   };
 
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
@@ -65,7 +65,11 @@ export function RelatedPage(props: {id: number|string, title: string}) {
         </h1>
       </div>
       {content && content.length > 0 ? (
-        <ReleaseSection content={content} />
+        <div className="flex flex-col gap-4 my-4">
+          {content.map((release, index) => {
+            return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
+          })}
+        </div>
       ) : !isLoadingEnd || isLoading ? (
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />

middleware.ts

@@ -8,10 +8,14 @@ export const config = {
 
 export default async function middleware(request: Request, context: NextFetchEvent) {
   if (request.method == "GET") {
-    const url = request.url
+    const url = new URL(request.url);
-    const path = url.match(/\/api\/proxy\/(.*)/)?.[1]
+    const isApiV2 = url.searchParams.get("API-Version") == "v2" || false;
+    if (isApiV2) {
+      url.searchParams.delete("API-Version");
+    }
+    const path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search
 
-    const data = await fetchDataViaGet(`${API_URL}/${path}`);
+    const data = await fetchDataViaGet(`${API_URL}/${path}`, isApiV2);
 
     if (!data) {
       return new Response(JSON.stringify({ message: "Error Fetching Data" }), {