@voicemaster/react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import { VoiceClientConfig, VoiceClient } from '@voicemaster/core';
+
+interface UseVoiceOptions extends VoiceClientConfig {
+    autoConnect?: boolean;
+}
+declare function useVoice(options: UseVoiceOptions): {
+    isConnected: boolean;
+    isMuted: boolean;
+    remoteStream: MediaStream | null;
+    peers: string[];
+    speakingUsers: Set<string>;
+    connect: () => void;
+    disconnect: () => void;
+    toggleMute: () => void;
+    client: VoiceClient | null;
+};
+
+export { useVoice };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { VoiceClientConfig, VoiceClient } from '@voicemaster/core';
+
+interface UseVoiceOptions extends VoiceClientConfig {
+    autoConnect?: boolean;
+}
+declare function useVoice(options: UseVoiceOptions): {
+    isConnected: boolean;
+    isMuted: boolean;
+    remoteStream: MediaStream | null;
+    peers: string[];
+    speakingUsers: Set<string>;
+    connect: () => void;
+    disconnect: () => void;
+    toggleMute: () => void;
+    client: VoiceClient | null;
+};
+
+export { useVoice };

package/dist/index.js

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useVoice: () => useVoice
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useVoice.ts
+var import_react = require("react");
+var import_core = require("@voicemaster/core");
+function useVoice(options) {
+  const [isConnected, setIsConnected] = (0, import_react.useState)(false);
+  const [isMuted, setIsMuted] = (0, import_react.useState)(false);
+  const [remoteStream, setRemoteStream] = (0, import_react.useState)(null);
+  const [speakingUsers, setSpeakingUsers] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const [peers, setPeers] = (0, import_react.useState)([]);
+  const clientRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const client = new import_core.VoiceClient({
+      signalingUrl: options.signalingUrl,
+      roomId: options.roomId,
+      userId: options.userId,
+      iceServers: options.iceServers,
+      autoConnect: false
+    });
+    client.on("connected", () => {
+      setIsConnected(true);
+    });
+    client.on("disconnected", () => {
+      setIsConnected(false);
+      setPeers([]);
+      setRemoteStream(null);
+    });
+    client.on("remoteStream", (stream) => {
+      setRemoteStream(stream);
+    });
+    client.on("userJoined", (userId) => {
+      setPeers((prev) => [...prev, userId]);
+    });
+    client.on("userLeft", (userId) => {
+      setPeers((prev) => prev.filter((id) => id !== userId));
+      setSpeakingUsers((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(userId);
+        return newSet;
+      });
+    });
+    client.on("speaking", (userId) => {
+      setSpeakingUsers((prev) => new Set(prev).add(userId));
+    });
+    client.on("stoppedSpeaking", (userId) => {
+      setSpeakingUsers((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(userId);
+        return newSet;
+      });
+    });
+    client.on("error", (error) => {
+      console.error("Voice client error:", error);
+    });
+    clientRef.current = client;
+    if (options.autoConnect !== false) {
+      client.connect();
+    }
+    return () => {
+      client.disconnect();
+    };
+  }, [options.signalingUrl, options.roomId, options.userId, options.iceServers]);
+  const connect = (0, import_react.useCallback)(() => {
+    clientRef.current?.connect();
+  }, []);
+  const disconnect = (0, import_react.useCallback)(() => {
+    clientRef.current?.disconnect();
+  }, []);
+  const toggleMute = (0, import_react.useCallback)(() => {
+    if (clientRef.current) {
+      clientRef.current.toggleMute();
+      setIsMuted((prev) => !prev);
+    }
+  }, []);
+  return {
+    isConnected,
+    isMuted,
+    remoteStream,
+    peers,
+    speakingUsers,
+    connect,
+    disconnect,
+    toggleMute,
+    client: clientRef.current
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useVoice
+});

package/dist/index.mjs

