...

src/app/(features)/memorize/Memorize.tsx

@@ -6,7 +6,7 @@ import Container from "@/components/cards/Container";
 import { useState } from "react";
 import LightButton from "@/components/buttons/LightButton";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { getTTSAudioUrl } from "@/lib/tts";
+import { getTTSAudioUrl } from "@/lib/browser/tts";
 import { VOICES } from "@/config/locales";
 import { useTranslations } from "next-intl";
 

src/app/(features)/memorize/page.tsx

@@ -6,11 +6,11 @@ import { getTranslations } from "next-intl/server";
 import {
   getFoldersWithTotalPairsByOwner,
   getOwnerByFolderId,
-} from "@/lib/services/folderService";
+} from "@/lib/actions/services/folderService";
 import { isNonNegativeInteger } from "@/lib/utils";
 import FolderSelector from "./FolderSelector";
 import Memorize from "./Memorize";
-import { getTextPairsByFolderId } from "@/lib/services/textPairService";
+import { getTextPairsByFolderId } from "@/lib/actions/services/textPairService";
 
 export default async function MemorizePage({
   searchParams,

src/app/(features)/srt-player/VideoPlayer/SubtitleDisplay.tsx

@@ -1,13 +1,16 @@
-import { inspect } from "@/lib/utils";
-
 export default function SubtitleDisplay({ subtitle }: { subtitle: string }) {
   const words = subtitle.match(/\b[\w']+(?:-[\w']+)*\b/g) || [];
   let i = 0;
   return (
-    <div className="w-full subtitle overflow-auto h-16 mt-2 break-words bg-black/50 font-sans text-white text-center text-2xl">
+    <div className="w-full subtitle overflow-auto h-16 mt-2 wrap-break-word bg-black/50 font-sans text-white text-center text-2xl">
       {words.map((v) => (
         <span
-          onClick={inspect(v)}
+          onClick={() => {
+            window.open(
+              `https://www.youdao.com/result?word=${v}&lang=en`,
+              "_blank",
+            );
+          }}
           key={i++}
           className="hover:bg-gray-700 hover:underline hover:cursor-pointer"
         >

src/app/(features)/text-speaker/SaveList.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { getLocalStorageOperator } from "@/lib/utils";
 import { useState } from "react";
 import z from "zod";
 import {
@@ -10,6 +9,7 @@ import {
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { useTranslations } from "next-intl";
+import { getLocalStorageOperator } from "@/lib/browser/localStorageOperators";
 
 interface TextCardProps {
   item: z.infer<typeof TextSpeakerItemSchema>;

src/app/(features)/text-speaker/page.tsx

@@ -8,13 +8,15 @@ import {
   TextSpeakerArraySchema,
   TextSpeakerItemSchema,
 } from "@/lib/interfaces";
-import { getLocalStorageOperator, getTTSAudioUrl } from "@/lib/utils";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import z from "zod";
 import SaveList from "./SaveList";
 
 import { VOICES } from "@/config/locales";
 import { useTranslations } from "next-intl";
+import { getLocalStorageOperator } from "@/lib/browser/localStorageOperators";
+import { getTTSAudioUrl } from "@/lib/browser/tts";
+import { genIPA, genLocale } from "@/lib/actions/translatorActions";
 
 export default function TextSpeakerPage() {
   const t = useTranslations("text_speaker");
@@ -94,14 +96,9 @@ export default function TextSpeakerPage() {
             let theLocale = locale;
             if (!theLocale) {
               console.log("downloading text info");
-              const params = new URLSearchParams({
-                text: textRef.current.slice(0, 30),
-              });
-              const textinfo = await (
-                await fetch(`/api/locale?${params}`)
-              ).json();
-              setLocale(textinfo.locale);
-              theLocale = textinfo.locale as string;
+              const tmp_locale = await genLocale(textRef.current.slice(0, 30));
+              setLocale(tmp_locale);
+              theLocale = tmp_locale;
             }
 
             const voice = VOICES.find((v) => v.locale.startsWith(theLocale));
@@ -184,22 +181,16 @@ export default function TextSpeakerPage() {
       let theLocale = locale;
       if (!theLocale) {
         console.log("downloading text info");
-        const params = new URLSearchParams({
-          text: textRef.current.slice(0, 30),
-        });
-        const textinfo = await (await fetch(`/api/locale?${params}`)).json();
-        setLocale(textinfo.locale);
-        theLocale = textinfo.locale as string;
+        const tmp_locale = await genLocale(textRef.current.slice(0, 30));
+        setLocale(tmp_locale);
+        theLocale = tmp_locale;
       }
 
       let theIPA = ipa;
       if (ipa.length === 0 && ipaEnabled) {
-        const params = new URLSearchParams({
-          text: textRef.current,
-        });
-        const tmp = await (await fetch(`/api/ipa?${params}`)).json();
-        setIPA(tmp.ipa);
-        theIPA = tmp.ipa;
+        const tmp_ipa = await genIPA(textRef.current);
+        setIPA(tmp_ipa);
+        theIPA = tmp_ipa;
       }
 
       const save = getFromLocalStorage();

src/app/(features)/translator/AddToFolder.tsx

@@ -5,9 +5,9 @@ import { useSession } from "next-auth/react";
 import { Dispatch, useEffect, useState } from "react";
 import z from "zod";
 import { folder } from "../../../../generated/prisma/browser";
-import { getFoldersByOwner } from "@/lib/services/folderService";
+import { getFoldersByOwner } from "@/lib/actions/services/folderService";
 import { Folder } from "lucide-react";
-import { createTextPair } from "@/lib/services/textPairService";
+import { createTextPair } from "@/lib/actions/services/textPairService";
 import { toast } from "sonner";
 import { useTranslations } from "next-intl";
 

src/app/(features)/translator/FolderSelector.tsx

@@ -1,7 +1,7 @@
 import Container from "@/components/cards/Container";
 import { useEffect, useState } from "react";
 import { folder } from "../../../../generated/prisma/browser";
-import { getFoldersByOwner } from "@/lib/services/folderService";
+import { getFoldersByOwner } from "@/lib/actions/services/folderService";
 import LightButton from "@/components/buttons/LightButton";
 import { Folder } from "lucide-react";
 

src/app/(features)/translator/page.tsx

@@ -6,9 +6,8 @@ import IMAGES from "@/config/images";
 import { VOICES } from "@/config/locales";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
 import { TranslationHistorySchema } from "@/lib/interfaces";
-import { tlsoPush, tlso } from "@/lib/localStorageOperators";
-import { getTTSAudioUrl } from "@/lib/tts";
-import { shallowEqual } from "@/lib/utils";
+import { tlsoPush, tlso } from "@/lib/browser/localStorageOperators";
+import { getTTSAudioUrl } from "@/lib/browser/tts";
 import { Plus, Trash } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
@@ -22,7 +21,8 @@ import {
 import { toast } from "sonner";
 import FolderSelector from "./FolderSelector";
 import { useSession } from "next-auth/react";
-import { createTextPair } from "@/lib/services/textPairService";
+import { createTextPair } from "@/lib/actions/services/textPairService";
+import { shallowEqual } from "@/lib/utils";
 
 export default function TranslatorPage() {
   const t = useTranslations("translator");
@@ -64,6 +64,7 @@ export default function TranslatorPage() {
         lastTTS.current.url = url;
       } catch (error) {
         toast.error("Failed to generate audio");
+        console.error(error);
       }
     }
     await play();

src/app/(features)/translator_old/AddToFolder.tsx

@@ -1,84 +0,0 @@
-import LightButton from "@/components/buttons/LightButton";
-import Container from "@/components/cards/Container";
-import { TranslationHistorySchema } from "@/lib/interfaces";
-import { useSession } from "next-auth/react";
-import { Dispatch, useEffect, useState } from "react";
-import z from "zod";
-import { folder } from "../../../../generated/prisma/browser";
-import { getFoldersByOwner } from "@/lib/services/folderService";
-import { Folder } from "lucide-react";
-import { createTextPair } from "@/lib/services/textPairService";
-import { toast } from "sonner";
-import { useTranslations } from "next-intl";
-
-interface AddToFolderProps {
-  item: z.infer<typeof TranslationHistorySchema>;
-  setShow: Dispatch<React.SetStateAction<boolean>>;
-}
-
-const AddToFolder: React.FC<AddToFolderProps> = ({ item, setShow }) => {
-  const session = useSession();
-  const [folders, setFolders] = useState<folder[]>([]);
-  const t = useTranslations("translator.add_to_folder");
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const username = session.data!.user!.name as string;
-    getFoldersByOwner(username)
-      .then(setFolders)
-      .then(() => setLoading(false));
-  }, [session.data]);
-
-  if (session.status !== "authenticated") {
-    return (
-      <div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
-        <Container className="p-6">
-          <div>{t("notAuthenticated")}</div>
-        </Container>
-      </div>
-    );
-  }
-  return (
-    <div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
-      <Container className="p-6">
-        <h1>{t("chooseFolder")}</h1>
-        <div className="border border-gray-200 rounded-2xl">
-          {(loading && <span>...</span>) ||
-            (folders.length > 0 &&
-              folders.map((folder) => (
-                <button
-                  key={folder.id}
-                  className="p-2 flex items-center justify-start hover:bg-gray-50 gap-2 hover:cursor-pointer w-full border-b border-gray-200"
-                  onClick={() => {
-                    createTextPair({
-                      text1: item.text1,
-                      text2: item.text2,
-                      locale1: item.locale1,
-                      locale2: item.locale2,
-                      folders: {
-                        connect: {
-                          id: folder.id,
-                        },
-                      },
-                    })
-                      .then(() => {
-                        toast.success(t("success"));
-                        setShow(false);
-                      })
-                      .catch(() => {
-                        toast.error(t("error"));
-                      });
-                  }}
-                >
-                  <Folder />
-                  {t("folderInfo", { id: folder.id, name: folder.name })}
-                </button>
-              ))) || <div>{t("noFolders")}</div>}
-        </div>
-        <LightButton onClick={() => setShow(false)}>{t("close")}</LightButton>
-      </Container>
-    </div>
-  );
-};
-
-export default AddToFolder;

src/app/(features)/translator_old/page.tsx

@@ -1,307 +0,0 @@
-"use client";
-
-import LightButton from "@/components/buttons/LightButton";
-import IconClick from "@/components/IconClick";
-import IMAGES from "@/config/images";
-import { VOICES } from "@/config/locales";
-import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { TranslationHistorySchema } from "@/lib/interfaces";
-import { tlsoPush, tlso } from "@/lib/localStorageOperators";
-import { getTTSAudioUrl } from "@/lib/tts";
-import { letsFetch, shallowEqual } from "@/lib/utils";
-import { Plus, Trash } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { useRef, useState } from "react";
-import z from "zod";
-import AddToFolder from "./AddToFolder";
-
-export default function TranslatorPage() {
-  const t = useTranslations("translator");
-
-  const taref = useRef<HTMLTextAreaElement>(null);
-  const [lang, setLang] = useState<string>("chinese");
-  const [tresult, setTresult] = useState<string>("");
-  const [genIpa, setGenIpa] = useState(true);
-  const [ipaTexts, setIpaTexts] = useState(["", ""]);
-  const [processing, setProcessing] = useState(false);
-  const { load, play } = useAudioPlayer();
-  const [history, setHistory] = useState<
-    z.infer<typeof TranslationHistorySchema>[]
-  >(tlso.get());
-  const [showAddToFolder, setShowAddToFolder] = useState(false);
-  const [addToFolderItem, setAddToFolderItem] = useState<z.infer<
-    typeof TranslationHistorySchema
-  > | null>(null);
-
-  const lastTTS = useRef({
-    text: "",
-    url: "",
-  });
-
-  const tts = async (text: string, locale: string) => {
-    if (lastTTS.current.text !== text) {
-      const url = await getTTSAudioUrl(
-        text,
-        VOICES.find((v) => v.locale === locale)!.short_name,
-      );
-      await load(url);
-      lastTTS.current.text = text;
-      lastTTS.current.url = url;
-    }
-    play();
-  };
-
-  const translate = async () => {
-    if (processing) return;
-    setProcessing(true);
-
-    if (!taref.current) return;
-    const text = taref.current.value;
-
-    const newItem: {
-      text1: string | null;
-      text2: string | null;
-      locale1: string | null;
-      locale2: string | null;
-    } = {
-      text1: text,
-      text2: null,
-      locale1: null,
-      locale2: null,
-    };
-
-    const checkUpdateLocalStorage = (item: typeof newItem) => {
-      if (item.text1 && item.text2 && item.locale1 && item.locale2) {
-        setHistory(tlsoPush(item as z.infer<typeof TranslationHistorySchema>));
-      }
-    };
-    const innerStates = {
-      text2: false,
-      ipa1: !genIpa,
-      ipa2: !genIpa,
-    };
-    const checkUpdateProcessStates = () => {
-      if (innerStates.ipa1 && innerStates.ipa2 && innerStates.text2)
-        setProcessing(false);
-    };
-    const updateState = (stateName: keyof typeof innerStates) => () => {
-      innerStates[stateName] = true;
-      checkUpdateLocalStorage(newItem);
-      checkUpdateProcessStates();
-    };
-
-    // Fetch locale for text1
-    letsFetch(
-      `/api/v1/locale?text=${encodeURIComponent(text)}`,
-      (locale: string) => {
-        newItem.locale1 = locale;
-      },
-      console.log,
-      () => {},
-    );
-
-    if (genIpa)
-      // Fetch IPA for text1
-      letsFetch(
-        `/api/v1/ipa?text=${encodeURIComponent(text)}`,
-        (ipa: string) => setIpaTexts((prev) => [ipa, prev[1]]),
-        console.log,
-        updateState("ipa1"),
-      );
-    // Fetch translation for text2
-    letsFetch(
-      `/api/v1/translate?text=${encodeURIComponent(text)}&lang=${encodeURIComponent(lang)}`,
-      (text2) => {
-        setTresult(text2);
-        newItem.text2 = text2;
-        if (genIpa)
-          // Fetch IPA for text2
-          letsFetch(
-            `/api/v1/ipa?text=${encodeURIComponent(text2)}`,
-            (ipa: string) => setIpaTexts((prev) => [prev[0], ipa]),
-            console.log,
-            updateState("ipa2"),
-          );
-        // Fetch locale for text2
-        letsFetch(
-          `/api/v1/locale?text=${encodeURIComponent(text2)}`,
-          (locale: string) => {
-            newItem.locale2 = locale;
-          },
-          console.log,
-          () => {},
-        );
-      },
-      console.log,
-      updateState("text2"),
-    );
-  };
-
-  return (
-    <>
-      {/* TCard Component */}
-      <div className="w-screen flex flex-col md:flex-row md:justify-between gap-2 p-2">
-        {/* Card Component - Left Side */}
-        <div className="w-full md:w-1/2 flex flex-col-reverse gap-2">
-          {/* ICard1 Component */}
-          <div className="border border-gray-200 rounded-2xl w-full h-64 p-2">
-            <textarea
-              className="resize-none h-8/12 w-full focus:outline-0"
-              ref={taref}
-              onKeyDown={(e) => {
-                if (e.ctrlKey && e.key === "Enter") translate();
-              }}
-            ></textarea>
-            <div className="ipa w-full h-2/12 overflow-auto text-gray-600">
-              {ipaTexts[0]}
-            </div>
-            <div className="h-2/12 w-full flex justify-end items-center">
-              <IconClick
-                src={IMAGES.copy_all}
-                alt="copy"
-                onClick={async () => {
-                  await navigator.clipboard.writeText(
-                    taref.current?.value || "",
-                  );
-                }}
-              ></IconClick>
-              <IconClick
-                src={IMAGES.play_arrow}
-                alt="play"
-                onClick={() => {
-                  const t = taref.current?.value;
-                  if (!t) return;
-                  tts(t, tlso.get().find((v) => v.text1 === t)?.locale1 || "");
-                }}
-              ></IconClick>
-            </div>
-          </div>
-          <div className="option1 w-full flex flex-row justify-between items-center">
-            <span>{t("detectLanguage")}</span>
-            <LightButton
-              selected={genIpa}
-              onClick={() => setGenIpa((prev) => !prev)}
-            >
-              {t("generateIPA")}
-            </LightButton>
-          </div>
-        </div>
-
-        {/* Card Component - Right Side */}
-        <div className="w-full md:w-1/2 flex flex-col-reverse gap-2">
-          {/* ICard2 Component */}
-          <div className="bg-gray-100 rounded-2xl w-full h-64 p-2">
-            <div className="h-2/3 w-full overflow-y-auto">{tresult}</div>
-            <div className="ipa w-full h-1/6 overflow-y-auto text-gray-600">
-              {ipaTexts[1]}
-            </div>
-            <div className="h-1/6 w-full flex justify-end items-center">
-              <IconClick
-                src={IMAGES.copy_all}
-                alt="copy"
-                onClick={async () => {
-                  await navigator.clipboard.writeText(tresult);
-                }}
-              ></IconClick>
-              <IconClick
-                src={IMAGES.play_arrow}
-                alt="play"
-                onClick={() => {
-                  tts(
-                    tresult,
-                    tlso.get().find((v) => v.text2 === tresult)?.locale2 || "",
-                  );
-                }}
-              ></IconClick>
-            </div>
-          </div>
-          <div className="option2 w-full flex gap-1 items-center flex-wrap">
-            <span>{t("translateInto")}</span>
-            <LightButton
-              selected={lang === "chinese"}
-              onClick={() => setLang("chinese")}
-            >
-              {t("chinese")}
-            </LightButton>
-            <LightButton
-              selected={lang === "english"}
-              onClick={() => setLang("english")}
-            >
-              {t("english")}
-            </LightButton>
-            <LightButton
-              selected={lang === "italian"}
-              onClick={() => setLang("italian")}
-            >
-              {t("italian")}
-            </LightButton>
-            <LightButton
-              selected={!["chinese", "english", "italian"].includes(lang)}
-              onClick={() => {
-                const newLang = prompt(t("enterLanguage"));
-                if (newLang) {
-                  setLang(newLang);
-                }
-              }}
-            >
-              {t("other")}
-            </LightButton>
-          </div>
-        </div>
-      </div>
-
-      {/* TranslateButton Component */}
-      <div className="w-screen flex justify-center items-center">
-        <button
-          className={`duration-150 ease-in text-xl font-extrabold border rounded-4xl p-3 border-gray-200 h-16 ${processing ? "bg-gray-200" : "bg-white hover:bg-gray-200 hover:cursor-pointer"}`}
-          onClick={translate}
-        >
-          {t("translate")}
-        </button>
-      </div>
-      {history.length > 0 && (
-        <div className="m-6 flex flex-col items-center">
-          <h1 className="text-2xl font-light">{t("history")}</h1>
-          <div className="border border-gray-200 rounded-2xl m-4">
-            {history.toReversed().map((item, index) => (
-              <div key={index}>
-                <div className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start">
-                  <div className="flex-1 flex flex-col">
-                    <p className="text-sm font-light">{item.text1}</p>
-                    <p className="text-sm font-light">{item.text2}</p>
-                  </div>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={() => {
-                        setShowAddToFolder(true);
-                        setAddToFolderItem(item);
-                      }}
-                      className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-8 h-8 flex justify-center items-center"
-                    >
-                      <Plus />
-                    </button>
-                    <button
-                      onClick={() => {
-                        setHistory(
-                          tlso.set(
-                            tlso.get().filter((v) => !shallowEqual(v, item)),
-                          ) || [],
-                        );
-                      }}
-                      className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-8 h-8 flex justify-center items-center"
-                    >
-                      <Trash />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          {showAddToFolder && (
-            <AddToFolder setShow={setShowAddToFolder} item={addToFolderItem!} />
-          )}
-        </div>
-      )}
-    </>
-  );
-}