video player card created

components/KindCard/30311.tsx

@@ -0,0 +1,50 @@
+"use client";
+import Container from "./components/Container";
+import { CardTitle, CardDescription } from "@/components/ui/card";
+import { type Event } from "nostr-tools";
+import { nip19 } from "nostr-tools";
+import { toast } from "sonner";
+import { copyText } from "@/lib/utils";
+import { RenderText } from "../TextRendering";
+import { getTagValues, getTagsValues } from "@/lib/nostr/utils";
+import LinkCard from "@/components/LinkCard";
+import ReactPlayer from "react-player";
+
+export default function Kind30311(props: Event) {
+  const { pubkey, created_at: createdAt, tags } = props;
+  const streamingUrl =
+    getTagValues("streaming", tags) ?? getTagValues("recording", tags);
+  const title = getTagValues("title", tags);
+  const summary = getTagValues("summary", tags);
+  const contentTags = getTagsValues("t", tags).filter(Boolean);
+  const npub = nip19.npubEncode(pubkey);
+
+  return (
+    <Container
+      pubkey={pubkey}
+      createdAt={createdAt}
+      contentTags={contentTags}
+      actionOptions={[
+        {
+          label: "View profile",
+          href: `/${npub}`,
+          type: "link",
+        },
+        {
+          label: "Copy raw data",
+          type: "button",
+          onClick: () => {
+            void copyText(JSON.stringify(props));
+            toast.success("Copied Text!");
+          },
+        },
+      ]}
+    >
+      <ReactPlayer url={streamingUrl} muted={false} controls={true} />
+      <div className="border-t pt-4">
+        {!!title && <CardTitle className="text-base">{title}</CardTitle>}
+        {!!summary && <CardDescription>{summary}</CardDescription>}
+      </div>
+    </Container>
+  );
+}

components/KindCard/index.tsx

@@ -13,14 +13,18 @@ const KindCard3745 = dynamic(() => import("./3745"), {
 const KindCard30023 = dynamic(() => import("./30023"), {
   ssr: false,
 });
+const KindCard30311 = dynamic(() => import("./30311"), {
+  ssr: false,
+});
 const KindCardDefault = dynamic(() => import("./default"), {
   ssr: false,
 });
 
 const componentMap: Record<number, ComponentType<KindCardProps>> = {
   1: KindCard1,
-  30023: KindCard30023,
   3745: KindCard3745,
+  30023: KindCard30023,
+  30311: KindCard30311,
 };
 
 type KindCardProps = Event<number>;