Audio Modes

import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

const sessionSettings = {
  audioMode: 'SPEAKER',
};

const sessionSettings = {
  hideAudioModeButton: false,
};

CometChatCalls.addEventListener('onAudioModeChanged', (mode) => {
  console.log('Audio mode changed to:', mode);
  // mode: 'SPEAKER' | 'EARPIECE' | 'BLUETOOTH' | 'HEADPHONES'
});

import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Modal, FlatList } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

type AudioMode = 'SPEAKER' | 'EARPIECE' | 'BLUETOOTH' | 'HEADPHONES';

interface AudioModeOption {
  type: AudioMode;
  label: string;
  icon: string;
}

const audioModeOptions: AudioModeOption[] = [
  { type: 'SPEAKER', label: 'Speaker', icon: '🔊' },
  { type: 'EARPIECE', label: 'Earpiece', icon: '📱' },
  { type: 'BLUETOOTH', label: 'Bluetooth', icon: '🎧' },
  { type: 'HEADPHONES', label: 'Headphones', icon: '🎵' },
];

function AudioModeSelector() {
  const [currentMode, setCurrentMode] = useState<AudioMode>('SPEAKER');
  const [availableModes, setAvailableModes] = useState<AudioMode[]>(['SPEAKER', 'EARPIECE']);
  const [modalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    const unsubscribe = CometChatCalls.addEventListener(
      'onAudioModeChanged',
      (mode: AudioMode) => {
        setCurrentMode(mode);
      }
    );

    return () => unsubscribe();
  }, []);

  const selectMode = (mode: AudioMode) => {
    // The SDK handles audio mode switching through the UI
    // This is for display purposes
    setCurrentMode(mode);
    setModalVisible(false);
  };

  const getCurrentModeOption = () => {
    return audioModeOptions.find((opt) => opt.type === currentMode) || audioModeOptions[0];
  };

  const renderModeOption = ({ item }: { item: AudioModeOption }) => {
    const isAvailable = availableModes.includes(item.type);
    const isSelected = currentMode === item.type;

    return (
      <TouchableOpacity
        style={[
          styles.modeOption,
          isSelected && styles.selectedOption,
          !isAvailable && styles.disabledOption,
        ]}
        onPress={() => isAvailable && selectMode(item.type)}
        disabled={!isAvailable}
      >
        <Text style={styles.modeIcon}>{item.icon}</Text>
        <Text
          style={[
            styles.modeLabel,
            isSelected && styles.selectedLabel,
            !isAvailable && styles.disabledLabel,
          ]}
        >
          {item.label}
        </Text>
        {isSelected && <Text style={styles.checkmark}>✓</Text>}
      </TouchableOpacity>
    );
  };

  return (
    <View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.buttonIcon}>{getCurrentModeOption().icon}</Text>
        <Text style={styles.buttonText}>{getCurrentModeOption().label}</Text>
      </TouchableOpacity>

      <Modal
        visible={modalVisible}
        transparent
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Audio Output</Text>
            <FlatList
              data={audioModeOptions}
              keyExtractor={(item) => item.type}
              renderItem={renderModeOption}
            />
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => setModalVisible(false)}
            >
              <Text style={styles.closeButtonText}>Close</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    gap: 8,
  },
  buttonIcon: {
    fontSize: 18,
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#1a1a1a',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
  },
  modalTitle: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 16,
    textAlign: 'center',
  },
  modeOption: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 8,
    marginBottom: 8,
    backgroundColor: '#333',
  },
  selectedOption: {
    backgroundColor: '#6851D6',
  },
  disabledOption: {
    opacity: 0.5,
  },
  modeIcon: {
    fontSize: 24,
    marginRight: 12,
  },
  modeLabel: {
    flex: 1,
    color: '#fff',
    fontSize: 16,
  },
  selectedLabel: {
    fontWeight: '600',
  },
  disabledLabel: {
    color: '#666',
  },
  checkmark: {
    color: '#fff',
    fontSize: 18,
  },
  closeButton: {
    marginTop: 16,
    padding: 16,
    alignItems: 'center',
  },
  closeButtonText: {
    color: '#6851D6',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default AudioModeSelector;