Use host tag

src/element/send-zap.tsx

@@ -114,7 +114,7 @@ function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
         </div>
         <div>
           <small>Your comment for {name}</small>
-          <div className="input">
+          <div className="paper">
             <textarea
               placeholder="Nice!"
               value={comment}

src/element/video-tile.tsx

@@ -12,7 +12,7 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
     const title = ev.tags.find(a => a[0] === "title")?.[1];
     const image = ev.tags.find(a => a[0] === "image")?.[1];
     const status = ev.tags.find(a => a[0] === "status")?.[1];
-    const isLive = status === "live";
+    const host = ev.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? ev.pubkey;
 
     const link = encodeTLV(NostrPrefix.Address, id, undefined, ev.kind, ev.pubkey);
     return <Link to={`/${link}`} className="video-tile" ref={ref}>
@@ -23,7 +23,7 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
         </div>
         <h3>{title}</h3>
         <div>
-            {inView && <Profile pubkey={ev.pubkey} />}
+            {inView && <Profile pubkey={host} />}
         </div>
     </Link>
 }

src/pages/layout.css

@@ -99,7 +99,7 @@ header .logo {
     cursor: pointer;
 }
 
-header .input {
+header .paper {
     min-width: 300px;
     height: 32px;
 }
@@ -131,11 +131,11 @@ header .profile img {
     gap: 8px;
   }
 
-  header .input {
+  header .paper {
     min-width: unset;
   }
 
-  header .input .search-input {
+  header .paper .search-input {
     display: none;
   }
 

src/pages/layout.tsx

@@ -81,7 +81,7 @@ export function LayoutPage() {
         <div className="logo" onClick={() => navigate("/")}>
           S
         </div>
-        <div className="input">
+        <div className="paper">
           <input className="search-input" type="text" placeholder="Search" />
           <Icon name="search" size={15} />
         </div>

src/pages/stream-page.tsx

@@ -22,7 +22,8 @@ function ProfileInfo({ link }: { link: NostrLink }) {
   const thisEvent = useEventFeed(link, true);
   const login = useLogin();
   const navigate = useNavigate();
-  const profile = useUserProfile(System, thisEvent.data?.pubkey);
+  const host = thisEvent.data?.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? thisEvent.data?.pubkey;
+  const profile = useUserProfile(System, host);
   const zapTarget = profile?.lud16 ?? profile?.lud06;
 
   const status = findTag(thisEvent.data, "status");
@@ -77,7 +78,7 @@ function ProfileInfo({ link }: { link: NostrLink }) {
           )}
         </div>
         <div className="profile-info flex g24">
-          <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
+          <Profile pubkey={host ?? ""} />
           {zapTarget && thisEvent.data && (
             <SendZapsDialog
               lnurl={zapTarget}
@@ -104,13 +105,11 @@ function VideoPlayer({ link }: { link: NostrLink }) {
 }
 
 export function StreamPage() {
-  const ref = useRef(null);
   const params = useParams();
   const link = parseNostrLink(params.id!);
 
   return (
     <>
-      <div ref={ref}></div>
       <VideoPlayer link={link} />
       <ProfileInfo link={link} />
       <LiveChat link={link} />