feat: add continue watching section to the release page

app/components/ContinueWatching/ContinueWatching.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Card } from "flowbite-react";
+import { ReleaseLinkList } from "#/components/ReleaseLink/ReleaseLinkList";
+import { useUserStore } from "#/store/auth";
+import { ENDPOINTS } from "#/api/config";
+import { BookmarksList, useSWRfetcher } from "#/api/utils";
+import useSWR from "swr";
+import { useEffect, useState } from "react";
+
+export const ContinueWatching = () => {
+  const userStore = useUserStore();
+
+  function useFetchReleases(listName: string) {
+    let url: string;
+    if (userStore.token) {
+      url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?sort=1&token=${userStore.token}`;
+    }
+    const { data, isLoading, error } = useSWR(url, useSWRfetcher);
+    return [data, isLoading, error];
+  }
+
+  const [watchingData, watchingLoading, watchingError] =
+    useFetchReleases("watching");
+  const [plannedData, plannedLoading, plannedError] =
+    useFetchReleases("planned");
+  const [delayedData, delayedLoading, delayedError] =
+    useFetchReleases("delayed");
+
+  const [releaseData, setReleaseData] = useState<any[]>([]);
+
+  const firstN = (arr, n = 1) => arr.slice(0, n);
+  function _randomize(array: any[], limit: number) {
+    const toRand = array.slice();
+    let currentIndex = toRand.length;
+    while (currentIndex != 0) {
+      let randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex--;
+      [toRand[currentIndex], toRand[randomIndex]] = [
+        toRand[randomIndex],
+        toRand[currentIndex],
+      ];
+    }
+    return firstN(toRand, limit);
+  }
+
+  useEffect(() => {
+    if (!watchingLoading && !plannedLoading && !delayedLoading) {
+      const data = [
+        ...(watchingData.content || []),
+        ...(plannedData.content || []),
+        ...(delayedData.content || []),
+      ];
+      console.log("loaded data:", data);
+      const randomizedData = _randomize(data, 3);
+      setReleaseData(randomizedData);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchingLoading, plannedLoading, delayedLoading]);
+
+  if (
+    !userStore.isAuth ||
+    watchingLoading ||
+    plannedLoading ||
+    delayedLoading ||
+    releaseData.length == 0
+  )
+    return <></>;
+
+  console.log("randomized data:", releaseData);
+
+  return (
+    <Card>
+      <div className="flex justify-between py-2 border-b-2 border-black dark:border-white">
+        <h1>Продолжить просмотр</h1>
+      </div>
+      <div className="flex flex-col gap-4 mt-2">
+        {releaseData.map((release: any) => {
+          return (
+            <ReleaseLinkList
+              key={release.id}
+              {...release}
+              settings={{ showDescription: false }}
+            />
+          );
+        })}
+      </div>
+    </Card>
+  );
+};

app/components/ReleaseLink/ReleaseLinkList.tsx

@@ -22,6 +22,7 @@ export const ReleaseLinkList = (props: {
   settings?: {
     showGenres?: boolean;
     showDescription?: boolean;
+    showOrigTitle?: boolean;
   };
   chipsSettings?: {
     enabled: boolean;
@@ -49,6 +50,7 @@ export const ReleaseLinkList = (props: {
   const settings = {
     showGenres: true,
     showDescription: true,
+    showOrigTitle: true,
     ...props.settings,
   };
   const chipsSettings = props.chipsSettings || {};
@@ -86,7 +88,7 @@ export const ReleaseLinkList = (props: {
                 return (
                   <span
                     key={`release_${props.id}_genre_${genre}_${index}`}
-                    className="text-sm font-light dark:text-white"
+                    className="text-sm font-light leading-none dark:text-white"
                   >
                     {index > 0 && ", "}
                     {genre}
@@ -95,12 +97,12 @@ export const ReleaseLinkList = (props: {
               })}
           </div>
           {props.title_ru && (
-            <p className="text-lg font-bold dark:text-white">
+            <p className="text-lg font-bold line-clamp-2 dark:text-white">
               {props.title_ru}
             </p>
           )}
-          {props.title_original && (
+          {settings.showOrigTitle && props.title_original && (
-            <p className="text-sm text-gray-600 dark:text-gray-300">
+            <p className="text-sm text-gray-600 line-clamp-2 dark:text-gray-300">
               {props.title_original}
             </p>
           )}

app/pages/Release.tsx

@@ -18,6 +18,7 @@ import { CommentsMain } from "#/components/Comments/Comments.Main";
 import { InfoLists } from "#/components/InfoLists/InfoLists";
 import { ENDPOINTS } from "#/api/config";
 import { usePreferencesStore } from "#/store/preferences";
+import { ContinueWatching } from "#/components/ContinueWatching/ContinueWatching";
 
 export const ReleasePage = (props: any) => {
   const userStore = useUserStore();
@@ -167,6 +168,7 @@ export const ReleasePage = (props: any) => {
               related_releases={data.release.related_releases}
             />
           )}
+          {userStore.token && <ContinueWatching />}
           <div className="block lg:hidden">
             <CommentsMain
               release_id={props.id}