@squad-sports/react-native 1.3.1

package/src/services/VerificationStateManager.ts

@@ -0,0 +1,41 @@
+/**
+ * VerificationStateManager — manages verification lock state to prevent
+ * duplicate verification attempts.
+ * Ported from squad-demo/src/services/VerificationStateManager.ts.
+ */
+
+let verificationInProgress = false;
+let verificationLockHolder: string | null = null;
+
+export function isVerificationInProgress(): boolean {
+  return verificationInProgress;
+}
+
+export function acquireVerificationLock(holder: string): boolean {
+  if (verificationInProgress) return false;
+  verificationInProgress = true;
+  verificationLockHolder = holder;
+  return true;
+}
+
+export function releaseVerificationLock(holder: string): void {
+  if (verificationLockHolder === holder) {
+    verificationInProgress = false;
+    verificationLockHolder = null;
+  }
+}
+
+export function cleanupVerificationState(): void {
+  verificationInProgress = false;
+  verificationLockHolder = null;
+}
+
+export const verificationStateManager = {
+  isVerificationInProgress,
+  acquireVerificationLock,
+  releaseVerificationLock,
+  cleanupVerificationState,
+  setVerificationInProgress: (value: boolean) => {
+    verificationInProgress = value;
+  },
+};

package/src/squad-line/CallScreen.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+import { useTheme, Colors } from '../theme/ThemeContext';
+import { useSquadLine } from './useSquadLine';
+
+function formatDuration(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Active call screen UI with caller info, timer, and controls.
+ */
+export function CallScreen() {
+  const { theme } = useTheme();
+  const {
+    callState,
+    currentCall,
+    isMuted,
+    isSpeakerOn,
+    endCall,
+    toggleMute,
+    toggleSpeaker,
+  } = useSquadLine();
+
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (callState !== 'connected' || !currentCall?.startTime) {
+      setElapsed(0);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - (currentCall.startTime ?? Date.now()));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [callState, currentCall?.startTime]);
+
+  const statusText =
+    callState === 'connecting' ? 'Connecting...'
+    : callState === 'ringing' ? 'Ringing...'
+    : callState === 'connected' ? formatDuration(elapsed)
+    : callState === 'disconnected' ? 'Call Ended'
+    : '';
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <View style={styles.callerInfo}>
+        <View style={[styles.avatar, { backgroundColor: theme.buttonColor }]}>
+          <Text style={styles.avatarText}>
+            {currentCall?.remoteCaller?.displayName?.[0]?.toUpperCase() ?? '?'}
+          </Text>
+        </View>
+        <Text style={styles.callerName}>
+          {currentCall?.remoteCaller?.displayName ?? currentCall?.title ?? 'Call'}
+        </Text>
+        <Text style={styles.status}>{statusText}</Text>
+      </View>
+
+      <View style={styles.controls}>
+        <TouchableOpacity
+          style={[styles.controlButton, isMuted && styles.controlButtonActive]}
+          onPress={toggleMute}
+        >
+          <Text style={styles.controlIcon}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.endCallButton]}
+          onPress={endCall}
+        >
+          <Text style={styles.endCallIcon}>End</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.controlButton, isSpeakerOn && styles.controlButtonActive]}
+          onPress={toggleSpeaker}
+        >
+          <Text style={styles.controlIcon}>{isSpeakerOn ? 'Ear' : 'Speaker'}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 80,
+  },
+  callerInfo: {
+    alignItems: 'center',
+  },
+  avatar: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatarText: {
+    color: Colors.white,
+    fontSize: 36,
+    fontWeight: '700',
+  },
+  callerName: {
+    color: Colors.white,
+    fontSize: 24,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  status: {
+    color: Colors.gray6,
+    fontSize: 16,
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 32,
+  },
+  controlButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  controlButtonActive: {
+    backgroundColor: 'rgba(255,255,255,0.3)',
+  },
+  controlIcon: {
+    color: Colors.white,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  endCallButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: Colors.red,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endCallIcon: {
+    color: Colors.white,
+    fontSize: 14,
+    fontWeight: '700',
+  },
+});

