From 9a78323372a01a8608b130a8e805f4e927973f04 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 25 Jan 2023 12:46:35 +0700
Subject: [PATCH] text results on top w/ expander

---
 .../fakeyou.com/src/scss/site-refresh.scss    |  4 +--
 .../src/v2/view/_common/TextExpander.tsx      | 25 +++++++++++++++++++
 .../tts/tts_result_view/TtsResultViewPage.tsx | 24 +++++++++++-------
 3 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/_common/TextExpander.tsx

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index e7cfb61d99..3e47f321ad 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -779,8 +779,8 @@ styles with important tags:
     }
   }
 
-  .no-hyphen {
-    word-wrap: normal;
+  .result-text {
+    font-size: 18px;
   }
 }
 
diff --git a/packages/fakeyou.com/src/v2/view/_common/TextExpander.tsx b/packages/fakeyou.com/src/v2/view/_common/TextExpander.tsx
new file mode 100644
index 0000000000..0c3d2175e2
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/_common/TextExpander.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+interface Props {
+  text: string;
+}
+
+export const TextExpander: React.FC<Props> = ({ text }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const shortText = text.slice(0, 250) + "...";
+
+  return (
+    <>
+      {expanded ? text : shortText}
+      {text.length > 250 && (
+        <button
+          className="btn-link fw-medium p-0 ps-1"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "See less" : "See more"}
+        </button>
+      )}
+    </>
+  );
+};
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx
index 3f87d1487f..c375725d73 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_result_view/TtsResultViewPage.tsx
@@ -38,6 +38,7 @@ import {
   WhatsappIcon,
 } from "react-share";
 import { BackLink } from "../../../_common/BackLink";
+import { TextExpander } from "../../../_common/TextExpander";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 
 interface Props {
@@ -65,14 +66,15 @@ function TtsResultViewPage(props: Props) {
     }
   }, []);
 
-  const documentTitle = ttsInferenceResult?.tts_model_title === undefined 
-    ? undefined 
-    : `Deep Fake ${ttsInferenceResult.tts_model_title} TTS says ${ttsInferenceResult.raw_inference_text.substring(0, 50)}`;
+  const documentTitle =
+    ttsInferenceResult?.tts_model_title === undefined
+      ? undefined
+      : `Deep Fake ${
+          ttsInferenceResult.tts_model_title
+        } TTS says ${ttsInferenceResult.raw_inference_text.substring(0, 50)}`;
   usePrefixedDocumentTitle(documentTitle);
 
-  const shareLink = `https://fakeyou.com${WebUrl.ttsResultPage(
-    token
-  )}`;
+  const shareLink = `https://fakeyou.com${WebUrl.ttsResultPage(token)}`;
   const shareTitle = `I just used FakeYou to generate speech as ${
     ttsInferenceResult?.tts_model_title || "one of my favorite characters"
   }!`;
@@ -434,9 +436,13 @@ function TtsResultViewPage(props: Props) {
           <motion.h1 className="display-5 fw-bold mb-3" variants={item}>
             {headingTitle}
           </motion.h1>
-          <motion.div className="mb-4" variants={item}>
+
+          <motion.div className="mb-4 pb-2" variants={item}>
             <BackLink link="/" text="Back to all models" />
           </motion.div>
+          <motion.p className="mb-3 result-text">
+            <TextExpander text={ttsInferenceResult.raw_inference_text} />
+          </motion.p>
         </div>
       </div>
 
@@ -475,12 +481,12 @@ function TtsResultViewPage(props: Props) {
           <div className="py-6">
             <table className="table tts-result-table">
               <tbody>
-                <tr>
+                {/* <tr>
                   <th scope="row">Original text</th>
                   <td className="overflow-fix">
                     {ttsInferenceResult.raw_inference_text}
                   </td>
-                </tr>
+                </tr> */}
                 <tr>
                   <th scope="row">Audio creator</th>
                   <td>{creatorDetails}</td>