diff --git a/src/app/text-speaker/SaveList.tsx b/src/app/text-speaker/SaveList.tsx index 931d6e6..038b053 100644 --- a/src/app/text-speaker/SaveList.tsx +++ b/src/app/text-speaker/SaveList.tsx @@ -1,6 +1,5 @@ 'use client'; -import Button from "@/components/Button"; import { getTextSpeakerData, setTextSpeakerData } from "@/utils"; import { useState } from "react"; import z from "zod"; @@ -25,7 +24,7 @@ function TextCard({ handleDel(item); } return ( -
+
{item.text}
{item.ipa}
diff --git a/src/app/text-speaker/page.tsx b/src/app/text-speaker/page.tsx index fea1cd3..00808cd 100644 --- a/src/app/text-speaker/page.tsx +++ b/src/app/text-speaker/page.tsx @@ -4,7 +4,7 @@ import Button from "@/components/Button"; import IconClick from "@/components/IconClick"; import IMAGES from "@/config/images"; import { useAudioPlayer } from "@/hooks/useAudioPlayer"; -import { getTextSpeakerData, getTTSAudioUrl } from "@/utils"; +import { getTextSpeakerData, getTTSAudioUrl, setTextSpeakerData } from "@/utils"; import { ChangeEvent, useEffect, useRef, useState } from "react"; import SaveList from "./SaveList"; import { TextSpeakerItemSchema } from "@/interfaces"; @@ -14,7 +14,7 @@ export default function Home() { const textareaRef = useRef(null); const [showSpeedAdjust, setShowSpeedAdjust] = useState(false); const [showSaveList, setShowSaveList] = useState(false); - + const [saving, setSaving] = useState(false); const [ipaEnabled, setIPAEnabled] = useState(false); const [speed, setSpeed] = useState(1); const [pause, setPause] = useState(true); @@ -24,7 +24,6 @@ export default function Home() { const [ipa, setIPA] = useState(''); const objurlRef = useRef(null); const [processing, setProcessing] = useState(false); - const [voicesData, setVoicesData] = useState<{ locale: string, short_name: string @@ -170,8 +169,11 @@ export default function Home() { } const save = async () => { + if (saving) return; if (textRef.current.length === 0) return; + setSaving(true); + try { let theLocale = locale; if (!theLocale) { @@ -198,15 +200,13 @@ export default function Home() { const oldIndex = save.findIndex(v => v.text === textRef.current); if (oldIndex !== -1) { const oldItem = save[oldIndex]; - if ((!oldItem.ipa) || (oldItem.ipa !== theIPA)) { - oldItem.ipa = theIPA; - localStorage.setItem('text-speaker', JSON.stringify(save)); - return; - } else { - return; + if (theIPA) { + if ((!oldItem.ipa || (oldItem.ipa !== theIPA))) { + oldItem.ipa = theIPA; + setTextSpeakerData(save); + } } - } - if (theIPA.length === 0) { + } else if (theIPA.length === 0) { save.push({ text: textRef.current, locale: theLocale @@ -218,10 +218,12 @@ export default function Home() { ipa: theIPA }); } - localStorage.setItem('text-speaker', JSON.stringify(save)); + setTextSpeakerData(save); } catch (e) { console.error(e); setLocale(null); + } finally { + setSaving(false); } } @@ -278,7 +280,8 @@ export default function Home() { className={`${showSpeedAdjust ? 'bg-gray-200' : ''}`}> + alt="save" + className={`${saving ? 'bg-gray-200' : ''}`}>