package/src/squad-line/IncomingCallOverlay.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+import { Colors } from '../theme/ThemeContext';
+import { useSquadLine } from './useSquadLine';
+
+/**
+ * Full-screen overlay displayed when receiving an incoming Squad Line call.
+ * Shows caller info with accept/decline buttons.
+ */
+export function IncomingCallOverlay() {
+  const { incomingCall, acceptCall, rejectCall } = useSquadLine();
+
+  if (!incomingCall) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.content}>
+        <View style={styles.avatar}>
+          <Text style={styles.avatarText}>
+            {incomingCall.remoteCaller?.displayName?.[0]?.toUpperCase() ?? '?'}
+          </Text>
+        </View>
+
+        <Text style={styles.callerName}>
+          {incomingCall.remoteCaller?.displayName ?? 'Unknown'}
+        </Text>
+        <Text style={styles.callTitle}>
+          {incomingCall.title}
+        </Text>
+        <Text style={styles.subtitle}>Squad Line</Text>
+      </View>
+
+      <View style={styles.buttons}>
+        <TouchableOpacity style={styles.declineButton} onPress={rejectCall}>
+          <Text style={styles.buttonText}>Decline</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.acceptButton} onPress={acceptCall}>
+          <Text style={styles.buttonText}>Accept</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.95)',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 120,
+    zIndex: 9999,
+  },
+  content: {
+    alignItems: 'center',
+  },
+  avatar: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    backgroundColor: Colors.purple1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  avatarText: {
+    color: Colors.white,
+    fontSize: 36,
+    fontWeight: '700',
+  },
+  callerName: {
+    color: Colors.white,
+    fontSize: 28,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  callTitle: {
+    color: Colors.gray6,
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  subtitle: {
+    color: Colors.gray6,
+    fontSize: 14,
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 48,
+  },
+  declineButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: Colors.red,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  acceptButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: Colors.green,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: Colors.white,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});

package/src/squad-line/SquadLineClient.ts

