commit
b8d9b0bb51
@ -5,6 +5,11 @@ import { RelaySettings } from "Nostr/Connection";
|
||||
*/
|
||||
export const ApiHost = "https://api.snort.social";
|
||||
|
||||
/**
|
||||
* LibreTranslate endpoint
|
||||
*/
|
||||
export const TranslateHost = "https://translate.snort.social";
|
||||
|
||||
/**
|
||||
* Void.cat file upload service url
|
||||
*/
|
||||
|
@ -7,7 +7,7 @@ import ProfileImage from "Element/ProfileImage";
|
||||
import Text from "Element/Text";
|
||||
|
||||
import { eventLink, getReactions, hexToBech32 } from "Util";
|
||||
import NoteFooter from "Element/NoteFooter";
|
||||
import NoteFooter, { Translation } from "Element/NoteFooter";
|
||||
import NoteTime from "Element/NoteTime";
|
||||
import EventKind from "Nostr/EventKind";
|
||||
import { useUserProfiles } from "Feed/ProfileFeed";
|
||||
@ -48,7 +48,7 @@ const HiddenNote = ({ children }: any) => {
|
||||
|
||||
export default function Note(props: NoteProps) {
|
||||
const navigate = useNavigate();
|
||||
const { data, isThread, related, highlight, options: opt, ["data-ev"]: parsedEvent, ignoreModeration = false} = props
|
||||
const { data, isThread, related, highlight, options: opt, ["data-ev"]: parsedEvent, ignoreModeration = false } = props
|
||||
const ev = useMemo(() => parsedEvent ?? new NEvent(data), [data]);
|
||||
const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
|
||||
const users = useUserProfiles(pubKeys);
|
||||
@ -58,6 +58,7 @@ export default function Note(props: NoteProps) {
|
||||
const { ref, inView, entry } = useInView({ triggerOnce: true });
|
||||
const [extendable, setExtendable] = useState<boolean>(false);
|
||||
const [showMore, setShowMore] = useState<boolean>(false);
|
||||
const [translated, setTranslated] = useState<Translation>();
|
||||
|
||||
const options = {
|
||||
showHeader: true,
|
||||
@ -97,7 +98,7 @@ export default function Note(props: NoteProps) {
|
||||
|
||||
const maxMentions = 2;
|
||||
let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
|
||||
let mentions: {pk: string, name: string, link: ReactNode}[] = [];
|
||||
let mentions: { pk: string, name: string, link: ReactNode }[] = [];
|
||||
for (let pk of ev.Thread?.PubKeys) {
|
||||
const u = users?.get(pk);
|
||||
const npub = hexToBech32("npub", pk)
|
||||
@ -163,6 +164,17 @@ export default function Note(props: NoteProps) {
|
||||
);
|
||||
}
|
||||
|
||||
function translation() {
|
||||
if (translated && translated.confidence > 0.5) {
|
||||
return <>
|
||||
<p className="highlight">Translated from {translated.fromLanguage}:</p>
|
||||
{translated.text}
|
||||
</>
|
||||
} else if (translated) {
|
||||
return <p className="highlight">Translation failed</p>
|
||||
}
|
||||
}
|
||||
|
||||
function content() {
|
||||
if (!inView) return null;
|
||||
return (
|
||||
@ -177,11 +189,12 @@ export default function Note(props: NoteProps) {
|
||||
</div> : null}
|
||||
<div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
|
||||
{transformBody()}
|
||||
{translation()}
|
||||
</div>
|
||||
{extendable && !showMore && (<div className="flex f-center">
|
||||
<button className="show-more" onClick={() => setShowMore(true)}>Show more</button>
|
||||
</div>)}
|
||||
{options.showFooter ? <NoteFooter ev={ev} related={related} /> : null}
|
||||
{options.showFooter ? <NoteFooter ev={ev} related={related} onTranslated={(t) => setTranslated(t)} /> : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { faTrash, faRepeat, faShareNodes, faCopy, faCommentSlash, faBan } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faTrash, faRepeat, faShareNodes, faCopy, faCommentSlash, faBan, faLanguage } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Menu, MenuItem } from '@szhsin/react-menu';
|
||||
|
||||
@ -21,10 +21,18 @@ import { HexKey, TaggedRawEvent } from "Nostr";
|
||||
import EventKind from "Nostr/EventKind";
|
||||
import { UserPreferences } from "State/Login";
|
||||
import useModeration from "Hooks/useModeration";
|
||||
import { TranslateHost } from "Const";
|
||||
|
||||
export interface Translation {
|
||||
text: string,
|
||||
fromLanguage: string,
|
||||
confidence: number
|
||||
}
|
||||
|
||||
export interface NoteFooterProps {
|
||||
related: TaggedRawEvent[],
|
||||
ev: NEvent
|
||||
ev: NEvent,
|
||||
onTranslated?: (content: Translation) => void
|
||||
}
|
||||
|
||||
export default function NoteFooter(props: NoteFooterProps) {
|
||||
@ -38,6 +46,8 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
const [reply, setReply] = useState(false);
|
||||
const [tip, setTip] = useState(false);
|
||||
const isMine = ev.RootPubKey === login;
|
||||
const lang = window.navigator.language;
|
||||
const langNames = new Intl.DisplayNames([...window.navigator.languages], { type: "language" });
|
||||
const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related, ev]);
|
||||
const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related, ev]);
|
||||
const groupReactions = useMemo(() => {
|
||||
@ -144,6 +154,29 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
}
|
||||
}
|
||||
|
||||
async function translate() {
|
||||
const res = await fetch(`${TranslateHost}/translate`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
q: ev.Content,
|
||||
source: "auto",
|
||||
target: "en"
|
||||
}),
|
||||
headers: { "Content-Type": "application/json" }
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
let result = await res.json();
|
||||
if (typeof props.onTranslated === "function" && result) {
|
||||
props.onTranslated({
|
||||
text: result.translatedText,
|
||||
fromLanguage: langNames.of(result.detectedLanguage.language),
|
||||
confidence: result.detectedLanguage.confidence
|
||||
} as Translation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function copyId() {
|
||||
await navigator.clipboard.writeText(hexToBech32("note", ev.Id));
|
||||
}
|
||||
@ -179,6 +212,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
<FontAwesomeIcon icon={faBan} />
|
||||
Block
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => translate()}>
|
||||
<FontAwesomeIcon icon={faLanguage} />
|
||||
Translate to {langNames.of(lang.split("-")[0])}
|
||||
</MenuItem>
|
||||
{prefs.showDebugMenus && (
|
||||
<MenuItem onClick={() => copyEvent()}>
|
||||
<FontAwesomeIcon icon={faCopy} />
|
||||
|
@ -9,7 +9,6 @@ import { faShop } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import useEventPublisher from "Feed/EventPublisher";
|
||||
import { useUserProfile } from "Feed/ProfileFeed";
|
||||
import VoidUpload from "Feed/VoidUpload";
|
||||
import LogoutButton from "Element/LogoutButton";
|
||||
import { hexToBech32, openFile } from "Util";
|
||||
import Copy from "Element/Copy";
|
||||
|
Loading…
Reference in New Issue
Block a user