react-native-classroom/src/openvidu/ItemConference.js

React Native Class room

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Dimensions,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
// import AntDesign from 'react-native-vector-icons/AntDesign';
import { RTCView } from 'openvidu-react-native-adapter';
import axios from 'axios';
import ic_mute_speaker from '../images/ic_mute_speaker.png';
import ic_mute_video from '../images/ic_mute_video.png';
import ic_speaker from '../images/ic_speaker.png';
import ic_video from '../images/ic_video.png';

const widthItem = Dimensions.get('screen').width;
const hightItem = widthItem * 0.2 * 0.75;

class ItemConference extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      isRequest: false,
    };
  }

  splitData = (data) => {
    const splitData = data.split('%/%');
    if (splitData.length > 0) {
      const parserData = JSON.parse(splitData[0]);
      return parserData;
    }
    return null;
  };

  getNicknameTag = (stream) => {
    const { kidInfo } = this.props;
    if (stream && stream.connection) {
      const { data } = stream.connection;
      if (data) {
        const info = this.splitData(data);
        if (info) {
          return info.name;
        }
      }
    }
    return kidInfo ? kidInfo.nickname || kidInfo.fullnameStudent : '';
  };

  setWidth = () => {
    const { subscribers } = this.props;
    if (subscribers.length < 2) {
      return widthItem / 2 - 20;
    }
    if (subscribers.length >= 2) {
      return widthItem / 3 - 20;
    }
  };

  setHight = () => {
    const { subscribers } = this.props;
    const mWidth = this.setWidth();
    if (subscribers.length < 2) {
      return mWidth * 0.75 * 1.4;
    }
    if (subscribers.length >= 2) {
      return mWidth * 0.75 * 1.5;
    }
  };

  setStyleFullScreen = () => {
    const style = {
      width: this.setWidth(),
      height: this.setHight(),
    };
    return style;
  };

  //   addFriend = () => {
  //     const { stream } = this.props.item;
  //     if (!stream) {
  //       return;
  //     }
  //     const { connection } = stream;
  //     if (!connection) {
  //       return;
  //     }
  //     const data = JSON.parse(connection.data);
  //     const { userId } = data;
  //     if (!userId) {
  //       return;
  //     }

  //     const url = `${SharePreference.DOMAIN.APIV3}/students/${userId}/friend-requests`;
  //     this.setState({ loading: true });
  //     axios
  //       .post(url, {}, header())
  //       .then((res) => {
  //         const { status } = res;
  //         if (status === 200) {
  //           this.setState({ isRequest: true, loading: false });
  //           return;
  //         }
  //         this.setState({ loading: false });
  //       })
  //       .catch(() => {
  //         this.setState({ loading: false });
  //       });
  //   };

  render() {
    const { isFullScreen, item, index, isRoom } = this.props;
    const { audioActive, videoActive } = item.stream;
    const { isRequest, loading } = this.state;
    return (
      <View
        key={index}
        style={
          isFullScreen ? [this.setStyleFullScreen(), styles.viewFullScreen] : {}
        }>
        <View
          style={[
            styles.remoteView,
            isFullScreen ? this.setStyleFullScreen() : styles.viewNormal,
          ]}>
          {videoActive ? (
            <RTCView
              zOrder={index}
              objectFit="cover"
              style={
                isFullScreen ? this.setStyleFullScreen() : styles.viewNormal
              }
              streamURL={item.stream.getMediaStream().toURL()}
            />
          ) : (
            <Text style={[styles.txtCameraOff]}>Camera: OFF</Text>
          )}
        </View>
        <Text style={styles.textName}>{this.getNicknameTag(item.stream)}</Text>
        <View style={styles.viewShowIcon}>
          {/* {isRoom && index > 0 && !isRequest && !item.stream.isFriend && (
            <TouchableOpacity
              style={{ paddingHorizontal: 5 }}
              onPress={this.addFriend}>
              <AntDesign name="adduser" size={22} color="white" />
              {loading && (
                <ActivityIndicator size="small" style={styles.loading} />
              )}
            </TouchableOpacity>
          )} */}
          <Image
            source={audioActive ? ic_speaker : ic_mute_speaker}
            style={styles.iconAudioVideo}
          />
          <Image
            source={videoActive ? ic_video : ic_mute_video}
            style={styles.iconAudioVideo}
          />
        </View>
      </View>
    );
  }
}

export default ItemConference;

const styles = StyleSheet.create({
  viewNormal: {
    width: '100%',
    height: hightItem,
  },
  viewFullScreen: {
    alignSelf: 'center',
    margin: 10,
  },
  remoteView: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'gray',
  },
  txtCameraOff: {
    color: 'white',
    fontSize: 15,
    textAlign: 'center',
  },
  textName: {
    color: 'white',
    fontSize: 14,
    position: 'absolute',
    bottom: 5,
    left: 5,
  },
  iconAudioVideo: {
    width: 20,
    height: 20,
    marginEnd: 10,
  },
  viewShowIcon: {
    flexDirection: 'row',
    position: 'absolute',
    top: 4,
    right: 4,
  },
  loading: {
    position: 'absolute',
    alignSelf: 'center',
  },
});