@@ -0,0 +1,327 @@
+import EventEmitter from 'eventemitter3';
+import type { SquadApiClient } from '@squad-sports/core';
+
+export type CallState = 'idle' | 'connecting' | 'ringing' | 'connected' | 'disconnected' | 'failed';
+
+export interface CallInfo {
+  connectionId: string;
+  title: string;
+  remoteCaller?: {
+    id: string;
+    displayName: string;
+    imageUrl?: string;
+  };
+  startTime?: number;
+  duration?: number;
+}
+
+export interface SquadLineEvents {
+  callStateChanged: (state: CallState) => void;
+  ringing: (info: CallInfo) => void;
+  connected: (info: CallInfo) => void;
+  disconnected: (info: CallInfo) => void;
+  failed: (error: Error) => void;
+  incomingCall: (info: CallInfo) => void;
+  muteChanged: (muted: boolean) => void;
+  speakerChanged: (speaker: boolean) => void;
+}
+
+/**
+ * Squad Line client for voice calling via Twilio Voice SDK.
+ * Replaces the old Daily.co-based SquadLine from squad-demo.
+ *
+ * Call flow:
+ * 1. Caller taps connection -> AddCallTitle -> enters title
+ * 2. SDK calls POST /v2/connections/:id/create-connections-line-room
+ * 3. SDK calls POST /v2/voice/token -> gets Twilio JWT
+ * 4. SDK calls TwilioVoice.connect(token, { To: calleeIdentity })
+ * 5. Twilio routes to POST /v2/connections/voice-webhook
+ * 6. API returns TwiML: <Dial><Client>calleeIdentity</Client></Dial>
+ * 7. Callee receives push -> incoming call UI -> accept
+ * 8. Voice connected P2P via Twilio
+ */
+export class SquadLineClient extends EventEmitter {
+  private static instance: SquadLineClient | null = null;
+
+  private callState: CallState = 'idle';
+  private currentCall: CallInfo | null = null;
+  private isMuted = false;
+  private isSpeakerOn = false;
+  private twilioVoice: unknown = null; // @twilio/voice-react-native-sdk instance
+  private activeCall: unknown = null; // Twilio Call instance
+
+  private constructor(private apiClient: SquadApiClient) {
+    super();
+  }
+
+  static getInstance(apiClient: SquadApiClient): SquadLineClient {
+    if (!SquadLineClient.instance) {
+      SquadLineClient.instance = new SquadLineClient(apiClient);
+    }
+    return SquadLineClient.instance;
+  }
+
+  static reset(): void {
+    SquadLineClient.instance?.endCall();
+    SquadLineClient.instance = null;
+  }
+
+  /**
+   * Register for incoming calls. Call this after authentication.
+   */
+  async register(): Promise<void> {
+    try {
+      // Get voice token from API
+      const token = await this.apiClient.getVoiceToken();
+      if (!token) {
+        throw new Error('Failed to get voice token');
+      }
+
+      // Dynamically import Twilio SDK (optional peer dep)
+      try {
+        const { Voice } = await import('@twilio/voice-react-native-sdk');
+        this.twilioVoice = new Voice();
+
+        // Register for incoming calls
+        await (this.twilioVoice as any).register(token);
+
+        // Listen for incoming call invites
+        (this.twilioVoice as any).on('callInvite', (callInvite: any) => {
+          this.handleIncomingCall(callInvite);
+        });
+      } catch (importError) {
+        console.warn(
+          '[SquadLine] @twilio/voice-react-native-sdk not available. Voice calling disabled.',
+          importError,
+        );
+      }
+    } catch (error) {
+      console.error('[SquadLine] Registration failed:', error);
+    }
+  }
+
+  /**
+   * Make an outgoing call to a squad connection.
+   */
+  async makeCall(connectionId: string, title: string, calleeIdentity?: string): Promise<boolean> {
+    if (this.callState !== 'idle') {
+      console.warn('[SquadLine] Already in a call');
+      return false;
+    }
+
+    this.setCallState('connecting');
+
+    try {
+      // Step 1: Create line room via API
+      await this.apiClient.createConnectionsLineRoom(connectionId);
+
+      // Step 2: Get voice token
+      const token = await this.apiClient.getVoiceToken();
+      if (!token) {
+        throw new Error('Failed to get voice token');
+      }
+
+      this.currentCall = { connectionId, title };
+
+      // Step 3: Connect via Twilio
+      if (this.twilioVoice) {
+        const connectParams: Record<string, string> = {};
+        if (calleeIdentity) {
+          connectParams.To = calleeIdentity;
+        }
+
+        this.activeCall = await (this.twilioVoice as any).connect(token, {
+          params: connectParams,
+        });
+
+        // Bind call event listeners
+        this.bindCallEvents(this.activeCall);
+        this.setCallState('ringing');
+        return true;
+      } else {
+        throw new Error('Twilio Voice SDK not initialized');
+      }
+    } catch (error) {
+      this.setCallState('failed');
+      this.emit('failed', error instanceof Error ? error : new Error(String(error)));
+      this.cleanup();
+      return false;
+    }
+  }
+
+  /**
+   * Handle an incoming call invite from Twilio.
+   */
+  private handleIncomingCall(callInvite: any): void {
+    const info: CallInfo = {
+      connectionId: callInvite.customParameters?.connectionId ?? '',
+      title: callInvite.customParameters?.title ?? 'Incoming Call',
+      remoteCaller: {
+        id: callInvite.from ?? '',
+        displayName: callInvite.customParameters?.callerName ?? 'Unknown',
+        imageUrl: callInvite.customParameters?.callerImage,
+      },
+    };
+
+    this.currentCall = info;
+    this.emit('incomingCall', info);
+
+    // Store invite for accept/reject
+    (this as any)._pendingInvite = callInvite;
+  }
+
+  /**
+   * Accept an incoming call.
+   */
+  async acceptCall(): Promise<void> {
+    const invite = (this as any)._pendingInvite;
+    if (!invite) {
+      console.warn('[SquadLine] No pending call invite');
+      return;
+    }
+
+    try {
+      this.activeCall = await invite.accept();
+      this.bindCallEvents(this.activeCall);
+      this.setCallState('connected');
+      if (this.currentCall) {
+        this.currentCall.startTime = Date.now();
+        this.emit('connected', this.currentCall);
+      }
+    } catch (error) {
+      this.setCallState('failed');
+      this.emit('failed', error instanceof Error ? error : new Error(String(error)));
+      this.cleanup();
+    } finally {
+      (this as any)._pendingInvite = null;
+    }
+  }
+
+  /**
+   * Reject an incoming call.
+   */
+  rejectCall(): void {
+    const invite = (this as any)._pendingInvite;
+    if (invite) {
+      invite.reject();
+      (this as any)._pendingInvite = null;
+    }
+    this.cleanup();
+  }
+
+  /**
+   * End the current call.
+   */
+  endCall(): void {
+    if (this.activeCall) {
+      (this.activeCall as any).disconnect();
+    }
+    this.cleanup();
+  }
+
+  /**
+   * Toggle mute state.
+   */
+  toggleMute(): boolean {
+    this.isMuted = !this.isMuted;
+    if (this.activeCall) {
+      (this.activeCall as any).mute(this.isMuted);
+    }
+    this.emit('muteChanged', this.isMuted);
+    return this.isMuted;
+  }
+
+  /**
+   * Toggle speaker state.
+   */
+  toggleSpeaker(): boolean {
+    this.isSpeakerOn = !this.isSpeakerOn;
+    // Speaker toggling is handled at the native audio level
+    this.emit('speakerChanged', this.isSpeakerOn);
+    return this.isSpeakerOn;
+  }
+
+  /**
+   * Send a reaction during a call.
+   */
+  async sendReaction(emoji: string, imageUrl?: string): Promise<void> {
+    if (!this.currentCall) return;
+
+    const callId = (this.activeCall as any)?.getSid?.() ?? '';
+    await this.apiClient.createConnectionsLineReaction(
+      callId,
+      this.currentCall.connectionId,
+      emoji,
+      imageUrl,
+    );
+  }
+
+  // --- Getters ---
+
+  getCallState(): CallState {
+    return this.callState;
+  }
+
+  getCurrentCall(): CallInfo | null {
+    return this.currentCall;
+  }
+
+  getMuted(): boolean {
+    return this.isMuted;
+  }
+
+  getSpeakerOn(): boolean {
+    return this.isSpeakerOn;
+  }
+
+  // --- Private ---
+
+  private setCallState(state: CallState): void {
+    this.callState = state;
+    this.emit('callStateChanged', state);
+  }
+
+  private bindCallEvents(call: any): void {
+    if (!call) return;
+
+    call.on('ringing', () => {
+      this.setCallState('ringing');
+      if (this.currentCall) this.emit('ringing', this.currentCall);
+    });
+
+    call.on('connected', () => {
+      this.setCallState('connected');
+      if (this.currentCall) {
+        this.currentCall.startTime = Date.now();
+        this.emit('connected', this.currentCall);
+      }
+    });
+
+    call.on('reconnecting', () => {
+      console.log('[SquadLine] Call reconnecting...');
+    });
+
+    call.on('disconnected', () => {
+      if (this.currentCall?.startTime) {
+        this.currentCall.duration = Date.now() - this.currentCall.startTime;
+      }
+      this.setCallState('disconnected');
+      if (this.currentCall) this.emit('disconnected', this.currentCall);
+      this.cleanup();
+    });
+
+    call.on('connectFailure', (error: any) => {
+      this.setCallState('failed');
+      this.emit('failed', new Error(error?.message ?? 'Call connection failed'));
+      this.cleanup();
+    });
+  }
+
+  private cleanup(): void {
+    this.activeCall = null;
+    this.currentCall = null;
+    this.isMuted = false;
+    this.isSpeakerOn = false;
+    this.callState = 'idle';
+  }
+}