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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
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 speakerIcon from "../assets/icons/speaker.svg";
import type { AnalyzeRes, Meaning } from "../logic/types";
import { ColoredText } from "./Sentence.tsx";
import { P, Span, useSpeechSynthesis } from "../hooks/useLang.tsx";
function Word({ data, lang }: { data: AnalyzeRes; lang: string }) {
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 [error, setError] = useState("");
const [loading, setLoading] = useState(true);
const [meanings, setM] = useState<Meaning[]>([]);
const [font, setFont] = useState(0);
function changeFont() {
if (font === 6) setFont(0);
else setFont(font + 1);
}
const { voices, speaking, speak, stop } = useSpeechSynthesis();
function playAudio() {
console.log({ voices, speaking });
console.log("word", data.word);
speak(data.word);
}
async function saveW() {}
return (
<div className={`font-${font}`} id="word-modal" title={data.word}>
<img className="font-icon cp" onClick={changeFont} src={fontIcon} />
<img className="save-icon cp" onClick={saveW} src={bookmarkIcon} />
<div className="original">
<ColoredText frags={data.syllables} />
</div>
<div className="pronunciation IPA flex1 flex-center">
<P>{`/${data.ipa.replace(/\s/g, "")}/`}</P>
<img onClick={playAudio} className="icon cp" src={speakerIcon} />
</div>
<div className="meanings">
{loading ? (
<img src={spinner} className="spinner bc" />
) : (
meanings.map((m) => (
<div key={JSON.stringify(m)} className="meaning">
<div className="pos">
<Span>{m.pos}</Span>
</div>
<ol>
{m.meaning.map((t, i) => (
<li key={t + i} className="translation">
<P>{t}</P>
</li>
))}
</ol>
</div>
))
)}
{error && <div className="error">{error}</div>}
</div>
</div>
);
}
export default Word;
// function FloatingButtons({
// tweet,
// avatar,
// changeFont,
// }: {
// tweet: Tweet;
// avatar: string;
// changeFont: any;
// }) {
// const { apiKeys, prompts, setModal } = useGlobalState();
// function openUser() {}
// function openComments() {}
// function openShare() {}
// async function doLike() {
// const key = apiKeys.openai;
// // TODO hide button if key not set
// console.log(tweet.text, "whole text");
// console.log(tweet.media, "media");
// if (tweet.media[0] && !tweet.media[0].isVideo) {
// const res = await vision(tweet.media[0].url, "", key);
// console.log(res, "vision res");
// }
// // const res = await translate(tweet.text, prompts.translate,key);
// // if ("ok" in res)
// // setModal(<TranslationModal text={res.ok.choices[0].message.content}/>)
// }
// async function doBookmark() {}
// return (
// <div id="entry-icons">
// <div className="avatar">
// <img className="cp" onClick={openUser} src={avatar} />
// </div>
// <img className="cp" onClick={doLike} src={likeIcon} />
// <img className="cp" onClick={openComments} src={commentsIcon} />
// <img className="cp" onClick={doBookmark} src={bookmarkIcon} />
// <img className="cp" onClick={openShare} src={shareIcon} />
// <img className="cp" onClick={changeFont} src={fontIcon} />
// </div>
// );
// }
|
