Nostr stream provider init

2023-07-03 16:55:43 +01:00
parent cbc49a0def
commit 7cc613646c
15 changed files with 566 additions and 198 deletions
--- a/src/pages/providers/nostr.tsx
+++ b/src/pages/providers/nostr.tsx
@ -0,0 +1,83 @@
+import AsyncButton from "element/async-button";
+import { StatePill } from "element/state-pill";
+import { StreamState } from "index";
+import { StreamProviderInfo, StreamProviderStore } from "providers";
+import { Nip103StreamProvider } from "providers/nip103";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export function ConfigureNostrType() {
+    const [url, setUrl] = useState("");
+    const [info, setInfo] = useState<StreamProviderInfo>();
+    const navigate = useNavigate();
+
+    async function tryConnect() {
+        try {
+            const api = new Nip103StreamProvider(url);
+            const inf = await api.info();
+            setInfo(inf);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    function status() {
+        if (!info) return;
+
+        return <>
+            <h3>Status</h3>
+            <div>
+                <StatePill state={info?.state ?? StreamState.Ended} />
+            </div>
+            <div>
+                <p>Name</p>
+                <div className="paper">
+                    {info?.name}
+                </div>
+            </div>
+            {info?.summary && <div>
+                <p>Summary</p>
+                <div className="paper">
+                    {info?.summary}
+                </div>
+            </div>}
+            {info?.viewers && <div>
+                <p>Viewers</p>
+                <div className="paper">
+                    {info?.viewers}
+                </div>
+            </div>}
+            {info?.version && <div>
+                <p>Version</p>
+                <div className="paper">
+                    {info?.version}
+                </div>
+            </div>}
+            <div>
+                <button className="btn btn-border" onClick={() => {
+                    StreamProviderStore.add(new Nip103StreamProvider(url));
+                    navigate("/");
+                }}>
+                    Save
+                </button>
+            </div>
+        </>
+    }
+
+    return <div className="owncast-config">
+        <div className="flex f-col g24">
+            <div>
+                <p>Nostr streaming provider URL</p>
+                <div className="paper">
+                    <input type="text" placeholder="https://" value={url} onChange={e => setUrl(e.target.value)} />
+                </div>
+            </div>
+            <AsyncButton className="btn btn-primary" onClick={tryConnect}>
+                Connect
+            </AsyncButton>
+        </div>
+        <div>
+            {status()}
+        </div>
+    </div>
+}