minor fixes

src/app/channel/components/blacklist.tsx

@@ -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'
             }`}
           >

src/app/channel/components/createModal.tsx

@@ -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

src/app/channel/components/updateModal.tsx

@@ -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);
-        const metadata = JSON.parse(channel.metadata);
+      // update image state
-        // update image state
+      setImage(metadata.picture);
-        setImage(metadata.picture);
+      // set default values
-        // set default values
+      return metadata;
-        return metadata;
-      } else {
-        return null;
-      }
     },
   });
 
@@ -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>

src/app/channel/pages/index.page.tsx

@@ -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} />
           ) : (
             <></>
           )}

src/app/chat/pages/index.page.tsx

@@ -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(
       [

src/app/newsfeed/components/contentParser.tsx

@@ -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">

src/shared/preview/video.tsx

@@ -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>

src/shared/preview/youtube.tsx

@@ -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>
   );

src/utils/hooks/useChannelProfile.tsx

@@ -4,49 +4,46 @@ import { RelayPool } from 'nostr-relaypool';
 import useSWRSubscription from 'swr/subscription';
 
 export const useChannelProfile = (id: string, channelPubkey: string) => {
-  const { data } = useSWRSubscription(
+  const { data } = useSWRSubscription(id ? id : null, (key, { next }) => {
-    id
+    const pool = new RelayPool(FULL_RELAYS);
-      ? [
+    const unsubscribe = pool.subscribe(
-          {
+      [
-            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,
         {
-          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 () => {
+    return () => {
-        unsubscribe();
+      unsubscribe();
-      };
+    };
-    }
+  });
-  );
 
   return data;
 };

src/utils/parser.tsx

@@ -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">