refactor: release section

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
-      className={`${settings.chips.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}
-    >
-      {!settings.chips.gradeHidden && grade ?
+    <div className={`${chipSettings.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}>
+      {!chipSettings.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 && (
-        <Chip name={category.name} />
-      )}
-      {!settings.chips.favHidden && is_favorite && (
+      {!chipSettings.categoryHidden && category && <Chip name={category.name} />}
+      {!chipSettings.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;
-      gradeHidden?: boolean;
-      statusHidden?: boolean;
-      categoryHidden?: boolean;
-      episodesHidden?: boolean;
-      listHidden?: boolean;
-      favHidden?: boolean;
-      lastWatchedHidden?: boolean;
-    };
+  };
+  chipsSettings?: {
+    enabled: boolean;
+    gradeHidden?: boolean;
+    statusHidden?: boolean;
+    categoryHidden?: boolean;
+    episodesHidden?: boolean;
+    listHidden?: 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">