diff --git a/src/shared/notes/kinds/repost.tsx b/src/shared/notes/kinds/repost.tsx
index bae6df2d..94dc2a0b 100644
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@@ -46,13 +46,17 @@ export function Repost({ event }: { event: NDKEvent }) {
-
+
diff --git a/src/shared/notes/kinds/sub.tsx b/src/shared/notes/kinds/sub.tsx
index 588a6140..0cd760a0 100644
--- a/src/shared/notes/kinds/sub.tsx
+++ b/src/shared/notes/kinds/sub.tsx
@@ -26,12 +26,12 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
<>
diff --git a/src/shared/notes/mentions/note.tsx b/src/shared/notes/mentions/note.tsx
index 7a381faf..eb4c72b6 100644
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useStorage } from '@libs/storage/provider';
+import { Image } from '@shared/image';
import { MentionUser, NoteSkeleton } from '@shared/notes';
import { User } from '@shared/user';
@@ -11,6 +12,7 @@ import { widgetKinds } from '@stores/constants';
import { useWidgets } from '@stores/widgets';
import { useEvent } from '@utils/hooks/useEvent';
+import { isImage } from '@utils/isImage';
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const { db } = useStorage();
@@ -27,10 +29,59 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
}
};
- if (!id) {
+ const renderItem = useCallback(() => {
+ switch (data.event.kind) {
+ case 1: {
+ return (
+
{
+ const key = children[0] as string;
+ if (key.startsWith('pub')) return ;
+ if (key.startsWith('tag'))
+ return (
+
+ );
+ },
+ }}
+ >
+ {data.richContent.parsed.length > 160
+ ? data.richContent.parsed.substring(0, 160) + '...'
+ : data.richContent.parsed}
+
+ );
+ }
+ case 1063: {
+ const url = data.event.tags.find((el) => el[0] === 'url')[1];
+ return (
+
+ {isImage(url) && (
+
+ )}
+
+ );
+ }
+ default:
+ break;
+ }
+ }, [data]);
+
+ if (status === 'loading') {
return (
-
Failed to get event with id: {id}
+
);
}
@@ -43,40 +94,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
tabIndex={0}
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
>
- {status === 'loading' ? (
-
- ) : status === 'success' ? (
- <>
-
-
- {
- const key = children[0] as string;
- if (key.startsWith('pub')) return ;
- if (key.startsWith('tag'))
- return (
-
- );
- },
- }}
- >
- {data?.content.length > 160
- ? data.content.substring(0, 160) + '...'
- : data.content}
-
-
-
- ) : (
-
Failed to get event with id: {id}
- )}
+
+
{renderItem()}
);
});
diff --git a/src/utils/hooks/useEvent.tsx b/src/utils/hooks/useEvent.tsx
index 1a22b671..a29402b9 100644
--- a/src/utils/hooks/useEvent.tsx
+++ b/src/utils/hooks/useEvent.tsx
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { parser } from '@utils/parser';
+import { RichContent } from '@utils/types';
export function useEvent(id: string, embed?: string) {
const { ndk } = useNDK();
@@ -12,18 +13,18 @@ export function useEvent(id: string, embed?: string) {
async () => {
if (embed) {
const event: NDKEvent = JSON.parse(embed);
- // @ts-expect-error, #TODO: convert NDKEvent to ExNDKEvent
- if (event.kind === 1) event.content = parser(event);
+ let richContent: RichContent;
+ if (event.kind === 1) richContent = parser(event);
- return event as unknown as NDKEvent;
+ return { event: event as NDKEvent, richContent: richContent };
}
const event = (await ndk.fetchEvent(id)) as NDKEvent;
if (!event) throw new Error('event not found');
- // @ts-expect-error, #TODO: convert NDKEvent to ExNDKEvent
- if (event.kind === 1) event.content = parser(event);
+ let richContent: RichContent;
+ if (event.kind === 1) richContent = parser(event);
- return event as NDKEvent;
+ return { event: event as NDKEvent, richContent: richContent };
},
{
staleTime: Infinity,
diff --git a/src/utils/isImage.tsx b/src/utils/isImage.tsx
new file mode 100644
index 00000000..9a5d4d60
--- /dev/null
+++ b/src/utils/isImage.tsx
@@ -0,0 +1,3 @@
+export function isImage(url: string) {
+ return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
+}
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index e2edd727..84cb1565 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -1,7 +1,6 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import getUrls from 'get-urls';
import { Event, parseReferences } from 'nostr-tools';
-import ReactPlayer from 'react-player';
import { RichContent } from '@utils/types';
@@ -26,19 +25,23 @@ export function parser(event: NDKEvent) {
content.images.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
- } else if (ReactPlayer.canPlay(url)) {
+ }
+
+ if (url.match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
// video
content.videos.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
- } else {
- if (content.links.length < 1) {
- // push to store
- content.links.push(url);
- // remove url from original content
- content.parsed = content.parsed.replace(url, '');
- }
}
+
+ /*
+ if (content.links.length < 1) {
+ // push to store
+ content.links.push(url);
+ // remove url from original content
+ content.parsed = content.parsed.replace(url, '');
+ }
+ */
});
// parse hashtag