UI improvements #4
88
src/Text.js
Normal file
88
src/Text.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
import Invoice from "./element/Invoice";
|
||||||
|
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex } from "./Const";
|
||||||
|
|
||||||
|
export function extractLinks(fragments) {
|
||||||
|
return fragments.map(f => {
|
||||||
|
if (typeof f === "string") {
|
||||||
|
return f.split(UrlRegex).map(a => {
|
||||||
|
if (a.startsWith("http")) {
|
||||||
|
try {
|
||||||
|
let url = new URL(a);
|
||||||
|
let ext = url.pathname.toLowerCase().match(FileExtensionRegex);
|
||||||
|
if (ext) {
|
||||||
|
switch (ext[1]) {
|
||||||
|
case "gif":
|
||||||
|
case "jpg":
|
||||||
|
case "jpeg":
|
||||||
|
case "png":
|
||||||
|
case "bmp":
|
||||||
|
case "webp": {
|
||||||
|
return <img key={url} src={url} />;
|
||||||
|
}
|
||||||
|
case "mp4":
|
||||||
|
case "mkv":
|
||||||
|
case "avi":
|
||||||
|
case "m4v": {
|
||||||
|
return <video key={url} src={url} controls />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return <a href={url}>{url.toString()}</a>
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`Not a valid url: ${a}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
}).flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function extractMentions(fragments, tags, users) {
|
||||||
|
return fragments.map(f => {
|
||||||
|
if (typeof f === "string") {
|
||||||
|
return f.split(MentionRegex).map((match) => {
|
||||||
|
let matchTag = match.match(/#\[(\d+)\]/);
|
||||||
|
if (matchTag && matchTag.length === 2) {
|
||||||
|
let idx = parseInt(matchTag[1]);
|
||||||
|
let ref = tags.find(a => a.Index === idx);
|
||||||
|
if (ref) {
|
||||||
|
switch (ref.Key) {
|
||||||
|
case "p": {
|
||||||
|
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
|
||||||
|
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
|
||||||
|
}
|
||||||
|
case "e": {
|
||||||
|
let eText = ref.Event.substring(0, 8);
|
||||||
|
return <Link key={ref.Event} to={`/e/${ref.Event}`}>#{eText}</Link>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
|
||||||
|
} else {
|
||||||
|
return match;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
}).flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function extractInvoices(fragments) {
|
||||||
|
return fragments.map(f => {
|
||||||
|
if (typeof f === "string") {
|
||||||
|
return f.split(InvoiceRegex).map(i => {
|
||||||
|
if (i.toLowerCase().startsWith("lnbc")) {
|
||||||
|
return <Invoice key={i} invoice={i} />
|
||||||
|
} else {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
}).flat();
|
||||||
|
}
|
@ -11,7 +11,7 @@ import ProfileImage from "./ProfileImage";
|
|||||||
import useEventPublisher from "../feed/EventPublisher";
|
import useEventPublisher from "../feed/EventPublisher";
|
||||||
import { NoteCreator } from "./NoteCreator";
|
import { NoteCreator } from "./NoteCreator";
|
||||||
import Invoice from "./Invoice";
|
import Invoice from "./Invoice";
|
||||||
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex } from "../Const";
|
import { extractLinks, extractMentions, extractInvoices } from "../Text";
|
||||||
|
|
||||||
export default function Note(props) {
|
export default function Note(props) {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -38,7 +38,7 @@ export default function Note(props) {
|
|||||||
let body = ev?.Content ?? "";
|
let body = ev?.Content ?? "";
|
||||||
|
|
||||||
let fragments = extractLinks([body]);
|
let fragments = extractLinks([body]);
|
||||||
fragments = extractMentions(fragments);
|
fragments = extractMentions(fragments, ev.Tags, users);
|
||||||
fragments = extractInvoices(fragments);
|
fragments = extractInvoices(fragments);
|
||||||
if (deletion?.length > 0) {
|
if (deletion?.length > 0) {
|
||||||
return (
|
return (
|
||||||
@ -72,90 +72,6 @@ export default function Note(props) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function extractInvoices(fragments) {
|
|
||||||
return fragments.map(f => {
|
|
||||||
if (typeof f === "string") {
|
|
||||||
return f.split(InvoiceRegex).map(i => {
|
|
||||||
if (i.toLowerCase().startsWith("lnbc")) {
|
|
||||||
return <Invoice key={i} invoice={i} />
|
|
||||||
} else {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return f;
|
|
||||||
}).flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractMentions(fragments) {
|
|
||||||
return fragments.map(f => {
|
|
||||||
if (typeof f === "string") {
|
|
||||||
return f.split(MentionRegex).map((match) => {
|
|
||||||
let matchTag = match.match(/#\[(\d+)\]/);
|
|
||||||
if (matchTag && matchTag.length === 2) {
|
|
||||||
let idx = parseInt(matchTag[1]);
|
|
||||||
let ref = ev.Tags.find(a => a.Index === idx);
|
|
||||||
if (ref) {
|
|
||||||
switch (ref.Key) {
|
|
||||||
case "p": {
|
|
||||||
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
|
|
||||||
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
|
|
||||||
}
|
|
||||||
case "e": {
|
|
||||||
let eText = ref.Event.substring(0, 8);
|
|
||||||
return <Link key={ref.Event} to={`/e/${ref.Event}`}>#{eText}</Link>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
|
|
||||||
} else {
|
|
||||||
return match;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return f;
|
|
||||||
}).flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractLinks(fragments) {
|
|
||||||
return fragments.map(f => {
|
|
||||||
if (typeof f === "string") {
|
|
||||||
return f.split(UrlRegex).map(a => {
|
|
||||||
if (a.startsWith("http")) {
|
|
||||||
try {
|
|
||||||
let url = new URL(a);
|
|
||||||
let ext = url.pathname.toLowerCase().match(FileExtensionRegex);
|
|
||||||
if (ext) {
|
|
||||||
switch (ext[1]) {
|
|
||||||
case "gif":
|
|
||||||
case "jpg":
|
|
||||||
case "jpeg":
|
|
||||||
case "png":
|
|
||||||
case "bmp":
|
|
||||||
case "webp": {
|
|
||||||
return <img key={url} src={url} />;
|
|
||||||
}
|
|
||||||
case "mp4":
|
|
||||||
case "mkv":
|
|
||||||
case "avi":
|
|
||||||
case "m4v": {
|
|
||||||
return <video key={url} src={url} controls />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return <a href={url}>{url.toString()}</a>
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(`Not a valid url: ${a}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return f;
|
|
||||||
}).flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function like() {
|
async function like() {
|
||||||
let evLike = await publisher.like(ev);
|
let evLike = await publisher.like(ev);
|
||||||
publisher.broadcast(evLike);
|
publisher.broadcast(evLike);
|
||||||
|
@ -9,4 +9,12 @@
|
|||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pfp a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pfp a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
import "./ProfileImage.css";
|
import { useMemo } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import useProfile from "../feed/ProfileFeed";
|
import useProfile from "../feed/ProfileFeed";
|
||||||
import Nostrich from "../nostrich.jpg";
|
import Nostrich from "../nostrich.jpg";
|
||||||
import { useMemo } from "react";
|
|
||||||
|
import "./ProfileImage.css";
|
||||||
|
|
||||||
export default function ProfileImage(props) {
|
export default function ProfileImage(props) {
|
||||||
const pubkey = props.pubkey;
|
const pubkey = props.pubkey;
|
||||||
@ -24,7 +27,7 @@ export default function ProfileImage(props) {
|
|||||||
<div className="pfp">
|
<div className="pfp">
|
||||||
<img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(`/p/${pubkey}`)} />
|
<img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(`/p/${pubkey}`)} />
|
||||||
<div>
|
<div>
|
||||||
{name}
|
<Link key={pubkey} to={`/p/${pubkey}`}>{name}</Link>
|
||||||
{subHeader ? <div>{subHeader}</div> : null}
|
{subHeader ? <div>{subHeader}</div> : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -17,6 +17,7 @@ import FollowButton from "../element/FollowButton";
|
|||||||
import VoidUpload from "../feed/VoidUpload";
|
import VoidUpload from "../feed/VoidUpload";
|
||||||
import { openFile } from "../Util";
|
import { openFile } from "../Util";
|
||||||
import Timeline from "../element/Timeline";
|
import Timeline from "../element/Timeline";
|
||||||
|
import { extractLinks } from '../Text'
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -177,7 +178,7 @@ export default function ProfilePage() {
|
|||||||
<FollowButton pubkey={id} />
|
<FollowButton pubkey={id} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>{about}</p>
|
<p>{extractLinks([about])}</p>
|
||||||
{website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
|
{website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
|
||||||
|
|
||||||
{lud16 ? <div className="flex">
|
{lud16 ? <div className="flex">
|
||||||
|
Loading…
Reference in New Issue
Block a user