Merge remote-tracking branch 'origin/feat_player'

app/components/ReleaseLink/ReleaseLink.16_9.tsx

@@ -1,18 +1,18 @@
 import Link from "next/link";
-import { sinceUnixDate } from "@/app/api/utils";
-import { Chip } from "@/app/components/Chip/Chip";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
 
-export const ReleaseLink = (props) => {
+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" },
+};
+
+export const ReleaseLink169 = (props: any) => {
   const grade = props.grade.toFixed(1);
-  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 profile_list_status = props.profile_list_status;
   let user_list = null;
   if (profile_list_status != null || profile_list_status != 0) {
@@ -79,6 +79,7 @@ export const ReleaseLink = (props) => {
                 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>

app/components/ReleaseLink/ReleaseLink.Poster.tsx

@@ -0,0 +1,82 @@
+import Link from "next/link";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
+
+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" },
+};
+
+export const ReleaseLinkPoster = (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}`}>
+      <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
+        <div
+          className="relative w-full h-64 gap-8 p-4 overflow-hidden bg-white bg-center bg-no-repeat bg-cover border border-gray-200 rounded-lg shadow-md lg:min-w-[300px] lg:min-h-[385px] lg:max-w-[300px] lg:max-h-[385px] lg:bg-top dark:border-gray-700 dark:bg-gray-800"
+          style={{
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+          }}
+        >
+          <div className="flex flex-wrap gap-1">
+            <Chip
+              bg_color={
+                props.grade.toFixed(1) == 0
+                  ? "hidden"
+                  : props.grade.toFixed(1) < 2
+                  ? "bg-red-500"
+                  : props.grade.toFixed(1) < 3
+                  ? "bg-orange-500"
+                  : props.grade.toFixed(1) < 4
+                  ? "bg-yellow-500"
+                  : "bg-green-500"
+              }
+              name={props.grade.toFixed(1)}
+            />
+            {props.status ? (
+              <Chip name={props.status.name} />
+            ) : (
+              <Chip
+                name={
+                  props.status_id == 1
+                    ? "Завершено"
+                    : props.status_id == 2
+                    ? "Онгоинг"
+                    : "Анонс"
+                }
+              />
+            )}
+            <Chip
+              name={props.episodes_released && props.episodes_released}
+              name_2={
+                props.episodes_total ? props.episodes_total + " эп." : "? эп."
+              }
+              devider="/"
+            />
+          </div>
+          <div className="absolute flex flex-col gap-2 text-white bottom-4">
+            {props.title_ru && (
+              <p className="text-xl font-bold text-white md:text-2xl">
+                {props.title_ru}
+              </p>
+            )}
+            {props.title_original && (
+              <p className="text-sm text-gray-300 md:text-base">
+                {props.title_original}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};

app/components/ReleaseLink/ReleaseLink.tsx

@@ -0,0 +1,13 @@
+import { ReleaseLink169 } from "./ReleaseLink.16_9";
+import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+
+export const ReleaseLink = (props: any) => {
+  const type = props.type || "16_9";
+
+  if (type == "16_9") {
+    return <ReleaseLink169 {...props} />;
+  }
+  if (type == "poster") {
+    return <ReleaseLinkPoster {...props} />;
+  }
+};