enx-uikit-react-native/src/view/EnxBottomView.js

It is a react native component for Enablex users.

import React, { Component } from "react";
import { TouchableHighlight, View, Image } from "react-native";
import { styles } from "../style/EnxBottomViewStyle";
import { EnxSetting } from "enx-uikit-react-native";

class EnxBottomView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isConnected: false,
            isAudioMuted: EnxSetting.getIsAudioMuted(),
            isVideoMuted: EnxSetting.getIsVideoMuted(),
            isAudioOnlyCall: EnxSetting.getIsAudioOnly(),
            isFontCamera: EnxSetting.getCameraPosition(),
            currentAudioName: this.props.selectedDevice,
        };
    }

    // Filter out Video and Camera options when audioOnly is true
    getFilteredOptions() {
        const options = EnxSetting.createRequiredOption();
        return EnxSetting.getIsAudioOnly() 
            ? options.filter(option => !['Video', 'Camera'].includes(option))
            : options;
    }

    updateAction = (value) => {
        const actions = {
            'AudioResponse': () => this.setState({ isAudioMuted: (value.response === 'on') ? false : true }),
            'VideoResponse': () => this.setState({ isVideoMuted: (value.response === 'on') ? false : true}),
            'CameraResponse': () => this.setState({ isFontCamera: !this.state.isFontCamera }),
            'AudioMediaResponse': () => this.setState({ currentAudioName: value.response })
        };
        
        if (actions[value.EventName]) {
            actions[value.EventName]();
        }
        console.log('EnxBottomView update:', value);
    };

    handleButtonPress = (value) => {
        this.props.onBottomButtonClick?.(value);
    };

    renderButton = (option) => {
        const icons = {
            'Audio': {
                source: this.state.isAudioMuted 
                    ? require("../image_asset/audio_off.png") 
                    : require("../image_asset/audio_on.png"),
                onPress: () => this.handleButtonPress({ 
                    EventName: 'AudioPress', 
                    flag: !this.state.isAudioMuted 
                })
            },
            'Video': {
                source: (this.state.isAudioOnlyCall || this.state.isVideoMuted)
                    ? require("../image_asset/video_off.png")
                    : require("../image_asset/video_on.png"),
                onPress: () => this.handleButtonPress({
                    EventName: 'VideoPress',
                    flag: !this.state.isVideoMuted
                })
            },
            'Camera': {
                source: this.state.isFontCamera
                    ? require("../image_asset/camera_rotaion_off.png")
                    : require("../image_asset/camera_rotaion_on.png"),
                onPress: () => this.handleButtonPress({
                    EventName: 'cameraPress',
                    flag: !this.state.isFontCamera
                })
            },
            'AudioMedia': {
                source: this.state.currentAudioName === 'Earpiece' 
                    ? require("../image_asset/earpic.png")
                    : this.state.currentAudioName === 'Speakerphone' 
                        ? require("../image_asset/speaker_off.png")
                        : this.state.currentAudioName === 'Bluetooth'
                            ? require("../image_asset/blueTooth.png")
                            : require("../image_asset/airBud.png"),
                onPress: () => this.handleButtonPress({
                    EventName: 'AudioMeida',
                    flag: true
                })
            },
            'Chat': {
                source: require("../image_asset/group_chat.png"),
                onPress: () => this.handleButtonPress({
                    EventName: 'GroupChat',
                    flag: true
                })
            },
            'More': {
                source: require("../image_asset/more_vertical.png"),
                onPress: () => this.handleButtonPress({
                    EventName: 'More',
                    flag: true
                })
            },
            'Disconnect': {
                source: require("../image_asset/end_call_new.png"),
                onPress: () => this.handleButtonPress({
                    EventName: 'Disconnect',
                    flag: true
                })
            }
        };

        return (
            <View style={{ flex: 1 }}>
                <TouchableHighlight
                    underlayColor="transparent"
                    onPress={icons[option].onPress}>
                    <Image
                        source={icons[option].source}
                        style={styles.inlineImg}
                    />
                </TouchableHighlight>
            </View>
        );
    };

    render() {
        const filteredOptions = this.getFilteredOptions();
        
        return (
            <View style={[styles.bottomBar, { flex: filteredOptions.length }]}>
                {filteredOptions.map((option, index) => (
                    <React.Fragment key={option || index}>
                        {this.renderButton(option)}
                    </React.Fragment>
                ))}
            </View>
        );
    }
}

export default EnxBottomView;