nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/appHeader/actions.tsx
View File

@ -1,7 +1,7 @@
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
import { platform } from '@tauri-apps/api/os';
import { useRouter } from 'next/router';
import { useLayoutEffect, useState } from 'react';
import { useEffect, useState } from 'react';
export default function AppActions() {
const router = useRouter();
@ -19,7 +19,7 @@ export default function AppActions() {
router.reload();
};
useLayoutEffect(() => {
useEffect(() => {
const getPlatform = async () => {
const result = await platform();
setOS(result);

1
src/components/appHeader/index.tsx
View File

@ -1,4 +1,3 @@
import { PlusIcon } from '@radix-ui/react-icons';
import dynamic from 'next/dynamic';
const AppActions = dynamic(() => import('@components/appHeader/actions'), {

4
src/components/columns/account/list.tsx
View File

@ -5,11 +5,11 @@ import { activeAccountAtom } from '@stores/account';
import { getAccounts } from '@utils/storage';
import { useAtom } from 'jotai';
import { useAtomValue } from 'jotai';
import { useCallback, useEffect, useState } from 'react';
export default function AccountList() {
const [activeAccount] = useAtom(activeAccountAtom);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [users, setUsers] = useState([]);
const renderAccount = useCallback(

0
src/components/columns/navigator/chats/index.tsx → src/components/columns/navigator/chats.tsx
View File

2
src/components/columns/navigator/newsfeed/index.tsx → src/components/columns/navigator/newsfeed.tsx
View File

@ -10,7 +10,7 @@ export default function Newsfeed() {
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
<div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''

9
src/components/note/base.tsx
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 (

14
src/components/note/comment.tsx
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]">

11
src/components/note/extend.tsx
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}

9
src/components/note/parent.tsx
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 (

20
src/components/profile/metadata.tsx
View File

@ -1,9 +1,10 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { RelayContext } from '@components/relaysProvider';
import { DEFAULT_AVATAR } from '@stores/constants';
import { truncate } from '@utils/truncate';
import Avatar from 'boring-avatars';
import destr from 'destr';
import Image from 'next/image';
import { Author } from 'nostr-relaypool';
@ -33,17 +34,12 @@ export default function ProfileMetadata({ id }: { id: string }) {
</div>
<div className="relative -top-8 z-10 px-4">
<div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
{profile?.picture ? (
<ImageWithFallback src={profile.picture} alt={id} fill={true} className="rounded-lg object-cover" />
) : (
<Avatar
size={64}
name={id}
variant="beam"
square={true}
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
)}
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={id}
fill={true}
className="rounded-lg object-cover"
/>
</div>
</div>
</div>

1
src/components/user/large.tsx
View File

@ -7,7 +7,6 @@ import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import destr from 'destr';

2
src/pages/init.tsx
View File

@ -30,8 +30,8 @@ export default function Page() {
const [pool, relays]: any = useContext(RelayContext);
const activeAccount: any = useAtomValue(activeAccountAtom);
const [done, setDone] = useState(false);
const now = useRef(new Date());
const unsubscribe = useRef(null);
const timer = useRef(null);