sorting my participants

app/(app)/app/_sections/LiveStreaming.tsx

@@ -29,8 +29,25 @@ export default function LiveStreamingSection() {
     },
   });
 
-  const processedEvents = uniqBy((e) => getTagValues("title", e.tags), events);
-  console.log(events);
+  const processedEvents = uniqBy(
+    (e) => getTagValues("title", e.tags),
+    events,
+  ).sort((a, b) => {
+    const aParticipants =
+      getTagValues("total_participants", a.tags) ??
+      getTagValues("current_participants", a.tags);
+    const bParticipants =
+      getTagValues("total_participants", b.tags) ??
+      getTagValues("current_participants", b.tags);
+    if (aParticipants && bParticipants) {
+      if (parseInt(aParticipants) < parseInt(bParticipants)) {
+        return 1;
+      } else return -1;
+    }
+    if (bParticipants) return 1;
+    return -1;
+  });
+  console.log(processedEvents);
   return (
     <Section className="max-sm:-mx-5">
       <SectionHeader>
@@ -55,6 +72,7 @@ export default function LiveStreamingSection() {
                   const image = getTagValues("image", event.tags) as string;
                   const title = getTagValues("title", event.tags) as string;
                   const starts = getTagValues("starts", event.tags) as string;
+                  const ends = getTagValues("ends", event.tags) as string;
                   const tags = getTagsValues("t", event.tags) as string[];
                   const total_participants =
                     getTagValues("total_participants", event.tags) ??
@@ -75,6 +93,7 @@ export default function LiveStreamingSection() {
                           tags,
                           title,
                           starts: parseInt(starts),
+                          ends: parseInt(ends),
                           total_participants: total_participants
                             ? parseInt(total_participants)
                             : undefined,

app/(app)/article/[key]/@30311/page.tsx

@@ -17,9 +17,10 @@ export default function EventPage({
   const { data, type } = nip19.decode(key);
   const { events } = useEvents({
     filter:
-      type === "nevent"
+      type === "naddr"
         ? {
-            ids: [data.id],
+            kinds: [data.kind],
+            ["#d"]: [data.identifier],
             limit: 1,
           }
         : {},

app/(app)/article/[key]/layout.tsx

@@ -5,6 +5,7 @@ export default function ModalLayout(props: {
   children: ReactElement;
   "1": ReactNode;
   "30023": ReactNode;
+  "30311": ReactNode;
   event: ReactNode;
   params: {
     key: string;
@@ -13,11 +14,20 @@ export default function ModalLayout(props: {
   const key = props.params.key;
   const { data, type } = nip19.decode(key);
   if (type === "naddr") {
+    const kind = data.kind;
+    if (kind === 30023) {
       return (
         <div className="z-overlay fixed inset-y-[10px] left-[10px] right-[10px] overflow-hidden overflow-y-auto rounded-lg border bg-background px-4 sm:left-[calc(10px_+_var(--sidebar-closed-width))] xl:left-[calc(10px_+_var(--sidebar-open-width))]">
           {props[30023]}
         </div>
       );
+    } else if (kind === 30311) {
+      return (
+        <div className="z-overlay fixed inset-y-[10px] left-[10px] right-[10px] overflow-hidden overflow-y-auto rounded-lg border bg-background px-4 sm:left-[calc(10px_+_var(--sidebar-closed-width))] xl:left-[calc(10px_+_var(--sidebar-open-width))]">
+          {props[30311]}
+        </div>
+      );
+    }
   } else if (type === "note") {
     return (
       <div className="z-overlay fixed inset-y-[10px] left-[10px] right-[10px] overflow-hidden overflow-y-auto rounded-lg border bg-background px-4 sm:left-[calc(10px_+_var(--sidebar-closed-width))] xl:left-[calc(10px_+_var(--sidebar-open-width))]">

components/KindCard/components/Container.tsx

@@ -61,7 +61,7 @@ export default function Container({
         {children}
         <div className="mt-auto">
           {!!contentTags?.length && (
-            <div className="mb-2 mt-1 max-h-[52px] overflow-hidden">
+            <div className="mb-2.5 mt-1 max-h-[52px] overflow-hidden">
               <Tags tags={contentTags} />
             </div>
           )}

components/VideoCard/index.tsx

@@ -13,6 +13,7 @@ type VideoCardProps = {
     title: string;
     tags: string[];
     starts?: number;
+    ends?: number;
     status: "live" | "planned" | "ended";
     ["total_participants"]?: number;
   };
@@ -21,6 +22,7 @@ type VideoCardProps = {
 
 export default function VideoCard({ className, card }: VideoCardProps) {
   const startTime = card?.starts ? new Date(card.starts * 1000) : null;
+  const endTime = card?.ends ? new Date(card.ends * 1000) : null;
   return (
     <div
       className={cn(
@@ -52,10 +54,17 @@ export default function VideoCard({ className, card }: VideoCardProps) {
         <h3 className="line-clamp-2 font-medium leading-none">{card.title}</h3>
         <div className="flex items-center gap-x-3">
           <div className="flex flex-col items-start gap-y-1">
-            {startTime && (
+            {!!startTime && (
               <div className="center gap-x-1 text-xs text-muted-foreground">
                 <RxClock className="h-4 w-4 text-primary" />
                 <span>{formatDate(new Date(startTime), "h:m a")}</span>
+                {!!endTime && (
+                  <>
+                    {" "}
+                    <span>-</span>{" "}
+                    <span>{formatDate(new Date(endTime), "h:m a")}</span>
+                  </>
+                )}
               </div>
             )}
             {!!card["total_participants"] && (