refactor: release section

app/components/ReleaseCourusel/ReleaseCourusel.tsx

@@ -53,7 +53,6 @@ export const ReleaseCourusel = (props: {
                 <SwiperSlide
                   key={release.id}
                   className="max-w-64 md:max-w-96"
-                  // className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>

app/components/ReleaseLink/ReleaseLinkUpdate.tsx

@@ -5,17 +5,35 @@ export const ReleaseLink = (props: {
   image: string;
   title_ru: string;
   title_original: string;
+  description?: string;
   genres?: string;
   grade?: number;
   id: number;
   settings?: {
     showGenres?: boolean;
+    showDescription?: boolean;
+  };
+  chipsSettings?: {
+    enabled: boolean;
+    gradeHidden?: boolean;
+    statusHidden?: boolean;
+    categoryHidden?: boolean;
+    episodesHidden?: boolean;
+    listHidden?: boolean;
+    favHidden?: boolean;
+    lastWatchedHidden?: boolean;
   };
   profile_list_status?: number;
   status?: {
     name: string;
   };
+  category?: {
+    name: string;
+  };
   status_id?: number;
+  episodes_released?: string;
+  episodes_total?: string;
+  is_favorite?: boolean;
 }) => {
   return (
     <Link href={`/release/${props.id}`}>

app/components/ReleaseLinkOld/ReleaseLink.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Poster } from "../ReleasePoster/Poster";
+import { Chip } from "../Chip/Chip";
+// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+
+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 ReleaseLink = (props: {
+  // type?: "16_9" | "poster";
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  // const type = props.type || "16_9";
+
+  // if (type == "16_9") {
+  //   return (
+  //     <>
+  //       <div>TYPE=16/9</div>
+
+  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
+  //     </>
+  //   );
+  // }
+  // if (props.type == "poster") {
+  return (
+    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
+  );
+  // return <ReleaseLinkPoster {...props} />;
+  // }
+};

app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
+
+export const ReleaseLink = (props: {
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  return (
+    <Link href={`/release/${props.id}`}>
+      <PosterWithStuff {...props} />
+    </Link>
+  );
+};

app/components/ReleasePoster/Chips.tsx

@@ -1,3 +1,4 @@
+import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "../Chip/Chip";
 
 interface ChipProps {
@@ -10,6 +11,8 @@ interface ChipProps {
   episodes_total?: any;
   category?: any;
   is_favorite?: any;
+  last_view_episode?: any;
+  last_view_timestamp?: any;
 }
 
 export const ReleaseChips = ({
@@ -22,12 +25,24 @@ export const ReleaseChips = ({
   episodes_total,
   category,
   is_favorite,
+  last_view_episode,
+  last_view_timestamp,
 }: ChipProps) => {
+  const chipSettings = {
+    enabled: true,
+    gradeHidden: false,
+    statusHidden: false,
+    categoryHidden: false,
+    episodesHidden: false,
+    listHidden: false,
+    favHidden: false,
+    lastWatchedHidden: true,
+    ...settings,
+  };
+
   return (
-    <div
+    <div className={`${chipSettings.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}>
-      className={`${settings.chips.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}
+      {!chipSettings.gradeHidden && grade ?
-    >
-      {!settings.chips.gradeHidden && grade ?
         <Chip
           className="w-12"
           bg_color={
@@ -43,10 +58,10 @@ export const ReleaseChips = ({
           name={`${grade}`}
         />
       : ""}
-      {!settings.chips.listHidden && user_list && (
+      {!chipSettings.listHidden && user_list && (
         <Chip bg_color={user_list.bg_color} name={user_list.name} />
       )}
-      {!settings.chips.statusHidden && status ?
+      {!chipSettings.statusHidden && status ?
         <Chip name={status.name} />
       : status_id != 0 && (
           <Chip
@@ -59,21 +74,30 @@ export const ReleaseChips = ({
           />
         )
       }
-      {!settings.chips.episodesHidden && (
+      {!chipSettings.episodesHidden && (
         <Chip
           name={episodes_released && episodes_released}
           name_2={episodes_total ? episodes_total + " эп." : "? эп."}
           devider="/"
         />
       )}
-      {!settings.chips.categoryHidden && category && (
+      {!chipSettings.categoryHidden && category && <Chip name={category.name} />}
-        <Chip name={category.name} />
+      {!chipSettings.favHidden && is_favorite && (
-      )}
-      {!settings.chips.favHidden && 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>
       )}
+      {!chipSettings.lastWatchedHidden && last_view_episode && (
+        <Chip
+          name={
+            last_view_episode.name ?
+              last_view_episode.name
+            : `${last_view_episode.position + 1} серия`
+          }
+          name_2={last_view_timestamp && sinceUnixDate(last_view_timestamp)}
+          devider=", "
+        />
+      )}
     </div>
   );
 };

app/components/ReleasePoster/PosterWithStuff.tsx

@@ -21,16 +21,16 @@ export const PosterWithStuff = (props: {
   settings?: {
     showGenres?: boolean;
     showDescription?: boolean;
-    chips?: {
+  };
-      enabled: boolean;
+  chipsSettings?: {
-      gradeHidden?: boolean;
+    enabled: boolean;
-      statusHidden?: boolean;
+    gradeHidden?: boolean;
-      categoryHidden?: boolean;
+    statusHidden?: boolean;
-      episodesHidden?: boolean;
+    categoryHidden?: boolean;
-      listHidden?: boolean;
+    episodesHidden?: boolean;
-      favHidden?: boolean;
+    listHidden?: boolean;
-      lastWatchedHidden?: boolean;
+    favHidden?: boolean;
-    };
+    lastWatchedHidden?: boolean;
   };
   profile_list_status?: number;
   status?: {
@@ -48,18 +48,10 @@ export const PosterWithStuff = (props: {
   const settings = {
     showGenres: true,
     showDescription: true,
-    chips: {
-      enabled: true,
-      gradeHidden: false,
-      statusHidden: false,
-      categoryHidden: false,
-      episodesHidden: false,
-      listHidden: false,
-      favHidden: false,
-      lastWatchedHidden: false,
-    },
     ...props.settings,
   };
+  const chipsSettings = props.chipsSettings || {}
+
   const grade = props.grade ? Number(props.grade.toFixed(1)) : null;
   const profile_list_status = props.profile_list_status || null;
   let user_list = null;
@@ -74,13 +66,13 @@ export const PosterWithStuff = (props: {
   }
 
   return (
-    <div className="relative flex items-center justify-center w-full h-full overflow-hidden group">
+    <div className="relative flex items-center justify-center w-full h-full overflow-hidden rounded-lg group">
       <div className="absolute z-20 top-2 left-2 right-2">
         <ReleaseChips
           {...props}
           user_list={user_list}
           grade={grade}
-          settings={settings}
+          settings={chipsSettings}
         ></ReleaseChips>
       </div>
       <div className="absolute z-20 bottom-2 left-2 right-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">

app/components/ReleaseSection/ReleaseSection.tsx

@@ -1,4 +1,4 @@
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 
 export const ReleaseSection = (props: {
   sectionTitle?: string;
@@ -14,7 +14,24 @@ export const ReleaseSection = (props: {
         </div>
       )}
       <div className="m-4">
-        <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {props.content.map((release) => {
+            return (
+              <div key={release.id} className="w-full h-full">
+                <ReleaseLink
+                  {...release}
+                  chipsSettings={{
+                    enabled: true,
+                    lastWatchedHidden:
+                      (props.sectionTitle &&
+                        props.sectionTitle.toLowerCase() != "история")
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+        {/* <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
           {props.content.map((release) => {
             return (
               <div key={release.id} className="w-full h-full lg:aspect-video">
@@ -23,7 +40,7 @@ export const ReleaseSection = (props: {
             );
           })}
           {props.content.length == 1 && <div></div>}
-        </div>
+        </div> */}
       </div>
     </section>
   );

app/pages/Related.tsx

@@ -69,20 +69,6 @@ export function RelatedPage(props: { id: number | string; title: string }) {
         <div className="flex flex-col gap-4 my-4">
           {content.map((release, index) => {
             const genres = [];
-            const settings = {
-              showGenres: true,
-              showDescription: true,
-              chips: {
-                enabled: true,
-                gradeHidden: false,
-                statusHidden: false,
-                categoryHidden: false,
-                episodesHidden: false,
-                listHidden: false,
-                favHidden: false,
-                lastWatchedHidden: false,
-              },
-            };
             const grade =
               release.grade ? Number(release.grade.toFixed(1)) : null;
             const profile_list_status = release.profile_list_status || null;
@@ -111,7 +97,7 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                     </div>
                     <div className="flex items-center justify-center lg:hidden">
                       <div className="max-w-64">
-                        <PosterWithStuff {...release} settings={settings} />
+                        <PosterWithStuff {...release} />
                       </div>
                     </div>
                     <div className="hidden lg:flex">
@@ -122,11 +108,9 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                         {...release}
                         user_list={user_list}
                         grade={grade}
-                        settings={settings}
                       />
                       <div>
-                        {settings.showGenres &&
+                        {genres.length > 0 &&
-                          genres.length > 0 &&
                           genres.map((genre: string, index: number) => {
                             return (
                               <span
@@ -149,7 +133,7 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                           {release.title_original}
                         </p>
                       )}
-                      {settings.showDescription && release.description && (
+                      {release.description && (
                         <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
                           {release.description}
                         </p>