mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11:25 +00:00
quote embed tings
This commit is contained in:
parent
30713ec56b
commit
2c65791a41
@ -6,7 +6,7 @@ import { minePow } from '../../utils/mine';
|
||||
import { publish } from '../../utils/relays';
|
||||
import NostrImg from '../../utils/ImgUpload';
|
||||
|
||||
const difficulty = 25
|
||||
const difficulty = 20
|
||||
|
||||
const NewThreadCard: React.FC = () => {
|
||||
const [comment, setComment] = useState("");
|
||||
|
@ -7,6 +7,8 @@ import { useEffect, useState } from 'react';
|
||||
import { subNote } from '../../utils/subscriptions';
|
||||
import { getMetadata, uniqBy } from '../../utils/utils';
|
||||
import { getLinkPreview } from 'link-preview-js';
|
||||
import { subNoteOnce } from '../../utils/subscriptions';
|
||||
import QuoteEmbed from './QuoteEmbed';
|
||||
|
||||
const colorCombos = [
|
||||
'from-red-400 to-yellow-500',
|
||||
@ -59,7 +61,7 @@ const timeAgo = (unixTime: number) => {
|
||||
const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
|
||||
// Replace 10 with the actual number of comments for each post
|
||||
const numberOfComments = 10;
|
||||
const { comment, file } = parseContent(event);
|
||||
let { comment, file } = parseContent(event);
|
||||
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const truncatedComment = comment.slice(0, 240);
|
||||
@ -70,6 +72,13 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
|
||||
}
|
||||
|
||||
const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
|
||||
const [quoteEvents, setQuoteEvents] = useState<Event[]>([]); // Initialize state
|
||||
|
||||
// Define your callback function for subGlobalFeed
|
||||
const onEvent = (event: Event, relay: string) => {
|
||||
setQuoteEvents((prevEvents) => [...prevEvents, event]);
|
||||
console.log(event.id + ' ' + event.kind + ' ' + event.tags);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const urls = comment.match(/\bhttps?:\/\/\S+/gi);
|
||||
@ -78,8 +87,25 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
|
||||
.then((preview) => setLinkPreview(preview as LinkPreview))
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
const match = comment.match(/\bnostr:([a-z0-9]+)/i);
|
||||
const nostrQuoteID = match && match[1];
|
||||
if (nostrQuoteID && nostrQuoteID.length > 0) {
|
||||
let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
|
||||
subNoteOnce(id_to_hex, onEvent);
|
||||
|
||||
comment = comment.replace(/\bnostr:[a-z0-9]+\b/i, '').trim();
|
||||
}
|
||||
}, [comment]);
|
||||
|
||||
const getMetadataEvent = (event: Event) => {
|
||||
const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
|
||||
if (metadataEvent) {
|
||||
return metadataEvent;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CardContainer>
|
||||
@ -122,6 +148,9 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{quoteEvents[0] && quoteEvents.length > 0 && (
|
||||
<QuoteEmbed event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
|
||||
)}
|
||||
</div>
|
||||
{file !== "" && (
|
||||
<div className="file">
|
||||
|
152
client/src/components/PostCard/QuoteEmbed.tsx
Normal file
152
client/src/components/PostCard/QuoteEmbed.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
import CardContainer from './CardContainer';
|
||||
import { FolderIcon } from '@heroicons/react/24/outline';
|
||||
import { parseContent } from '../../utils/content';
|
||||
import { Event } from 'nostr-tools';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { subNote } from '../../utils/subscriptions';
|
||||
import { getMetadata, uniqBy } from '../../utils/utils';
|
||||
import { getLinkPreview } from 'link-preview-js';
|
||||
import { subNoteOnce } from '../../utils/subscriptions';
|
||||
|
||||
const colorCombos = [
|
||||
'from-red-400 to-yellow-500',
|
||||
'from-green-400 to-blue-500',
|
||||
'from-purple-400 to-pink-500',
|
||||
'from-yellow-400 to-orange-500',
|
||||
'from-indigo-400 to-purple-500',
|
||||
'from-pink-400 to-red-500',
|
||||
'from-blue-400 to-indigo-500',
|
||||
'from-orange-400 to-red-500',
|
||||
'from-teal-400 to-green-500',
|
||||
'from-cyan-400 to-teal-500',
|
||||
'from-lime-400 to-green-500',
|
||||
'from-amber-400 to-orange-500',
|
||||
'from-rose-400 to-pink-500',
|
||||
'from-violet-400 to-purple-500',
|
||||
'from-sky-400 to-cyan-500'
|
||||
];
|
||||
|
||||
const getColorFromHash = (id: string, colors: string[]): string => {
|
||||
// Create a simple hash from the event.id
|
||||
let hash = 0;
|
||||
for (let i = 0; i < id.length; i++) {
|
||||
hash = (hash << 5) - hash + id.charCodeAt(i);
|
||||
}
|
||||
|
||||
// Use the hash to pick a color from the colors array
|
||||
const index = Math.abs(hash) % colors.length;
|
||||
return colors[index];
|
||||
};
|
||||
|
||||
const timeAgo = (unixTime: number) => {
|
||||
const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
|
||||
|
||||
if (seconds < 60) return `now`;
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m`;
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h`;
|
||||
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days < 7) return `${days}d`;
|
||||
|
||||
const weeks = Math.floor(days / 7);
|
||||
return `${weeks}w`;
|
||||
};
|
||||
|
||||
const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}) => {
|
||||
// Replace 10 with the actual number of comments for each post
|
||||
const numberOfComments = 10;
|
||||
const { comment, file } = parseContent(event);
|
||||
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const truncatedComment = comment.slice(0, 240);
|
||||
|
||||
let metadataParsed = null;
|
||||
if (metadata !== null) {
|
||||
metadataParsed = getMetadata(metadata);
|
||||
}
|
||||
|
||||
const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const urls = comment.match(/\bhttps?:\/\/\S+/gi);
|
||||
if (urls && urls.length > 0) {
|
||||
getLinkPreview(urls[0])
|
||||
.then((preview) => setLinkPreview(preview as LinkPreview))
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
}, [comment]);
|
||||
|
||||
return (
|
||||
<div className="link-preview p-1 bg-gradient-to-r from-black to-neutral-900 rounded-lg border border-neutral-800">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
{metadataParsed ?
|
||||
<>
|
||||
<img className={`h-5 w-5 rounded-full`} src={metadataParsed.picture} />
|
||||
<div className="ml-2 text-sm font-semibold">{metadataParsed.name}</div>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<div className={`h-5 w-5 bg-gradient-to-r ${colorCombo} rounded-full`} />
|
||||
<div className="ml-2 text-sm font-semibold">Anonymous</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-2 flex flex-col break-words">
|
||||
{isExpanded ? comment : truncatedComment}
|
||||
{comment.length > 240 && (
|
||||
<button className="text-gray-500">
|
||||
... Read more
|
||||
</button>
|
||||
)}
|
||||
{linkPreview && linkPreview.images && linkPreview.images.length > 0 && (
|
||||
<div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
|
||||
<a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
|
||||
<img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/>
|
||||
<div className="font-semibold text-xs text-gray-300">
|
||||
{linkPreview.title}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{file !== "" && (
|
||||
<div className="file">
|
||||
<img
|
||||
src={file}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface LinkPreview {
|
||||
url: string;
|
||||
title: string;
|
||||
siteName?: string;
|
||||
description?: string;
|
||||
mediaType: string;
|
||||
contentType?: string;
|
||||
images: string[];
|
||||
videos: {
|
||||
url?: string;
|
||||
secureUrl?: string;
|
||||
type?: string;
|
||||
width?: string;
|
||||
height?: string;
|
||||
[key: string]: any;
|
||||
}[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export default QuoteEmbed;
|
@ -170,3 +170,37 @@ export const subNote = (
|
||||
});
|
||||
}, 200);
|
||||
};
|
||||
|
||||
/** quick subscribe to a note id (nip-19) */
|
||||
export const subNoteOnce = (
|
||||
eventId: string,
|
||||
onEvent: SubCallback,
|
||||
) => {
|
||||
const pubkeys = new Set<string>();
|
||||
sub({
|
||||
cb: (evt, relay) => {
|
||||
pubkeys.add(evt.pubkey);
|
||||
onEvent(evt, relay);
|
||||
},
|
||||
filter: {
|
||||
ids: [eventId],
|
||||
kinds: [1],
|
||||
limit: 1,
|
||||
},
|
||||
unsub: true,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
// get profile info
|
||||
sub({
|
||||
cb: onEvent,
|
||||
filter: {
|
||||
authors: Array.from(pubkeys),
|
||||
kinds: [0],
|
||||
limit: pubkeys.size,
|
||||
},
|
||||
unsub: true,
|
||||
});
|
||||
pubkeys.clear();
|
||||
}, 2000);
|
||||
};
|
Loading…
Reference in New Issue
Block a user