143 lines
3.2 KiB
TypeScript
143 lines
3.2 KiB
TypeScript
// import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import {
|
|
CachedTranslator,
|
|
Translator,
|
|
language_matrix_entry,
|
|
} from "@/app/i18n/api";
|
|
import { longLang } from "@/app/i18n/lang";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import {
|
|
Button,
|
|
Image,
|
|
ImageBackground,
|
|
Pressable,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { Text } from "react-native";
|
|
import CountryFlag from "react-native-country-flag";
|
|
import { chooseCountry } from "@/app/i18n/countries";
|
|
|
|
type ISpeakButtonProps = {
|
|
language: language_matrix_entry;
|
|
translator?: Translator;
|
|
onLangSelected?: (lang: language_matrix_entry) => any | Promise<any>;
|
|
};
|
|
|
|
function iSpeak(language: language_matrix_entry) {
|
|
return `I speak ${language.name}.`;
|
|
}
|
|
|
|
async function iSpeakTr(
|
|
translator: CachedTranslator,
|
|
targetLang: language_matrix_entry
|
|
) {
|
|
const sourceStr = iSpeak(targetLang);
|
|
return await translator.translate(sourceStr, targetLang.code);
|
|
}
|
|
|
|
const DEFAULT_FLAGS = {
|
|
en: ["us", "gb"],
|
|
// "sq": ["al"],
|
|
ar: ["ae"],
|
|
es: ["es"],
|
|
pt: ["pt"],
|
|
ru: ["ru"],
|
|
it: ["it"],
|
|
ir: ["ie"],
|
|
sk: ["sk"],
|
|
ro: ["ro"],
|
|
ja: ["jp"],
|
|
ko: ["kp", "kr"],
|
|
el: ["gr"],
|
|
fr: ["fr"],
|
|
de: ["de"],
|
|
nl: ["nl"],
|
|
cz: ["cz"],
|
|
uk: ["ua"],
|
|
he: ["il"],
|
|
hi: ["in"],
|
|
gl: ["es"],
|
|
fa: ["ir"],
|
|
ur: ["pk"],
|
|
ga: ["ie"],
|
|
eo: ["es"],
|
|
};
|
|
|
|
const ISpeakButton = (props: ISpeakButtonProps) => {
|
|
const [title, setTitle] = useState<string | undefined>();
|
|
const [titleLoaded, setTitleLoaded] = useState<boolean>(false);
|
|
const [translator, setTranslator] = useState<Translator | undefined>(
|
|
undefined
|
|
);
|
|
|
|
useEffect(() => {
|
|
(async function () {
|
|
const tr = props.translator || (await CachedTranslator.getDefault());
|
|
if (!tr) {
|
|
console.error("Failed to construct cachedTranslator");
|
|
}
|
|
setTranslator(tr);
|
|
try {
|
|
// Replace with your actual async data fetching logic
|
|
const title2 = await iSpeakTr(tr, props.language);
|
|
setTitle(title2);
|
|
} catch (error) {
|
|
console.error("Error fetching data from %s: %s", tr.languageServer.baseUrl, error);
|
|
} finally {
|
|
setTitleLoaded(true);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
const countries =
|
|
// @ts-ignore
|
|
DEFAULT_FLAGS[props.language.code] || chooseCountry(props.language.code);
|
|
|
|
return title ? (
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() =>
|
|
props.onLangSelected && props.onLangSelected(props.language)
|
|
}
|
|
>
|
|
<View>
|
|
<View style={styles.flag}>
|
|
{countries &&
|
|
countries.map((c) => {
|
|
return <CountryFlag isoCode={c} size={25} key={c} />;
|
|
})}
|
|
</View>
|
|
<View>
|
|
<Text style={styles.iSpeakText}>{title}</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<Text>Loading...</Text>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
width: "20%",
|
|
borderRadius: 10,
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
height: 110,
|
|
alignSelf: "flex-start",
|
|
margin: 8,
|
|
},
|
|
flag: {},
|
|
iSpeak: {
|
|
textAlign: "center",
|
|
},
|
|
iSpeakText: {
|
|
textAlign: "center",
|
|
},
|
|
});
|
|
|
|
export default ISpeakButton;
|