restream-sdk 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "restream-sdk",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Plug-and-play headless React hooks to add multi-platform restreaming (connect socials, go live, live chat + viewers) with zero client backend.",
   "type": "module",
   "main": "src/index.js",
@@ -16,7 +16,12 @@
       "import": "./src/core.js"
     }
   },
-  "files": ["src", "types", "README.md", "LICENSE"],
+  "files": [
+    "src",
+    "types",
+    "README.md",
+    "LICENSE"
+  ],
   "sideEffects": false,
   "engines": {
     "node": ">=18"
@@ -25,7 +30,9 @@
     "react": ">=17"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true }
+    "react": {
+      "optional": true
+    }
   },
   "repository": {
     "type": "git",
@@ -38,5 +45,14 @@
   },
   "author": "Ravant Technologies FZCO",
   "license": "MIT",
-  "keywords": ["restream", "streaming", "twitch", "kick", "youtube", "multistream", "react", "sdk"]
-}
+  "keywords": [
+    "restream",
+    "streaming",
+    "twitch",
+    "kick",
+    "youtube",
+    "multistream",
+    "react",
+    "sdk"
+  ]
+}

package/src/core.js

@@ -39,6 +39,8 @@ export class RestreamStudio extends EventTarget {
     this._pollTimer = null;
     this._sseReopen = null;
     this._armed = null;
+    this._watchPoll = null;
+    this._watchUserId = null;
   }
 
   _emit(type, detail) { this.dispatchEvent(new CustomEvent(type, { detail })); }
@@ -129,10 +131,12 @@ export class RestreamStudio extends EventTarget {
 
   /** Open the hosted OAuth popup for a platform; resolves when connected (or the popup closes). */
   async connect(platform) {
-    const q = await this._authQuery();
-    const url = `${this.apiBase}/api/v1/connect/${platform}/start?${new URLSearchParams(q)}`;
-    const popup = window.open(url, "restream_connect", "width=560,height=760");
+    // Open the popup synchronously, inside the click's user-activation window —
+    // any await before window.open consumes the gesture and the browser blocks it.
+    const popup = window.open("", "restream_connect", "width=560,height=760");
     if (!popup) throw new Error("popup blocked — allow popups to connect accounts");
+    const q = await this._authQuery();
+    popup.location = `${this.apiBase}/api/v1/connect/${platform}/start?${new URLSearchParams(q)}`;
     return new Promise((resolve, reject) => {
       const cleanup = () => {
         window.removeEventListener("message", onMsg);
@@ -267,5 +271,43 @@ export class RestreamStudio extends EventTarget {
     if (this._sseReopen) { clearTimeout(this._sseReopen); this._sseReopen = null; }
   }
 
-  destroy() { this.stopRealtime(); }
+  // ---- viewer mode (read-only) ----
+  /**
+   * Watch a streamer's LIVE social chat + viewer counts, read-only (no goLive).
+   * Resolves their active job and streams `comment`/`viewers` events just like the
+   * broadcaster sees. If the stream isn't live yet (or ends and restarts), it keeps
+   * polling and (re)attaches automatically. Needs only the `read` scope.
+   * @param {string} userId  The streamer's external user id (e.g. wallet).
+   * @param {object} [opts]  { pollMs=5000 } — 0 disables the keep-trying poll.
+   * @returns {Promise<{id:string}|null>} the active job if one is live now.
+   */
+  async watch(userId, { pollMs = 5000 } = {}) {
+    this.unwatch();
+    this._watchUserId = userId;
+    const attach = async () => {
+      if (this._watchUserId !== userId) return;
+      if (this._es || this._pollTimer) return; // already attached to a live job
+      try {
+        const r = await this._req("GET", `/api/v1/jobs/active?userId=${encodeURIComponent(userId)}`);
+        if (r?.jobId && this._watchUserId === userId) {
+          this.job = { id: r.jobId, status: r.status };
+          this._emit("job", this.job);
+          this.startRealtime(r.jobId);
+        }
+      } catch { /* transient — retry next tick */ }
+    };
+    await attach();
+    if (pollMs > 0) this._watchPoll = setInterval(attach, pollMs);
+    return this.job;
+  }
+
+  /** Stop watching (clears the keep-trying poll + the realtime streams). */
+  unwatch() {
+    this._watchUserId = null;
+    if (this._watchPoll) { clearInterval(this._watchPoll); this._watchPoll = null; }
+    this.stopRealtime();
+    this.job = null;
+  }
+
+  destroy() { this.unwatch(); }
 }

package/src/react.js

@@ -69,3 +69,29 @@ export function useViewers(studio) {
   useEffect(() => (studio ? studio.on("viewers", setViewers) : undefined), [studio]);
   return viewers;
 }
+
+/**
+ * Read-only viewer mode — watch a streamer's live social chat + viewer counts.
+ * Any viewer (not just the broadcaster) can call this; needs only the `read` scope.
+ *
+ * @param {object} opts    { apiBase, publishableKey } (no userId needed)
+ * @param {string} userId  The streamer to watch.
+ */
+export function useWatch(opts, userId) {
+  const { apiBase, publishableKey, tokenEndpoint } = opts || {};
+  const [comments, setComments] = useState([]);
+  const [viewers, setViewers] = useState(null);
+  const [job, setJob] = useState(null);
+  useEffect(() => {
+    if (!userId || !apiBase) return undefined;
+    const studio = new RestreamStudio({ apiBase, publishableKey, tokenEndpoint });
+    const offs = [
+      studio.on("comments", setComments),
+      studio.on("viewers", setViewers),
+      studio.on("job", setJob),
+    ];
+    studio.watch(userId);
+    return () => { offs.forEach((off) => off()); studio.destroy(); };
+  }, [apiBase, publishableKey, tokenEndpoint, userId]);
+  return { comments, viewers, job };
+}

package/types/index.d.ts

@@ -94,6 +94,10 @@ export class RestreamStudio extends EventTarget {
   updateOverlay(opts: OverlayUpdate): Promise<unknown>;
   startRealtime(jobId: string): Promise<void>;
   stopRealtime(): void;
+  /** Read-only viewer mode: stream a streamer's live social chat + viewer counts. */
+  watch(userId: string, opts?: { pollMs?: number }): Promise<{ id: string } | null>;
+  /** Stop watching (clears the poll + realtime streams). */
+  unwatch(): void;
   destroy(): void;
 }
 
@@ -124,3 +128,7 @@ export function useConnections(opts: RestreamOptions): {
 };
 export function useLiveChat(studio: RestreamStudio): { comments: Comment[]; send(message: string, platforms?: Platform[]): Promise<unknown> };
 export function useViewers(studio: RestreamStudio): ViewerCounts | null;
+export function useWatch(
+  opts: { apiBase: string; publishableKey?: string; tokenEndpoint?: string },
+  userId: string
+): { comments: Comment[]; viewers: ViewerCounts | null; job: Job | null };