sfm-uikit-react-native/src/view/EnxParticipantScreen.js

It is a react native component for SmartFloMeet users.

import React, { PureComponent } from "react";
import { FlatList, View, Text, TouchableHighlight, Image } from "react-native";
import { styles } from "../style/EnxParticipantScreenStyle";
import { EnxSetting } from "sfm-uikit-react-native";

class EnxParticipantScreen extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isModerator: this.props.isModerator,
      clientId: this.props.selfClientId,
      participantList : this.props.data,
      eventItems : EnxSetting.createRequiredParticipantOption()
    }
  }
     // The method to be called from EnxVideoView , Here we are updating the action
     updateAction = (value) => {
      const { participantList } = this.state;
      const index = participantList.findIndex(event => event.clientId === value.clientId);
    
      if (index >= 0) {
        const updatedEventItems = [...participantList];
        
        if (value.EventName === 'audio') {
          updatedEventItems[index].audioMuted = value.audioMuted;
          // Update the state with the modified eventItems array
          this.setState({
            participantList: updatedEventItems
          }, () => {
            // Log the updated state after it has been applied
            console.log('Updated audioMuted status:', this.state.participantList[index].audioMuted);
            if (this.props.onUpdateParticipantList) {
              this.props.onUpdateParticipantList(updatedEventItems);  // Callback to parent
            }
          });
        }
        else if (value.EventName === 'video') {
          updatedEventItems[index].videoMuted = value.videoMuted;
          // Update the state with the modified eventItems array
          this.setState({
            participantList: updatedEventItems
          }, () => {
            // Log the updated state after it has been applied
            console.log('Updated videoMuted status:', this.state.participantList[index].videoMuted);
            if (this.props.onUpdateParticipantList) {
              this.props.onUpdateParticipantList(updatedEventItems);  // Callback to parent
            }
          });
        }
      }
    };
    
    // This function will be called when the button is pressed
       handleModeratorAction = (value) => {
        if(this.state.isModerator == true){
          if (this.props.onModeratorAction) {
                 this.props.onModeratorAction(value);  // Call the function passed from EnxVideoView
          }
        }
     };
  
  //Events options
  onPressAudio = (index) => {
    const item = this.state.participantList[index];
    console.log(item)
     this.handleModeratorAction({'clientId' : item.clientId ,'eventName' : 'audio','status' : item.audioMuted})
  }
  onPressVideo = (index) => {
    const item = this.state.participantList[index];
     this.handleModeratorAction({'clientId' : item.clientId ,'eventName' : 'video','status' : item.videoMuted})
  }
  onPressDisconnect = (index) => {
    const item = this.state.participantList[index];
     this.handleModeratorAction({'clientId' : item.clientId ,'eventName' : 'disconnect','disconnect' : true})
  }
  onPressChat = (index) => {
    const item = this.state.participantList[index];
     this.handleModeratorAction({'clientId' : item.clientId ,'eventName' : 'chat','chat' : true})
  }
   //Create Option List
   createActionView(a,index){
    try{ 
      const item = this.state.participantList[index];
      if(a.name == 'Audio'){
        
        return (
            <View style ={{flex:1,}} key = {a.name + index}>
                 <TouchableHighlight
                    underlayColor="transparent"
                    onPress={() => this.onPressAudio(index)}>
                    <Image
                        source={item.audioMuted ?  a.imageSelectedIcon:a.imageNormalIcon}
                        style={styles.inlineImg}
                    />
                </TouchableHighlight>
            </View>
          );
    }
    else if(a.name == 'Video'){
        return (
            <View style ={{flex:1,}}key = {a.name + index}>
                 <TouchableHighlight
                    underlayColor="transparent"
                    onPress={() => this.onPressVideo(index)}>
                    <Image
                        source={item.videoMuted ?  a.imageSelectedIcon:a.imageNormalIcon}
                        style={styles.inlineImg}
                    />
                </TouchableHighlight>
            </View>
          );
    }
    else if(a.name == 'Chat'){    
        return  (
          item.clientId === this.state.clientId ? null :
          <View style={{ flex: 1}} key={a.name + index}>
            <TouchableHighlight
              underlayColor="transparent"
              onPress={() => this.onPressChat(index)}
            >
              <Image
                source={a.imageSelectedIcon}
                style={styles.inlineImg}
              />
            </TouchableHighlight>
          </View>
        );
        
      
     
  }else if(a.name == 'Disconnect'){
    return (
        <View style ={{flex:1,}} key = {a.name + index}>
             <TouchableHighlight
                underlayColor="transparent"
                onPress={() => this.onPressDisconnect(index)}>
                <Image
                        source={ a.imageSelectedIcon}
                        style={styles.inlineImg}
                    />
            </TouchableHighlight>
        </View>
      );
}
    }catch(err){
        console.log(err.message)
      }
    }

   
  renderItem = ({ item, index }) => {
    const name = item.clientId === this.state.clientId ? `${item.name} (me)` : item.name;
    const firstLetter = name.charAt(0).toUpperCase(); // Get the first letter of the name
    return (
      <View style={styles.itemContainer}>{/* Main Container view inside Faltlist */}
        {/* 45% Part: Round Rect and Name */}
        <View style={styles.nameContainer}>
          {/* Round Rect with the First Letter */}
          <View style={[styles.roundRect, { backgroundColor: '#000' }]}>
            <Text style={styles.firstLetter}>{firstLetter}</Text>
          </View>
          {/* Full Name */}
          <Text style={styles.fullName}>{item.clientId === this.state.clientId ? `${item.name} (me)` : item.name}</Text>
        </View>
        {/* 55% Part: Buttons/Actions */}
        <View style={styles.actionContainer}>
            {this.state.eventItems.map((a) => {
                    return (
                          this.createActionView(a, index)
                    );
             })}
        </View>
      </View>
    );
  };
  //Ransder Empty Message
  renderEmptyComponent = () => (
      <View style={styles.emptyContainer}>
        <Text style={styles.emptyText}>No items available</Text>
    </View>
  );
  render() {
    return (
      <View style={styles.mainContainer}>
        <FlatList
            key={'#'}
            extraData={this.state.participantList}
            data={this.state.participantList}
            contentContainerStyle={styles.flatList}
            renderItem={this.renderItem}
            numColumns={1}
            ListEmptyComponent={this.renderEmptyComponent}
          />
      </View>
    );
  }
}
export default EnxParticipantScreen;