Modal, process.env.HTTP_CACHE #643
@ -4,5 +4,6 @@
|
|||||||
"appTitle": "Snort - Nostr",
|
"appTitle": "Snort - Nostr",
|
||||||
"nip05Domain": "snort.social",
|
"nip05Domain": "snort.social",
|
||||||
"favicon": "public/favicon.ico",
|
"favicon": "public/favicon.ico",
|
||||||
"appleTouchIconUrl": "/nostrich_512.png"
|
"appleTouchIconUrl": "/nostrich_512.png",
|
||||||
|
"httpCache": ""
|
||||||
}
|
}
|
||||||
|
@ -4,5 +4,7 @@
|
|||||||
"appTitle": "iris",
|
"appTitle": "iris",
|
||||||
"nip05Domain": "iris.to",
|
"nip05Domain": "iris.to",
|
||||||
"favicon": "public/iris/favicon.ico",
|
"favicon": "public/iris/favicon.ico",
|
||||||
"appleTouchIconUrl": "/img/apple-touch-icon.png"
|
"appleTouchIconUrl": "/img/apple-touch-icon.png",
|
||||||
|
"httpCache": "https://api.iris.to",
|
||||||
|
"animalNamePlaceholders": true
|
||||||
}
|
}
|
||||||
|
@ -15,11 +15,6 @@ export const Day = Hour * 24;
|
|||||||
*/
|
*/
|
||||||
export const ApiHost = "https://api.snort.social";
|
export const ApiHost = "https://api.snort.social";
|
||||||
|
|
||||||
/**
|
|
||||||
* Iris api for free nip05 names
|
|
||||||
*/
|
|
||||||
export const IrisHost = "https://api.iris.to";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* LibreTranslate endpoint
|
* LibreTranslate endpoint
|
||||||
*/
|
*/
|
||||||
|
@ -59,7 +59,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
|||||||
<div className="spotlight">
|
<div className="spotlight">
|
||||||
<ProxyImg src={image} />
|
<ProxyImg src={image} />
|
||||||
<div className="details">
|
<div className="details">
|
||||||
{idx + 1}/{props.images.length}
|
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
||||||
<Icon name="x-close" size={24} onClick={props.onClose} />
|
<Icon name="x-close" size={24} onClick={props.onClose} />
|
||||||
</div>
|
</div>
|
||||||
{props.images.length > 1 && (
|
{props.images.length > 1 && (
|
||||||
@ -74,7 +74,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
|||||||
|
|
||||||
export function SpotlightMediaModal(props: SpotlightMediaProps) {
|
export function SpotlightMediaModal(props: SpotlightMediaProps) {
|
||||||
return (
|
return (
|
||||||
<Modal id="spotlight" onClose={props.onClose} className="spotlight">
|
<Modal id="spotlight" onClick={props.onClose} onClose={props.onClose} className="spotlight">
|
||||||
<SpotlightMedia {...props} />
|
<SpotlightMedia {...props} />
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
|
@ -1,21 +1,16 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { HexKey } from "@snort/system";
|
import { HexKey } from "@snort/system";
|
||||||
|
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useUserProfile } from "@snort/system-react";
|
||||||
import { profileLink } from "SnortUtils";
|
import { profileLink } from "SnortUtils";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import DisplayName from "../User/DisplayName";
|
||||||
|
|
||||||
export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
|
export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
|
||||||
const user = useUserProfile(pubkey);
|
const user = useUserProfile(pubkey);
|
||||||
|
|
||||||
const name = useMemo(() => {
|
|
||||||
return getDisplayName(user, pubkey);
|
|
||||||
}, [user, pubkey]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={profileLink(pubkey, relays)} onClick={e => e.stopPropagation()}>
|
<Link to={profileLink(pubkey, relays)} onClick={e => e.stopPropagation()}>
|
||||||
@{name}
|
@<DisplayName user={user} pubkey={pubkey} />
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@ import FollowListBase from "Element/User/FollowListBase";
|
|||||||
import AsyncButton from "Element/AsyncButton";
|
import AsyncButton from "Element/AsyncButton";
|
||||||
import { useWallet } from "Wallet";
|
import { useWallet } from "Wallet";
|
||||||
import { Toastore } from "Toaster";
|
import { Toastore } from "Toaster";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { UserCache } from "Cache";
|
import { UserCache } from "Cache";
|
||||||
import useLogin from "Hooks/useLogin";
|
import useLogin from "Hooks/useLogin";
|
||||||
import useEventPublisher from "Hooks/useEventPublisher";
|
import useEventPublisher from "Hooks/useEventPublisher";
|
||||||
|
23
packages/app/src/Element/Event/HiddenNote.tsx
Normal file
23
packages/app/src/Element/Event/HiddenNote.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import messages from "../messages";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { FormattedMessage } from "react-intl";
|
||||||
|
|
||||||
|
const HiddenNote = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
return show ? (
|
||||||
|
children
|
||||||
|
) : (
|
||||||
|
<div className="card note hidden-note">
|
||||||
|
<div className="header">
|
||||||
|
<p>
|
||||||
|
<FormattedMessage defaultMessage="This note has been muted" />
|
||||||
|
</p>
|
||||||
|
<button type="button" onClick={() => setShow(true)}>
|
||||||
|
<FormattedMessage {...messages.Show} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HiddenNote;
|
@ -1,45 +1,14 @@
|
|||||||
import "./Note.css";
|
import "./Note.css";
|
||||||
import React, { useMemo, useState, ReactNode } from "react";
|
import React from "react";
|
||||||
import { useNavigate, Link } from "react-router-dom";
|
import { EventKind, TaggedNostrEvent } from "@snort/system";
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
import { useIntl, FormattedMessage } from "react-intl";
|
|
||||||
import { TaggedNostrEvent, HexKey, EventKind, NostrPrefix, Lists, EventExt, parseZap, NostrLink } from "@snort/system";
|
|
||||||
|
|
||||||
import { System } from "index";
|
|
||||||
import useEventPublisher from "Hooks/useEventPublisher";
|
|
||||||
import Icon from "Icons/Icon";
|
|
||||||
import ProfileImage from "Element/User/ProfileImage";
|
|
||||||
import Text from "Element/Text";
|
|
||||||
import {
|
|
||||||
getReactions,
|
|
||||||
dedupeByPubkey,
|
|
||||||
tagFilterOfTextRepost,
|
|
||||||
hexToBech32,
|
|
||||||
normalizeReaction,
|
|
||||||
Reaction,
|
|
||||||
profileLink,
|
|
||||||
findTag,
|
|
||||||
} from "SnortUtils";
|
|
||||||
import NoteFooter from "Element/Event/NoteFooter";
|
|
||||||
import NoteTime from "Element/Event/NoteTime";
|
|
||||||
import Reveal from "Element/Event/Reveal";
|
|
||||||
import useModeration from "Hooks/useModeration";
|
|
||||||
import { UserCache } from "Cache";
|
|
||||||
import Poll from "Element/Event/Poll";
|
|
||||||
import useLogin from "Hooks/useLogin";
|
|
||||||
import { setBookmarked, setPinned } from "Login";
|
|
||||||
import { NostrFileElement } from "Element/Event/NostrFileHeader";
|
import { NostrFileElement } from "Element/Event/NostrFileHeader";
|
||||||
import ZapstrEmbed from "Element/Embed/ZapstrEmbed";
|
import ZapstrEmbed from "Element/Embed/ZapstrEmbed";
|
||||||
import PubkeyList from "Element/Embed/PubkeyList";
|
import PubkeyList from "Element/Embed/PubkeyList";
|
||||||
import { LiveEvent } from "Element/LiveEvent";
|
import { LiveEvent } from "Element/LiveEvent";
|
||||||
import { NoteContextMenu, NoteTranslation } from "Element/Event/NoteContextMenu";
|
|
||||||
import Reactions from "Element/Event/Reactions";
|
|
||||||
import { ZapGoal } from "Element/Event/ZapGoal";
|
import { ZapGoal } from "Element/Event/ZapGoal";
|
||||||
import NoteReaction from "Element/Event/NoteReaction";
|
import NoteReaction from "Element/Event/NoteReaction";
|
||||||
import ProfilePreview from "Element/User/ProfilePreview";
|
import ProfilePreview from "Element/User/ProfilePreview";
|
||||||
import { ProxyImg } from "Element/ProxyImg";
|
import { NoteInner } from "./NoteInner";
|
||||||
|
|
||||||
import messages from "../messages";
|
|
||||||
|
|
||||||
export interface NoteProps {
|
export interface NoteProps {
|
||||||
data: TaggedNostrEvent;
|
data: TaggedNostrEvent;
|
||||||
@ -66,24 +35,6 @@ export interface NoteProps {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const HiddenNote = ({ children }: { children: React.ReactNode }) => {
|
|
||||||
const [show, setShow] = useState(false);
|
|
||||||
return show ? (
|
|
||||||
children
|
|
||||||
) : (
|
|
||||||
<div className="card note hidden-note">
|
|
||||||
<div className="header">
|
|
||||||
<p>
|
|
||||||
<FormattedMessage defaultMessage="This note has been muted" />
|
|
||||||
</p>
|
|
||||||
<button type="button" onClick={() => setShow(true)}>
|
|
||||||
<FormattedMessage {...messages.Show} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Note(props: NoteProps) {
|
export default function Note(props: NoteProps) {
|
||||||
const { data: ev, className } = props;
|
const { data: ev, className } = props;
|
||||||
if (ev.kind === EventKind.Repost) {
|
if (ev.kind === EventKind.Repost) {
|
||||||
@ -110,366 +61,3 @@ export default function Note(props: NoteProps) {
|
|||||||
|
|
||||||
return <NoteInner {...props} />;
|
return <NoteInner {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function NoteInner(props: NoteProps) {
|
|
||||||
const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
|
|
||||||
|
|
||||||
const baseClassName = `note card${className ? ` ${className}` : ""}`;
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const [showReactions, setShowReactions] = useState(false);
|
|
||||||
const deletions = useMemo(() => getReactions(related, ev.id, EventKind.Deletion), [related]);
|
|
||||||
const { isEventMuted } = useModeration();
|
|
||||||
const { ref, inView } = useInView({ triggerOnce: true });
|
|
||||||
const login = useLogin();
|
|
||||||
const { pinned, bookmarked } = login;
|
|
||||||
const publisher = useEventPublisher();
|
|
||||||
const [translated, setTranslated] = useState<NoteTranslation>();
|
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const reactions = useMemo(() => getReactions(related, ev.id, EventKind.Reaction), [related, ev]);
|
|
||||||
const groupReactions = useMemo(() => {
|
|
||||||
const result = reactions?.reduce(
|
|
||||||
(acc, reaction) => {
|
|
||||||
const kind = normalizeReaction(reaction.content);
|
|
||||||
const rs = acc[kind] || [];
|
|
||||||
return { ...acc, [kind]: [...rs, reaction] };
|
|
||||||
},
|
|
||||||
{
|
|
||||||
[Reaction.Positive]: [] as TaggedNostrEvent[],
|
|
||||||
[Reaction.Negative]: [] as TaggedNostrEvent[],
|
|
||||||
},
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
[Reaction.Positive]: dedupeByPubkey(result[Reaction.Positive]),
|
|
||||||
[Reaction.Negative]: dedupeByPubkey(result[Reaction.Negative]),
|
|
||||||
};
|
|
||||||
}, [reactions]);
|
|
||||||
const positive = groupReactions[Reaction.Positive];
|
|
||||||
const negative = groupReactions[Reaction.Negative];
|
|
||||||
const reposts = useMemo(
|
|
||||||
() =>
|
|
||||||
dedupeByPubkey([
|
|
||||||
...getReactions(related, ev.id, EventKind.TextNote).filter(e => e.tags.some(tagFilterOfTextRepost(e, ev.id))),
|
|
||||||
...getReactions(related, ev.id, EventKind.Repost),
|
|
||||||
]),
|
|
||||||
[related, ev],
|
|
||||||
);
|
|
||||||
const zaps = useMemo(() => {
|
|
||||||
const sortedZaps = getReactions(related, ev.id, EventKind.ZapReceipt)
|
|
||||||
.map(a => parseZap(a, UserCache, ev))
|
|
||||||
.filter(z => z.valid);
|
|
||||||
sortedZaps.sort((a, b) => b.amount - a.amount);
|
|
||||||
return sortedZaps;
|
|
||||||
}, [related]);
|
|
||||||
const totalReactions = positive.length + negative.length + reposts.length + zaps.length;
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
showHeader: true,
|
|
||||||
showTime: true,
|
|
||||||
showFooter: true,
|
|
||||||
canUnpin: false,
|
|
||||||
canUnbookmark: false,
|
|
||||||
showContextMenu: true,
|
|
||||||
...opt,
|
|
||||||
};
|
|
||||||
|
|
||||||
async function unpin(id: HexKey) {
|
|
||||||
if (options.canUnpin && publisher) {
|
|
||||||
if (window.confirm(formatMessage(messages.ConfirmUnpin))) {
|
|
||||||
const es = pinned.item.filter(e => e !== id);
|
|
||||||
const ev = await publisher.noteList(es, Lists.Pinned);
|
|
||||||
System.BroadcastEvent(ev);
|
|
||||||
setPinned(login, es, ev.created_at * 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function unbookmark(id: HexKey) {
|
|
||||||
if (options.canUnbookmark && publisher) {
|
|
||||||
if (window.confirm(formatMessage(messages.ConfirmUnbookmark))) {
|
|
||||||
const es = bookmarked.item.filter(e => e !== id);
|
|
||||||
const ev = await publisher.noteList(es, Lists.Bookmarked);
|
|
||||||
System.BroadcastEvent(ev);
|
|
||||||
setBookmarked(login, es, ev.created_at * 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const innerContent = () => {
|
|
||||||
if (ev.kind === EventKind.LongFormTextNote) {
|
|
||||||
const title = findTag(ev, "title");
|
|
||||||
const summary = findTag(ev, "simmary");
|
|
||||||
const image = findTag(ev, "image");
|
|
||||||
return (
|
|
||||||
<div className="long-form-note">
|
|
||||||
<h3>{title}</h3>
|
|
||||||
<div className="text">
|
|
||||||
<p>{summary}</p>
|
|
||||||
<Text
|
|
||||||
id={ev.id}
|
|
||||||
content={ev.content}
|
|
||||||
highlighText={props.searchedValue}
|
|
||||||
tags={ev.tags}
|
|
||||||
creator={ev.pubkey}
|
|
||||||
depth={props.depth}
|
|
||||||
truncate={255}
|
|
||||||
disableLinkPreview={true}
|
|
||||||
disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
|
|
||||||
/>
|
|
||||||
{image && <ProxyImg src={image} />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const body = ev?.content ?? "";
|
|
||||||
return (
|
|
||||||
<Text
|
|
||||||
id={ev.id}
|
|
||||||
highlighText={props.searchedValue}
|
|
||||||
content={body}
|
|
||||||
tags={ev.tags}
|
|
||||||
creator={ev.pubkey}
|
|
||||||
depth={props.depth}
|
|
||||||
disableMedia={!(options.showMedia ?? true)}
|
|
||||||
disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const transformBody = () => {
|
|
||||||
if (deletions?.length > 0) {
|
|
||||||
return (
|
|
||||||
<b className="error">
|
|
||||||
<FormattedMessage {...messages.Deleted} />
|
|
||||||
</b>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const contentWarning = ev.tags.find(a => a[0] === "content-warning");
|
|
||||||
if (contentWarning) {
|
|
||||||
return (
|
|
||||||
<Reveal
|
|
||||||
message={
|
|
||||||
<>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="The author has marked this note as a <i>sensitive topic</i>"
|
|
||||||
values={{
|
|
||||||
i: c => <i>{c}</i>,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{contentWarning[1] && (
|
|
||||||
<>
|
|
||||||
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Reason: <i>{reason}</i>"
|
|
||||||
values={{
|
|
||||||
i: c => <i>{c}</i>,
|
|
||||||
reason: contentWarning[1],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<FormattedMessage defaultMessage="Click here to load anyway" />
|
|
||||||
</>
|
|
||||||
}>
|
|
||||||
{innerContent()}
|
|
||||||
</Reveal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return innerContent();
|
|
||||||
};
|
|
||||||
|
|
||||||
function goToEvent(
|
|
||||||
e: React.MouseEvent,
|
|
||||||
eTarget: TaggedNostrEvent,
|
|
||||||
isTargetAllowed: boolean = e.target === e.currentTarget,
|
|
||||||
) {
|
|
||||||
if (!isTargetAllowed || opt?.canClick === false) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
e.stopPropagation();
|
|
||||||
if (props.onClick) {
|
|
||||||
props.onClick(eTarget);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const link = NostrLink.fromEvent(eTarget);
|
|
||||||
// detect cmd key and open in new tab
|
|
||||||
if (e.metaKey) {
|
|
||||||
window.open(`/e/${link.encode()}`, "_blank");
|
|
||||||
} else {
|
|
||||||
navigate(`/e/${link.encode()}`, {
|
|
||||||
state: eTarget,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function replyTag() {
|
|
||||||
const thread = EventExt.extractThread(ev);
|
|
||||||
if (thread === undefined) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const maxMentions = 2;
|
|
||||||
const replyTo = thread?.replyTo ?? thread?.root;
|
|
||||||
const replyLink = replyTo
|
|
||||||
? NostrLink.fromTag(
|
|
||||||
[replyTo.key, replyTo.value ?? "", replyTo.relay ?? "", replyTo.marker ?? ""].filter(a => a.length > 0),
|
|
||||||
)
|
|
||||||
: undefined;
|
|
||||||
const mentions: { pk: string; name: string; link: ReactNode }[] = [];
|
|
||||||
for (const pk of thread?.pubKeys ?? []) {
|
|
||||||
const u = UserCache.getFromCache(pk);
|
|
||||||
const npub = hexToBech32(NostrPrefix.PublicKey, pk);
|
|
||||||
const shortNpub = npub.substring(0, 12);
|
|
||||||
mentions.push({
|
|
||||||
pk,
|
|
||||||
name: u?.name ?? shortNpub,
|
|
||||||
link: <Link to={profileLink(pk)}>{u?.name ? `@${u.name}` : shortNpub}</Link>,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
mentions.sort(a => (a.name.startsWith(NostrPrefix.PublicKey) ? 1 : -1));
|
|
||||||
const othersLength = mentions.length - maxMentions;
|
|
||||||
const renderMention = (m: { link: React.ReactNode; pk: string; name: string }, idx: number) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={m.pk}>
|
|
||||||
{idx > 0 && ", "}
|
|
||||||
{m.link}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const pubMentions =
|
|
||||||
mentions.length > maxMentions ? mentions?.slice(0, maxMentions).map(renderMention) : mentions?.map(renderMention);
|
|
||||||
const others = mentions.length > maxMentions ? formatMessage(messages.Others, { n: othersLength }) : "";
|
|
||||||
return (
|
|
||||||
<div className="reply">
|
|
||||||
re:
|
|
||||||
{(mentions?.length ?? 0) > 0 ? (
|
|
||||||
<>
|
|
||||||
{pubMentions} {others}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
replyLink && <Link to={`/e/${replyLink.encode()}`}>{replyLink.encode().substring(0, 12)}</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls, EventKind.LongFormTextNote];
|
|
||||||
if (!canRenderAsTextNote.includes(ev.kind)) {
|
|
||||||
const alt = findTag(ev, "alt");
|
|
||||||
if (alt) {
|
|
||||||
return (
|
|
||||||
<div className="note-quote">
|
|
||||||
<Text id={ev.id} content={alt} tags={[]} creator={ev.pubkey} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage {...messages.UnknownEventKind} values={{ kind: ev.kind }} />
|
|
||||||
</h4>
|
|
||||||
<pre>{JSON.stringify(ev, undefined, " ")}</pre>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function translation() {
|
|
||||||
if (translated && translated.confidence > 0.5) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p className="highlight">
|
|
||||||
<FormattedMessage {...messages.TranslatedFrom} values={{ lang: translated.fromLanguage }} />
|
|
||||||
</p>
|
|
||||||
{translated.text}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
} else if (translated) {
|
|
||||||
return (
|
|
||||||
<p className="highlight">
|
|
||||||
<FormattedMessage {...messages.TranslationFailed} />
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function pollOptions() {
|
|
||||||
if (ev.kind !== EventKind.Polls) return;
|
|
||||||
|
|
||||||
return <Poll ev={ev} zaps={zaps} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
function content() {
|
|
||||||
if (!inView) return undefined;
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{options.showHeader && (
|
|
||||||
<div className="header flex">
|
|
||||||
<ProfileImage
|
|
||||||
pubkey={ev.pubkey}
|
|
||||||
subHeader={replyTag() ?? undefined}
|
|
||||||
link={opt?.canClick === undefined ? undefined : ""}
|
|
||||||
/>
|
|
||||||
<div className="info">
|
|
||||||
{(options.showTime || options.showBookmarked) && (
|
|
||||||
<>
|
|
||||||
{options.showBookmarked && (
|
|
||||||
<div
|
|
||||||
className={`saved ${options.canUnbookmark ? "pointer" : ""}`}
|
|
||||||
onClick={() => unbookmark(ev.id)}>
|
|
||||||
<Icon name="bookmark" /> <FormattedMessage {...messages.Bookmarked} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!options.showBookmarked && <NoteTime from={ev.created_at * 1000} />}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{options.showPinned && (
|
|
||||||
<div className={`pinned ${options.canUnpin ? "pointer" : ""}`} onClick={() => unpin(ev.id)}>
|
|
||||||
<Icon name="pin" /> <FormattedMessage {...messages.Pinned} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{options.showContextMenu && (
|
|
||||||
<NoteContextMenu
|
|
||||||
ev={ev}
|
|
||||||
react={async () => {}}
|
|
||||||
onTranslated={t => setTranslated(t)}
|
|
||||||
setShowReactions={setShowReactions}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="body" onClick={e => goToEvent(e, ev, true)}>
|
|
||||||
{transformBody()}
|
|
||||||
{translation()}
|
|
||||||
{pollOptions()}
|
|
||||||
{options.showReactionsLink && (
|
|
||||||
<div className="reactions-link" onClick={() => setShowReactions(true)}>
|
|
||||||
<FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{options.showFooter && <NoteFooter ev={ev} positive={positive} reposts={reposts} zaps={zaps} />}
|
|
||||||
<Reactions
|
|
||||||
show={showReactions}
|
|
||||||
setShow={setShowReactions}
|
|
||||||
positive={positive}
|
|
||||||
negative={negative}
|
|
||||||
reposts={reposts}
|
|
||||||
zaps={zaps}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const note = (
|
|
||||||
<div className={`${baseClassName}${highlight ? " active " : " "}`} onClick={e => goToEvent(e, ev)} ref={ref}>
|
|
||||||
{content()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{note}</HiddenNote> : note;
|
|
||||||
}
|
|
||||||
|
@ -18,7 +18,7 @@ import { useInteractionCache } from "Hooks/useInteractionCache";
|
|||||||
import { ZapPoolController } from "ZapPoolController";
|
import { ZapPoolController } from "ZapPoolController";
|
||||||
import { System } from "index";
|
import { System } from "index";
|
||||||
import { Zapper, ZapTarget } from "Zapper";
|
import { Zapper, ZapTarget } from "Zapper";
|
||||||
import { getDisplayName } from "../User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { useNoteCreator } from "State/NoteCreator";
|
import { useNoteCreator } from "State/NoteCreator";
|
||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
|
397
packages/app/src/Element/Event/NoteInner.tsx
Normal file
397
packages/app/src/Element/Event/NoteInner.tsx
Normal file
@ -0,0 +1,397 @@
|
|||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import React, { ReactNode, useMemo, useState } from "react";
|
||||||
|
import {
|
||||||
|
dedupeByPubkey,
|
||||||
|
findTag,
|
||||||
|
getReactions,
|
||||||
|
hexToBech32,
|
||||||
|
normalizeReaction,
|
||||||
|
profileLink,
|
||||||
|
Reaction,
|
||||||
|
tagFilterOfTextRepost,
|
||||||
|
} from "../../SnortUtils";
|
||||||
|
import useModeration from "../../Hooks/useModeration";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
import useLogin from "../../Hooks/useLogin";
|
||||||
|
import useEventPublisher from "../../Hooks/useEventPublisher";
|
||||||
|
import { NoteContextMenu, NoteTranslation } from "./NoteContextMenu";
|
||||||
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
|
import { UserCache } from "../../Cache";
|
||||||
|
import messages from "../messages";
|
||||||
|
import { System } from "../../index";
|
||||||
|
import { setBookmarked, setPinned } from "../../Login";
|
||||||
|
import Text from "../Text";
|
||||||
|
import { ProxyImg } from "../ProxyImg";
|
||||||
|
import Reveal from "./Reveal";
|
||||||
|
import Poll from "./Poll";
|
||||||
|
import ProfileImage from "../User/ProfileImage";
|
||||||
|
import Icon from "../../Icons/Icon";
|
||||||
|
import NoteTime from "./NoteTime";
|
||||||
|
import NoteFooter from "./NoteFooter";
|
||||||
|
import Reactions from "./Reactions";
|
||||||
|
import HiddenNote from "./HiddenNote";
|
||||||
|
import { NoteProps } from "./Note";
|
||||||
|
import { EventExt, EventKind, HexKey, Lists, NostrLink, NostrPrefix, parseZap, TaggedNostrEvent } from "@snort/system";
|
||||||
|
|
||||||
|
export function NoteInner(props: NoteProps) {
|
||||||
|
const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
|
||||||
|
|
||||||
|
const baseClassName = `note card${className ? ` ${className}` : ""}`;
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [showReactions, setShowReactions] = useState(false);
|
||||||
|
const deletions = useMemo(() => getReactions(related, ev.id, EventKind.Deletion), [related]);
|
||||||
|
const { isEventMuted } = useModeration();
|
||||||
|
const { ref, inView } = useInView({ triggerOnce: true });
|
||||||
|
const login = useLogin();
|
||||||
|
const { pinned, bookmarked } = login;
|
||||||
|
const publisher = useEventPublisher();
|
||||||
|
const [translated, setTranslated] = useState<NoteTranslation>();
|
||||||
|
const { formatMessage } = useIntl();
|
||||||
|
const reactions = useMemo(() => getReactions(related, ev.id, EventKind.Reaction), [related, ev]);
|
||||||
|
const groupReactions = useMemo(() => {
|
||||||
|
const result = reactions?.reduce(
|
||||||
|
(acc, reaction) => {
|
||||||
|
const kind = normalizeReaction(reaction.content);
|
||||||
|
const rs = acc[kind] || [];
|
||||||
|
return { ...acc, [kind]: [...rs, reaction] };
|
||||||
|
},
|
||||||
|
{
|
||||||
|
[Reaction.Positive]: [] as TaggedNostrEvent[],
|
||||||
|
[Reaction.Negative]: [] as TaggedNostrEvent[],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
[Reaction.Positive]: dedupeByPubkey(result[Reaction.Positive]),
|
||||||
|
[Reaction.Negative]: dedupeByPubkey(result[Reaction.Negative]),
|
||||||
|
};
|
||||||
|
}, [reactions]);
|
||||||
|
const positive = groupReactions[Reaction.Positive];
|
||||||
|
const negative = groupReactions[Reaction.Negative];
|
||||||
|
const reposts = useMemo(
|
||||||
|
() =>
|
||||||
|
dedupeByPubkey([
|
||||||
|
...getReactions(related, ev.id, EventKind.TextNote).filter(e => e.tags.some(tagFilterOfTextRepost(e, ev.id))),
|
||||||
|
...getReactions(related, ev.id, EventKind.Repost),
|
||||||
|
]),
|
||||||
|
[related, ev],
|
||||||
|
);
|
||||||
|
const zaps = useMemo(() => {
|
||||||
|
const sortedZaps = getReactions(related, ev.id, EventKind.ZapReceipt)
|
||||||
|
.map(a => parseZap(a, UserCache, ev))
|
||||||
|
.filter(z => z.valid);
|
||||||
|
sortedZaps.sort((a, b) => b.amount - a.amount);
|
||||||
|
return sortedZaps;
|
||||||
|
}, [related]);
|
||||||
|
const totalReactions = positive.length + negative.length + reposts.length + zaps.length;
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
showHeader: true,
|
||||||
|
showTime: true,
|
||||||
|
showFooter: true,
|
||||||
|
canUnpin: false,
|
||||||
|
canUnbookmark: false,
|
||||||
|
showContextMenu: true,
|
||||||
|
...opt,
|
||||||
|
};
|
||||||
|
|
||||||
|
async function unpin(id: HexKey) {
|
||||||
|
if (options.canUnpin && publisher) {
|
||||||
|
if (window.confirm(formatMessage(messages.ConfirmUnpin))) {
|
||||||
|
const es = pinned.item.filter(e => e !== id);
|
||||||
|
const ev = await publisher.noteList(es, Lists.Pinned);
|
||||||
|
System.BroadcastEvent(ev);
|
||||||
|
setPinned(login, es, ev.created_at * 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function unbookmark(id: HexKey) {
|
||||||
|
if (options.canUnbookmark && publisher) {
|
||||||
|
if (window.confirm(formatMessage(messages.ConfirmUnbookmark))) {
|
||||||
|
const es = bookmarked.item.filter(e => e !== id);
|
||||||
|
const ev = await publisher.noteList(es, Lists.Bookmarked);
|
||||||
|
System.BroadcastEvent(ev);
|
||||||
|
setBookmarked(login, es, ev.created_at * 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const innerContent = () => {
|
||||||
|
if (ev.kind === EventKind.LongFormTextNote) {
|
||||||
|
const title = findTag(ev, "title");
|
||||||
|
const summary = findTag(ev, "simmary");
|
||||||
|
const image = findTag(ev, "image");
|
||||||
|
return (
|
||||||
|
<div className="long-form-note">
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<div className="text">
|
||||||
|
<p>{summary}</p>
|
||||||
|
<Text
|
||||||
|
id={ev.id}
|
||||||
|
content={ev.content}
|
||||||
|
highlighText={props.searchedValue}
|
||||||
|
tags={ev.tags}
|
||||||
|
creator={ev.pubkey}
|
||||||
|
depth={props.depth}
|
||||||
|
truncate={255}
|
||||||
|
disableLinkPreview={true}
|
||||||
|
disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
|
||||||
|
/>
|
||||||
|
{image && <ProxyImg src={image} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const body = ev?.content ?? "";
|
||||||
|
return (
|
||||||
|
<Text
|
||||||
|
id={ev.id}
|
||||||
|
highlighText={props.searchedValue}
|
||||||
|
content={body}
|
||||||
|
tags={ev.tags}
|
||||||
|
creator={ev.pubkey}
|
||||||
|
depth={props.depth}
|
||||||
|
disableMedia={!(options.showMedia ?? true)}
|
||||||
|
disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const transformBody = () => {
|
||||||
|
if (deletions?.length > 0) {
|
||||||
|
return (
|
||||||
|
<b className="error">
|
||||||
|
<FormattedMessage {...messages.Deleted} />
|
||||||
|
</b>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const contentWarning = ev.tags.find(a => a[0] === "content-warning");
|
||||||
|
if (contentWarning) {
|
||||||
|
return (
|
||||||
|
<Reveal
|
||||||
|
message={
|
||||||
|
<>
|
||||||
|
<FormattedMessage
|
||||||
|
defaultMessage="The author has marked this note as a <i>sensitive topic</i>"
|
||||||
|
values={{
|
||||||
|
i: c => <i>{c}</i>,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{contentWarning[1] && (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<FormattedMessage
|
||||||
|
defaultMessage="Reason: <i>{reason}</i>"
|
||||||
|
values={{
|
||||||
|
i: c => <i>{c}</i>,
|
||||||
|
reason: contentWarning[1],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormattedMessage defaultMessage="Click here to load anyway" />
|
||||||
|
</>
|
||||||
|
}>
|
||||||
|
{innerContent()}
|
||||||
|
</Reveal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return innerContent();
|
||||||
|
};
|
||||||
|
|
||||||
|
function goToEvent(
|
||||||
|
e: React.MouseEvent,
|
||||||
|
eTarget: TaggedNostrEvent,
|
||||||
|
isTargetAllowed: boolean = e.target === e.currentTarget,
|
||||||
|
) {
|
||||||
|
if (!isTargetAllowed || opt?.canClick === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.stopPropagation();
|
||||||
|
if (props.onClick) {
|
||||||
|
props.onClick(eTarget);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const link = NostrLink.fromEvent(eTarget);
|
||||||
|
// detect cmd key and open in new tab
|
||||||
|
if (e.metaKey) {
|
||||||
|
window.open(`/e/${link.encode()}`, "_blank");
|
||||||
|
} else {
|
||||||
|
navigate(`/e/${link.encode()}`, {
|
||||||
|
state: eTarget,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function replyTag() {
|
||||||
|
const thread = EventExt.extractThread(ev);
|
||||||
|
if (thread === undefined) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const maxMentions = 2;
|
||||||
|
const replyTo = thread?.replyTo ?? thread?.root;
|
||||||
|
const replyLink = replyTo
|
||||||
|
? NostrLink.fromTag(
|
||||||
|
[replyTo.key, replyTo.value ?? "", replyTo.relay ?? "", replyTo.marker ?? ""].filter(a => a.length > 0),
|
||||||
|
)
|
||||||
|
: undefined;
|
||||||
|
const mentions: { pk: string; name: string; link: ReactNode }[] = [];
|
||||||
|
for (const pk of thread?.pubKeys ?? []) {
|
||||||
|
const u = UserCache.getFromCache(pk);
|
||||||
|
const npub = hexToBech32(NostrPrefix.PublicKey, pk);
|
||||||
|
const shortNpub = npub.substring(0, 12);
|
||||||
|
mentions.push({
|
||||||
|
pk,
|
||||||
|
name: u?.name ?? shortNpub,
|
||||||
|
link: <Link to={profileLink(pk)}>{u?.name ? `@${u.name}` : shortNpub}</Link>,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
mentions.sort(a => (a.name.startsWith(NostrPrefix.PublicKey) ? 1 : -1));
|
||||||
|
const othersLength = mentions.length - maxMentions;
|
||||||
|
const renderMention = (m: { link: React.ReactNode; pk: string; name: string }, idx: number) => {
|
||||||
|
return (
|
||||||
|
<React.Fragment key={m.pk}>
|
||||||
|
{idx > 0 && ", "}
|
||||||
|
{m.link}
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const pubMentions =
|
||||||
|
mentions.length > maxMentions ? mentions?.slice(0, maxMentions).map(renderMention) : mentions?.map(renderMention);
|
||||||
|
const others = mentions.length > maxMentions ? formatMessage(messages.Others, { n: othersLength }) : "";
|
||||||
|
return (
|
||||||
|
<div className="reply">
|
||||||
|
re:
|
||||||
|
{(mentions?.length ?? 0) > 0 ? (
|
||||||
|
<>
|
||||||
|
{pubMentions} {others}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
replyLink && <Link to={`/e/${replyLink.encode()}`}>{replyLink.encode().substring(0, 12)}</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls, EventKind.LongFormTextNote];
|
||||||
|
if (!canRenderAsTextNote.includes(ev.kind)) {
|
||||||
|
const alt = findTag(ev, "alt");
|
||||||
|
if (alt) {
|
||||||
|
return (
|
||||||
|
<div className="note-quote">
|
||||||
|
<Text id={ev.id} content={alt} tags={[]} creator={ev.pubkey} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h4>
|
||||||
|
<FormattedMessage {...messages.UnknownEventKind} values={{ kind: ev.kind }} />
|
||||||
|
</h4>
|
||||||
|
<pre>{JSON.stringify(ev, undefined, " ")}</pre>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function translation() {
|
||||||
|
if (translated && translated.confidence > 0.5) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className="highlight">
|
||||||
|
<FormattedMessage {...messages.TranslatedFrom} values={{ lang: translated.fromLanguage }} />
|
||||||
|
</p>
|
||||||
|
{translated.text}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
} else if (translated) {
|
||||||
|
return (
|
||||||
|
<p className="highlight">
|
||||||
|
<FormattedMessage {...messages.TranslationFailed} />
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function pollOptions() {
|
||||||
|
if (ev.kind !== EventKind.Polls) return;
|
||||||
|
|
||||||
|
return <Poll ev={ev} zaps={zaps} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function content() {
|
||||||
|
if (!inView) return undefined;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{options.showHeader && (
|
||||||
|
<div className="header flex">
|
||||||
|
<ProfileImage
|
||||||
|
pubkey={ev.pubkey}
|
||||||
|
subHeader={replyTag() ?? undefined}
|
||||||
|
link={opt?.canClick === undefined ? undefined : ""}
|
||||||
|
/>
|
||||||
|
<div className="info">
|
||||||
|
{(options.showTime || options.showBookmarked) && (
|
||||||
|
<>
|
||||||
|
{options.showBookmarked && (
|
||||||
|
<div
|
||||||
|
className={`saved ${options.canUnbookmark ? "pointer" : ""}`}
|
||||||
|
onClick={() => unbookmark(ev.id)}>
|
||||||
|
<Icon name="bookmark" /> <FormattedMessage {...messages.Bookmarked} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!options.showBookmarked && <NoteTime from={ev.created_at * 1000} />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{options.showPinned && (
|
||||||
|
<div className={`pinned ${options.canUnpin ? "pointer" : ""}`} onClick={() => unpin(ev.id)}>
|
||||||
|
<Icon name="pin" /> <FormattedMessage {...messages.Pinned} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{options.showContextMenu && (
|
||||||
|
<NoteContextMenu
|
||||||
|
ev={ev}
|
||||||
|
react={async () => {}}
|
||||||
|
onTranslated={t => setTranslated(t)}
|
||||||
|
setShowReactions={setShowReactions}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="body" onClick={e => goToEvent(e, ev, true)}>
|
||||||
|
{transformBody()}
|
||||||
|
{translation()}
|
||||||
|
{pollOptions()}
|
||||||
|
{options.showReactionsLink && (
|
||||||
|
<div className="reactions-link" onClick={() => setShowReactions(true)}>
|
||||||
|
<FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{options.showFooter && <NoteFooter ev={ev} positive={positive} reposts={reposts} zaps={zaps} />}
|
||||||
|
<Reactions
|
||||||
|
show={showReactions}
|
||||||
|
setShow={setShowReactions}
|
||||||
|
positive={positive}
|
||||||
|
negative={negative}
|
||||||
|
reposts={reposts}
|
||||||
|
zaps={zaps}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const note = (
|
||||||
|
<div className={`${baseClassName}${highlight ? " active " : " "}`} onClick={e => goToEvent(e, ev)} ref={ref}>
|
||||||
|
{content()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{note}</HiddenNote> : note;
|
||||||
|
}
|
@ -4,7 +4,7 @@ import { useMemo } from "react";
|
|||||||
import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix, EventExt } from "@snort/system";
|
import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix, EventExt } from "@snort/system";
|
||||||
|
|
||||||
import Note from "Element/Event/Note";
|
import Note from "Element/Event/Note";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { eventLink, hexToBech32 } from "SnortUtils";
|
import { eventLink, hexToBech32 } from "SnortUtils";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
import FormattedMessage from "Element/FormattedMessage";
|
import FormattedMessage from "Element/FormattedMessage";
|
||||||
|
@ -5,6 +5,7 @@ export interface ModalProps {
|
|||||||
id: string;
|
id: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
|
onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
|
||||||
|
onClick?: (e: React.MouseEvent) => void;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -28,7 +29,13 @@ export default function Modal(props: ModalProps) {
|
|||||||
return (
|
return (
|
||||||
<div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
|
<div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
|
||||||
<div className="modal-body" onClick={props.onClose}>
|
<div className="modal-body" onClick={props.onClose}>
|
||||||
<div onClick={e => e.stopPropagation()}>{props.children}</div>
|
<div
|
||||||
|
onClick={e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
props.onClick?.(e);
|
||||||
|
}}>
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
1835
packages/app/src/Element/User/AnimalName.ts
Normal file
1835
packages/app/src/Element/User/AnimalName.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -4,7 +4,7 @@ import { CSSProperties, ReactNode, useEffect, useState } from "react";
|
|||||||
import type { UserMetadata } from "@snort/system";
|
import type { UserMetadata } from "@snort/system";
|
||||||
|
|
||||||
import useImgProxy from "Hooks/useImgProxy";
|
import useImgProxy from "Hooks/useImgProxy";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { defaultAvatar } from "SnortUtils";
|
import { defaultAvatar } from "SnortUtils";
|
||||||
|
|
||||||
interface AvatarProps {
|
interface AvatarProps {
|
||||||
|
3
packages/app/src/Element/User/DisplayName.css
Normal file
3
packages/app/src/Element/User/DisplayName.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.placeholder {
|
||||||
|
color: var(--gray-light);
|
||||||
|
}
|
39
packages/app/src/Element/User/DisplayName.tsx
Normal file
39
packages/app/src/Element/User/DisplayName.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import "./DisplayName.css";
|
||||||
|
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import { HexKey, UserMetadata, NostrPrefix } from "@snort/system";
|
||||||
|
import AnimalName from "Element/User/AnimalName";
|
||||||
|
import { hexToBech32 } from "SnortUtils";
|
||||||
|
|
||||||
|
interface DisplayNameProps {
|
||||||
|
pubkey: HexKey;
|
||||||
|
user: UserMetadata | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey): string {
|
||||||
|
return getDisplayNameOrPlaceHolder(user, pubkey)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDisplayNameOrPlaceHolder(user: UserMetadata | undefined, pubkey: HexKey): [string, boolean] {
|
||||||
|
let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
|
||||||
|
let isPlaceHolder = false;
|
||||||
|
|
||||||
|
if (typeof user?.display_name === "string" && user.display_name.length > 0) {
|
||||||
|
name = user.display_name;
|
||||||
|
} else if (typeof user?.name === "string" && user.name.length > 0) {
|
||||||
Kieran marked this conversation as resolved
Outdated
|
|||||||
|
name = user.name;
|
||||||
|
} else if (pubkey && process.env.ANIMAL_NAME_PLACEHOLDERS) {
|
||||||
|
name = AnimalName(pubkey);
|
||||||
|
isPlaceHolder = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [name.trim(), isPlaceHolder];
|
||||||
|
}
|
||||||
|
|
||||||
|
const DisplayName = ({ pubkey, user }: DisplayNameProps) => {
|
||||||
|
const [name, isPlaceHolder] = useMemo(() => getDisplayNameOrPlaceHolder(user, pubkey), [user, pubkey]);
|
||||||
|
|
||||||
|
return <span className={isPlaceHolder ? "placeholder" : ""}>{name}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DisplayName;
|
@ -13,7 +13,6 @@
|
|||||||
height: 48px;
|
height: 48px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a.pfp {
|
a.pfp {
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
import "./ProfileImage.css";
|
import "./ProfileImage.css";
|
||||||
|
|
||||||
import React, { ReactNode, useMemo } from "react";
|
import React, { ReactNode } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { HexKey, NostrPrefix, UserMetadata } from "@snort/system";
|
import { HexKey, UserMetadata } from "@snort/system";
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useUserProfile } from "@snort/system-react";
|
||||||
|
|
||||||
import { hexToBech32, profileLink } from "SnortUtils";
|
import { profileLink } from "SnortUtils";
|
||||||
import Avatar from "Element/User/Avatar";
|
import Avatar from "Element/User/Avatar";
|
||||||
import Nip05 from "Element/User/Nip05";
|
import Nip05 from "Element/User/Nip05";
|
||||||
import useLogin from "Hooks/useLogin";
|
import useLogin from "Hooks/useLogin";
|
||||||
import Icon from "Icons/Icon";
|
import Icon from "Icons/Icon";
|
||||||
|
import DisplayName from "./DisplayName";
|
||||||
|
|
||||||
export interface ProfileImageProps {
|
export interface ProfileImageProps {
|
||||||
pubkey: HexKey;
|
pubkey: HexKey;
|
||||||
@ -49,10 +50,6 @@ export default function ProfileImage({
|
|||||||
const { follows } = useLogin();
|
const { follows } = useLogin();
|
||||||
const doesFollow = follows.item.includes(pubkey);
|
const doesFollow = follows.item.includes(pubkey);
|
||||||
|
|
||||||
const name = useMemo(() => {
|
|
||||||
return overrideUsername ?? getDisplayName(user, pubkey);
|
|
||||||
}, [user, pubkey, overrideUsername]);
|
|
||||||
|
|
||||||
function handleClick(e: React.MouseEvent) {
|
function handleClick(e: React.MouseEvent) {
|
||||||
if (link === "") {
|
if (link === "") {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -86,7 +83,7 @@ export default function ProfileImage({
|
|||||||
{showUsername && (
|
{showUsername && (
|
||||||
<div className="f-ellipsis">
|
<div className="f-ellipsis">
|
||||||
<div className="flex g4 username">
|
<div className="flex g4 username">
|
||||||
<div>{name.trim()}</div>
|
{overrideUsername ? overrideUsername : <DisplayName pubkey={pubkey} user={user} />}
|
||||||
{nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
|
{nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="subheader">{subHeader}</div>
|
<div className="subheader">{subHeader}</div>
|
||||||
@ -113,13 +110,3 @@ export default function ProfileImage({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey) {
|
|
||||||
let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
|
|
||||||
if (typeof user?.display_name === "string" && user.display_name.length > 0) {
|
|
||||||
name = user.display_name;
|
|
||||||
} else if (typeof user?.name === "string" && user.name.length > 0) {
|
|
||||||
name = user.name;
|
|
||||||
}
|
|
||||||
return name;
|
|
||||||
}
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
|
import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { MentionRegex } from "Const";
|
import { MentionRegex } from "Const";
|
||||||
import { defaultAvatar, tagFilterOfTextRepost, unwrap } from "SnortUtils";
|
import { defaultAvatar, tagFilterOfTextRepost, unwrap } from "SnortUtils";
|
||||||
import { UserCache } from "Cache";
|
import { UserCache } from "Cache";
|
||||||
|
@ -1,12 +1,7 @@
|
|||||||
import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
|
import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
|
||||||
|
|
||||||
/*
|
|
||||||
import { IrisHost } from "Const";
|
|
||||||
import Nip5Service from "Element/Nip5Service";
|
|
||||||
*/
|
|
||||||
|
|
||||||
import messages from "./messages";
|
import messages from "./messages";
|
||||||
import IrisAccount from "../Element/IrisAccount/IrisAccount";
|
import IrisAccount from "Element/IrisAccount/IrisAccount";
|
||||||
|
|
||||||
export default function FreeNostrAddressPage() {
|
export default function FreeNostrAddressPage() {
|
||||||
return (
|
return (
|
||||||
|
@ -7,7 +7,7 @@ import { NostrLink, NostrPrefix, TLVEntryType, UserMetadata, decodeTLV } from "@
|
|||||||
import { useUserProfile, useUserSearch } from "@snort/system-react";
|
import { useUserProfile, useUserSearch } from "@snort/system-react";
|
||||||
|
|
||||||
import UnreadCount from "Element/UnreadCount";
|
import UnreadCount from "Element/UnreadCount";
|
||||||
import ProfileImage, { getDisplayName } from "Element/User/ProfileImage";
|
import ProfileImage from "Element/User/ProfileImage";
|
||||||
import { appendDedupe, debounce, parseId } from "SnortUtils";
|
import { appendDedupe, debounce, parseId } from "SnortUtils";
|
||||||
import NoteToSelf from "Element/User/NoteToSelf";
|
import NoteToSelf from "Element/User/NoteToSelf";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
@ -25,6 +25,7 @@ import { useEventFeed } from "Feed/EventFeed";
|
|||||||
import { LoginSession, LoginStore } from "Login";
|
import { LoginSession, LoginStore } from "Login";
|
||||||
import { Nip28ChatSystem } from "chat/nip28";
|
import { Nip28ChatSystem } from "chat/nip28";
|
||||||
import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";
|
import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";
|
||||||
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
|
|
||||||
const TwoCol = 768;
|
const TwoCol = 768;
|
||||||
const ThreeCol = 1500;
|
const ThreeCol = 1500;
|
||||||
|
@ -12,13 +12,14 @@ import { markNotificationsRead } from "Login";
|
|||||||
import { Notifications, UserCache } from "Cache";
|
import { Notifications, UserCache } from "Cache";
|
||||||
import { dedupe, findTag, orderDescending } from "SnortUtils";
|
import { dedupe, findTag, orderDescending } from "SnortUtils";
|
||||||
import Icon from "Icons/Icon";
|
import Icon from "Icons/Icon";
|
||||||
import ProfileImage, { getDisplayName } from "Element/User/ProfileImage";
|
import ProfileImage from "Element/User/ProfileImage";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
import { useEventFeed } from "Feed/EventFeed";
|
import { useEventFeed } from "Feed/EventFeed";
|
||||||
import Text from "Element/Text";
|
import Text from "Element/Text";
|
||||||
import { formatShort } from "Number";
|
import { formatShort } from "Number";
|
||||||
import { LiveEvent } from "Element/LiveEvent";
|
import { LiveEvent } from "Element/LiveEvent";
|
||||||
import ProfilePreview from "Element/User/ProfilePreview";
|
import ProfilePreview from "Element/User/ProfilePreview";
|
||||||
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
|
|
||||||
function notificationContext(ev: TaggedNostrEvent) {
|
function notificationContext(ev: TaggedNostrEvent) {
|
||||||
switch (ev.kind) {
|
switch (ev.kind) {
|
||||||
|
@ -58,7 +58,7 @@ import { ZapTarget } from "Zapper";
|
|||||||
import { useStatusFeed } from "Feed/StatusFeed";
|
import { useStatusFeed } from "Feed/StatusFeed";
|
||||||
|
|
||||||
import messages from "./messages";
|
import messages from "./messages";
|
||||||
import { SpotlightMediaModal } from "../Element/Deck/SpotlightMedia";
|
import { SpotlightMediaModal } from "Element/Deck/SpotlightMedia";
|
||||||
|
|
||||||
const NOTES = 0;
|
const NOTES = 0;
|
||||||
const REACTIONS = 1;
|
const REACTIONS = 1;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { UserCache } from "Cache";
|
import { UserCache } from "Cache";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { LNURL, ExternalStore, unixNow } from "@snort/shared";
|
import { LNURL, ExternalStore, unixNow } from "@snort/shared";
|
||||||
import { Toastore } from "Toaster";
|
import { Toastore } from "Toaster";
|
||||||
import { LNWallet, WalletInvoiceState, Wallets } from "Wallet";
|
import { LNWallet, WalletInvoiceState, Wallets } from "Wallet";
|
||||||
|
@ -90,6 +90,8 @@ const config = {
|
|||||||
"process.env.APP_NAME": JSON.stringify(appConfig.get("appName")),
|
"process.env.APP_NAME": JSON.stringify(appConfig.get("appName")),
|
||||||
"process.env.APP_NAME_CAPITALIZED": JSON.stringify(appConfig.get("appNameCapitalized")),
|
"process.env.APP_NAME_CAPITALIZED": JSON.stringify(appConfig.get("appNameCapitalized")),
|
||||||
"process.env.NIP05_DOMAIN": JSON.stringify(appConfig.get("nip05Domain")),
|
"process.env.NIP05_DOMAIN": JSON.stringify(appConfig.get("nip05Domain")),
|
||||||
|
"process.env.HTTP_CACHE": JSON.stringify(appConfig.get("httpCache")),
|
||||||
|
"process.env.ANIMAL_NAME_PLACEHOLDERS": JSON.stringify(appConfig.get("animalNamePlaceholders")),
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
module: {
|
module: {
|
||||||
|
@ -11,6 +11,24 @@ export function useUserProfile(pubKey?: HexKey): MetadataCache | undefined {
|
|||||||
h => {
|
h => {
|
||||||
if (pubKey) {
|
if (pubKey) {
|
||||||
system.ProfileLoader.TrackMetadata(pubKey);
|
system.ProfileLoader.TrackMetadata(pubKey);
|
||||||
|
if (process.env.HTTP_CACHE && !system.ProfileLoader.Cache.getFromCache(pubKey)) {
|
||||||
|
fetch(`${process.env.HTTP_CACHE}/profile/${pubKey}`)
|
||||||
|
.then(async r => {
|
||||||
|
if (r.ok) {
|
||||||
|
try {
|
||||||
|
const data = await r.json();
|
||||||
|
if (data) {
|
||||||
|
system.ProfileLoader.onProfileEvent(data);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
console.error(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const release = system.ProfileLoader.Cache.hook(h, pubKey);
|
const release = system.ProfileLoader.Cache.hook(h, pubKey);
|
||||||
return () => {
|
return () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user
Sometimes this is not enough, we also check the length is greater than 0 length
restored the check