feat: render zapstr player

packages/app/src/Element/ZapstrEmbed.css

@@ -0,0 +1,20 @@
+.zapstr {
+}
+
+.zapstr > img {
+  margin: 0 10px 0 0;
+}
+
+.zapstr audio {
+  margin: 0;
+  height: 2em;
+}
+
+.zapstr .pfp .avatar {
+  width: 25px;
+  height: 25px;
+}
+
+.zapstr .pfp .subheader {
+  text-transform: capitalize;
+}

packages/app/src/Element/ZapstrEmbed.tsx

@@ -1,11 +1,35 @@
+import "./ZapstrEmbed.css";
 import useEventFeed from "Feed/EventFeed";
 import Spinner from "Icons/Spinner";
 import { NostrLink } from "Util";
-import Text from "./Text";
+import { ProxyImg } from "Element/ProxyImg";
+import ProfileImage from "Element/ProfileImage";
 
 export default function ZapstrEmbed({ link }: { link: NostrLink }) {
   const ev = useEventFeed(link);
 
   if (!ev.data) return <Spinner />;
-  return <Text content={ev.data.content ?? ""} tags={[]} creator={ev.data.pubkey} />;
+
+  const media = ev.data.tags.find(a => a[0] === "media");
+  const cover = ev.data.tags.find(a => a[0] === "cover");
+  const subject = ev.data.tags.find(a => a[0] === "subject");
+  const refPersons = ev.data.tags.filter(a => a[0] === "p");
+  return (
+    <>
+      <div className="flex zapstr">
+        <ProxyImg src={cover?.[1] ?? ""} size={100} />
+        <div className="flex f-col">
+          <div>
+            <h3>{subject?.[1] ?? ""}</h3>
+          </div>
+          <audio src={media?.[1] ?? ""} controls={true} />
+        </div>
+      </div>
+      <div className="zapstr">
+        {refPersons.map(a => (
+          <ProfileImage pubkey={a[1]} subHeader={<>{a[2] ?? ""}</>} className="card" />
+        ))}
+      </div>
+    </>
+  );
 }