1 files changed, 49 insertions, 8 deletions

diff --git a/components/watch/primary/details.js b/components/watch/primary/details.tsx
index 4af12ac..f20f8cf 100644
--- a/components/watch/primary/details.js
+++ b/components/watch/primary/details.tsx
@@ -2,7 +2,20 @@ import { useEffect, useState } from "react";
 import { useAniList } from "../../../lib/anilist/useAnilist";
 import Skeleton from "react-loading-skeleton";
 import DisqusComments from "../../disqus";
-import Image from "next/image";
+import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
+import { SessionTypes } from "pages/en";
+
+type DetailsProps = {
+  info: AniListInfoTypes;
+  session: SessionTypes;
+  epiNumber: number;
+  description: string;
+  id: string;
+  onList: boolean;
+  setOnList: (value: boolean) => void;
+  handleOpen: () => void;
+  disqus: string;
+};
 
 export default function Details({
   info,
@@ -14,10 +27,14 @@ export default function Details({
   setOnList,
   handleOpen,
   disqus,
-}) {
+}: DetailsProps) {
   const [showComments, setShowComments] = useState(false);
   const { markPlanning } = useAniList(session);
 
+  const [showDesc, setShowDesc] = useState(false);
+
+  const truncatedDesc = truncateText(description, 420);
+
   function handlePlan() {
     if (onList === false) {
       markPlanning(info.id);
@@ -32,6 +49,10 @@ export default function Details({
     } else {
       setShowComments(true);
     }
+    return () => {
+      setShowComments(false);
+      setShowDesc(false);
+    };
   }, [id]);
 
   return (
@@ -133,12 +154,28 @@ export default function Details({
           ))}
       </div>
       {/* <div className={`bg-secondary rounded-md mt-3 mx-3`}> */}
-      <div className={`bg-secondary rounded-md mt-3`}>
+      <div className={`relative bg-secondary rounded-md mt-3`}>
         {info && (
-          <p
-            dangerouslySetInnerHTML={{ __html: description }}
-            className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
-          />
+          <>
+            <p
+              dangerouslySetInnerHTML={{
+                __html: showDesc
+                  ? description
+                  : description?.length > 420
+                  ? truncatedDesc
+                  : description,
+              }}
+              className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
+            />
+            {!showDesc && description?.length > 120 && (
+              <span
+                onClick={() => setShowDesc((prev) => !prev)}
+                className="flex justify-center items-end rounded-md pb-5 font-semibold font-karla cursor-pointer w-full h-full bg-gradient-to-t from-secondary hover:from-20% to-transparent absolute inset-0"
+              >
+                Read More
+              </span>
+            )}
+          </>
         )}
       </div>
       {/* {<div className="mt-5 px-5"></div>} */}
@@ -177,7 +214,6 @@ export default function Details({
               <DisqusComments
                 key={id}
                 post={{
-                  id: id,
                   title: info.title.romaji,
                   url: window.location.href,
                   episode: epiNumber,
@@ -191,3 +227,8 @@ export default function Details({
     </div>
   );
 }
+
+function truncateText(txt: string, length: number) {
+  const text = txt.replace(/(<([^>]+)>)/gi, "");
+  return text.length > length ? text.slice(0, length) + "..." : text;
+}