feat: stream forwards

src/element/nostr-provider-dialog.tsx

@@ -1,9 +1,9 @@
 import { NostrEvent } from "@snort/system";
 import { useContext, useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { SnortContext } from "@snort/system-react";
 
-import { StreamProvider, StreamProviderEndpoint, StreamProviderInfo } from "@/providers";
+import { NostrStreamProvider, StreamProviderEndpoint, StreamProviderInfo } from "@/providers";
 import { SendZaps } from "./send-zap";
 import { StreamEditor, StreamEditorProps } from "./stream-editor";
 import Spinner from "./spinner";
@@ -13,8 +13,9 @@ export function NostrProviderDialog({
   provider,
   showEndpoints,
   showEditor,
+  showForwards,
   ...others
-}: { provider: StreamProvider; showEndpoints: boolean; showEditor: boolean } & StreamEditorProps) {
+}: { provider: NostrStreamProvider; showEndpoints: boolean; showEditor: boolean, showForwards: boolean } & StreamEditorProps) {
   const system = useContext(SnortContext);
   const [topup, setTopup] = useState(false);
   const [info, setInfo] = useState<StreamProviderInfo>();
@@ -133,7 +134,7 @@ export function NostrProviderDialog({
             </p>
             <div className="flex gap-2">
               {sortEndpoints(info.endpoints).map(a => (
-                <span className={`pill${ep?.name === a.name ? " active" : ""}`} onClick={() => setEndpoint(a)}>
+                <span className={`pill bg-gray-1${ep?.name === a.name ? " active" : ""}`} onClick={() => setEndpoint(a)}>
                   {a.name}
                 </span>
               ))}
@@ -187,42 +188,101 @@ export function NostrProviderDialog({
           </p>
           <div className="flex gap-2">
             {ep?.capabilities?.map(a => (
-              <span className="pill">{parseCapability(a)}</span>
+              <span className="pill bg-gray-1">{parseCapability(a)}</span>
             ))}
           </div>
         </div>
       </>
     );
   }
+
+  function streamEditor() {
+    if (!info || !showEditor) return;
+    if (info.tosAccepted === false) {
+      return tosInput();
+    }
+
+    return <StreamEditor
+      onFinish={ex => {
+        provider.updateStreamInfo(system, ex);
+        others.onFinish?.(ex);
+      }}
+      ev={
+        {
+          tags: [
+            ["title", info.streamInfo?.title ?? ""],
+            ["summary", info.streamInfo?.summary ?? ""],
+            ["image", info.streamInfo?.image ?? ""],
+            ...(info.streamInfo?.goal ? [["goal", info.streamInfo.goal]] : []),
+            ...(info.streamInfo?.content_warning ? [["content-warning", info.streamInfo?.content_warning]] : []),
+            ...(info.streamInfo?.tags?.map(a => ["t", a]) ?? []),
+          ],
+        } as NostrEvent
+      }
+      options={{
+        canSetStream: false,
+        canSetStatus: false,
+      }}
+    />;
+  }
+
+  function forwardInputs() {
+    if (!info || !showForwards) return;
+
+    return <div className="flex flex-col gap-4">
+      <h3>
+        <FormattedMessage defaultMessage="Stream Forwarding" id="W7DNWx" />
+      </h3>
+
+      <div className="grid grid-cols-3 gap-2">
+        {info.forwards?.map(a => <>
+          <div className="paper">{a.name}</div>
+          <AsyncButton className="btn btn-primary" onClick={async () => {
+            await provider.removeForward(a.id);
+          }}>
+            <FormattedMessage defaultMessage="Remove" id="G/yZLu" />
+          </AsyncButton>
+          <div></div>
+        </>)}
+        <AddForwardInputs provider={provider} onAdd={() => { }} />
+      </div>
+    </div>
+  }
+
   return (
     <>
       {showEndpoints && streamEndpoints()}
-      {info.tosAccepted === false ? (
-        tosInput()
-      ) : showEditor ? (
-        <StreamEditor
-          onFinish={ex => {
-            provider.updateStreamInfo(system, ex);
-            others.onFinish?.(ex);
-          }}
-          ev={
-            {
-              tags: [
-                ["title", info.streamInfo?.title ?? ""],
-                ["summary", info.streamInfo?.summary ?? ""],
-                ["image", info.streamInfo?.image ?? ""],
-                ...(info.streamInfo?.goal ? [["goal", info.streamInfo.goal]] : []),
-                ...(info.streamInfo?.content_warning ? [["content-warning", info.streamInfo?.content_warning]] : []),
-                ...(info.streamInfo?.tags?.map(a => ["t", a]) ?? []),
-              ],
-            } as NostrEvent
-          }
-          options={{
-            canSetStream: false,
-            canSetStatus: false,
-          }}
-        />
-      ) : null}
+      {streamEditor()}
+      {forwardInputs()}
     </>
   );
 }
+
+function AddForwardInputs({ provider, onAdd }: { provider: NostrStreamProvider, onAdd: (name: string, target: string) => void }) {
+  const [name, setName] = useState("");
+  const [target, setTarget] = useState("");
+  const { formatMessage } = useIntl();
+
+  async function doAdd() {
+    await provider.addForward(name, target);
+    setName("");
+    setTarget("");
+    onAdd(name, target);
+  }
+
+  return <>
+    <div className="paper">
+      <input type="text"
+        placeholder={formatMessage({ defaultMessage: "Human readable name", id: 'QuXHCg' })}
+        value={name} onChange={e => setName(e.target.value)} />
+    </div>
+    <div className="paper">
+      <input type="text"
+        placeholder="rtmp://"
+        value={target} onChange={e => setTarget(e.target.value)} />
+    </div>
+    <AsyncButton className="btn btn-primary" onClick={doAdd}>
+      <FormattedMessage defaultMessage="Add" id="2/2yg+" />
+    </AsyncButton>
+  </>
+}