feat: integrate post AI translation with UI toggle and backend queue
This commit is contained in:
@@ -26,6 +26,7 @@ let Post = (props) => {
|
||||
const [deleted, setDeleted] = useState(false);
|
||||
let [likes, changeLikes] = useState(Object.keys(post.reactions).length);
|
||||
let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
|
||||
const [translating, setTranslating] = useState(false);
|
||||
const isOwner = String(post.profileid || '') === String(viewer?._id || '');
|
||||
const swipeX = useRef(new Animated.Value(0)).current;
|
||||
const mediaGestureActiveRef = useRef(false);
|
||||
@@ -34,6 +35,30 @@ let Post = (props) => {
|
||||
<ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
|
||||
let cleanContent = stripInlineTags(stripBibleTokens(post.content));
|
||||
const navigation = useNavigation();
|
||||
|
||||
const textWithoutUrls = cleanContent.replace(/(https?:\/\/[^\s]+)/g, '').trim();
|
||||
const hasTextContent = textWithoutUrls && textWithoutUrls.length > 0 && cleanContent.length < 1000;
|
||||
const currentLang = i18n.locale.substring(0, 2).toLowerCase();
|
||||
const hasTranslation = post.translations && post.translations[currentLang];
|
||||
const [showTranslation, setShowTranslation] = useState(!!hasTranslation);
|
||||
|
||||
const requestTranslation = async () => {
|
||||
setTranslating(true);
|
||||
try {
|
||||
await API.translatePost(post._id, i18n.locale);
|
||||
setTimeout(async () => {
|
||||
const updatedPost = await API.getPost(post._id);
|
||||
if (updatedPost && updatedPost.translations && updatedPost.translations[i18n.locale.substring(0, 2).toLowerCase()]) {
|
||||
changePost(updatedPost);
|
||||
setShowTranslation(true);
|
||||
}
|
||||
setTranslating(false);
|
||||
}, 3000);
|
||||
} catch (e) {
|
||||
setTranslating(false);
|
||||
}
|
||||
};
|
||||
|
||||
//cleanContent = convertLinks(cleanContent);
|
||||
const newComentAdded = (commentData) => {
|
||||
let newPostObj = { ...post };
|
||||
@@ -168,9 +193,37 @@ let Post = (props) => {
|
||||
{ pattern: /(https?:\/\/[^\s]+)/, style: styles.link, onPress: handleLinkPress, onLongPress: handleLinkLongPress },
|
||||
]}
|
||||
>
|
||||
{cleanContent}
|
||||
{showTranslation && hasTranslation ? stripInlineTags(stripBibleTokens(post.translations[currentLang])) : cleanContent}
|
||||
</ParsedText>
|
||||
</Pressable>
|
||||
{hasTextContent && (
|
||||
<View style={{ paddingLeft: 40, paddingRight: 8, marginTop: 4 }}>
|
||||
{hasTranslation && showTranslation ? (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingRight: 4 }}>
|
||||
<Text style={{ fontSize: 11, color: '#16a34a', fontStyle: 'italic' }}>
|
||||
{i18n.t("message.aiTranslated") || "AI Translated"}
|
||||
</Text>
|
||||
<Pressable onPress={() => setShowTranslation(false)}>
|
||||
<Text style={{ color: '#6b7280', fontSize: 11, fontWeight: '500' }}>
|
||||
{i18n.t("message.seeOriginal") || "See Original"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
) : (
|
||||
<Pressable onPress={() => {
|
||||
if (hasTranslation) {
|
||||
setShowTranslation(true);
|
||||
} else {
|
||||
requestTranslation();
|
||||
}
|
||||
}}>
|
||||
<Text style={{ color: '#2563eb', fontSize: 13, fontWeight: '600', marginBottom: 6 }}>
|
||||
{translating ? (i18n.t("message.translating") || "Translating...") : (i18n.t("message.seeTranslation") || "See Translation")}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
<View style={{ paddingLeft: 40, paddingRight: 8 }}>
|
||||
<BibleEmbeddedView content={post.content} openChapterOnPress />
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user