feat: play stream with zap.stream embed

packages/app/src/Components/Embed/AppleMusicEmbed.tsx

@@ -6,6 +6,7 @@ const AppleMusicEmbed = ({ link }: { link: string }) => {
     <iframe
       allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
       frameBorder="0"
+      // eslint-disable-next-line react/no-unknown-property
       credentialless=""
       height={isSongLink ? 175 : 450}
       style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}

packages/app/src/Components/Embed/HyperText.tsx

@@ -47,6 +47,7 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
     if (youtubeId) {
       return (
         <iframe
+          // eslint-disable-next-line react/no-unknown-property
           credentialless=""
           className="-mx-4 md:mx-0 w-max my-2"
           src={`https://www.youtube.com/embed/${youtubeId}`}

packages/app/src/Components/Embed/MixCloudEmbed.tsx

@@ -10,6 +10,7 @@ const MixCloudEmbed = ({ link }: { link: string }) => {
     <>
       <br />
       <iframe
+        // eslint-disable-next-line react/no-unknown-property
         credentialless=""
         title="SoundCloud player"
         width="100%"

packages/app/src/Components/Embed/SoundCloudEmded.tsx

@@ -1,6 +1,7 @@
 const SoundCloudEmbed = ({ link }: { link: string }) => {
   return (
     <iframe
+      // eslint-disable-next-line react/no-unknown-property
       credentialless=""
       width="100%"
       height="166"

packages/app/src/Components/Embed/SpotifyEmbed.tsx

@@ -3,6 +3,7 @@ const SpotifyEmbed = ({ link }: { link: string }) => {
 
   return (
     <iframe
+      // eslint-disable-next-line react/no-unknown-property
       credentialless=""
       style={{ borderRadius: 12 }}
       src={convertedUrl}

packages/app/src/Components/Embed/TidalEmbed.tsx

@@ -46,12 +46,14 @@ const TidalEmbed = ({ link }: { link: string }) => {
       .catch(console.error);
   }, [link]);
 
-  if (!source)
+  if (!source) {
     return (
       <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
         {link}
       </a>
     );
+  }
+  // eslint-disable-next-line react/no-unknown-property
   return <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} credentialless="" />;
 };
 

packages/app/src/Components/Embed/TwitchEmbed.tsx

@@ -7,7 +7,9 @@ const TwitchEmbed = ({ link }: { link: string }) => {
       src={`https://player.twitch.tv/${args}`}
       className="w-max"
       allowFullScreen={true}
-      credentialless=""></iframe>
+      // eslint-disable-next-line react/no-unknown-property
+      credentialless=""
+    />
   );
 };
 

packages/app/src/Components/Embed/WavlakeEmbed.tsx

@@ -3,6 +3,7 @@ const WavlakeEmbed = ({ link }: { link: string }) => {
 
   return (
     <iframe
+      // eslint-disable-next-line react/no-unknown-property
       credentialless=""
       style={{ borderRadius: 12 }}
       src={convertedUrl}

packages/app/src/Components/LiveStream/LiveEvent.tsx

@@ -1,4 +1,5 @@
 import { NostrEvent, NostrLink } from "@snort/system";
+import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 
@@ -12,6 +13,7 @@ export function LiveEvent({ ev }: { ev: NostrEvent }) {
   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;
+  const [play, setPlay] = useState(false);
 
   function statusLine() {
     switch (status) {
@@ -49,11 +51,9 @@ export function LiveEvent({ ev }: { ev: NostrEvent }) {
     switch (status) {
       case "live": {
         return (
-          <Link to={link} target="_blank">
-            <button className="nowrap">
-              <FormattedMessage defaultMessage="Join Stream" id="GQPtfk" />
-            </button>
-          </Link>
+          <button className="nowrap" onClick={() => setPlay(true)}>
+            <FormattedMessage defaultMessage="Watch Stream" id="furjvW" />
+          </button>
         );
       }
       case "ended": {
@@ -69,7 +69,20 @@ export function LiveEvent({ ev }: { ev: NostrEvent }) {
       }
     }
   }
-
+  if (play) {
+    const link = `https://zap.stream/embed/${NostrLink.fromEvent(ev).encode()}`;
+    return (
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        src={link}
+        width="100%"
+        style={{
+          aspectRatio: "16/9",
+        }}
+      />
+    );
+  }
   return (
     <div className="sm:flex g12 br p24 bg-primary items-center">
       <div>

packages/app/src/lang.json

@@ -539,9 +539,6 @@
   "GL8aXW": {
     "defaultMessage": "Bookmarks ({n})"
   },
-  "GQPtfk": {
-    "defaultMessage": "Join Stream"
-  },
   "GSye7T": {
     "defaultMessage": "Lightning Address"
   },
@@ -1256,6 +1253,9 @@
   "fsB/4p": {
     "defaultMessage": "Saved"
   },
+  "furjvW": {
+    "defaultMessage": "Watch Stream"
+  },
   "g5pX+a": {
     "defaultMessage": "About"
   },

packages/app/src/translations/en.json

@@ -178,7 +178,6 @@
   "G3A56c": "Subscribed to Push",
   "GFOoEE": "Salt",
   "GL8aXW": "Bookmarks ({n})",
-  "GQPtfk": "Join Stream",
   "GSye7T": "Lightning Address",
   "GUlSVG": "Claim your included Snort nostr address",
   "Gcn9NQ": "Magnet Link",
@@ -414,6 +413,7 @@
   "flnGvv": "What's on your mind?",
   "fqwcJ1": "On-chain Donation",
   "fsB/4p": "Saved",
+  "furjvW": "Watch Stream",
   "g5pX+a": "About",
   "g985Wp": "Failed to send vote",
   "gDzDRs": "Emoji to send when reactiong to a note",