crowdplaysdk 0.3.1 → 0.3.3

package/ios/CrowdPlayRNModule.swift

@@ -122,6 +122,38 @@ final class CrowdPlayRNCore {
                       message: engine.micPolicyViolation ?? "")
     }
 
+    // MARK: - Voice-agent activity (M8 voice UI)
+
+    private var voiceTimer: Timer?
+
+    /// Fast (0.15 s) voice-activity stream for the animated voice UI —
+    /// runs only while some JS component is subscribed, so the bridge
+    /// stays quiet for apps that never render it.
+    func startVoiceActivity() {
+        guard voiceTimer == nil else { return }
+        voiceTimer = Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) { _ in
+            Task { @MainActor in CrowdPlayRNCore.shared.voiceTick() }
+        }
+    }
+
+    func stopVoiceActivity() {
+        voiceTimer?.invalidate()
+        voiceTimer = nil
+    }
+
+    private func voiceTick() {
+        guard emitter != nil else { return }
+        let activity = engine.voiceActivity()
+        send("crowdplay:voiceActivity", [
+            "agentPresent": activity.agentPresent,
+            "agentSpeaking": activity.agentSpeaking,
+            "agentLevel": activity.agentLevel,
+            "localLevelDbfs": activity.localLevelDbfs as Any,
+            "localSpeaking": activity.localSpeaking,
+            "connected": engine.phase == .connected,
+        ])
+    }
+
     private func updateWarning(_ kind: String, active: Bool, message: String) {
         let was = activeWarnings.contains(kind)
         guard was != active else { return }
@@ -178,7 +210,15 @@ public final class CrowdPlayRNModule: RCTEventEmitter {
     public override static func requiresMainQueueSetup() -> Bool { true }
 
     public override func supportedEvents() -> [String]! {
-        ["crowdplay:phase", "crowdplay:recording", "crowdplay:uploads", "crowdplay:participants", "crowdplay:warning", "crowdplay:audioRoute"]
+        ["crowdplay:phase", "crowdplay:recording", "crowdplay:uploads", "crowdplay:participants", "crowdplay:warning", "crowdplay:audioRoute", "crowdplay:voiceActivity"]
+    }
+
+    @objc public func startVoiceActivityUpdates() {
+        Task { @MainActor in CrowdPlayRNCore.shared.startVoiceActivity() }
+    }
+
+    @objc public func stopVoiceActivityUpdates() {
+        Task { @MainActor in CrowdPlayRNCore.shared.stopVoiceActivity() }
     }
 
     public override func startObserving() {

package/ios/CrowdPlayReactNative.m

@@ -27,6 +27,8 @@ RCT_EXTERN_METHOD(setAudioOutput : (NSString *)output)
 RCT_EXTERN_METHOD(retryRecording)
 RCT_EXTERN_METHOD(retryUploads)
 RCT_EXTERN_METHOD(warmUp)
+RCT_EXTERN_METHOD(startVoiceActivityUpdates)
+RCT_EXTERN_METHOD(stopVoiceActivityUpdates)
 RCT_EXTERN_METHOD(snapshot : (RCTPromiseResolveBlock)resolve
                   rejecter : (RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(doctor : (RCTPromiseResolveBlock)resolve

package/ios/wire.rb

@@ -25,7 +25,7 @@ SDK_URL = 'https://github.com/symbiateam/crowdplaysdk'
 # The ENGINE release this bridge was tested against. The npm package
 # version may be AHEAD of this (bridge/docs fixes ship without a new
 # engine binary); that is deliberate, not drift.
-SDK_VERSION = '0.3.1'
+SDK_VERSION = '0.3.3'
 BRIDGE_FILES = ['CrowdPlayRNModule.swift', 'CrowdPlayRNVideoView.swift', 'CrowdPlayReactNative.m'].freeze
 
 project_name = ARGV[0] or abort 'usage: ruby wire.rb <YourProjectName>'

package/lib/VoiceView.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The standard voice-AI visual (founders, 2026-08-22): a breathing orb in
+ * the style of realtime assistants — calm while idle, a cool ring while the
+ * user talks, an energetic pulse while the AI speaks. The React Native
+ * counterpart of the native SDK's CrowdPlayVoiceView, driven by the same
+ * engine signal over a fast bridge event that runs only while mounted.
+ *
+ * Two levels of customization:
+ * 1. Props on <CrowdPlayVoiceView> — colors and size of the built-in orb.
+ * 2. useVoiceActivity() — the phase + smoothed energy underneath, for apps
+ *    that want to draw something entirely their own.
+ */
+import React from 'react';
+export type VoicePhase = 'connecting' | 'idle' | 'listening' | 'speaking';
+export interface VoiceActivity {
+    phase: VoicePhase;
+    /** 0…1, smoothed (fast attack, slow release). */
+    energy: number;
+}
+/** Live phase + energy from the call engine. Subscribing starts the native
+ * fast stream; the last unmount stops it. */
+export declare function useVoiceActivity(): VoiceActivity;
+export interface CrowdPlayVoiceViewProps {
+    /** Orb color while the AI is speaking. */
+    agentColor?: string;
+    /** Ring color while the user is speaking. */
+    listeningColor?: string;
+    /** Resting color (dimmed while connecting). */
+    idleColor?: string;
+    /** Diameter in points. */
+    size?: number;
+}
+export declare function CrowdPlayVoiceView({ agentColor, listeningColor, idleColor, size, }: CrowdPlayVoiceViewProps): React.JSX.Element;

package/lib/VoiceView.js

@@ -0,0 +1,156 @@
+"use strict";
+/**
+ * The standard voice-AI visual (founders, 2026-08-22): a breathing orb in
+ * the style of realtime assistants — calm while idle, a cool ring while the
+ * user talks, an energetic pulse while the AI speaks. The React Native
+ * counterpart of the native SDK's CrowdPlayVoiceView, driven by the same
+ * engine signal over a fast bridge event that runs only while mounted.
+ *
+ * Two levels of customization:
+ * 1. Props on <CrowdPlayVoiceView> — colors and size of the built-in orb.
+ * 2. useVoiceActivity() — the phase + smoothed energy underneath, for apps
+ *    that want to draw something entirely their own.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVoiceActivity = useVoiceActivity;
+exports.CrowdPlayVoiceView = CrowdPlayVoiceView;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/** Live phase + energy from the call engine. Subscribing starts the native
+ * fast stream; the last unmount stops it. */
+function useVoiceActivity() {
+    const [activity, setActivity] = (0, react_1.useState)({ phase: 'connecting', energy: 0 });
+    const energyRef = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const module = react_native_1.NativeModules.CrowdPlayReactNative;
+        if (!module)
+            return;
+        const emitter = new react_native_1.NativeEventEmitter(module);
+        const sub = emitter.addListener('crowdplay:voiceActivity', (e) => {
+            let phase;
+            let target;
+            if (!e.connected || !e.agentPresent) {
+                phase = 'connecting';
+                target = 0;
+            }
+            else if (e.agentSpeaking) {
+                phase = 'speaking';
+                target = 0.55 + Math.min(0.45, e.agentLevel * 3.0);
+            }
+            else if (e.localSpeaking) {
+                phase = 'listening';
+                const db = e.localLevelDbfs ?? -50;
+                target = Math.max(0.2, Math.min(1.0, (db + 50) / 40));
+            }
+            else {
+                phase = 'idle';
+                target = 0;
+            }
+            // Fast attack, slow release — speech onsets snap, tails breathe out.
+            const rate = target > energyRef.current ? 0.55 : 0.12;
+            energyRef.current += (target - energyRef.current) * rate;
+            setActivity({ phase, energy: energyRef.current });
+        });
+        module.startVoiceActivityUpdates?.();
+        return () => {
+            sub.remove();
+            module.stopVoiceActivityUpdates?.();
+        };
+    }, []);
+    return activity;
+}
+function CrowdPlayVoiceView({ agentColor = '#598CFF', listeningColor = '#4DD9B3', idleColor = '#BFBFBF', size = 180, }) {
+    const { phase, energy } = useVoiceActivity();
+    const breathe = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(0.62)).current;
+    const halo = (0, react_1.useRef)(new react_native_1.Animated.Value(0.85)).current;
+    // Continuous idle breathing, independent of the event stream.
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(breathe, {
+                toValue: 1, duration: 2200, easing: react_native_1.Easing.inOut(react_native_1.Easing.sin), useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(breathe, {
+                toValue: 0, duration: 2200, easing: react_native_1.Easing.inOut(react_native_1.Easing.sin), useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [breathe]);
+    // Energy drives the core + halo scale; spring gives the organic wobble
+    // that the native version synthesizes with sines.
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.spring(scale, {
+            toValue: 0.62 + 0.22 * energy, useNativeDriver: true,
+            speed: 20, bounciness: 12,
+        }).start();
+        react_native_1.Animated.spring(halo, {
+            toValue: 0.85 + 0.35 * energy, useNativeDriver: true,
+            speed: 14, bounciness: 8,
+        }).start();
+    }, [energy, scale, halo]);
+    const color = phase === 'speaking' ? agentColor
+        : phase === 'listening' ? listeningColor
+            : idleColor;
+    const dim = phase === 'connecting' ? 0.45 : 1;
+    const breatheScale = breathe.interpolate({ inputRange: [0, 1], outputRange: [1, 1.05] });
+    return (<react_native_1.View style={[styles.container, { width: size, height: size }]} accessibilityLabel={phase === 'speaking' ? 'Assistant is speaking'
+            : phase === 'listening' ? 'Listening'
+                : phase === 'idle' ? 'Assistant is ready'
+                    : 'Connecting to assistant'}>
+      <react_native_1.Animated.View style={[styles.circle, {
+                width: size, height: size, borderRadius: size / 2,
+                backgroundColor: color,
+                opacity: 0.18 * dim + 0.25 * energy,
+                transform: [{ scale: react_native_1.Animated.multiply(halo, breatheScale) }],
+            }]}/>
+      {phase === 'listening' && (<react_native_1.View style={[styles.circle, {
+                    width: size * 0.8, height: size * 0.8, borderRadius: size * 0.4,
+                    borderWidth: Math.max(2, size * 0.015), borderColor: color,
+                    backgroundColor: 'transparent',
+                }]}/>)}
+      <react_native_1.Animated.View style={[styles.circle, {
+                width: size, height: size, borderRadius: size / 2,
+                backgroundColor: color,
+                opacity: dim,
+                transform: [{ scale: react_native_1.Animated.multiply(scale, breatheScale) }],
+            }]}/>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { alignItems: 'center', justifyContent: 'center' },
+    circle: { position: 'absolute' },
+});

package/lib/index.d.ts

@@ -193,3 +193,5 @@ declare const CrowdPlay: {
 export default CrowdPlay;
 export { CrowdPlayConsentScreen } from './ConsentScreen';
 export { CrowdPlayVideoView } from './VideoView';
+export { CrowdPlayVoiceView, useVoiceActivity } from './VoiceView';
+export type { CrowdPlayVoiceViewProps, VoiceActivity, VoicePhase } from './VoiceView';

package/lib/index.js

@@ -22,7 +22,7 @@
  * path that records without it.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrowdPlayVideoView = exports.CrowdPlayConsentScreen = void 0;
+exports.useVoiceActivity = exports.CrowdPlayVoiceView = exports.CrowdPlayVideoView = exports.CrowdPlayConsentScreen = void 0;
 const react_native_1 = require("react-native");
 function native() {
     const module = react_native_1.NativeModules.CrowdPlayReactNative;
@@ -143,3 +143,6 @@ var ConsentScreen_1 = require("./ConsentScreen");
 Object.defineProperty(exports, "CrowdPlayConsentScreen", { enumerable: true, get: function () { return ConsentScreen_1.CrowdPlayConsentScreen; } });
 var VideoView_1 = require("./VideoView");
 Object.defineProperty(exports, "CrowdPlayVideoView", { enumerable: true, get: function () { return VideoView_1.CrowdPlayVideoView; } });
+var VoiceView_1 = require("./VoiceView");
+Object.defineProperty(exports, "CrowdPlayVoiceView", { enumerable: true, get: function () { return VoiceView_1.CrowdPlayVoiceView; } });
+Object.defineProperty(exports, "useVoiceActivity", { enumerable: true, get: function () { return VoiceView_1.useVoiceActivity; } });

package/llms.txt

@@ -147,7 +147,17 @@ Default export `CrowdPlay`:
       handler: (payload: CrowdPlayEvents[E]) => void): { remove(): void }
 
 Named exports: CrowdPlayConsentScreen (props: onConsent(grant)), CrowdPlayVideoView
-(props: participant: string | 'local', plus standard View style).
+(props: participant: string | 'local', plus standard View style),
+CrowdPlayVoiceView (props: agentColor?, listeningColor?, idleColor?, size?),
+useVoiceActivity() -> { phase: 'connecting'|'idle'|'listening'|'speaking', energy: 0…1 }.
+
+Voice-AI apps: when the app includes the CrowdPlay voice AI, render the AI
+participant with <CrowdPlayVoiceView /> — the standard animated orb that
+breathes when idle, rings while the user talks, and pulses while the AI
+talks. The AI publishes NO video: never show it as a camera tile or an
+empty box. Detect it in the participants event by identity prefix
+"agent-" or name "agent". For a fully custom visual, drive your own
+component from useVoiceActivity().
 
 Types:
   CrowdPlayConfig { serverUrl; appKey; audioOnly?=false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crowdplaysdk",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "CrowdPlay lossless conversation capture for React Native (iOS). Studio-grade per-participant recording during live video calls, delivered to CrowdPlay automatically.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/VoiceView.tsx

@@ -0,0 +1,175 @@
+/**
+ * The standard voice-AI visual (founders, 2026-08-22): a breathing orb in
+ * the style of realtime assistants — calm while idle, a cool ring while the
+ * user talks, an energetic pulse while the AI speaks. The React Native
+ * counterpart of the native SDK's CrowdPlayVoiceView, driven by the same
+ * engine signal over a fast bridge event that runs only while mounted.
+ *
+ * Two levels of customization:
+ * 1. Props on <CrowdPlayVoiceView> — colors and size of the built-in orb.
+ * 2. useVoiceActivity() — the phase + smoothed energy underneath, for apps
+ *    that want to draw something entirely their own.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, NativeEventEmitter, NativeModules, StyleSheet, View } from 'react-native';
+
+export type VoicePhase = 'connecting' | 'idle' | 'listening' | 'speaking';
+
+export interface VoiceActivity {
+  phase: VoicePhase;
+  /** 0…1, smoothed (fast attack, slow release). */
+  energy: number;
+}
+
+interface VoiceActivityEvent {
+  agentPresent: boolean;
+  agentSpeaking: boolean;
+  agentLevel: number;
+  localLevelDbfs: number | null;
+  localSpeaking: boolean;
+  connected: boolean;
+}
+
+/** Live phase + energy from the call engine. Subscribing starts the native
+ * fast stream; the last unmount stops it. */
+export function useVoiceActivity(): VoiceActivity {
+  const [activity, setActivity] = useState<VoiceActivity>({ phase: 'connecting', energy: 0 });
+  const energyRef = useRef(0);
+
+  useEffect(() => {
+    const module = NativeModules.CrowdPlayReactNative;
+    if (!module) return;
+    const emitter = new NativeEventEmitter(module);
+    const sub = emitter.addListener('crowdplay:voiceActivity', (e: VoiceActivityEvent) => {
+      let phase: VoicePhase;
+      let target: number;
+      if (!e.connected || !e.agentPresent) {
+        phase = 'connecting';
+        target = 0;
+      } else if (e.agentSpeaking) {
+        phase = 'speaking';
+        target = 0.55 + Math.min(0.45, e.agentLevel * 3.0);
+      } else if (e.localSpeaking) {
+        phase = 'listening';
+        const db = e.localLevelDbfs ?? -50;
+        target = Math.max(0.2, Math.min(1.0, (db + 50) / 40));
+      } else {
+        phase = 'idle';
+        target = 0;
+      }
+      // Fast attack, slow release — speech onsets snap, tails breathe out.
+      const rate = target > energyRef.current ? 0.55 : 0.12;
+      energyRef.current += (target - energyRef.current) * rate;
+      setActivity({ phase, energy: energyRef.current });
+    });
+    module.startVoiceActivityUpdates?.();
+    return () => {
+      sub.remove();
+      module.stopVoiceActivityUpdates?.();
+    };
+  }, []);
+
+  return activity;
+}
+
+export interface CrowdPlayVoiceViewProps {
+  /** Orb color while the AI is speaking. */
+  agentColor?: string;
+  /** Ring color while the user is speaking. */
+  listeningColor?: string;
+  /** Resting color (dimmed while connecting). */
+  idleColor?: string;
+  /** Diameter in points. */
+  size?: number;
+}
+
+export function CrowdPlayVoiceView({
+  agentColor = '#598CFF',
+  listeningColor = '#4DD9B3',
+  idleColor = '#BFBFBF',
+  size = 180,
+}: CrowdPlayVoiceViewProps): React.JSX.Element {
+  const { phase, energy } = useVoiceActivity();
+  const breathe = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0.62)).current;
+  const halo = useRef(new Animated.Value(0.85)).current;
+
+  // Continuous idle breathing, independent of the event stream.
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(breathe, {
+          toValue: 1, duration: 2200, easing: Easing.inOut(Easing.sin), useNativeDriver: true,
+        }),
+        Animated.timing(breathe, {
+          toValue: 0, duration: 2200, easing: Easing.inOut(Easing.sin), useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [breathe]);
+
+  // Energy drives the core + halo scale; spring gives the organic wobble
+  // that the native version synthesizes with sines.
+  useEffect(() => {
+    Animated.spring(scale, {
+      toValue: 0.62 + 0.22 * energy, useNativeDriver: true,
+      speed: 20, bounciness: 12,
+    }).start();
+    Animated.spring(halo, {
+      toValue: 0.85 + 0.35 * energy, useNativeDriver: true,
+      speed: 14, bounciness: 8,
+    }).start();
+  }, [energy, scale, halo]);
+
+  const color = phase === 'speaking' ? agentColor
+    : phase === 'listening' ? listeningColor
+    : idleColor;
+  const dim = phase === 'connecting' ? 0.45 : 1;
+  const breatheScale = breathe.interpolate({ inputRange: [0, 1], outputRange: [1, 1.05] });
+
+  return (
+    <View
+      style={[styles.container, { width: size, height: size }]}
+      accessibilityLabel={
+        phase === 'speaking' ? 'Assistant is speaking'
+        : phase === 'listening' ? 'Listening'
+        : phase === 'idle' ? 'Assistant is ready'
+        : 'Connecting to assistant'
+      }
+    >
+      <Animated.View
+        style={[styles.circle, {
+          width: size, height: size, borderRadius: size / 2,
+          backgroundColor: color,
+          opacity: 0.18 * dim + 0.25 * energy,
+          transform: [{ scale: Animated.multiply(halo, breatheScale) }],
+        }]}
+      />
+      {phase === 'listening' && (
+        <View
+          style={[styles.circle, {
+            width: size * 0.8, height: size * 0.8, borderRadius: size * 0.4,
+            borderWidth: Math.max(2, size * 0.015), borderColor: color,
+            backgroundColor: 'transparent',
+          }]}
+        />
+      )}
+      <Animated.View
+        style={[styles.circle, {
+          width: size, height: size, borderRadius: size / 2,
+          backgroundColor: color,
+          opacity: dim,
+          transform: [{ scale: Animated.multiply(scale, breatheScale) }],
+        }]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'center', justifyContent: 'center' },
+  circle: { position: 'absolute' },
+});

package/src/index.ts

@@ -297,3 +297,5 @@ const CrowdPlay = {
 export default CrowdPlay;
 export { CrowdPlayConsentScreen } from './ConsentScreen';
 export { CrowdPlayVideoView } from './VideoView';
+export { CrowdPlayVoiceView, useVoiceActivity } from './VoiceView';
+export type { CrowdPlayVoiceViewProps, VoiceActivity, VoicePhase } from './VoiceView';