Add live captions viewer and language selection
This commit is contained in:
Adolfo Reyna
152
Views/LiveCaptions.js
Normal file
152
Views/LiveCaptions.js
Normal file
@@ -0,0 +1,152 @@
|
||||
import React from "react";
|
||||
import { View, FlatList } from "react-native";
|
||||
import { Text, Chip, Menu, Button } from "react-native-paper";
|
||||
import API from "../API.js";
|
||||
import i18n from "../i18nMessages.js";
|
||||
|
||||
const POLL_MS = 1800;
|
||||
|
||||
const toLangLabel = (lang = "") => {
|
||||
const normalized = String(lang || "").toLowerCase();
|
||||
if (!normalized || normalized === "original") return i18n.t("message.originalLanguage");
|
||||
if (normalized === "en") return i18n.t("message.languageEnglish");
|
||||
if (normalized === "es") return i18n.t("message.languageSpanish");
|
||||
if (normalized === "fr") return i18n.t("message.languageFrench");
|
||||
if (normalized === "da") return i18n.t("message.languageDanish");
|
||||
return normalized.toUpperCase();
|
||||
};
|
||||
|
||||
const CaptionRow = ({ item, selectedLang }) => {
|
||||
const translation = item?.translations?.[selectedLang];
|
||||
const displayTranslation = translation || item?.original || "";
|
||||
const isFallback = !translation && selectedLang && selectedLang !== "original" && selectedLang !== item?.sourceLang;
|
||||
return (
|
||||
<View style={{ marginBottom: 12, backgroundColor: "#fff", borderRadius: 10, padding: 12, borderWidth: 1, borderColor: "#e5e7eb" }}>
|
||||
<Text style={{ color: "#6b7280", fontSize: 11, marginBottom: 4 }}>
|
||||
{item?.sourceLang ? `${i18n.t("message.originalLanguage")}: ${toLangLabel(item.sourceLang)}` : i18n.t("message.originalLanguage")}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 18, fontWeight: "700", color: "#111827" }}>
|
||||
{item?.original || ""}
|
||||
</Text>
|
||||
<Text style={{ color: "#6b7280", fontSize: 11, marginTop: 8, marginBottom: 4 }}>
|
||||
{i18n.t("message.selectedTranslation")}: {toLangLabel(selectedLang)}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 16, color: "#1f2937" }}>
|
||||
{displayTranslation}
|
||||
</Text>
|
||||
{isFallback ? (
|
||||
<Text style={{ fontSize: 11, color: "#6b7280", marginTop: 6 }}>
|
||||
{i18n.t("message.translationFallback")}
|
||||
</Text>
|
||||
) : <></>}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const LiveCaptions = () => {
|
||||
const [captions, setCaptions] = React.useState([]);
|
||||
const [availableLanguages, setAvailableLanguages] = React.useState([]);
|
||||
const [selectedLang, setSelectedLang] = React.useState((i18n?.locale || "en").toLowerCase());
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [langMenuVisible, setLangMenuVisible] = React.useState(false);
|
||||
const latestSequenceRef = React.useRef(0);
|
||||
|
||||
const refresh = React.useCallback(async (initial = false) => {
|
||||
const sinceSequence = initial ? undefined : latestSequenceRef.current;
|
||||
const response = await API.getLiveCaptions(sinceSequence, 50);
|
||||
const incoming = Array.isArray(response?.captions) ? response.captions : [];
|
||||
const languages = Array.isArray(response?.availableLanguages) ? response.availableLanguages : [];
|
||||
|
||||
if (initial) {
|
||||
setCaptions(incoming);
|
||||
} else if (incoming.length > 0) {
|
||||
setCaptions((prev) => {
|
||||
const bySequence = new Map(prev.map((item) => [item.sequence, item]));
|
||||
incoming.forEach((item) => {
|
||||
if (!item || !Number.isFinite(item.sequence)) return;
|
||||
bySequence.set(item.sequence, item);
|
||||
});
|
||||
return Array.from(bySequence.values()).sort((a, b) => (a.sequence || 0) - (b.sequence || 0)).slice(-150);
|
||||
});
|
||||
}
|
||||
|
||||
if (Number.isFinite(response?.latestSequence)) {
|
||||
latestSequenceRef.current = response.latestSequence;
|
||||
} else if (incoming.length) {
|
||||
const maxSeq = incoming.reduce((acc, item) => Math.max(acc, Number(item?.sequence) || 0), latestSequenceRef.current);
|
||||
latestSequenceRef.current = maxSeq;
|
||||
}
|
||||
|
||||
setAvailableLanguages(languages);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
refresh(true);
|
||||
const interval = setInterval(() => {
|
||||
refresh(false);
|
||||
}, POLL_MS);
|
||||
return () => clearInterval(interval);
|
||||
}, [refresh]);
|
||||
|
||||
const languageOptions = React.useMemo(() => {
|
||||
const unique = new Set(["original", ...availableLanguages]);
|
||||
return Array.from(unique).filter(Boolean);
|
||||
}, [availableLanguages]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (languageOptions.includes(selectedLang)) return;
|
||||
if (languageOptions.length) setSelectedLang(languageOptions[0]);
|
||||
}, [languageOptions, selectedLang]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, padding: 14 }}>
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
|
||||
<View>
|
||||
<Text style={{ fontSize: 24, fontWeight: "700" }}>{i18n.t("message.liveCaptions")}</Text>
|
||||
<Text style={{ color: "#6b7280" }}>{i18n.t("message.liveCaptionsSubtitle")}</Text>
|
||||
</View>
|
||||
<Chip icon="circle" compact style={{ backgroundColor: "#ecfdf5" }} textStyle={{ color: "#047857" }}>
|
||||
{i18n.t("message.liveNow")}
|
||||
</Chip>
|
||||
</View>
|
||||
|
||||
<View style={{ marginBottom: 12 }}>
|
||||
<Text style={{ marginBottom: 6 }}>{i18n.t("message.translationLanguage")}</Text>
|
||||
<Menu
|
||||
visible={langMenuVisible}
|
||||
onDismiss={() => setLangMenuVisible(false)}
|
||||
anchor={
|
||||
<Button mode="outlined" onPress={() => setLangMenuVisible(true)}>
|
||||
{toLangLabel(selectedLang)}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{languageOptions.map((lang) => (
|
||||
<Menu.Item
|
||||
key={lang}
|
||||
title={toLangLabel(lang)}
|
||||
onPress={() => {
|
||||
setSelectedLang(lang);
|
||||
setLangMenuVisible(false);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Menu>
|
||||
</View>
|
||||
|
||||
{isLoading ? <Text>{i18n.t("message.loadingLiveCaptions")}</Text> : <></>}
|
||||
{!isLoading && captions.length === 0 ? <Text>{i18n.t("message.awaitingLiveCaptions")}</Text> : <></>}
|
||||
|
||||
<FlatList
|
||||
data={captions}
|
||||
keyExtractor={(item, index) => `${item?.sequence || "caption"}-${index}`}
|
||||
renderItem={({ item }) => <CaptionRow item={item} selectedLang={selectedLang} />}
|
||||
contentContainerStyle={{ paddingBottom: 18 }}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default LiveCaptions;
|
||||
@@ -88,6 +88,7 @@ let MenuView = ({ navigation }) => {
|
||||
<List.Section title={i18n.t("message.userActions")}>
|
||||
<List.Item key='ProfileEditor' title={i18n.t('message.profile')} onPress={() => { navigation.navigate("ProfileSettings") }} left={props => <List.Icon {...props} icon="person" />} />
|
||||
<List.Item key='GlobalChat' title='Global Chat' onPress={() => { navigation.navigate("GlobalChat") }} left={props => <List.Icon {...props} icon="chat" />} />
|
||||
<List.Item key='LiveCaptions' title={i18n.t("message.liveCaptions")} onPress={() => { navigation.navigate("LiveCaptions") }} left={props => <List.Icon {...props} icon="closed-caption" />} />
|
||||
<List.Item key='Settings' title={i18n.t('message.settings')} left={props => <List.Icon {...props} icon="settings" />} />
|
||||
<List.Item key="Logout" title={i18n.t('message.logout')} onPress={() => { navigation.navigate("Logout") }} left={props => <List.Icon {...props} icon="logout" />} />
|
||||
</List.Section>
|
||||
|
||||
Reference in New Issue
Block a user