@@ -0,0 +1,88 @@
+// src/useVoice.ts
+import { useEffect, useState, useRef, useCallback } from "react";
+import { VoiceClient } from "@voicemaster/core";
+function useVoice(options) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [remoteStream, setRemoteStream] = useState(null);
+  const [speakingUsers, setSpeakingUsers] = useState(/* @__PURE__ */ new Set());
+  const [peers, setPeers] = useState([]);
+  const clientRef = useRef(null);
+  useEffect(() => {
+    const client = new VoiceClient({
+      signalingUrl: options.signalingUrl,
+      roomId: options.roomId,
+      userId: options.userId,
+      iceServers: options.iceServers,
+      autoConnect: false
+    });
+    client.on("connected", () => {
+      setIsConnected(true);
+    });
+    client.on("disconnected", () => {
+      setIsConnected(false);
+      setPeers([]);
+      setRemoteStream(null);
+    });
+    client.on("remoteStream", (stream) => {
+      setRemoteStream(stream);
+    });
+    client.on("userJoined", (userId) => {
+      setPeers((prev) => [...prev, userId]);
+    });
+    client.on("userLeft", (userId) => {
+      setPeers((prev) => prev.filter((id) => id !== userId));
+      setSpeakingUsers((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(userId);
+        return newSet;
+      });
+    });
+    client.on("speaking", (userId) => {
+      setSpeakingUsers((prev) => new Set(prev).add(userId));
+    });
+    client.on("stoppedSpeaking", (userId) => {
+      setSpeakingUsers((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(userId);
+        return newSet;
+      });
+    });
+    client.on("error", (error) => {
+      console.error("Voice client error:", error);
+    });
+    clientRef.current = client;
+    if (options.autoConnect !== false) {
+      client.connect();
+    }
+    return () => {
+      client.disconnect();
+    };
+  }, [options.signalingUrl, options.roomId, options.userId, options.iceServers]);
+  const connect = useCallback(() => {
+    clientRef.current?.connect();
+  }, []);
+  const disconnect = useCallback(() => {
+    clientRef.current?.disconnect();
+  }, []);
+  const toggleMute = useCallback(() => {
+    if (clientRef.current) {
+      clientRef.current.toggleMute();
+      setIsMuted((prev) => !prev);
+    }
+  }, []);
+  return {
+    isConnected,
+    isMuted,
+    remoteStream,
+    peers,
+    speakingUsers,
+    connect,
+    disconnect,
+    toggleMute,
+    client: clientRef.current
+  };
+}
+export {
+  useVoice
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@voicemaster/react",
+  "version": "1.0.0",
+  "description": "React hooks for VoiceMaster voice communication",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external @voicemaster/core",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external @voicemaster/core",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "webrtc",
+    "voice",
+    "hooks"
+  ],
+  "author": "Sergey Minasyan",
+  "license": "MIT",
+  "peerDependencies": {
+    "@voicemaster/core": "^1.0.0",
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { useVoice } from './useVoice';

package/src/useVoice.ts

@@ -0,0 +1,106 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { VoiceClient } from '@voicemaster/core';
+import type { VoiceClientConfig } from '@voicemaster/core';
+
+interface UseVoiceOptions extends VoiceClientConfig {
+  autoConnect?: boolean;
+}
+
+export function useVoice(options: UseVoiceOptions) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
+  const [speakingUsers, setSpeakingUsers] = useState<Set<string>>(new Set());
+  const [peers, setPeers] = useState<string[]>([]);
+  const clientRef = useRef<VoiceClient | null>(null);
+
+  useEffect(() => {
+    const client = new VoiceClient({
+      signalingUrl: options.signalingUrl,
+      roomId: options.roomId,
+      userId: options.userId,
+      iceServers: options.iceServers,
+      autoConnect: false
+    });
+
+    client.on('connected', () => {
+      setIsConnected(true);
+    });
+
+    client.on('disconnected', () => {
+      setIsConnected(false);
+      setPeers([]);
+      setRemoteStream(null);
+    });
+
+    client.on('remoteStream', (stream) => {
+      setRemoteStream(stream);
+    });
+
+    client.on('userJoined', (userId) => {
+      setPeers(prev => [...prev, userId]);
+    });
+
+    client.on('userLeft', (userId) => {
+      setPeers(prev => prev.filter(id => id !== userId));
+      setSpeakingUsers(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(userId);
+        return newSet;
+      });
+    });
+
+    client.on('speaking', (userId) => {
+      setSpeakingUsers(prev => new Set(prev).add(userId));
+    });
+
+    client.on('stoppedSpeaking', (userId) => {
+      setSpeakingUsers(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(userId);
+        return newSet;
+      });
+    });
+
+    client.on('error', (error) => {
+      console.error('Voice client error:', error);
+    });
+
+    clientRef.current = client;
+
+    if (options.autoConnect !== false) {
+      client.connect();
+    }
+
+    return () => {
+      client.disconnect();
+    };
+  }, [options.signalingUrl, options.roomId, options.userId, options.iceServers]);
+
+  const connect = useCallback(() => {
+    clientRef.current?.connect();
+  }, []);
+
+  const disconnect = useCallback(() => {
+    clientRef.current?.disconnect();
+  }, []);
+
+  const toggleMute = useCallback(() => {
+    if (clientRef.current) {
+      clientRef.current.toggleMute();
+      setIsMuted(prev => !prev);
+    }
+  }, []);
+
+  return {
+    isConnected,
+    isMuted,
+    remoteStream,
+    peers,
+    speakingUsers,
+    connect,
+    disconnect,
+    toggleMute,
+    client: clientRef.current
+  };
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "paths": {
+      "@voiceflow/core": ["../core/src"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}