nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-10-01 17:31:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Render multiple links in notes without previews

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-04-26 12:12:55 +02:00
parent 5091e10584
commit 864bd1458b
1 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ParsedNote/ParsedNote.tsx
View File

@ -209,7 +209,7 @@ const ParsedNote: Component<{
setTokens(() => [...tokens]); setTokens(() => [...tokens]);
} }
const removeLinebreaks = () => { const removeLinebreaks = (type: string) => {
if (lastSignificantContent === 'LB') { if (lastSignificantContent === 'LB') {
const lastIndex = content.length - 1; const lastIndex = content.length - 1;
const lastGroup = content[lastIndex]; const lastGroup = content[lastIndex];
@ -217,7 +217,11 @@ const ParsedNote: Component<{
setContent(lastIndex, () => ({ setContent(lastIndex, () => ({
type: lastGroup.type, type: lastGroup.type,
tokens: [], tokens: [],
meta: lastGroup.meta, meta: {
...lastGroup.meta,
removedBy: type,
removedTokens: [...lastGroup.tokens],
},
})); }));
} }
}; };
@ -242,6 +246,7 @@ const ParsedNote: Component<{
let lastSignificantContent = 'text'; let lastSignificantContent = 'text';
let isAfterEmbed = false; let isAfterEmbed = false;
let totalLinks = 0;
const parseToken = (token: string) => { const parseToken = (token: string) => {
if (token === '__LB__') { if (token === '__LB__') {
@ -293,7 +298,7 @@ const ParsedNote: Component<{
if (!props.ignoreMedia) { if (!props.ignoreMedia) {
if (isImage(token)) { if (isImage(token)) {
removeLinebreaks(); removeLinebreaks('image');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'image'; lastSignificantContent = 'image';
updateContent(content, 'image', token); updateContent(content, 'image', token);
@ -301,7 +306,7 @@ const ParsedNote: Component<{
} }
if (isMp4Video(token)) { if (isMp4Video(token)) {
removeLinebreaks(); removeLinebreaks('video');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'video'; lastSignificantContent = 'video';
updateContent(content, 'video', token, { videoType: 'video/mp4'}); updateContent(content, 'video', token, { videoType: 'video/mp4'});
@ -309,7 +314,7 @@ const ParsedNote: Component<{
} }
if (isOggVideo(token)) { if (isOggVideo(token)) {
removeLinebreaks(); removeLinebreaks('video');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'video'; lastSignificantContent = 'video';
updateContent(content, 'video', token, { videoType: 'video/ogg'}); updateContent(content, 'video', token, { videoType: 'video/ogg'});
@ -317,7 +322,7 @@ const ParsedNote: Component<{
} }
if (isWebmVideo(token)) { if (isWebmVideo(token)) {
removeLinebreaks(); removeLinebreaks('video');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'video'; lastSignificantContent = 'video';
updateContent(content, 'video', token, { videoType: 'video/webm'}); updateContent(content, 'video', token, { videoType: 'video/webm'});
@ -325,7 +330,7 @@ const ParsedNote: Component<{
} }
if (isYouTube(token)) { if (isYouTube(token)) {
removeLinebreaks(); removeLinebreaks('youtube');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'youtube'; lastSignificantContent = 'youtube';
updateContent(content, 'youtube', token); updateContent(content, 'youtube', token);
@ -333,7 +338,7 @@ const ParsedNote: Component<{
} }
if (isSpotify(token)) { if (isSpotify(token)) {
removeLinebreaks(); removeLinebreaks('spotify');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'spotify'; lastSignificantContent = 'spotify';
updateContent(content, 'spotify', token); updateContent(content, 'spotify', token);
@ -341,7 +346,7 @@ const ParsedNote: Component<{
} }
if (isTwitch(token)) { if (isTwitch(token)) {
removeLinebreaks(); removeLinebreaks('twitch');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'twitch'; lastSignificantContent = 'twitch';
updateContent(content, 'twitch', token); updateContent(content, 'twitch', token);
@ -349,7 +354,7 @@ const ParsedNote: Component<{
} }
if (isMixCloud(token)) { if (isMixCloud(token)) {
removeLinebreaks(); removeLinebreaks('mixcloud');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'mixcloud'; lastSignificantContent = 'mixcloud';
updateContent(content, 'mixcloud', token); updateContent(content, 'mixcloud', token);
@ -357,7 +362,7 @@ const ParsedNote: Component<{
} }
if (isSoundCloud(token)) { if (isSoundCloud(token)) {
removeLinebreaks(); removeLinebreaks('soundcloud');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'soundcloud'; lastSignificantContent = 'soundcloud';
updateContent(content, 'soundcloud', token); updateContent(content, 'soundcloud', token);
@ -365,7 +370,7 @@ const ParsedNote: Component<{
} }
if (isAppleMusic(token)) { if (isAppleMusic(token)) {
removeLinebreaks(); removeLinebreaks('applemusic');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'applemusic'; lastSignificantContent = 'applemusic';
updateContent(content, 'applemusic', token); updateContent(content, 'applemusic', token);
@ -373,7 +378,7 @@ const ParsedNote: Component<{
} }
if (isWavelake(token)) { if (isWavelake(token)) {
removeLinebreaks(); removeLinebreaks('wavelake');
isAfterEmbed = true; isAfterEmbed = true;
lastSignificantContent = 'wavelake'; lastSignificantContent = 'wavelake';
updateContent(content, 'wavelake', token); updateContent(content, 'wavelake', token);
@ -398,7 +403,7 @@ const ParsedNote: Component<{
); );
if (hasMinimalPreviewData) { if (hasMinimalPreviewData) {
removeLinebreaks(); removeLinebreaks('link');
updateContent(content, 'link', token, { preview }); updateContent(content, 'link', token, { preview });
} else { } else {
updateContent(content, 'link', token); updateContent(content, 'link', token);
@ -406,11 +411,12 @@ const ParsedNote: Component<{
lastSignificantContent = 'link'; lastSignificantContent = 'link';
isAfterEmbed = false; isAfterEmbed = false;
totalLinks++;
return; return;
} }
if (isNoteMention(token)) { if (isNoteMention(token)) {
removeLinebreaks(); removeLinebreaks('notemention');
lastSignificantContent = 'notemention'; lastSignificantContent = 'notemention';
isAfterEmbed = true; isAfterEmbed = true;
updateContent(content, 'notemention', token); updateContent(content, 'notemention', token);
@ -455,7 +461,7 @@ const ParsedNote: Component<{
let lnbcToken = match?.find(m => m.startsWith('lnbc')); let lnbcToken = match?.find(m => m.startsWith('lnbc'));
if (lnbcToken) { if (lnbcToken) {
removeLinebreaks(); removeLinebreaks('lnbc');
updateContent(content, 'lnbc', lnbcToken); updateContent(content, 'lnbc', lnbcToken);
} }
else { else {
@ -468,7 +474,7 @@ const ParsedNote: Component<{
if (isLnbc(token)) { if (isLnbc(token)) {
lastSignificantContent = 'lnbc'; lastSignificantContent = 'lnbc';
removeLinebreaks(); removeLinebreaks('lnbc');
updateContent(content, 'lnbc', token); updateContent(content, 'lnbc', token);
return; return;
} }
@ -503,8 +509,12 @@ const ParsedNote: Component<{
const renderLinebreak = (item: NoteContent) => { const renderLinebreak = (item: NoteContent) => {
if (isNoteTooLong()) return; if (isNoteTooLong()) return;
let tokens = item.meta?.removedBy === 'link' && totalLinks > 1 ?
(item.meta?.removedTokens || []) :
item.tokens;
// Allow max consecutive linebreak // Allow max consecutive linebreak
const len = Math.min(2, item.tokens.length); const len = Math.min(2, tokens.length);
const lineBreaks = Array(len).fill(<br/>) const lineBreaks = Array(len).fill(<br/>)
@ -834,7 +844,7 @@ const ParsedNote: Component<{
{(token) => { {(token) => {
if (isNoteTooLong()) return; if (isNoteTooLong()) return;
if (item.meta && item.meta.preview) { if (item.meta && item.meta.preview && totalLinks < 2) {
setWordsDisplayed(w => w + shortMentionInWords); setWordsDisplayed(w => w + shortMentionInWords);
return ( return (
<LinkPreview <LinkPreview