nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 11:43:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor fixes

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-29 09:25:33 +07:00
parent a1385f87dc
commit be8b40c86d
10 changed files with 70 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/channel/components/blacklist.tsx
View File

@ -10,7 +10,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) {
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 ${
className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 focus:outline-none ${
open ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800'
}`}
>

8
src/app/channel/components/createModal.tsx
View File

@ -10,10 +10,12 @@ import { RelayPool } from 'nostr-relaypool';
import { getEventHash, signEvent } from 'nostr-tools';
import { Fragment, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useSWRConfig } from 'swr';
import { navigate } from 'vite-plugin-ssr/client/router';
export default function ChannelCreateModal() {
const { account, isError, isLoading } = useActiveAccount();
const { mutate } = useSWRConfig();
const [isOpen, setIsOpen] = useState(false);
const [image, setImage] = useState(DEFAULT_AVATAR);
@ -54,13 +56,15 @@ export default function ChannelCreateModal() {
pool.publish(event, WRITEONLY_RELAYS);
// insert to database
createChannel(event.id, event.pubkey, event.content, event.created_at);
// update channe llist
mutate('channels');
// reset form
reset();
setTimeout(() => {
// close modal
setIsOpen(false);
// redirect to channel page
navigate(`/channel?id=${event.id}`);
navigate(`/app/channel?id=${event.id}`);
}, 2000);
} else {
console.log('error');
@ -204,7 +208,7 @@ export default function ChannelCreateModal() {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
{loading ? (
<svg

21
src/app/channel/components/updateModal.tsx
View File

@ -35,15 +35,11 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
} = useForm({
defaultValues: async () => {
const channel = await getChannel(id);
if (channel) {
const metadata = JSON.parse(channel.metadata);
// update image state
setImage(metadata.picture);
// set default values
return metadata;
} else {
return null;
}
const metadata = JSON.parse(channel.metadata);
// update image state
setImage(metadata.picture);
// set default values
return metadata;
},
});
@ -70,6 +66,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
reset();
// close modal
setIsOpen(false);
setLoading(false);
} else {
console.log('error');
}
@ -84,7 +81,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
<button
type="button"
onClick={() => openModal()}
className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800 focus:outline-none"
>
<EditPencil width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
</button>
@ -207,7 +204,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
{loading ? (
<svg
@ -231,7 +228,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
></path>
</svg>
) : (
'Create channel'
'Update channel'
)}
</button>
</div>

4
src/app/channel/pages/index.page.tsx
View File

@ -47,7 +47,7 @@ export function Page() {
const hided = arrayObjToPureArr(activeHidedList);
const muted = arrayObjToPureArr(activeMutedList);
useSWRSubscription(channelID ? channelID : null, (key: string, {}: any) => {
useSWRSubscription(channelID ? ['channel', channelID] : null, ([, key], {}: any) => {
// subscribe to channel
const pool = new RelayPool(FULL_RELAYS);
const unsubscribe = pool.subscribe(
@ -93,7 +93,7 @@ export function Page() {
<ChannelMembers />
<ChannelBlackList blacklist={mutedList} />
{!isLoading && !isError && account ? (
account.pubkey === channelPubkey && <ChannelUpdateModal id={account.id} />
account.pubkey === channelPubkey && <ChannelUpdateModal id={channelID} />
) : (
<></>
)}

2
src/app/chat/pages/index.page.tsx
View File

@ -23,7 +23,7 @@ export function Page() {
const setChatMessages = useSetAtom(chatMessagesAtom);
const resetChatMessages = useResetAtom(chatMessagesAtom);
useSWRSubscription(pubkey ? pubkey : null, (key: string, {}: any) => {
useSWRSubscription(pubkey ? ['chat', pubkey] : null, ([, key], {}: any) => {
const pool = new RelayPool(FULL_RELAYS);
const unsubscribe = pool.subscribe(
[

4
src/app/newsfeed/components/contentParser.tsx
View File

@ -19,10 +19,10 @@ export const contentParser = (noteContent: any, noteTags: any) => {
return <ImagePreview key={match + i} url={match} size="large" />;
} else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
// youtube
return <YoutubePreview key={match + i} url={match} />;
return <YoutubePreview key={match + i} url={match} size="large" />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} />;
return <VideoPreview key={match + i} url={match} size="large" />;
} else {
return (
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">

7
src/shared/preview/video.tsx
View File

@ -1,8 +1,11 @@
import { MediaOutlet, MediaPlayer } from '@vidstack/react';
export default function VideoPreview({ url }: { url: string }) {
export default function VideoPreview({ url, size }: { url: string; size: string }) {
return (
<div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
<div
onClick={(e) => e.stopPropagation()}
className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
>
<MediaPlayer src={url} poster="" controls>
<MediaOutlet />
</MediaPlayer>

7
src/shared/preview/youtube.tsx
View File

@ -5,11 +5,14 @@ function getVideoId(url: string) {
return regex.exec(url)[3];
}
export default function YoutubePreview({ url }: { url: string }) {
export default function YoutubePreview({ url, size }: { url: string; size: string }) {
const id = getVideoId(url);
return (
<div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
<div
onClick={(e) => e.stopPropagation()}
className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
>
<YouTube videoId={id} className="aspect-video xl:w-2/3" opts={{ width: '100%', height: '100%' }} />
</div>
);

77
src/utils/hooks/useChannelProfile.tsx
View File

@ -4,49 +4,46 @@ import { RelayPool } from 'nostr-relaypool';
import useSWRSubscription from 'swr/subscription';
export const useChannelProfile = (id: string, channelPubkey: string) => {
const { data } = useSWRSubscription(
id
? [
{
kinds: [41],
'#e': [id],
},
{
ids: [id],
kinds: [40],
},
]
: null,
(key, { next }) => {
const pool = new RelayPool(FULL_RELAYS);
const unsubscribe = pool.subscribe(
key,
FULL_RELAYS,
(event: { kind: number; pubkey: string; content: string }) => {
switch (event.kind) {
case 40:
next(null, JSON.parse(event.content));
break;
case 41:
if (event.pubkey === channelPubkey) {
next(null, JSON.parse(event.content));
}
default:
break;
}
},
undefined,
undefined,
const { data } = useSWRSubscription(id ? id : null, (key, { next }) => {
const pool = new RelayPool(FULL_RELAYS);
const unsubscribe = pool.subscribe(
[
{
unsubscribeOnEose: true,
kinds: [41],
'#e': [key],
},
{
ids: [key],
kinds: [40],
},
],
FULL_RELAYS,
(event: { kind: number; pubkey: string; content: string }) => {
switch (event.kind) {
case 40:
next(null, JSON.parse(event.content));
break;
case 41:
console.log(event);
if (event.pubkey === channelPubkey) {
next(null, JSON.parse(event.content));
}
break;
default:
break;
}
);
},
undefined,
undefined,
{
unsubscribeOnEose: true,
}
);
return () => {
unsubscribe();
};
}
);
return () => {
unsubscribe();
};
});
return data;
};

4
src/utils/parser.tsx
View File

@ -14,10 +14,10 @@ export const messageParser = (noteContent: any) => {
return <ImagePreview key={match + i} url={match} size="small" />;
} else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
// youtube
return <YoutubePreview key={match + i} url={match} />;
return <YoutubePreview key={match + i} url={match} size="small" />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} />;
return <VideoPreview key={match + i} url={match} size="small" />;
} else {
return (
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">