[update] handling huge texts

website/components/ui/buttons/tts.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+import { LanguageDetailsResult } from "types/languageDetails";
+import { TTSIcon } from "components/icons/tts";
+import { TTSRequest } from "types/tts";
+import { request } from "lib/request";
+
+export const TTSButton = ({ text, sourceLang, ...props }: { text: string, sourceLang: LanguageDetailsResult }) => {
+    const [tts, setTTS] = useState(false);
+    const [audio, setAudio] = useState<HTMLAudioElement>(null);
+
+    useEffect(() => {
+        if (!audio) { return }
+        audio.play();
+    }, [audio])
+
+    useEffect(() => {
+        if (tts) {
+            request<TTSRequest>("/tts", {
+                params: {
+                    text: text,
+                    lang: sourceLang.id
+                }
+            })
+                .then(response => {
+                    if (!response.success) { return }
+                    const buffer = Buffer.from(response.data.base64, 'base64')
+                    const blob = new Blob([buffer])
+                    setAudio(new Audio(URL.createObjectURL(blob)))
+                })
+            setTTS(false);
+        }
+    }, [tts]);
+    return <button className="opacity-70 hover:opacity-100 transition active:scale-95" onClick={(ev) => { setTTS(true); ev.stopPropagation(); }}>
+        <TTSIcon />
+    </button>
+}

website/components/ui/cards/mainResult.tsx

@@ -10,45 +10,13 @@ import { LanguagePicker } from "../modals/languagePicker";
 import { Service } from "lib/services";
 import { ServiceElement } from "components/common/service";
 import { SourceTextArea } from "../textareas/source";
-import { TTSIcon } from "components/icons/tts";
-import { TTSRequest } from "types/tts";
+import { TTSButton } from "../buttons/tts";
 import { TranslateRequest } from "types/translate";
 import { request } from "lib/request";
 import { useLanguage } from "contexts/language";
 
 const THROTTLE = 1000;
 
-export const TTSButton = ({ text, sourceLang, ...props }: { text: string, sourceLang: LanguageDetailsResult }) => {
-    const [tts, setTTS] = useState(false);
-    const [audio, setAudio] = useState<HTMLAudioElement>(null);
-
-    useEffect(() => {
-        if (!audio) { return }
-        audio.play();
-    }, [audio])
-
-    useEffect(() => {
-        if (tts) {
-            request<TTSRequest>("/tts", {
-                params: {
-                    text: text,
-                    lang: sourceLang.id
-                }
-            })
-                .then(response => {
-                    if (!response.success) { return }
-                    const buffer = Buffer.from(response.data.base64, 'base64')
-                    const blob = new Blob([buffer])
-                    setAudio(new Audio(URL.createObjectURL(blob)))
-                })
-            setTTS(false);
-        }
-    }, [tts]);
-    return <button className="opacity-80 hover:opacity-100 transition active:scale-95" onClick={() => setTTS(true)}>
-        <TTSIcon />
-    </button>
-}
-
 export const MainResultLoader = (props) => {
     return <div className="w-1/3 mb-2 p-1 mx-1 min-w-[300px]">
         <Card clickable shadow={false}>
@@ -169,7 +137,7 @@ export const MainResultCard = ({ text, language, service, loading, onNewTranslat
                 <TTSButton text={currentText} sourceLang={language} />
                 {
                     service
-                        ? <CopyIcon onClick={() => {navigator.clipboard.writeText(currentText)}} className="opacity-80 hover:opacity-100 transition active:scale-95 cursor-pointer" />
+                        ? <CopyIcon onClick={() => { navigator.clipboard.writeText(currentText) }} className="opacity-70 hover:opacity-100 transition active:scale-95 cursor-pointer" />
                         : ""
                 }
             </div>

website/components/ui/cards/subResult.tsx

@@ -1,9 +1,12 @@
 import { Card } from "@nextui-org/react"
 import ContentLoader from "react-content-loader";
+import { CopyIcon } from "components/icons/copy";
 import { Service } from "lib/services"
 import { ServiceElement } from "components/common/service"
+import { TTSButton } from "../buttons/tts";
 import { TranslateRequest } from "types/translate"
 import { useLanguage } from "contexts/language";
+import { useState } from "react";
 
 export const SubResultLoader = (props) => {
     return <div className="w-1/3 mb-2 p-1 mx-1 min-w-[300px]">
@@ -25,14 +28,23 @@ export const SubResultLoader = (props) => {
 
 export const SubResult = ({ result, ...props }: { result: TranslateRequest }) => {
     const { strings } = useLanguage();
+    const [expanded, setExpanded] = useState<boolean>(false);
     const service = new Service(result.data.service)
     return <div className="w-1/4 p-1 mx-1 min-w-[300px]">
-        <Card onClick={() => {navigator.clipboard.writeText(result.data.result)}} clickable={result.success} shadow={false} className={result.success ? "opacity-100" : "opacity-50"}>
-            <span>
+        <Card clickable={result.success} shadow={false} className={result.success ? "opacity-100" : "opacity-50"}>
+            <span onClick={() => { setExpanded(expanded => !expanded) }} className={expanded ? "h-max" : "max-h-[7.5rem]"}>
                 {result.success ? result.data.result : strings.labels.translationFailure}
             </span>
-            <Card.Footer className="flex-start">
+            <Card.Footer className="flex-start z-[2]">
                 <ServiceElement service={service} />
+                {
+                    result.success
+                        ? <div className="ml-auto flex flex-row space-x-2">
+                            <TTSButton text={result.data.result} sourceLang={result.data.destinationLanguage} />
+                            <CopyIcon onClick={(ev) => { navigator.clipboard.writeText(result.data.result); ev.stopPropagation(); }} className="opacity-70 hover:opacity-100 transition active:scale-95 cursor-pointer" />
+                        </div>
+                        : ""
+                }
             </Card.Footer>
         </Card>
     </div>

website/components/ui/textareas/source.tsx

@@ -6,7 +6,6 @@ export const SourceTextArea = (props: TextareaAutosizeProps) => {
     const { strings } = useLanguage();
     return (
         <TextareaAutosize
-            maxRows={10}
             style={{ resize: "none" }}
             className="mt-3 mb-5 w-full outline-none"
             placeholder={strings.placeholders.translationTextArea}