reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated note component

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-31 18:38:20 +07:00
parent 5b88b335a1
commit 8e66af972d
12 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/note/base.tsx
+6 -3
View File
@@ -9,7 +9,6 @@ import { UserMention } from '@components/user/mention';
import destr from 'destr';
import { useRouter } from 'next/router';
import { memo, useMemo } from 'react';
import ReactPlayer from 'react-player/lazy';
import reactStringReplace from 'react-string-replace';
export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
@@ -21,10 +20,14 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
const tags = destr(event.tags);
// handle urls
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
} else if (ReactPlayer.canPlay(match)) {
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} />;
} else {
return (
src/components/note/comment.tsx
+10 -4
View File
@@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
import destr from 'destr';
import { memo, useMemo } from 'react';
import ReactPlayer from 'react-player/lazy';
import reactStringReplace from 'react-string-replace';
export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
@@ -17,10 +16,14 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
const tags = destr(event.tags);
// handle urls
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
} else if (ReactPlayer.canPlay(match)) {
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} />;
} else {
return (
@@ -42,6 +45,9 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
if (tags[match][0] === 'p') {
// @-mentions
return <UserMention key={match + i} pubkey={tags[match][1]} />;
} else if (tags[match][0] === 'e') {
// note-mentions
return <NoteRepost key={match + i} id={tags[match][1]} />;
} else {
return;
}
@@ -52,7 +58,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
}, [event.content, event.tags]);
return (
<div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20">
<div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
<div className="relative z-10 flex flex-col">
<UserExtend pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 pl-[52px]">
src/components/note/extend.tsx
+7 -4
View File
@@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
import destr from 'destr';
import { memo, useMemo } from 'react';
import ReactPlayer from 'react-player/lazy';
import reactStringReplace from 'react-string-replace';
export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
@@ -17,10 +16,14 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
const tags = destr(event.tags);
// handle urls
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
} else if (ReactPlayer.canPlay(match)) {
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} />;
} else {
return (
@@ -65,7 +68,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
</div>
</div>
</div>
<div className="mt-5 flex items-center border-t border-b border-zinc-800 py-2">
<div className="mt-5 flex items-center border-b border-t border-zinc-800 py-2">
<NoteMetadata
eventID={event.id}
eventPubkey={event.pubkey}
src/components/note/parent.tsx
+6 -3
View File
@@ -10,7 +10,6 @@ import { createCacheNote, getNoteByID } from '@utils/storage';
import destr from 'destr';
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import ReactPlayer from 'react-player';
import reactStringReplace from 'react-string-replace';
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
@@ -64,10 +63,14 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
const tags = destr(event.tags);
// handle urls
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
} else if (ReactPlayer.canPlay(match)) {
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} />;
} else {
return (