commit
b8d9b0bb51
@ -5,6 +5,11 @@ import { RelaySettings } from "Nostr/Connection";
|
|||||||
*/
|
*/
|
||||||
export const ApiHost = "https://api.snort.social";
|
export const ApiHost = "https://api.snort.social";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LibreTranslate endpoint
|
||||||
|
*/
|
||||||
|
export const TranslateHost = "https://translate.snort.social";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Void.cat file upload service url
|
* Void.cat file upload service url
|
||||||
*/
|
*/
|
||||||
|
@ -7,7 +7,7 @@ import ProfileImage from "Element/ProfileImage";
|
|||||||
import Text from "Element/Text";
|
import Text from "Element/Text";
|
||||||
|
|
||||||
import { eventLink, getReactions, hexToBech32 } from "Util";
|
import { eventLink, getReactions, hexToBech32 } from "Util";
|
||||||
import NoteFooter from "Element/NoteFooter";
|
import NoteFooter, { Translation } from "Element/NoteFooter";
|
||||||
import NoteTime from "Element/NoteTime";
|
import NoteTime from "Element/NoteTime";
|
||||||
import EventKind from "Nostr/EventKind";
|
import EventKind from "Nostr/EventKind";
|
||||||
import { useUserProfiles } from "Feed/ProfileFeed";
|
import { useUserProfiles } from "Feed/ProfileFeed";
|
||||||
@ -16,17 +16,17 @@ import { useInView } from "react-intersection-observer";
|
|||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
|
|
||||||
export interface NoteProps {
|
export interface NoteProps {
|
||||||
data?: TaggedRawEvent,
|
data?: TaggedRawEvent,
|
||||||
isThread?: boolean,
|
isThread?: boolean,
|
||||||
related: TaggedRawEvent[],
|
related: TaggedRawEvent[],
|
||||||
highlight?: boolean,
|
highlight?: boolean,
|
||||||
ignoreModeration?: boolean,
|
ignoreModeration?: boolean,
|
||||||
options?: {
|
options?: {
|
||||||
showHeader?: boolean,
|
showHeader?: boolean,
|
||||||
showTime?: boolean,
|
showTime?: boolean,
|
||||||
showFooter?: boolean
|
showFooter?: boolean
|
||||||
},
|
},
|
||||||
["data-ev"]?: NEvent
|
["data-ev"]?: NEvent
|
||||||
}
|
}
|
||||||
|
|
||||||
const HiddenNote = ({ children }: any) => {
|
const HiddenNote = ({ children }: any) => {
|
||||||
@ -47,150 +47,163 @@ const HiddenNote = ({ children }: any) => {
|
|||||||
|
|
||||||
|
|
||||||
export default function Note(props: NoteProps) {
|
export default function Note(props: NoteProps) {
|
||||||
const navigate = useNavigate();
|
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 ev = useMemo(() => parsedEvent ?? new NEvent(data), [data]);
|
||||||
const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
|
const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
|
||||||
const users = useUserProfiles(pubKeys);
|
const users = useUserProfiles(pubKeys);
|
||||||
const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
|
const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
|
||||||
const { isMuted } = useModeration()
|
const { isMuted } = useModeration()
|
||||||
const isOpMuted = isMuted(ev.PubKey)
|
const isOpMuted = isMuted(ev.PubKey)
|
||||||
const { ref, inView, entry } = useInView({ triggerOnce: true });
|
const { ref, inView, entry } = useInView({ triggerOnce: true });
|
||||||
const [extendable, setExtendable] = useState<boolean>(false);
|
const [extendable, setExtendable] = useState<boolean>(false);
|
||||||
const [showMore, setShowMore] = useState<boolean>(false);
|
const [showMore, setShowMore] = useState<boolean>(false);
|
||||||
|
const [translated, setTranslated] = useState<Translation>();
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
showHeader: true,
|
showHeader: true,
|
||||||
showTime: true,
|
showTime: true,
|
||||||
showFooter: true,
|
showFooter: true,
|
||||||
...opt
|
...opt
|
||||||
};
|
};
|
||||||
|
|
||||||
const transformBody = useCallback(() => {
|
const transformBody = useCallback(() => {
|
||||||
let body = ev?.Content ?? "";
|
let body = ev?.Content ?? "";
|
||||||
if (deletions?.length > 0) {
|
if (deletions?.length > 0) {
|
||||||
return (<b className="error">Deleted</b>);
|
return (<b className="error">Deleted</b>);
|
||||||
}
|
}
|
||||||
return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
|
return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
|
||||||
}, [ev]);
|
}, [ev]);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
if (entry && inView && extendable === false) {
|
if (entry && inView && extendable === false) {
|
||||||
let h = entry?.target.clientHeight ?? 0;
|
let h = entry?.target.clientHeight ?? 0;
|
||||||
if (h > 650) {
|
if (h > 650) {
|
||||||
setExtendable(true);
|
setExtendable(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [inView, entry, extendable]);
|
}, [inView, entry, extendable]);
|
||||||
|
|
||||||
function goToEvent(e: any, id: u256) {
|
function goToEvent(e: any, id: u256) {
|
||||||
if (!window.location.pathname.startsWith("/e/")) {
|
if (!window.location.pathname.startsWith("/e/")) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
navigate(eventLink(id));
|
navigate(eventLink(id));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function replyTag() {
|
||||||
|
if (ev.Thread === null) {
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function replyTag() {
|
const maxMentions = 2;
|
||||||
if (ev.Thread === null) {
|
let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
|
||||||
return null;
|
let mentions: { pk: string, name: string, link: ReactNode }[] = [];
|
||||||
}
|
for (let pk of ev.Thread?.PubKeys) {
|
||||||
|
const u = users?.get(pk);
|
||||||
const maxMentions = 2;
|
const npub = hexToBech32("npub", pk)
|
||||||
let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
|
const shortNpub = npub.substring(0, 12);
|
||||||
let mentions: {pk: string, name: string, link: ReactNode}[] = [];
|
if (u) {
|
||||||
for (let pk of ev.Thread?.PubKeys) {
|
mentions.push({
|
||||||
const u = users?.get(pk);
|
pk,
|
||||||
const npub = hexToBech32("npub", pk)
|
name: u.name ?? shortNpub,
|
||||||
const shortNpub = npub.substring(0, 12);
|
link: (
|
||||||
if (u) {
|
<Link to={`/p/${npub}`}>
|
||||||
mentions.push({
|
{u.name ? `@${u.name}` : shortNpub}
|
||||||
pk,
|
</Link>
|
||||||
name: u.name ?? shortNpub,
|
|
||||||
link: (
|
|
||||||
<Link to={`/p/${npub}`}>
|
|
||||||
{u.name ? `@${u.name}` : shortNpub}
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
mentions.push({
|
|
||||||
pk,
|
|
||||||
name: shortNpub,
|
|
||||||
link: (
|
|
||||||
<Link to={`/p/${npub}`}>
|
|
||||||
{shortNpub}
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
mentions.sort((a, b) => a.name.startsWith("npub") ? 1 : -1);
|
|
||||||
let othersLength = mentions.length - maxMentions
|
|
||||||
const renderMention = (m: any, idx: number) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{idx > 0 && ", "}
|
|
||||||
{m.link}
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
});
|
||||||
const pubMentions = mentions.length > maxMentions ? (
|
} else {
|
||||||
mentions?.slice(0, maxMentions).map(renderMention)
|
mentions.push({
|
||||||
) : mentions?.map(renderMention);
|
pk,
|
||||||
const others = mentions.length > maxMentions ? ` & ${othersLength} other${othersLength > 1 ? 's' : ''}` : ''
|
name: shortNpub,
|
||||||
return (
|
link: (
|
||||||
<div className="reply">
|
<Link to={`/p/${npub}`}>
|
||||||
{(mentions?.length ?? 0) > 0 ? (
|
{shortNpub}
|
||||||
<>
|
</Link>
|
||||||
{pubMentions}
|
)
|
||||||
{others}
|
});
|
||||||
</>
|
}
|
||||||
) : replyId ? (
|
|
||||||
hexToBech32("note", replyId)?.substring(0, 12) // todo: link
|
|
||||||
) : ""}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
mentions.sort((a, b) => a.name.startsWith("npub") ? 1 : -1);
|
||||||
if (ev.Kind !== EventKind.TextNote) {
|
let othersLength = mentions.length - maxMentions
|
||||||
return (
|
const renderMention = (m: any, idx: number) => {
|
||||||
<>
|
return (
|
||||||
<h4>Unknown event kind: {ev.Kind}</h4>
|
<>
|
||||||
<pre>
|
{idx > 0 && ", "}
|
||||||
{JSON.stringify(ev.ToObject(), undefined, ' ')}
|
{m.link}
|
||||||
</pre>
|
</>
|
||||||
</>
|
)
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
const pubMentions = mentions.length > maxMentions ? (
|
||||||
function content() {
|
mentions?.slice(0, maxMentions).map(renderMention)
|
||||||
if (!inView) return null;
|
) : mentions?.map(renderMention);
|
||||||
return (
|
const others = mentions.length > maxMentions ? ` & ${othersLength} other${othersLength > 1 ? 's' : ''}` : ''
|
||||||
<>
|
return (
|
||||||
{options.showHeader ?
|
<div className="reply">
|
||||||
<div className="header flex">
|
{(mentions?.length ?? 0) > 0 ? (
|
||||||
<ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag() ?? undefined} />
|
<>
|
||||||
{options.showTime ?
|
{pubMentions}
|
||||||
<div className="info">
|
{others}
|
||||||
<NoteTime from={ev.CreatedAt * 1000} />
|
</>
|
||||||
</div> : null}
|
) : replyId ? (
|
||||||
</div> : null}
|
hexToBech32("note", replyId)?.substring(0, 12) // todo: link
|
||||||
<div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
|
) : ""}
|
||||||
{transformBody()}
|
|
||||||
</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}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const note = (
|
|
||||||
<div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}${extendable && !showMore ? " note-expand" : ""}`} ref={ref}>
|
|
||||||
{content()}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return !ignoreModeration && isOpMuted ? <HiddenNote>{note}</HiddenNote> : note
|
if (ev.Kind !== EventKind.TextNote) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h4>Unknown event kind: {ev.Kind}</h4>
|
||||||
|
<pre>
|
||||||
|
{JSON.stringify(ev.ToObject(), undefined, ' ')}
|
||||||
|
</pre>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<>
|
||||||
|
{options.showHeader ?
|
||||||
|
<div className="header flex">
|
||||||
|
<ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag() ?? undefined} />
|
||||||
|
{options.showTime ?
|
||||||
|
<div className="info">
|
||||||
|
<NoteTime from={ev.CreatedAt * 1000} />
|
||||||
|
</div> : null}
|
||||||
|
</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} onTranslated={(t) => setTranslated(t)} /> : null}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const note = (
|
||||||
|
<div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}${extendable && !showMore ? " note-expand" : ""}`} ref={ref}>
|
||||||
|
{content()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return !ignoreModeration && isOpMuted ? <HiddenNote>{note}</HiddenNote> : note
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { useMemo, useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { Menu, MenuItem } from '@szhsin/react-menu';
|
import { Menu, MenuItem } from '@szhsin/react-menu';
|
||||||
|
|
||||||
@ -21,10 +21,18 @@ import { HexKey, TaggedRawEvent } from "Nostr";
|
|||||||
import EventKind from "Nostr/EventKind";
|
import EventKind from "Nostr/EventKind";
|
||||||
import { UserPreferences } from "State/Login";
|
import { UserPreferences } from "State/Login";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
|
import { TranslateHost } from "Const";
|
||||||
|
|
||||||
|
export interface Translation {
|
||||||
|
text: string,
|
||||||
|
fromLanguage: string,
|
||||||
|
confidence: number
|
||||||
|
}
|
||||||
|
|
||||||
export interface NoteFooterProps {
|
export interface NoteFooterProps {
|
||||||
related: TaggedRawEvent[],
|
related: TaggedRawEvent[],
|
||||||
ev: NEvent
|
ev: NEvent,
|
||||||
|
onTranslated?: (content: Translation) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function NoteFooter(props: NoteFooterProps) {
|
export default function NoteFooter(props: NoteFooterProps) {
|
||||||
@ -38,6 +46,8 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
const [reply, setReply] = useState(false);
|
const [reply, setReply] = useState(false);
|
||||||
const [tip, setTip] = useState(false);
|
const [tip, setTip] = useState(false);
|
||||||
const isMine = ev.RootPubKey === login;
|
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 reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related, ev]);
|
||||||
const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related, ev]);
|
const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related, ev]);
|
||||||
const groupReactions = useMemo(() => {
|
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() {
|
async function copyId() {
|
||||||
await navigator.clipboard.writeText(hexToBech32("note", ev.Id));
|
await navigator.clipboard.writeText(hexToBech32("note", ev.Id));
|
||||||
}
|
}
|
||||||
@ -179,6 +212,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
<FontAwesomeIcon icon={faBan} />
|
<FontAwesomeIcon icon={faBan} />
|
||||||
Block
|
Block
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => translate()}>
|
||||||
|
<FontAwesomeIcon icon={faLanguage} />
|
||||||
|
Translate to {langNames.of(lang.split("-")[0])}
|
||||||
|
</MenuItem>
|
||||||
{prefs.showDebugMenus && (
|
{prefs.showDebugMenus && (
|
||||||
<MenuItem onClick={() => copyEvent()}>
|
<MenuItem onClick={() => copyEvent()}>
|
||||||
<FontAwesomeIcon icon={faCopy} />
|
<FontAwesomeIcon icon={faCopy} />
|
||||||
@ -206,10 +243,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Menu menuButton={<div className="reaction-pill">
|
<Menu menuButton={<div className="reaction-pill">
|
||||||
<div className="reaction-pill-icon">
|
<div className="reaction-pill-icon">
|
||||||
<Dots />
|
<Dots />
|
||||||
</div>
|
</div>
|
||||||
</div>}
|
</div>}
|
||||||
menuClassName="ctx-menu"
|
menuClassName="ctx-menu"
|
||||||
>
|
>
|
||||||
{menuItems()}
|
{menuItems()}
|
||||||
|
@ -9,7 +9,6 @@ import { faShop } from "@fortawesome/free-solid-svg-icons";
|
|||||||
|
|
||||||
import useEventPublisher from "Feed/EventPublisher";
|
import useEventPublisher from "Feed/EventPublisher";
|
||||||
import { useUserProfile } from "Feed/ProfileFeed";
|
import { useUserProfile } from "Feed/ProfileFeed";
|
||||||
import VoidUpload from "Feed/VoidUpload";
|
|
||||||
import LogoutButton from "Element/LogoutButton";
|
import LogoutButton from "Element/LogoutButton";
|
||||||
import { hexToBech32, openFile } from "Util";
|
import { hexToBech32, openFile } from "Util";
|
||||||
import Copy from "Element/Copy";
|
import Copy from "Element/Copy";
|
||||||
|
Loading…
Reference in New Issue
Block a user