1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import React, { useCallback, useEffect, useState } from "react";
import spinner from "../assets/icons/spinner.svg";
import likeIcon from "../assets/icons/heart.svg";
import commentsIcon from "../assets/icons/quote.svg";
import shareIcon from "../assets/icons/share.svg";
import fontIcon from "../assets/icons/font.svg";
import bookmarkIcon from "../assets/icons/bookmark.svg";
import type { AnalyzeRes, ColorTheme, Meaning } from "@/logic/types";
import { P, Span, useSpeechSynthesis } from "@/hooks/useLang.tsx";
import type { FullWordData, Syllable, Tone } from "@sortug/langlib";
import { cycleNext } from "@sortug/lib";
import FontChanger from "../fonts/FontChanger.tsx";
import { assignColors } from "../Colors.tsx";
import { IconBadgeFilled, IconSpeakerphone } from "@tabler/icons-react";
function Phonetic({
data,
lang,
theme,
}: {
data: FullWordData;
lang: string;
theme: ColorTheme;
}) {
async function load() {
// const wiki = await fetchWiki(data.word);
// console.log(wiki, "wiki res");
// if ("ok" in wiki) setM(wiki.ok.meanings);
// else setError(wiki.error);
// setLoading(false);
}
useEffect(() => {
load();
}, []);
const [loading, setLoading] = useState(false);
const { voices, speaking, speak, stop } = useSpeechSynthesis();
function playAudio() {
setLoading(true);
console.log({ voices, speaking });
console.log("word", data);
speak(data.spelling);
setLoading(false);
}
console.log({ data });
async function saveW() {}
return (
<div className="phonetic-data">
<div className="pronunciation IPA flex1 flex-center">
<P>{data.phonetic.ipa}</P>
{loading ? (
<img src={spinner} className="spinner bc" />
) : (
<IconSpeakerphone onClick={playAudio} />
)}
</div>
<Syllables data={data} />
</div>
);
}
export default Phonetic;
function Syllables({ data }: { data: FullWordData }) {
const syllables = data.phonetic.syllables;
console.log(data.phonetic.tone_sequence);
const isTonal = !!data.phonetic.tone_sequence;
const colorMap = isTonal
? (s: Syllable) => s.tone.name
: (s: Syllable) => (s.stressed ? "stressed" : "neuter");
const colors = assignColors(syllables.map(colorMap));
return (
<div className="syllables">
{data.phonetic.syllables.map((syl) => (
<div className="syllable">
{syl.tone.letters && <Tone tone={syl.tone} />}
<span>{syl.spelling}</span>
</div>
))}
</div>
);
}
function Tone({ tone }: { tone: Tone }) {
return (
<div className="tone">
<IconBadgeFilled>{tone.letters}</IconBadgeFilled>
</div>
);
}
|
