feat: follows only media loading
This commit is contained in:
parent
e494d2f098
commit
2858deb462
@ -24,6 +24,7 @@ export default function DM(props: DMProps) {
|
|||||||
const [decrypted, setDecrypted] = useState(false);
|
const [decrypted, setDecrypted] = useState(false);
|
||||||
const { ref, inView } = useInView();
|
const { ref, inView } = useInView();
|
||||||
const isMe = props.data.pubkey === pubKey;
|
const isMe = props.data.pubkey === pubKey;
|
||||||
|
const otherPubkey = isMe ? pubKey : props.data.tags.find(a => a[0] === "p")![1];
|
||||||
|
|
||||||
async function decrypt() {
|
async function decrypt() {
|
||||||
let e = new Event(props.data);
|
let e = new Event(props.data);
|
||||||
@ -46,7 +47,7 @@ export default function DM(props: DMProps) {
|
|||||||
<div className={`flex dm f-col${isMe ? " me" : ""}`} ref={ref}>
|
<div className={`flex dm f-col${isMe ? " me" : ""}`} ref={ref}>
|
||||||
<div><NoteTime from={props.data.created_at * 1000} fallback={'Just now'} /></div>
|
<div><NoteTime from={props.data.created_at * 1000} fallback={'Just now'} /></div>
|
||||||
<div className="w-max">
|
<div className="w-max">
|
||||||
<Text content={content} tags={[]} users={new Map()} />
|
<Text content={content} tags={[]} users={new Map()} creator={otherPubkey} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
106
src/Element/HyperText.tsx
Normal file
106
src/Element/HyperText.tsx
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
import { useCallback } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import { TwitterTweetEmbed } from "react-twitter-embed";
|
||||||
|
|
||||||
|
import {
|
||||||
|
FileExtensionRegex,
|
||||||
|
YoutubeUrlRegex,
|
||||||
|
TweetUrlRegex,
|
||||||
|
TidalRegex,
|
||||||
|
SoundCloudRegex,
|
||||||
|
MixCloudRegex,
|
||||||
|
SpotifyRegex
|
||||||
|
} from "Const";
|
||||||
|
import { RootState } from 'State/Store';
|
||||||
|
import SoundCloudEmbed from 'Element/SoundCloudEmded'
|
||||||
|
import MixCloudEmbed from 'Element/MixCloudEmbed';
|
||||||
|
import SpotifyEmbed from "Element/SpotifyEmbed";
|
||||||
|
import TidalEmbed from "Element/TidalEmbed";
|
||||||
|
import { ProxyImg } from 'Element/ProxyImg';
|
||||||
|
import { HexKey } from 'Nostr';
|
||||||
|
|
||||||
|
export default function HyperText({ link, creator }: { link: string, creator: HexKey }) {
|
||||||
|
const pref = useSelector((s: RootState) => s.login.preferences);
|
||||||
|
const follows = useSelector((s: RootState) => s.login.follows);
|
||||||
|
|
||||||
|
const render = useCallback(() => {
|
||||||
|
const a = link;
|
||||||
|
try {
|
||||||
|
const hideNonFollows = pref.autoLoadMedia === "follows-only" && !follows.includes(creator);
|
||||||
|
if (pref.autoLoadMedia === "none" || hideNonFollows) {
|
||||||
|
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
||||||
|
}
|
||||||
|
const url = new URL(a);
|
||||||
|
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
||||||
|
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
||||||
|
const tidalId = TidalRegex.test(a) && RegExp.$1;
|
||||||
|
const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
|
||||||
|
const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
|
||||||
|
const spotifyId = SpotifyRegex.test(a);
|
||||||
|
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
|
||||||
|
if (extension) {
|
||||||
|
switch (extension) {
|
||||||
|
case "gif":
|
||||||
|
case "jpg":
|
||||||
|
case "jpeg":
|
||||||
|
case "png":
|
||||||
|
case "bmp":
|
||||||
|
case "webp": {
|
||||||
|
return <ProxyImg key={url.toString()} src={url.toString()} />;
|
||||||
|
}
|
||||||
|
case "wav":
|
||||||
|
case "mp3":
|
||||||
|
case "ogg": {
|
||||||
|
return <audio key={url.toString()} src={url.toString()} controls />
|
||||||
|
}
|
||||||
|
case "mp4":
|
||||||
|
case "mov":
|
||||||
|
case "mkv":
|
||||||
|
case "avi":
|
||||||
|
case "m4v": {
|
||||||
|
return <video key={url.toString()} src={url.toString()} controls />
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{url.toString()}</a>
|
||||||
|
}
|
||||||
|
} else if (tweetId) {
|
||||||
|
return (
|
||||||
|
<div className="tweet" key={tweetId}>
|
||||||
|
<TwitterTweetEmbed tweetId={tweetId} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else if (youtubeId) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<br />
|
||||||
|
<iframe
|
||||||
|
className="w-max"
|
||||||
|
src={`https://www.youtube.com/embed/${youtubeId}`}
|
||||||
|
title="YouTube video player"
|
||||||
|
key={youtubeId}
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowFullScreen={true}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else if (tidalId) {
|
||||||
|
return <TidalEmbed link={a} />
|
||||||
|
} else if (soundcloundId) {
|
||||||
|
return <SoundCloudEmbed link={a} />
|
||||||
|
} else if (mixcloudId) {
|
||||||
|
return <MixCloudEmbed link={a} />
|
||||||
|
} else if (spotifyId) {
|
||||||
|
return <SpotifyEmbed link={a} />
|
||||||
|
} else {
|
||||||
|
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
}
|
||||||
|
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
||||||
|
|
||||||
|
}, [link]);
|
||||||
|
|
||||||
|
return render();
|
||||||
|
}
|
@ -72,7 +72,7 @@ export default function Note(props: NoteProps) {
|
|||||||
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()} creator={ev.PubKey}/>;
|
||||||
}, [ev]);
|
}, [ev]);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
|
@ -3,9 +3,8 @@ import { useMemo, useCallback } from "react";
|
|||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import { visit, SKIP } from "unist-util-visit";
|
import { visit, SKIP } from "unist-util-visit";
|
||||||
import { TwitterTweetEmbed } from "react-twitter-embed";
|
|
||||||
|
|
||||||
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex, TidalRegex, SoundCloudRegex, MixCloudRegex, SpotifyRegex } from "Const";
|
import { UrlRegex, MentionRegex, InvoiceRegex, HashtagRegex } from "Const";
|
||||||
import { eventLink, hexToBech32 } from "Util";
|
import { eventLink, hexToBech32 } from "Util";
|
||||||
import Invoice from "Element/Invoice";
|
import Invoice from "Element/Invoice";
|
||||||
import Hashtag from "Element/Hashtag";
|
import Hashtag from "Element/Hashtag";
|
||||||
@ -13,215 +12,134 @@ import Hashtag from "Element/Hashtag";
|
|||||||
import Tag from "Nostr/Tag";
|
import Tag from "Nostr/Tag";
|
||||||
import { MetadataCache } from "State/Users";
|
import { MetadataCache } from "State/Users";
|
||||||
import Mention from "Element/Mention";
|
import Mention from "Element/Mention";
|
||||||
import TidalEmbed from "Element/TidalEmbed";
|
import HyperText from 'Element/HyperText';
|
||||||
import { useSelector } from 'react-redux';
|
import { HexKey } from 'Nostr';
|
||||||
import { RootState } from 'State/Store';
|
|
||||||
import { UserPreferences } from 'State/Login';
|
|
||||||
import SoundCloudEmbed from 'Element/SoundCloudEmded'
|
|
||||||
import MixCloudEmbed from 'Element/MixCloudEmbed';
|
|
||||||
import SpotifyEmbed from "./SpotifyEmbed";
|
|
||||||
import { ProxyImg } from 'Element/ProxyImg';
|
|
||||||
|
|
||||||
function transformHttpLink(a: string, pref: UserPreferences) {
|
|
||||||
try {
|
|
||||||
if (!pref.autoLoadMedia) {
|
|
||||||
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
|
||||||
}
|
|
||||||
const url = new URL(a);
|
|
||||||
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
|
||||||
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
|
||||||
const tidalId = TidalRegex.test(a) && RegExp.$1;
|
|
||||||
const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
|
|
||||||
const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
|
|
||||||
const spotifyId = SpotifyRegex.test(a);
|
|
||||||
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
|
|
||||||
if (extension) {
|
|
||||||
switch (extension) {
|
|
||||||
case "gif":
|
|
||||||
case "jpg":
|
|
||||||
case "jpeg":
|
|
||||||
case "png":
|
|
||||||
case "bmp":
|
|
||||||
case "webp": {
|
|
||||||
return <ProxyImg key={url.toString()} src={url.toString()} />;
|
|
||||||
}
|
|
||||||
case "wav":
|
|
||||||
case "mp3":
|
|
||||||
case "ogg": {
|
|
||||||
return <audio key={url.toString()} src={url.toString()} controls />
|
|
||||||
}
|
|
||||||
case "mp4":
|
|
||||||
case "mov":
|
|
||||||
case "mkv":
|
|
||||||
case "avi":
|
|
||||||
case "m4v": {
|
|
||||||
return <video key={url.toString()} src={url.toString()} controls />
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{url.toString()}</a>
|
|
||||||
}
|
|
||||||
} else if (tweetId) {
|
|
||||||
return (
|
|
||||||
<div className="tweet" key={tweetId}>
|
|
||||||
<TwitterTweetEmbed tweetId={tweetId} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else if (youtubeId) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<br />
|
|
||||||
<iframe
|
|
||||||
className="w-max"
|
|
||||||
src={`https://www.youtube.com/embed/${youtubeId}`}
|
|
||||||
title="YouTube video player"
|
|
||||||
key={youtubeId}
|
|
||||||
frameBorder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
||||||
allowFullScreen={true}
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
} else if (tidalId) {
|
|
||||||
return <TidalEmbed link={a} />
|
|
||||||
} else if (soundcloundId) {
|
|
||||||
return <SoundCloudEmbed link={a} />
|
|
||||||
} else if (mixcloudId) {
|
|
||||||
return <MixCloudEmbed link={a} />
|
|
||||||
} else if (spotifyId) {
|
|
||||||
return <SpotifyEmbed link={a} />
|
|
||||||
} else {
|
|
||||||
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
}
|
|
||||||
return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractLinks(fragments: Fragment[], pref: UserPreferences) {
|
|
||||||
return fragments.map(f => {
|
|
||||||
if (typeof f === "string") {
|
|
||||||
return f.split(UrlRegex).map(a => {
|
|
||||||
if (a.startsWith("http")) {
|
|
||||||
return transformHttpLink(a, pref)
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return f;
|
|
||||||
}).flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractMentions(frag: TextFragment) {
|
|
||||||
return frag.body.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 = frag.tags?.find(a => a.Index === idx);
|
|
||||||
if (ref) {
|
|
||||||
switch (ref.Key) {
|
|
||||||
case "p": {
|
|
||||||
return <Mention pubkey={ref.PubKey!} />
|
|
||||||
}
|
|
||||||
case "e": {
|
|
||||||
let eText = hexToBech32("note", ref.Event!).substring(0, 12);
|
|
||||||
return <Link key={ref.Event} to={eventLink(ref.Event!)} onClick={(e) => e.stopPropagation()}>#{eText}</Link>;
|
|
||||||
}
|
|
||||||
case "t": {
|
|
||||||
return <Hashtag tag={ref.Hashtag!} />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
|
|
||||||
} else {
|
|
||||||
return match;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return f;
|
|
||||||
}).flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractInvoices(fragments: Fragment[]) {
|
|
||||||
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 extractHashtags(fragments: Fragment[]) {
|
|
||||||
return fragments.map(f => {
|
|
||||||
if (typeof f === "string") {
|
|
||||||
return f.split(HashtagRegex).map(i => {
|
|
||||||
if (i.toLowerCase().startsWith("#")) {
|
|
||||||
return <Hashtag tag={i.substring(1)} />
|
|
||||||
} else {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return f;
|
|
||||||
}).flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
function transformLi(frag: TextFragment) {
|
|
||||||
let fragments = transformText(frag)
|
|
||||||
return <li>{fragments}</li>
|
|
||||||
}
|
|
||||||
|
|
||||||
function transformParagraph(frag: TextFragment) {
|
|
||||||
const fragments = transformText(frag)
|
|
||||||
if (fragments.every(f => typeof f === 'string')) {
|
|
||||||
return <p>{fragments}</p>
|
|
||||||
}
|
|
||||||
return <>{fragments}</>
|
|
||||||
}
|
|
||||||
|
|
||||||
function transformText(frag: TextFragment) {
|
|
||||||
if (frag.body === undefined) {
|
|
||||||
debugger;
|
|
||||||
}
|
|
||||||
let fragments = extractMentions(frag);
|
|
||||||
fragments = extractLinks(fragments, frag.pref);
|
|
||||||
fragments = extractInvoices(fragments);
|
|
||||||
fragments = extractHashtags(fragments);
|
|
||||||
return fragments;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Fragment = string | JSX.Element;
|
export type Fragment = string | JSX.Element;
|
||||||
|
|
||||||
export interface TextFragment {
|
export interface TextFragment {
|
||||||
body: Fragment[],
|
body: Fragment[],
|
||||||
tags: Tag[],
|
tags: Tag[],
|
||||||
users: Map<string, MetadataCache>,
|
users: Map<string, MetadataCache>
|
||||||
pref: UserPreferences
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TextProps {
|
export interface TextProps {
|
||||||
content: string,
|
content: string,
|
||||||
|
creator: HexKey,
|
||||||
tags: Tag[],
|
tags: Tag[],
|
||||||
users: Map<string, MetadataCache>
|
users: Map<string, MetadataCache>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Text({ content, tags, users }: TextProps) {
|
export default function Text({ content, tags, creator, users }: TextProps) {
|
||||||
const pref = useSelector<RootState, UserPreferences>(s => s.login.preferences);
|
|
||||||
|
function extractLinks(fragments: Fragment[]) {
|
||||||
|
return fragments.map(f => {
|
||||||
|
if (typeof f === "string") {
|
||||||
|
return f.split(UrlRegex).map(a => {
|
||||||
|
if (a.startsWith("http")) {
|
||||||
|
return <HyperText link={a} creator={creator} />
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
}).flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractMentions(frag: TextFragment) {
|
||||||
|
return frag.body.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 = frag.tags?.find(a => a.Index === idx);
|
||||||
|
if (ref) {
|
||||||
|
switch (ref.Key) {
|
||||||
|
case "p": {
|
||||||
|
return <Mention pubkey={ref.PubKey!} />
|
||||||
|
}
|
||||||
|
case "e": {
|
||||||
|
let eText = hexToBech32("note", ref.Event!).substring(0, 12);
|
||||||
|
return <Link key={ref.Event} to={eventLink(ref.Event!)} onClick={(e) => e.stopPropagation()}>#{eText}</Link>;
|
||||||
|
}
|
||||||
|
case "t": {
|
||||||
|
return <Hashtag tag={ref.Hashtag!} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
|
||||||
|
} else {
|
||||||
|
return match;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
}).flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractInvoices(fragments: Fragment[]) {
|
||||||
|
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 extractHashtags(fragments: Fragment[]) {
|
||||||
|
return fragments.map(f => {
|
||||||
|
if (typeof f === "string") {
|
||||||
|
return f.split(HashtagRegex).map(i => {
|
||||||
|
if (i.toLowerCase().startsWith("#")) {
|
||||||
|
return <Hashtag tag={i.substring(1)} />
|
||||||
|
} else {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
}).flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformLi(frag: TextFragment) {
|
||||||
|
let fragments = transformText(frag)
|
||||||
|
return <li>{fragments}</li>
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformParagraph(frag: TextFragment) {
|
||||||
|
const fragments = transformText(frag)
|
||||||
|
if (fragments.every(f => typeof f === 'string')) {
|
||||||
|
return <p>{fragments}</p>
|
||||||
|
}
|
||||||
|
return <>{fragments}</>
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformText(frag: TextFragment) {
|
||||||
|
if (frag.body === undefined) {
|
||||||
|
debugger;
|
||||||
|
}
|
||||||
|
let fragments = extractMentions(frag);
|
||||||
|
fragments = extractLinks(fragments);
|
||||||
|
fragments = extractInvoices(fragments);
|
||||||
|
fragments = extractHashtags(fragments);
|
||||||
|
return fragments;
|
||||||
|
}
|
||||||
|
|
||||||
const components = useMemo(() => {
|
const components = useMemo(() => {
|
||||||
return {
|
return {
|
||||||
p: (x: any) => transformParagraph({ body: x.children ?? [], tags, users, pref }),
|
p: (x: any) => transformParagraph({ body: x.children ?? [], tags, users }),
|
||||||
a: (x: any) => transformHttpLink(x.href, pref),
|
a: (x: any) => <HyperText link={x.href} creator={creator} />,
|
||||||
li: (x: any) => transformLi({ body: x.children ?? [], tags, users, pref }),
|
li: (x: any) => transformLi({ body: x.children ?? [], tags, users }),
|
||||||
};
|
};
|
||||||
}, [content]);
|
}, [content]);
|
||||||
|
|
||||||
const disableMarkdownLinks = useCallback(() => (tree: any) => {
|
const disableMarkdownLinks = useCallback(() => (tree: any) => {
|
||||||
visit(tree, (node, index, parent) => {
|
visit(tree, (node, index, parent) => {
|
||||||
if (
|
if (
|
||||||
|
@ -53,7 +53,7 @@ export default function ProfilePage() {
|
|||||||
const [tab, setTab] = useState(ProfileTab.Notes);
|
const [tab, setTab] = useState(ProfileTab.Notes);
|
||||||
const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
|
const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
|
||||||
const aboutText = user?.about || ''
|
const aboutText = user?.about || ''
|
||||||
const about = Text({ content: aboutText, tags: [], users: new Map() })
|
const about = Text({ content: aboutText, tags: [], users: new Map(), creator: "" })
|
||||||
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
||||||
const website_url = (user?.website && !user.website.startsWith("http"))
|
const website_url = (user?.website && !user.website.startsWith("http"))
|
||||||
? "https://" + user.website
|
? "https://" + user.website
|
||||||
|
@ -26,10 +26,14 @@ const PreferencesPage = () => {
|
|||||||
<div className="card flex">
|
<div className="card flex">
|
||||||
<div className="flex f-col f-grow">
|
<div className="flex f-col f-grow">
|
||||||
<div>Automatically load media</div>
|
<div>Automatically load media</div>
|
||||||
<small>Media in posts will automatically be shown, if disabled only the link will show</small>
|
<small>Media in posts will automatically be shown for selected people, otherwise only the link will show</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="checkbox" checked={perf.autoLoadMedia} onChange={e => dispatch(setPreferences({ ...perf, autoLoadMedia: e.target.checked }))} />
|
<select value={perf.autoLoadMedia} onChange={e => dispatch(setPreferences({ ...perf, autoLoadMedia: e.target.value } as UserPreferences))}>
|
||||||
|
<option value="none">None</option>
|
||||||
|
<option value="follows-only">Follows only</option>
|
||||||
|
<option value="all">All</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="card flex f-col">
|
<div className="card flex f-col">
|
||||||
|
@ -29,7 +29,7 @@ export interface UserPreferences {
|
|||||||
/**
|
/**
|
||||||
* Automatically load media (show link only) (bandwidth/privacy)
|
* Automatically load media (show link only) (bandwidth/privacy)
|
||||||
*/
|
*/
|
||||||
autoLoadMedia: boolean,
|
autoLoadMedia: "none" | "follows-only" | "all",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Select between light/dark theme
|
* Select between light/dark theme
|
||||||
@ -61,6 +61,7 @@ export interface UserPreferences {
|
|||||||
*/
|
*/
|
||||||
imgProxyConfig: ImgProxySettings | null
|
imgProxyConfig: ImgProxySettings | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export type DbType = "indexdDb" | "redux";
|
export type DbType = "indexdDb" | "redux";
|
||||||
|
|
||||||
export interface LoginStore {
|
export interface LoginStore {
|
||||||
@ -169,7 +170,7 @@ export const InitState = {
|
|||||||
dmInteraction: 0,
|
dmInteraction: 0,
|
||||||
preferences: {
|
preferences: {
|
||||||
enableReactions: false,
|
enableReactions: false,
|
||||||
autoLoadMedia: true,
|
autoLoadMedia: "follows-only",
|
||||||
theme: "system",
|
theme: "system",
|
||||||
confirmReposts: false,
|
confirmReposts: false,
|
||||||
showDebugMenus: false,
|
showDebugMenus: false,
|
||||||
|
Loading…
Reference in New Issue
Block a user