Live stream styles

packages/app/public/icons.svg

@@ -330,6 +330,15 @@
         <path d="M9 6.5V9.5M9 12.5H9.0075M16.5 9.5C16.5 13.6421 13.1421 17 9 17C4.85786 17 1.5 13.6421 1.5 9.5C1.5 5.35786 4.85786 2 9 2C13.1421 2 16.5 5.35786 16.5 9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </g>
     </symbol>
+    <symbol id="signal-01" viewBox="0 0 24 25" fill="none">
+      <g>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5355 7.55101C15.9261 7.16048 16.5592 7.16048 16.9497 7.55101C19.6834 10.2847 19.6834 14.7168 16.9497 17.4505C16.5592 17.841 15.9261 17.841 15.5355 17.4505C15.145 17.06 15.145 16.4268 15.5355 16.0363C17.4882 14.0837 17.4882 10.9178 15.5355 8.96522C15.145 8.5747 15.145 7.94153 15.5355 7.55101Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.46447 7.55097C8.85499 7.9415 8.85499 8.57466 8.46447 8.96519C6.51184 10.9178 6.51184 14.0836 8.46447 16.0363C8.85499 16.4268 8.85499 17.0599 8.46447 17.4505C8.07394 17.841 7.44078 17.841 7.05025 17.4505C4.31658 14.7168 4.31658 10.2846 7.05025 7.55097C7.44078 7.16045 8.07394 7.16045 8.46447 7.55097Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.63604 4.72258C6.02656 5.11311 6.02656 5.74627 5.63604 6.13679C2.12132 9.65151 2.12132 15.35 5.63604 18.8647C6.02656 19.2552 6.02656 19.8884 5.63604 20.2789C5.24551 20.6695 4.61235 20.6695 4.22183 20.2789C-0.0739419 15.9832 -0.0739419 9.01835 4.22183 4.72258C4.61235 4.33206 5.24551 4.33206 5.63604 4.72258Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.364 4.72263C18.7545 4.3321 19.3877 4.3321 19.7782 4.72263C24.0739 9.01839 24.0739 15.9832 19.7782 20.279C19.3877 20.6695 18.7545 20.6695 18.364 20.279C17.9734 19.8885 17.9734 19.2553 18.364 18.8648C21.8787 15.35 21.8787 9.65156 18.364 6.13684C17.9734 5.74632 17.9734 5.11315 18.364 4.72263Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9 12.5008C9 10.8439 10.3431 9.50076 12 9.50076C13.6569 9.50076 15 10.8439 15 12.5008C15 14.1576 13.6569 15.5008 12 15.5008C10.3431 15.5008 9 14.1576 9 12.5008Z" fill="currentColor"/>
+      </g>
+    </symbol>
 
   </defs>
 </svg>

packages/app/src/Element/Avatar.tsx

@@ -21,10 +21,11 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: Ava
   const [url, setUrl] = useState("");
   const { proxy } = useImgProxy();
 
+  const s = size ?? 120;
   useEffect(() => {
     const url = image ?? user?.picture;
     if (url) {
-      const proxyUrl = proxy(url, size ?? 120);
+      const proxyUrl = proxy(url, s);
       setUrl(proxyUrl);
     } else {
       setUrl(defaultAvatar(pubkey));
@@ -33,6 +34,10 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: Ava
 
   const backgroundImage = `url(${url})`;
   const style = { "--img-url": backgroundImage } as CSSProperties;
+  if (size) {
+    style.width = `${s}px`;
+    style.height = `${s}px`;
+  }
   const domain = user?.nip05 && user.nip05.split("@")[1];
   return (
     <div

packages/app/src/Element/LiveEvent.tsx

@@ -1,24 +1,68 @@
 import { NostrEvent, NostrLink } from "@snort/system";
-import { findTag } from "SnortUtils";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 
+import { findTag } from "SnortUtils";
+import ProfileImage from "./ProfileImage";
+import Icon from "Icons/Icon";
+
 export function LiveEvent({ ev }: { ev: NostrEvent }) {
   const title = findTag(ev, "title");
-  return (
-    <div className="text">
-      <div className="flex card">
-        <div className="f-grow">
-          <h3>{title}</h3>
+  const status = findTag(ev, "status");
+  const starts = Number(findTag(ev, "starts"));
+  const host = ev.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? ev.pubkey;
+
+  function statusLine() {
+    switch (status) {
+      case "live": {
+        return <div className="flex g4">
+          <Icon name="signal-01" />
+          <b className="uppercase"><FormattedMessage defaultMessage="Live" /></b>
         </div>
-        <div>
-          <Link to={`https://zap.stream/${NostrLink.fromEvent(ev).encode()}`}>
-            <button className="primary" type="button">
-              <FormattedMessage defaultMessage="Watch Live!" />
+      }
+      case "ended": {
+        return <b className="uppercase"><FormattedMessage defaultMessage="Ended" /></b>
+      }
+      case "planned": {
+        return <b className="uppercase">{new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'short' }).format(new Date(starts * 1000))}</b>
+      }
+    }
+  }
+
+  function cta() {
+    const link = `https://zap.stream/${NostrLink.fromEvent(ev).encode()}`;
+    switch (status) {
+      case "live": {
+        return <Link to={link} target="_blank">
+          <button type="button">
+            <FormattedMessage defaultMessage="Join Stream" />
+          </button>
+        </Link>;
+      }
+      case "ended": {
+        if (findTag(ev, "recording")) {
+          return <Link to={link} target="_blank">
+            <button type="button">
+              <FormattedMessage defaultMessage="Watch Replay" />
             </button>
-          </Link>
+          </Link>;
+        }
+      }
+    }
+  }
+
+  return (
+    <div className="flex f-space br p24 bg-primary">
+      <div className="flex g12">
+        <ProfileImage pubkey={host} showUsername={false} size={56} />
+        <div>
+          <h2>{title}</h2>
+          {statusLine()}
         </div>
       </div>
+      <div>
+        {cta()}
+      </div>
     </div>
   );
 }

packages/app/src/index.css

@@ -132,10 +132,26 @@ code {
   }
 }
 
+.bg-primary {
+  background: var(--primary-gradient);
+}
+
+.br {
+  border-radius: 16px;
+}
+
 .p {
   padding: 12px 16px;
 }
 
+.p24 {
+  padding: 24px;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
 .card {
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-color);