Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
107 kB
1
Indexable
Never
import React from 'react';
import {useFocusEffect} from '@react-navigation/native';
import {
  View,
  ScrollView,
  Text,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  //Image,
  FlatList,
  Modal,
  TextInput,
  Dimensions,
  Alert,
  ImageBackground,
  KeyboardAvoidingView,
} from 'react-native';
import Image from '../../components/Image';
import Video, {TextTrackType} from 'react-native-video';
import MediaControls, {PLAYER_STATES} from 'react-native-media-controls';
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from 'react-native-responsive-screen';
import GColors from '../../common/GColors';
import {
  activeOpacity,
  appStoreId,
  commonBorderRadius,
  commonMarginHorizontal,
  FontFamily,
  Fonts,
  hitSlop,
  linkShareDescription,
  regx,
} from '../../common/GConstants';
import {icons, logos} from '../../assets/images';
import {ThemeButton} from '../../components/ThemeButton';
import Colors from '../../common/GColors';
import {
  BookMe,
  FearureTalkDetail,
  LiveDonate,
  Permission,
} from '../../localize/screen-names';
import {getScreenTranslate} from '../../localize/Localize';
import {LineView} from '../../components/LineView';
import {CommonTextInput} from '../../components/TextInput';
import {HeaderLeft} from '../../components/HeaderLeft';
import {showDangerMsg, showSuccessMsg} from '../../common/GUtil';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';
import {Dropdown} from 'react-native-element-dropdown';
import {SwipeListView} from 'react-native-swipe-list-view';
import {callPostApi} from '../../API/ApiManager';
import {ApiEndPoints, dynamicURLS} from '../../API/UrlFactory';
import StatusCode from '../../API/StatusCode';
import {getUser} from '../../common/AsyncstorageFunction';
import Loader from '../../API/Loader';
import {Icons} from '../../common/GStyle';
import dynamicLinks from '@react-native-firebase/dynamic-links';
import {linkShare} from '../../common/GCommonFunction';
import Orientation from 'react-native-orientation-locker';

const PaymentRequest = require('react-native-payments').PaymentRequest;

const fearureTalkT = getScreenTranslate(FearureTalkDetail);
const PermissionT = getScreenTranslate(Permission);

const BookMeT = getScreenTranslate(BookMe);

const DropDownMenu = [
  {
    label: 'In person',
    value: '1',
  },
  {
    label: 'Online',
    value: '2',
  },
  {
    label: 'Both',
    value: '3',
  },
];

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
const LiveDonateT = getScreenTranslate(LiveDonate);

export default class FeaturedTalkDetailsHome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      donateViewShow: false,
      commentModal: false,
      isLiked: false,
      addCommentModal: false,
      arrVideoData: [],

      arrCommentData: [],
      showMoreModal: false,
      showReportVideo: false,
      arrReportVideo: [
        {
          id: 1,
          text: fearureTalkT.violentor,
          isSelected: false,
        },
        {
          id: 2,
          text: fearureTalkT.hatefulor,
          isSelected: false,
        },
        {
          id: 3,
          text: fearureTalkT.harassmentor,
          isSelected: false,
        },
        {
          id: 4,
          text: fearureTalkT.harmfulor,
          isSelected: false,
        },
        {
          id: 5,
          text: fearureTalkT.childabuse,
          isSelected: false,
        },
        {
          id: 6,
          text: fearureTalkT.infringesmy,
          isSelected: false,
        },
        {
          id: 7,
          text: fearureTalkT.spamor,
          isSelected: false,
        },
      ],
      // isSelectedReportVideo: -1,
      showExtraModal: false,
      showBookMeModal: false,
      name: '',
      email: '',
      mobile: '',
      type: '',
      organisationName: '',
      date: '',
      time: '',
      audienceno: '',
      isDatePickerVisible: false,
      isTimePickerVisible: false,
      DropDownMenu: DropDownMenu,
      //isFollow: true,
      isFollowing: false,
      Comments: '',
      rowIndex: null,
      reportId: '',
      otherReson: '',

      currentTime: 0,
      duration: 0,
      isLoading: true,
      paused: false,
      playerState: PLAYER_STATES.PLAYING,
      screenType: 'cover',
      rate: 1,
      playSpeedModal: false,

      talk_id: this.props.route.params?.isTalk_id,
      talk_detail: [],
      talk_description: '',
      user: [],
      readMoreData: false,
      fullScreenVideo: false,
      fetchingStatusUp: false,
      loading: false,
      fetchingStatusCompleted: false,
      hasMoreDataCompleted: true,
      page: 1,
      reportSelectText: '',
      isReportSelected: -1,
      editTalkModal: false,
      talktitle: '',
      talkdescription: '',
      SelectedDonateAmount: 1,
      // used for fullscreen video UI
      videoDimensions: {width: undefined, height: undefined},
      mediaLayoutHeight: 0,
    };
    this.unsubscribe = this.props.navigation.addListener('focus', () =>
      this.apicallTalkDetails(),
    );
    this.unsubscribeblur = this.props.navigation.addListener('blur', () =>
      this.blurScreenEvent(),
    );
  }

  componentWillUnmount() {
    if (this.unsubscribe) {
      this.unsubscribe?.();
    }
    if (this.unsubscribeblur) {
      this.unsubscribeblur?.();
    }
    Orientation.lockToPortrait();
  }

  blurScreenEvent = () => {
    this.setState({paused: true});
  };

  // Life Cycle Method
  componentDidMount() {
    setTimeout(
      () =>
        getUser().then(user =>
          this.setState({
            user,
          }),
        ),
      1,
    );
    this.apicallTalkDetails();
    this.apiAddTalkViewers();
    this.apicallCommentList();
    this.apicallFeaturedTalks();
    // Header navigation setup
    /*  this.props.navigation.setOptions({
      // headerLeft: () => (
      // 	<HeaderLeft
      // 		onPress={() =>
      // 			this.state.fullScreenVideo === false
      // 				? this.props.navigation.goBack('')
      // 				: this.setState({ fullScreenVideo: false })
      // 		}
      // 		image={icons.round_back_icon}
      // 		imageStyle={[
      // 			this.state.fullScreenVideo === true && styles.headerBackIconStyle
      // 		]}
      // 	/>
      // ),

      // headerRight: () => (
      //   <View
      //     style={{
      //       flexDirection: "row",
      //     }}
      //   >
      //     <ThemeButton
      //       Text={"Donate"}
      //       TouchableStyle={styles.headerDonateBtnStyle}
      //       onPress={() => [this.props.navigation.navigate("LiveDonateScreen")]}
      //     />
      //     <ThemeButton
      //       onPress={() => this.setState({ showBookMeModal: true })}
      //       Text={"Book Me"}
      //       TouchableStyle={[
      //         styles.headerDonateBtnStyle,
      //         { marginStart: wp(3) },
      //       ]}
      //     />
      //   </View>
      // ),

      title: '',
      headerShadowVisible: false, // Use to hide shadow under the navigation bar
    });*/
    // ========================================================================
  }

  apicallFollow = () => {
    let param = {
      following_id: this.state.talk_detail.user_id,
    };
    callPostApi(ApiEndPoints.follow_unfollow, param, data => {
      if (data.code === StatusCode.SUCCESS) {
        this.apicallTalkDetails();
      }
    });
  };

  apicallFollowers = () => {
    const postAuthorUserId = this.state.talk_detail.user_id;
    let param = {
      tag: 'followers',
      page: 1,
      user_id: postAuthorUserId,
    };
    callPostApi(ApiEndPoints.follow_list, param, data => {
      let isFollowing = false;
      for (let i = 0; i < data.data?.length ?? 0; i++) {
        const user = data.data[i];
        if (user.user_id === this.state.user.id) {
          isFollowing = true;
          break;
        }
      }
      this.setState({
        isFollowing,
      });
    });
  };

  applePay = item => {
    const paymentRequest = new PaymentRequest(
      [
        {
          supportedMethods: ['apple-pay'],
          data: {
            merchantIdentifier: 'merchant.com.story.boardapp',
            supportedNetworks: ['visa', 'mastercard', 'amex'],
            countryCode: 'US',
            currencyCode: 'GBP',
          },
        },
      ],

      {
        id: 'basic-example',
        total: {
          label: 'Storiboard',
          amount: {currency: 'GBP', value: item},
        },
      },
      {
        // requestPayerName: true
        // requestPayerPhone: true,
        //requestPayerEmail: true
      },
    );

    paymentRequest.canMakePayments().then(canMakePayment => {
      if (canMakePayment) {
        console.log('Can Make Payment');
        paymentRequest.show().then(paymentResponse => {
          // Your payment processing code goes here
          paymentResponse.complete('success');
          alert('Successful donate');
        });
      } else {
        console.log('Cant Make Payment');
      }
    });
  };

  donationRenderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        activeOpacity={activeOpacity}
        onPress={() => this.applePay(item)}
        // onPress={() => this.apicallDonation(item)}
        style={styles.donationRenderTouchableStyle}
      >
        <Text style={styles.donationRenderPriceTextStyle}>{'£' + item}</Text>
      </TouchableOpacity>
    );
  };

  getTag = item => {
    if (this.state.talk_id != item) {
      this.setState({talk_id: item}, () => this.apicallTalkDetails());
    }
  };

  renderViewData = (item, index) => {
    return (
      <TouchableOpacity
        activeOpacity={activeOpacity}
        onPress={() => [
          this.apicallMoreTalkDetails(item.id),
          this.apiAddTalkMoreViewers(item.id),
        ]}
        style={{flexDirection: 'row', marginBottom: hp(1)}}
      >
        <View>
          <Image
            source={{uri: item.thumb}}
            style={{height: hp(10), width: wp(34), borderRadius: 4}}
            resizeMode="cover"
          />
        </View>
        <View style={{marginLeft: wp(4), flex: 1}}>
          <Text numberOfLines={2} style={[styles.disciption, {flex: 1}]}>
            {item.title}
          </Text>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Image
              source={icons.eye_comment}
              style={{height: hp(1.5), width: wp(3)}}
            />
            <Text style={styles.viewText}>{item.viewer}</Text>
            <Image
              source={icons.heartSelected}
              style={{height: hp(1.5), width: wp(3), marginLeft: wp(2)}}
              resizeMode="contain"
            />
            <Text style={styles.likeText}>{item.likes}</Text>
          </View>
          <Text numberOfLines={1} style={styles.nameText}>
            {item.first_name + ' ' + item.last_name}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };

  renderCommentData = (item, index) => {
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginBottom: hp(1.8),
          backgroundColor: 'white',
        }}
      >
        <View>
          <Image
            source={{uri: item.user_image}}
            resizeMode="cover"
            style={{height: wp(12), aspectRatio: 1, borderRadius: 100}}
          />
        </View>
        <View style={{flex: 1, marginLeft: wp(7)}}>
          <Text numberOfLines={1} style={styles.commenter}>
            {item.first_name + ' ' + item.last_name}
          </Text>
          <Text style={styles.commentDisc}>{item.comment}</Text>
        </View>
        <TouchableOpacity
          hitSlop={{left: 5, right: 5, top: 5, bottom: 5}}
          onPress={() => {
            // this.state.arrCommentData[index].isSelected =
            //   !this.state.arrCommentData[index].isSelected;
            // this.setState({ arrCommentData: this.state.arrCommentData });
            this.apicallLikeUnlikeComment(item.id);
            // alert(item.id);
          }}
        >
          <Image
            source={
              item.is_like === true
                ? icons.heartSelected
                : icons.HeartUnselected
            }
          />
        </TouchableOpacity>
      </View>
    );
  };

  // book me validation
  bookmeValidation = () => {
    var nameRegx = regx.nameRegx;
    var emailRegx = regx.mailRegx;
    var phoneRegx = regx.phoneNumberRegx;
    var numRegx = regx.numRegx;

    if (this.state.name.trim() == '') {
      showDangerMsg(PermissionT.plz_enter_name);
      return false;
    } else if (!nameRegx.test(this.state.name)) {
      showDangerMsg(PermissionT.plz_enter_valid_name);
      return false;
    } else if (this.state.email.trim() == '') {
      showDangerMsg(PermissionT.plz_Enter_Email_Text);
      return false;
    } else if (!emailRegx.test(this.state.email)) {
      showDangerMsg(PermissionT.plz_Enter_Valid_Email_Text);
      return false;
    } else if (this.state.mobile.trim() == '') {
      showDangerMsg(PermissionT.plz_Enter_MobileNumber_Text);
      return false;
    } else if (!phoneRegx.test(this.state.mobile)) {
      showDangerMsg(PermissionT.plz_Enter_ValidMobileNumber_Text);
      return false;
    } else if (this.state.type.trim() == '') {
      showDangerMsg(PermissionT.plz_Select_Event_Type_Text);
      return false;
    } else if (this.state.organisationName.trim() == '') {
      showDangerMsg(PermissionT.plz_Enter_Organisation_Text);
      return false;
    } else if (this.state.date.trim() == '') {
      showDangerMsg(PermissionT.plz_Enter_Date_Text);
      return false;
    } else if (this.state.time.trim() == '') {
      showDangerMsg(PermissionT.plz_Enter_Time_Text);
      return false;
    } else if (this.state.audienceno.trim() == '') {
      showDangerMsg(PermissionT.plz_Enter_Audienceno_Text);
      return false;
    } else if (!numRegx.test(this.state.audienceno)) {
      showDangerMsg(PermissionT.plz_Enter_Valid_Audienceno_Text);
      return false;
    } else {
      this.apicallBookMe();
    }
  };

  // report video render item
  reportVideoRenderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        activeOpacity={activeOpacity}
        onPress={() => [
          this.setState({
            isReportSelected: index,
            reportSelectText: item.text,
            otherReson: '',
          }),
        ]}
        // onPress={() => [
        //   (item.isSelected = !item.isSelected),
        //   this.forceUpdate(),
        //   this.setState({
        //     reportId: item.isSelected,
        //     reportSelectText: item.text,
        //   }),
        // ]}
        style={{
          flexDirection: 'row',
          padding: wp(4),
        }}
      >
        <Image
          style={
            {
              // borderColor: GColors.themecolor,
              // borderWidth: 1.5,
              //borderRadius: 100,
            }
          }
          source={
            this.state.isReportSelected === index
              ? icons.double_round_selected_icon
              : icons.round_unselected_icon
          }
          resizeMode="contain"
        />
        <Text style={styles.reportVideoRenderTextTitle}>{item.text}</Text>
      </TouchableOpacity>
    );
  };
  //Delete Function
  handleDelete = index => {
    var data = this.state.arrCommentData;
    data.splice(index, 1);
    //this.setState({arrCommentData: data}, () => {
    //  //this.apicallCommentList();
    //});

    //local update after delete comment
    this.setState(prevState => ({
      talk_detail: {
        ...prevState.talk_detail,
        coments: data.length,
        arrCommentData: data,
      },
    }));
  };

  //Report Video
  handleReportVideoClick = () => {
    //validations for alphanumeric
    var alphaNumRex = regx.alphaNumRex;

    if (this.state.reportSelectText != '') {
      this.apicallReportTalk();
    } else if (this.state.otherReson != '') {
      if (alphaNumRex.test(this.state.otherReson)) {
        this.apicallReportTalk();
      } else {
        showDangerMsg(PermissionT.plz_enter_valid_reason);
      }
    }
  };

  renderHiddenItem = index => (
    <TouchableOpacity
      //onPress={() => this.handleDelete(index)}
      onPress={() =>
        Alert.alert(
          // "StoriBoard",
          '',
          'Do you want to permanently delete this comment?',
          [
            {
              text: 'Cancel',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            {text: 'Ok', onPress: () => this.handleDelete(index)},
          ],
          {cancelable: false},
        )
      }
      style={styles.rowBack}
    >
      <View style={[styles.backRightBtn, styles.backRightBtnRight]}>
        <Image
          // style={{ height: wp(3), aspectRatio: 1 }}
          source={icons.white_trash_icon}
          resizeMode="contain"
        />
        {/* <Text style={styles.backTextWhite}>Delete</Text> */}
      </View>
    </TouchableOpacity>
  );

  // VIDEO PLAYER function
  onSeek = seek => {
    this.videoPlayer.seek(seek);
  };

  onPaused = playerState => {
    this.setState({
      paused: !this.state.paused,
      playerState,
    });
  };
  onReplay = () => {
    this.setState({playerState: PLAYER_STATES.PLAYING});
    this.videoPlayer.seek(0);
  };
  onProgress = data => {
    const {isLoading, playerState} = this.state;
    // Video Player will continue progress even if the video already ended
    if (!isLoading && playerState !== PLAYER_STATES.ENDED) {
      this.setState({currentTime: data.currentTime});
    }
  };

  onLoad = data => {
    const flip = data.naturalSize.orientation === 'portrait';
    const videoWidth = flip ? data.naturalSize.height : data.naturalSize.width;
    const videoHeight = flip ? data.naturalSize.width : data.naturalSize.height;

    let mediaLayoutHeight = (videoHeight / videoWidth) * wp(100);
    mediaLayoutHeight = Math.min(mediaLayoutHeight, hp(85));

    this.setState({
      duration: data.duration,
      isLoading: false,
      mediaLayoutHeight,
    });
    //start next video from same time
    if (!(this.state.duration > 0 && this.state.duration != data.duration))
      this.videoPlayer.seek(this.state.currentTime);
  };
  onLoadStart = data => {
    this.setState({isLoading: true});
  };
  onEnd = () => this.setState({playerState: PLAYER_STATES.ENDED});

  onFullScreen = () => {
    if (this.state.fullScreenVideo === false) {
      Orientation.unlockAllOrientations();
      this.setState({fullScreenVideo: true});
    } else {
      Orientation.lockToPortrait();
      this.setState({fullScreenVideo: false});
    }
  };

  onSeeking = currentTime => {
    this.setState({currentTime: currentTime});
  };
  // VIDEO PLAYER

  readMoreLessData = () => {
    if (this.state.readMoreData == false) {
      this.setState({readMoreData: true});
    } else {
      this.setState({readMoreData: false});
    }
  };

  handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1,
        fetchingStatusUp: true,
      },
      () => {
        this.apicallCommentList();
      },
    );
  };

  apicallDonation = amount => {
    console.log('AMOUNT ===<', amount);
    this.setState({loading: true});
    let param = {
      talk_id: this.state.talk_detail?.id,
      donation: amount,
    };
    console.log('add donate params ==>', param);
    callPostApi(ApiEndPoints.add_donation, param, data => {
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState({donateViewShow: false});
        // showDangerMsg('Successfully donate');
        showDangerMsg(LiveDonateT.successMsg);
        console.log('add donate response data ==>', data);
      } else {
        showDangerMsg(data.message);
      }
    });
  };

  viewmoreLess = () => {
    if (this.state.talk_description.length > 200) {
      console.log('talk_description ==>', this.state.talk_description.length);
      return this.state.talk_description.slice(200, Infinity) &&
        this.state.readMoreData == false
        ? 'Read more'
        : 'Read less';
    }
  };

  createDynamicLink = async () => {
    const link = await dynamicLinks().buildLink({
      link: `${dynamicURLS.talk_share}${this.state.talk_id}`,
      ios: {
        bundleId: 'com.story.boardapp',
        appStoreId: appStoreId,
      },
      android: {
        packageName: 'com.storiboard',
        minimumVersion: '17',
      },
      // domainUriPrefix is created in your Firebase console
      domainUriPrefix: 'https://storiboard.page.link',
      // optional setup which updates Firebase analytics campaign
      // "banner". This also needs setting up before hand
    });

    linkShare(linkShareDescription.talk_share, link);
  };

  render() {
    // console.log('otherReson ===> ,', this.state.otherReson);
    // console.log('reportSelectText ===> ,', this.state.talk_detail);
    console.log('currentTime render ==>', this.state.currentTime);

    return (
      <View style={{flex: 1}}>
        <Loader loading={this.state.loading} />

        {this.state.fullScreenVideo === false ? (
          <View
            style={{
              flex: 1,
              backgroundColor: GColors.white,
            }}
          >
            {/* style={{ transform: [{ rotate: "90deg" }], width: screenHeight }} */}
            <StatusBar
              barStyle="light-content"
              backgroundColor={GColors.black}
            />
            {/* Donate Modal Test */}
            <Modal visible={this.state.donateViewShow} transparent={true}>
              <View style={{flex: 1}}>
                <Loader loading={this.state.loading} />

                {/* <Video
				// repeat={true}
					resizeMode={'cover'}
					source={{ uri: this.state.talk_detail.talk_video }}
					style={{
						width: wp(100),
						height: hp(100),
						position: 'absolute'
					}}
				/> */}
                <View style={{flex: 1}} />
                {this.state.donateViewShow === true && (
                  <View style={[styles.mainWhiteViewStyle]}>
                    <View style={styles.whiteViewTopLineStyle} />

                    <TouchableOpacity
                      onPress={() => this.setState({donateViewShow: false})}
                      activeOpacity={activeOpacity}
                      style={{
                        alignSelf: 'flex-end',
                        marginRight: wp(5),
                        marginTop: hp(2),
                      }}
                    >
                      <Image
                        source={icons.round_close_icon}
                        resizeMode="contain"
                      />
                    </TouchableOpacity>
                    <Image
                      style={styles.profileImageStyle}
                      // source={{ uri: this.props.route.params?.isProfilImage }}
                      source={{uri: this.state.talk_detail?.user_image}}
                      resizeMode="cover"
                    />
                    {/* isFirstName */}

                    <Text style={styles.donatetoTextStyle}>
                      {LiveDonateT.donateto +
                        this.state.talk_detail?.first_name +
                        ' ' +
                        this.state.talk_detail?.last_name}
                    </Text>
                    <Text style={styles.yourgenerousTextStyle}>
                      {LiveDonateT.yourgenerous}
                    </Text>
                    <Text style={styles.yourgenerousTextStyle}>
                      {LiveDonateT.chooseyourdonation}
                    </Text>

                    <FlatList
                      data={this.state.arrDonation}
                      keyExtractor={data => data.id}
                      renderItem={this.donationRenderItem}
                      style={{marginBottom: hp(15), marginTop: hp(3)}}
                      horizontal
                      showsHorizontalScrollIndicator={false}
                    />
                  </View>
                )}
              </View>
            </Modal>
            <Modal
              visible={this.state.playSpeedModal}
              animationType="slide"
              transparent={true}
              onRequestClose={() => alert('ok')}
            >
              <View
                style={{
                  backgroundColor: GColors.backGround_color,
                  flex: 1,
                }}
              >
                <View style={{flex: 1}} />
                <View
                  style={{
                    backgroundColor: '#212121',
                    justifyContent: 'flex-end',
                  }}
                >
                  <Text
                    style={[styles.speedTextStyle, {marginTop: hp(1)}]}
                    onPress={() =>
                      this.setState({
                        rate: 1,
                        playSpeedModal: false,
                        //	paused: false
                      })
                    }
                  >
                    {'1x' + ' '}
                  </Text>
                  <Text
                    style={styles.speedTextStyle}
                    onPress={() =>
                      this.setState({
                        rate: 1.25,
                        playSpeedModal: false,
                        //	paused: false
                      })
                    }
                  >
                    {'1.25x' + ' '}
                  </Text>
                  <Text
                    style={styles.speedTextStyle}
                    onPress={() =>
                      this.setState({
                        rate: 1.5,
                        playSpeedModal: false,
                        //	paused: false
                      })
                    }
                  >
                    {'1.5x' + ' '}
                  </Text>
                  <Text
                    style={styles.speedTextStyle}
                    onPress={() =>
                      this.setState({
                        rate: 1.75,
                        playSpeedModal: false,
                        //	paused: false
                      })
                    }
                  >
                    {'1.75x' + ' '}
                  </Text>
                  <Text
                    style={[styles.speedTextStyle, {marginVertical: 0}]}
                    onPress={() =>
                      this.setState({
                        rate: 2,
                        playSpeedModal: false,
                        //paused: false
                      })
                    }
                  >
                    {'2x' + ' '}
                  </Text>
                  <LineView style={{marginVertical: hp(1)}} />

                  <TouchableOpacity
                    activeOpacity={activeOpacity}
                    onPress={() =>
                      this.setState({playSpeedModal: false, paused: false})
                    }
                    style={{
                      marginStart: wp(5),
                      flexDirection: 'row',
                      alignItems: 'center',
                      marginBottom: hp(2),
                    }}
                  >
                    <Image
                      style={{tintColor: GColors.white}}
                      source={icons.close_icon}
                      resizeMode="contain"
                    />
                    <Text style={styles.speedModalTextStyle}>Cancel</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </Modal>

            {/* edit Talk modal */}
            <Modal
              visible={this.state.editTalkModal}
              animationType="none"
              transparent={true}
            >
              <View
                style={{
                  backgroundColor: GColors.backGround_color,
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                <View
                  style={{
                    backgroundColor: GColors.white,
                    width: wp(90),
                    borderRadius: commonBorderRadius,
                  }}
                >
                  <View style={{marginHorizontal: commonMarginHorizontal}}>
                    <TouchableOpacity
                      hitSlop={hitSlop}
                      activeOpacity={activeOpacity}
                      onPress={() => this.setState({editTalkModal: false})}
                      style={{
                        alignSelf: 'flex-end',
                        marginRight: wp(3),
                        marginVertical: hp(1.5),
                      }}
                    >
                      <Image
                        source={icons.close_icon}
                        resizeMode="cover"
                        style={{
                          height: wp(5),
                          aspectRatio: 1,
                          tintColor: GColors.themecolor,
                        }}
                      />
                    </TouchableOpacity>
                    <Text style={styles.editTalkTextStyle}>Edit Talk</Text>
                    <Text style={styles.talkTitleDesTextStyle}>
                      Talk Title:{' '}
                    </Text>
                    <CommonTextInput
                      //placeholder={'CreateTalkT.talktitle'}
                      value={this.state.talktitle}
                      textInputStyle={styles.talkTitleDesTextStyle}
                      //	value={this.state.talk_detail?.title}
                      onChangeText={text => this.setState({talktitle: text})}
                      mainViewStyle={styles.talkDetailsModalTextInputStyle}
                    />
                    <Text style={styles.talkTitleDesTextStyle}>
                      Talk Description:{' '}
                    </Text>
                    <CommonTextInput
                      //placeholder={CreateTalkT.talkdescription}
                      value={this.state.talkdescription}
                      textInputStyle={styles.talkTitleDesTextStyle}
                      onChangeText={text =>
                        this.setState({talkdescription: text})
                      }
                      mainViewStyle={{
                        height: hp(20),
                        marginTop: hp(2),
                        alignItems: 'baseline',
                        marginBottom: hp(2),
                      }}
                      multiline
                    />

                    <View
                      style={{
                        flexDirection: 'row',
                        alignSelf: 'flex-end',
                        justifyContent: 'space-between',
                      }}
                    >
                      <ThemeButton
                        onPress={() => this.apicallEditTalk()}
                        TouchableStyle={styles.nextBtnStyle}
                        Text={'Save edit'}
                      />
                      <ThemeButton
                        onPress={() =>
                          Alert.alert(
                            // "StoriBoard",
                            '',
                            'Do you want to permanently delete this Talk?',
                            [
                              {
                                text: 'Cancel',
                                onPress: () => console.log('Cancel Pressed'),
                                style: 'cancel',
                              },
                              {
                                text: 'Yes',
                                onPress: () => this.apicallDelete_talk(),
                              },
                            ],
                            {cancelable: false},
                          )
                        }
                        //onPress={() => this.apicallEditTalk()}
                        TouchableStyle={[
                          styles.nextBtnStyle,
                          {marginLeft: wp(3)},
                        ]}
                        Text={'Delete Talk'}
                        textStyle={{
                          marginHorizontal: wp(2),
                          textAlign: 'center',
                        }}
                      />
                    </View>
                  </View>
                </View>
              </View>
            </Modal>
            {/* edit Talk modal */}

            {/* </View> */}
            <ScrollView
              bounces={false}
              showsVerticalScrollIndicator={false}
              keyboardShouldPersistTaps="handled"
            >
              <View>
                <View style={{}}>
                  {/*////*/}
                  <Video
                    ignoreSilentSwitch="ignore"
                    onEnd={this.onEnd}
                    onLoad={this.onLoad}
                    onLoadStart={this.onLoadStart}
                    onProgress={this.onProgress}
                    rate={this.state.rate}
                    paused={
                      // true
                      this.state.paused || this.state.fullScreenVideo === true
                    }
                    ref={videoPlayer => (this.videoPlayer = videoPlayer)}
                    resizeMode={this.state.screenType}
                    source={{uri: this.state.talk_detail.talk_video}}
                    style={[
                      styles.media,
                      {height: this.state.mediaLayoutHeight || hp(40)},
                    ]}
                  />
                </View>
                <MediaControls
                  duration={this.state.duration}
                  isLoading={this.state.isLoading}
                  mainColor={GColors.themecolor}
                  onFullScreen={this.onFullScreen}
                  onPaused={this.onPaused}
                  onReplay={this.onReplay}
                  onSeek={this.onSeek}
                  onSeeking={this.onSeeking}
                  playerState={this.state.playerState}
                  progress={this.state.currentTime}
                  // sliderStyle={{containerStyle: {flex: 0, marginBottom: 0}}}
                  toolbarStyle={{flex: 0}}
                  sliderStyle={{
                    containerStyle: {
                      flex: 0,
                      marginBottom: 0,
                    },
                  }}
                >
                  <MediaControls.Toolbar>
                    <View
                      style={{
                        flexDirection: 'row',
                        //alignItems: 'center',
                        marginTop: hp(6),
                      }}
                    >
                      <View>
                        <TouchableOpacity
                          onPress={() => this.props.navigation.goBack('')}
                          hitSlop={hitSlop}
                          activeOpacity={activeOpacity}
                        >
                          <Image
                            resizeMode="contain"
                            source={icons.round_back_icon}
                          />
                        </TouchableOpacity>
                        <TouchableOpacity
                          activeOpacity={activeOpacity}
                          onPress={() => this.setState({playSpeedModal: true})}
                          style={{
                            marginTop: hp(1),
                          }}
                        >
                          <Image
                            style={{height: wp(8), aspectRatio: 1}}
                            source={icons.playack_speed_icon}
                            resizeMode="cover"
                          />
                          {/* <Text
                      style={[
                        styles.speedTextStyle
                        { marginStart: wp(0), marginBottom: hp(0) },
                      ]}
                    >
                      Playback speed
                    </Text> */}
                        </TouchableOpacity>
                      </View>
                      <View style={{flex: 1}} />
                      {/* {this.state.talk_detail?.viewer_action === 'Donate' ? (
                      <ThemeButton
                        Text={'Donate'}
                        TouchableStyle={styles.headerDonateBtnStyle}
                        // onPress={() => [
                        // 	this.props.navigation.navigate('LiveDonateScreen', {
                        // 		isDonateAmount:
                        // 			this.state.talk_detail?.donate_amount,
                        // 		isProfilImage: this.state.talk_detail?.user_image,
                        // 		isTalkVideo: this.state.talk_detail?.talk_video,
                        // 		isFirstName: this.state.talk_detail?.first_name,
                        // 		isLastName: this.state.talk_detail?.last_name,
                        // 		isTalkId: this.state.talk_detail?.id
                        // 	}),
                        // 	this.setState({ paused: true })
                        // ]}
                        onPress={() => {
                          const donate = this.state.talk_detail?.donate_amount;
                          const array = donate.split(',');
                          this.setState({arrDonation: array}, () => {
                            console.log(
                              'arrDonation ==>',
                              this.state.arrDonation,
                            );
                            this.setState({donateViewShow: true});
                          });
                        }}
                        // onPress={() => [
                        // 	this.props.navigation.navigate('LiveDonateScreen', {
                        // 		isDonateAmount:
                        // 			this.state.talk_detail?.donate_amount,
                        // 		isProfilImage: this.state.talk_detail?.user_image,
                        // 		isTalkVideo: this.state.talk_detail?.talk_video,
                        // 		isFirstName: this.state.talk_detail?.first_name,
                        // 		isLastName: this.state.talk_detail?.last_name,
                        // 		isTalkId: this.state.talk_detail?.id
                        // 	})
                        // 	// this.setState({ paused: true })
                        // ]}
                      />
                    ) : this.state.talk_detail?.viewer_action === 'Book me' ? (
                      <ThemeButton
                        onPress={() => this.setState({showBookMeModal: true})}
                        Text={'Book Me'}
                        TouchableStyle={styles.headerDonateBtnStyle}
                      />
                    ) : null} */}
                    </View>
                  </MediaControls.Toolbar>
                </MediaControls>
              </View>
              <View style={{marginHorizontal: wp(3.5), marginTop: hp(2.5)}}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text
                    style={styles.copeLossText}
                    // onPress={() => this.setState({ addCommentModal: true })}
                  >
                    {this.state.talk_detail?.title}
                  </Text>
                  <View style={{flex: 1}} />
                  {this.state.user.id === this.state.talk_detail.user_id && (
                    // <Text
                    // 	style={{ marginTop: hp(5) }}
                    // 	onPress={() => this.setState({ editTalkModal: true })}
                    // >
                    // 	EDIT
                    // </Text>
                    <TouchableOpacity
                      //style={{backgroundColor:'red'}}
                      activeOpacity={activeOpacity}
                      hitSlop={hitSlop}
                      onPress={() => this.setState({editTalkModal: true})}
                    >
                      <Image
                        source={Icons.edit_talk_icon}
                        resizeMode="contain"
                      />
                    </TouchableOpacity>
                  )}
                </View>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginVertical: hp(1),
                  }}
                >
                  <TouchableOpacity
                    onPress={() => {
                      this.setState({commentModal: true});
                    }}
                    style={styles.commentBtn}
                    hitSlop={{left: 5, right: 5, top: 5, bottom: 5}}
                    activeOpacity={1}
                  >
                    <Text style={[styles.comment, {fontWeight: 'bold'}]}>
                      {this.state.talk_detail.coments}
                      <Text style={styles.commentBookingTextStyle}>
                        {' '}
                        {fearureTalkT.Comments}
                      </Text>
                    </Text>
                    <Image
                      source={icons.CommetDownArrow}
                      style={{marginLeft: wp(1.5)}}
                    />
                  </TouchableOpacity>

                  <Text
                    style={[
                      styles.comment,
                      {marginStart: wp(3), fontWeight: 'bold'},
                    ]}
                  >
                    {this.state.talk_detail.bookings}
                    <Text style={styles.commentBookingTextStyle}>
                      {' '}
                      {fearureTalkT.bookings}
                    </Text>
                  </Text>

                  {this.state.talk_detail.viewer_action === 'Link to group' && (
                    <View style={{flexDirection: 'row'}}>
                      <Image
                        style={{
                          marginStart: wp(3),
                          tintColor: GColors.black,
                        }}
                        source={icons.bottom_selected_groups_icon}
                        resizeMode="contain"
                      />

                      <Text
                        onPress={() => {
                          this.props.navigation.navigate(
                            'GroupDetailsPastScreen',
                            {
                              isAdmin: true,
                              isUser_Id: this.state.user.id,
                              isGroup_Id: this.state.talk_detail?.group_id,
                              isCategory_Name:
                                this.state.talk_detail?.category_name,
                            },
                          );
                        }}
                        style={[
                          styles.comment,
                          {color: GColors.gray, marginStart: wp(1)},
                        ]}
                      >
                        Group
                      </Text>
                    </View>
                  )}
                </View>

                <Text style={styles.groupAboutTextStyle}>
                  {this.state.readMoreData == false
                    ? this.state.talk_description.slice(0, 200)
                    : this.state.talk_description.slice(0, Infinity)}{' '}
                  <Text
                    // onPress={() => this.setState({ readMoreData: true })}
                    onPress={() => this.readMoreLessData()}
                    style={{
                      color: GColors.black,
                      fontFamily: FontFamily.bold,
                    }}
                  >
                    {this.viewmoreLess()}
                  </Text>
                </Text>
              </View>
              <View style={styles.lightHorizontalLine} />
              <View style={{marginHorizontal: wp(4), flex: 1}}>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    marginTop: hp(1),
                  }}
                >
                  <TouchableOpacity
                    style={styles.optionFiveBtns}
                    activeOpacity={0.8}
                  >
                    <Image
                      source={icons.eye_comment}
                      style={styles.optionImage}
                      resizeMode="contain"
                    />
                    <Text style={styles.optionText}>
                      {this.state.talk_detail.viewer}
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.optionFiveBtns}
                    activeOpacity={0.8}
                    hitSlop={hitSlop}
                    onPress={() => [
                      //  this.setState({ isLiked: !this.state.isLiked }),
                      this.apiAddTalkLikeUnlike(),
                    ]}
                  >
                    <Image
                      source={
                        this.state.talk_detail.is_like === true
                          ? icons.heartSelected
                          : icons.HeartUnselected
                      }
                      style={[
                        styles.optionImage,
                        {
                          tintColor:
                            this.state.talk_detail.is_like === true
                              ? null
                              : GColors.gray,
                        },
                      ]}
                      resizeMode="contain"
                    />
                    <Text style={styles.optionText}>
                      {this.state.talk_detail.likes}
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.optionFiveBtns}
                    activeOpacity={0.8}
                    onPress={() => {
                      this.createDynamicLink();
                    }}
                  >
                    <Image
                      source={icons.Icon_Share}
                      style={styles.optionImage}
                      resizeMode="contain"
                    />
                    <Text style={styles.optionText}>{fearureTalkT.Share}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.optionFiveBtns}
                    activeOpacity={0.8}
                    onPress={() => this.apicallSaveTalk()}
                  >
                    <Image
                      source={icons.save_video}
                      style={[
                        styles.optionImage,
                        {
                          tintColor:
                            this.state.talk_detail.is_save === true
                              ? GColors.themecolor
                              : null,
                        },
                      ]}
                      resizeMode="contain"
                    />
                    <Text style={styles.optionText}>{fearureTalkT.Save}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() =>
                      this.setState({showMoreModal: true, paused: true})
                    }
                    style={styles.optionFiveBtns}
                    activeOpacity={0.8}
                  >
                    <Image
                      source={icons.line_three_dot_icon}
                      style={styles.optionImage}
                      resizeMode="contain"
                    />
                    <Text style={styles.optionText}>{fearureTalkT.More}</Text>
                  </TouchableOpacity>
                </View>

                {this.state.user.id != this.state.talk_detail.user_id && (
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      marginTop: hp(2),
                      backgroundColor: GColors.light_white,
                      height: hp(10),
                    }}
                  >
                    <TouchableOpacity
                      activeOpacity={activeOpacity}
                      onPress={() => {
                        this.props.navigation.navigate('OtherProfileScreen', {
                          user_id: this.state.talk_detail.user_id,
                        });
                      }}
                      style={{
                        marginLeft: wp(3),
                        flex: 1,
                        flexDirection: 'row',
                      }}
                    >
                      <View>
                        <Image
                          source={{uri: this.state.talk_detail.user_image}}
                          resizeMode="cover"
                          style={{
                            height: wp(12),
                            aspectRatio: 1,
                            borderRadius: 100,
                          }}
                        />
                      </View>
                      <View style={{marginLeft: wp(3), flex: 1}}>
                        <Text numberOfLines={1} style={styles.userName}>
                          {this.state.talk_detail.first_name +
                            ' ' +
                            this.state.talk_detail.last_name}
                        </Text>
                        <Text style={styles.followCount}>
                          {this.state.talk_detail.followers}{' '}
                          {fearureTalkT.Followers}
                        </Text>
                      </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => this.apicallFollow()}
                      style={styles.followBtn}
                      activeOpacity={1}
                    >
                      <Text style={styles.followText}>
                        {this.state.isFollowing === false
                          ? fearureTalkT.Follow
                          : 'Unfollow'}
                      </Text>
                    </TouchableOpacity>
                  </View>
                )}

                <View style={styles.moreTalkMain}>
                  <Text style={styles.MoreTalkText}>
                    {fearureTalkT.moreTalk}
                  </Text>
                  <Text
                    onPress={() => {
                      this.props.navigation.navigate('ViewAllVideoHomeScreen', {
                        isTalk_id: this.state.talk_id,
                        getTag: this.getTag,
                        // tag: this.props.route.params?.isParam,
                        // category_id: this.props.route.params?.isCatId
                      });
                    }}
                    style={styles.viewAllText}
                  >
                    {fearureTalkT.viewAll}
                  </Text>
                </View>
                {/* <ScrollView contentContainerStyle={{flex:1}} > */}
                <FlatList
                  style={{marginTop: hp(1), marginBottom: hp(1)}}
                  data={this.state.arrVideoData}
                  renderItem={({item, index}) =>
                    this.renderViewData(item, index)
                  }
                  showsVerticalScrollIndicator={false}
                  keyExtractor={(item, index) => index.toString()}
                />
                {/* </ScrollView> */}
              </View>

              <Modal
                style={{zIndex: 0}}
                animationType="slide"
                transparent={true}
                visible={this.state.commentModal}
                // visible={this.state.isNameModal}
                animated={true}
              >
                <View
                  style={{
                    flex: 1,
                    zIndex: 0,
                    backgroundColor: 'rgba(35, 45, 62, 0.73)',
                  }}
                >
                  <View
                    style={{
                      flex: 1,
                      marginTop: hp(25),
                      borderTopLeftRadius: 25,
                      borderTopRightRadius: 25,
                      backgroundColor: GColors.white,
                      opacity: 1.0,
                      width: '100%',
                    }}
                  >
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        marginTop: hp(2),
                      }}
                    >
                      <Text style={styles.modalComment}>
                        {this.state.talk_detail.coments}{' '}
                        <Text style={{color: GColors.gray}}>Comments</Text>
                      </Text>
                      <View style={{flex: 1}} />
                      <TouchableOpacity
                        activeOpacity={1}
                        style={{
                          alignSelf: 'flex-end',
                          marginRight: wp(6),
                        }}
                        onPress={() => this.setState({commentModal: false})}
                      >
                        <Image source={icons.crossIcon} />
                      </TouchableOpacity>
                    </View>
                    <View
                      style={[styles.lightHorizontalLine, {marginTop: hp(1)}]}
                    />
                    <View
                      style={{
                        marginHorizontal: wp(6.7),
                        marginTop: hp(2),
                        flex: 1,
                        backgroundColor: 'White',
                        width: '100%',
                      }}
                    >
                      {/* <FlatList
         bounces={false}
         data={this.state.arrCommentData}
         renderItem={({ item, index }) =>
           this.renderCommentData(item, index)
         }
         showsVerticalScrollIndicator={false}
         keyExtractor={(item, index) => index.toString()}
         /> */}
                      <SwipeListView
                        disableRightSwipe
                        disableLeftSwipe
                        data={this.state.arrCommentData}
                        renderItem={({item, index}) =>
                          this.renderCommentData(item, index)
                        }
                        //renderHiddenItem={index => this.renderHiddenItem(index)}
                        //rightOpenValue={-80}
                        previewRowKey={'0'}
                        previewOpenValue={10}
                        previewOpenDelay={100}
                        // onSwipeValueChange={this.onSwipeClose}
                        useNativeDriver={false}
                        style={{backgroundColor: 'Black'}}
                        onEndReachedThreshold={0.5}
                        onEndReached={() => {
                          if (
                            !this.state.fetchingStatusCompleted &&
                            this.state.hasMoreDataCompleted &&
                            this.state.arrCommentData.length >= 10
                          ) {
                            this.handleLoadMore();
                          }
                        }}
                      />
                    </View>

                    <View style={styles.messageTypeViewStyle}>
                      <TextInput
                        placeholder={'Write a comment...'}
                        placeholderTextColor={GColors.gray}
                        value={this.state.Comments}
                        onChangeText={text => this.setState({Comments: text})}
                        style={{
                          width: wp(80),
                          paddingHorizontal: wp(4),
                          color: GColors.black,
                          fontSize: Fonts.fs14,
                          fontFamily: FontFamily.regular,
                        }}
                      />

                      <View style={{flex: 1}} />
                      <TouchableOpacity
                        onPress={() => {
                          if (this.state.Comments.trim() == '') {
                            showDangerMsg('Please enter comment');
                          } else {
                            this.apicallAddComment();
                          }
                        }}
                        activeOpacity={0.9}
                      >
                        <Image
                          source={icons.chat_detail_send_message_icon}
                          resizeMode="contain"
                          style={{marginRight: wp(3)}}
                        />
                      </TouchableOpacity>
                    </View>

                    {/* <TouchableOpacity
         activeOpacity={1}
         style={{ alignItems: "flex-end", marginRight: wp(5) }}
         onPress={() =>
         this.setState({
           addCommentModal: true,
           commentModal: false,
         })
         }
         >
         <Image
         source={icons.bottom_selected_post_icon}
         resizeMode="contain"
         />
         </TouchableOpacity> */}
                  </View>
                </View>
              </Modal>
              <Modal
                style={{zIndex: 0}}
                animationType="slide"
                transparent={true}
                visible={this.state.addCommentModal}
                // visible={this.state.isNameModal}
                animated={true}
              >
                <View
                  style={{
                    flex: 1,
                    zIndex: 0,
                    backgroundColor: 'rgba(35, 45, 62, 0.73)',
                  }}
                >
                  <View
                    style={{
                      marginTop: hp(37),
                      flex: 1,
                      bottom: 0,
                      borderTopLeftRadius: 25,
                      borderTopRightRadius: 25,
                      backgroundColor: GColors.white,
                      opacity: 1.0,
                      width: '100%',
                    }}
                  >
                    <View
                      style={{
                        height: hp(0.6),
                        width: wp(9.6),
                        borderRadius: 2,
                        opacity: 0.5,
                        backgroundColor: Colors.gray,
                        alignSelf: 'center',
                      }}
                    />
                    <View>
                      <Image
                        source={icons.talkProfile}
                        style={styles.modalProfile}
                      />
                    </View>
                    <View style={styles.TextInputDescriptionView}>
                      <TextInput
                        style={{
                          flex: 1,
                          marginTop: hp(2),
                          textAlignVertical: 'top',
                          fontSize: Fonts.fs14,

                          color: GColors.black,
                          padding: hp(2),
                        }}
                        placeholder="Write Comment..."
                        value={this.state.comment}
                        onChangeText={text => this.setState({comment: text})}
                        placeholderTextColor={GColors.gray}
                        multiline={true}
                      />
                    </View>
                    <ThemeButton
                      TouchableStyle={{
                        marginHorizontal: wp(5),
                        marginBottom: hp(5),
                      }}
                      Text="Add Comment"
                      onPress={() => this.setState({addCommentModal: false})}
                    />
                  </View>
                </View>
              </Modal>

              {/* more  modal */}
              <Modal
                animationType="slide"
                transparent={true}
                visible={this.state.showMoreModal}
                animated={true}
              >
                <View style={styles.modalMainViewStyle}>
                  <View style={{flex: 1}} />
                  <View
                    style={{
                      marginHorizontal: commonMarginHorizontal,
                      marginBottom: hp(3),
                    }}
                  >
                    {this.state.talk_detail.viewer_action ===
                      'Link to group' && (
                      <TouchableOpacity
                        // onPress={() => [
                        // 	// this.props.navigation.navigate("GroupDetailsPastScreen"),
                        // 	alert('Under Development'),
                        // 	this.setState({ showMoreModal: false })
                        // ]}
                        onPress={() => {
                          this.setState({showMoreModal: false});
                          this.props.navigation.navigate(
                            'GroupDetailsPastScreen',
                            {
                              isAdmin: true,
                              isUser_Id: this.state.user.id,
                              isGroup_Id: this.state.talk_detail?.group_id,
                              isCategory_Name:
                                this.state.talk_detail?.category_name,
                            },
                          );
                        }}
                        activeOpacity={activeOpacity}
                        style={styles.moreModalTouchableStyle}
                      >
                        <Text style={styles.moreModalTextStyle}>
                          {fearureTalkT.visitGroup}
                        </Text>
                      </TouchableOpacity>
                    )}
                    <TouchableOpacity
                      activeOpacity={activeOpacity}
                      onPress={() =>
                        this.setState(
                          {
                            showMoreModal: false,
                            showReportVideo: true,
                            isSelectedReportVideo: -1,
                          },
                          () => {
                            this.setState({otherReson: ''});
                          },
                        )
                      }
                      style={[
                        styles.moreModalTouchableStyle,
                        {
                          borderBottomLeftRadius: commonBorderRadius,
                          borderBottomRightRadius: commonBorderRadius,
                          borderTopRightRadius:
                            this.state.talk_detail.viewer_action !=
                            'Link to group'
                              ? commonBorderRadius
                              : 0,
                          borderTopLeftRadius:
                            this.state.talk_detail.viewer_action !=
                            'Link to group'
                              ? commonBorderRadius
                              : 0,
                          marginTop: hp(0.5),
                        },
                      ]}
                    >
                      <Text style={styles.moreModalTextStyle}>
                        {fearureTalkT.reportVideo}
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() =>
                        this.setState({showMoreModal: false, paused: false})
                      }
                      activeOpacity={activeOpacity}
                      style={[
                        styles.moreModalTouchableStyle,
                        {
                          borderRadius: commonBorderRadius,
                          marginTop: hp(1.5),
                        },
                      ]}
                    >
                      <Text
                        style={[styles.moreModalTextStyle, {fontWeight: '400'}]}
                      >
                        {fearureTalkT.cancel}
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </Modal>
              {/* more  modal */}

              {/* report video modal  */}
              <Modal
                animationType="slide"
                transparent={true}
                visible={this.state.showReportVideo}
                animated={true}
              >
                <KeyboardAvoidingView
                  keyboardShouldPersistTaps="handled"
                  behavior="padding"
                  style={styles.modalContainer}
                >
                  <View
                    style={[
                      styles.modalMainViewStyle,
                      {justifyContent: 'center'},
                    ]}
                  >
                    <View
                      style={[styles.modalWhiteViewStyle, {borderRadius: 15}]}
                    >
                      <Text style={styles.rvModalReportVideoTextStyle}>
                        {fearureTalkT.reportVideo}
                      </Text>

                      <LineView style={styles.rvModalLineViewStyle} />

                      <FlatList
                        data={this.state.arrReportVideo}
                        keyExtractor={data => data.id}
                        renderItem={this.reportVideoRenderItem}
                        showsVerticalScrollIndicator={false}
                      />
                      {/*{this.state.isReportSelected === -1 && (*/}
                      <View style={styles.otherViewStyle}>
                        <Text style={styles.otherTextStyle}>Other :</Text>
                        <CommonTextInput
                          onPress={() => this.setState({reportSelectText: ''})}
                          placeholder={'Enter reason'}
                          value={this.state.otherReson}
                          onChangeText={text =>
                            this.setState({
                              isReportSelected: -1,
                              otherReson: text,
                              reportSelectText: '',
                            })
                          }
                          mainViewStyle={{width: wp(70), marginStart: wp(2)}}
                        />
                      </View>
                      {/*)}*/}

                      <LineView style={styles.rvModalLineViewStyle} />

                      <View
                        style={{
                          flexDirection: 'row',
                          padding: wp(4),
                          alignSelf: 'flex-end',
                        }}
                      >
                        <TouchableOpacity
                          onPress={() =>
                            this.setState({showReportVideo: false})
                          }
                          activeOpacity={activeOpacity}
                        >
                          <Text style={styles.rvModalThemeTextStyle}>
                            {fearureTalkT.cancel}
                          </Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                          onPress={this.handleReportVideoClick}
                          activeOpacity={activeOpacity}
                        >
                          <Text style={styles.rvModalThemeTextStyle}>
                            {fearureTalkT.report}
                          </Text>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                </KeyboardAvoidingView>
              </Modal>
              {/* report video modal  */}

              {/* book me, donate extra modal */}
              <Modal
                animationType="slide"
                transparent={true}
                visible={this.state.showExtraModal}
                animated={true}
              >
                <View style={styles.modalMainViewStyle}>
                  <View style={{flex: 1}} />
                  <View
                    style={{
                      marginHorizontal: commonMarginHorizontal,
                      marginBottom: hp(3),
                    }}
                  >
                    <TouchableOpacity
                      onPress={() =>
                        this.setState({
                          showBookMeModal: true,
                          showExtraModal: false,
                        })
                      }
                      activeOpacity={activeOpacity}
                      style={styles.moreModalTouchableStyle}
                    >
                      <Text style={styles.moreModalTextStyle}>
                        {fearureTalkT.bookme}
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => [
                        this.props.navigation.navigate('LiveDonateScreen'),
                        this.setState({showExtraModal: false}),
                      ]}
                      activeOpacity={activeOpacity}
                      style={[
                        styles.moreModalTouchableStyle,
                        {
                          marginTop: hp(0.3),
                          borderTopLeftRadius: 0,
                          borderTopRightRadius: 0,
                        },
                      ]}
                    >
                      <Text style={styles.moreModalTextStyle}>
                        {fearureTalkT.donate}
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      activeOpacity={activeOpacity}
                      onPress={() => [
                        this.setState({
                          showMoreModal: false,
                          showReportVideo: true,
                          isSelectedReportVideo: -1,
                        }),
                        this.props.navigation.navigate('groups'),
                      ]}
                      style={[
                        styles.moreModalTouchableStyle,
                        {
                          borderBottomLeftRadius: commonBorderRadius,
                          borderBottomRightRadius: commonBorderRadius,
                          borderTopRightRadius: 0,
                          borderTopLeftRadius: 0,
                          marginTop: hp(0.3),
                        },
                      ]}
                    >
                      <Text style={styles.moreModalTextStyle}>
                        {fearureTalkT.findMore}
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => this.setState({showExtraModal: false})}
                      activeOpacity={activeOpacity}
                      style={[
                        styles.moreModalTouchableStyle,
                        {
                          borderRadius: commonBorderRadius,
                          marginTop: hp(1.5),
                        },
                      ]}
                    >
                      <Text
                        style={[styles.moreModalTextStyle, {fontWeight: '400'}]}
                      >
                        {fearureTalkT.cancel}
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </Modal>
              {/* book me, donate extra modal */}

              {/* book me modal */}
              <Modal
                animationType="slide"
                transparent={true}
                visible={this.state.showBookMeModal}
                animated={true}
              >
                {/* <TouchableOpacity
         activeOpacity={1}
         style={{ backgroundColor: GColors.backGround_color, flex: 1 }}
         > */}
                <TouchableOpacity
                  activeOpacity={1}
                  onPress={() => this.setState({showBookMeModal: false})}
                  style={{flex: 1}}
                />

                <View style={[styles.modalWhiteViewStyle, {height: hp(75)}]}>
                  {/* <View style={styles.whiteViewTopLineStyle} /> */}
                  <ScrollView
                    bounces={false}
                    showsVerticalScrollIndicator={false}
                    keyboardShouldPersistTaps="handled"
                  >
                    <TouchableOpacity
                      activeOpacity={1}
                      onPress={() => this.setState({showBookMeModal: false})}
                      style={{
                        marginTop: hp(2),
                        alignSelf: 'flex-end',
                        marginEnd: wp(6),
                      }}
                    >
                      <Image
                        source={icons.round_close_icon}
                        resizeMode="contain"
                      />
                    </TouchableOpacity>
                    <View style={{marginHorizontal: commonMarginHorizontal}}>
                      <Text style={styles.bookmeModalBookTextStyle}>
                        {BookMeT.bookme}
                      </Text>
                      <Text style={styles.bookmeModalImaybeTextStyle}>
                        {BookMeT.imaybe}{' '}
                        <Text style={{color: GColors.black}}>
                          {BookMeT.speakerfee +
                            this.state.talk_detail?.speaker_fee}
                          {/* speaker_fee */}
                        </Text>
                      </Text>

                      <View style={styles.bookmeModalCenterViewStyle}>
                        <Text style={styles.bookmeModalCenterTitleTextStyle}>
                          {BookMeT.yourdetails}
                        </Text>

                        <CommonTextInput
                          mainViewStyle={styles.bookmeModalTextInputStyle}
                          placeholder={BookMeT.name}
                          value={this.state.name}
                          onChangeText={text => this.setState({name: text})}
                        />
                        <CommonTextInput
                          mainViewStyle={styles.bookmeModalTextInputStyle}
                          placeholder={BookMeT.email}
                          value={this.state.email}
                          onChangeText={text => this.setState({email: text})}
                          keyboardType="email-address"
                          autoCapitalize="none"
                        />
                        <View style={{flexDirection: 'row'}}>
                          <CommonTextInput
                            mainViewStyle={styles.bookmeModalTextInputStyle}
                            placeholder={BookMeT.mobile}
                            value={this.state.mobile}
                            onChangeText={text => this.setState({mobile: text})}
                            keyboardType="number-pad"
                            // Image={icons.round_mobile_icon}
                            maxLength={15}
                          />
                        </View>
                      </View>
                      <View style={styles.bookmeModalCenterViewStyle}>
                        <Text style={styles.bookmeModalCenterTitleTextStyle}>
                          {BookMeT.eventdetails}
                        </Text>

                        {/* <CommonTextInput
           mainViewStyle={styles.bookmeModalTextInputStyle}
           placeholder={BookMeT.type}
           value={this.state.type}
           onChangeText={(text) => this.setState({ type: text })}
         /> */}
                        <View style={styles.typeViewStyle}>
                          <Dropdown
                            style={{width: wp(73)}}
                            placeholderStyle={[
                              styles.typeTextInputStyle,
                              {color: GColors.gray},
                            ]}
                            selectedTextStyle={[
                              styles.typeTextInputStyle,
                              {color: GColors.black},
                            ]}
                            // inputSearchStyle={styles.inputSearchStyle}
                            placeholder={BookMeT.type}
                            data={this.state.DropDownMenu}
                            maxHeight={hp(20)}
                            labelField="label"
                            valueField="value"
                            onChange={item => {
                              this.setState({type: item.value});
                            }}
                          />
                        </View>
                        <CommonTextInput
                          mainViewStyle={styles.bookmeModalTextInputStyle}
                          placeholder={BookMeT.organisationname}
                          value={this.state.organisationName}
                          onChangeText={text =>
                            this.setState({organisationName: text})
                          }
                        />

                        <View
                          style={{
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            marginTop: hp(2),
                          }}
                        >
                          <CommonTextInput
                            mainViewStyle={
                              styles.bookmeModalDateTimeTextInputStyle
                            }
                            placeholder={BookMeT.date}
                            value={this.state.date}
                            onChangeText={text => this.setState({date: text})}
                            Image={icons.calendar}
                            editable={false}
                            onPress={() =>
                              this.setState({isDatePickerVisible: true})
                            }
                          />
                          <CommonTextInput
                            mainViewStyle={
                              styles.bookmeModalDateTimeTextInputStyle
                            }
                            placeholder={BookMeT.time}
                            value={this.state.time}
                            onChangeText={text => this.setState({time: text})}
                            editable={false}
                            Image={icons.clock_icon}
                            onPress={() =>
                              this.setState({isTimePickerVisible: true})
                            }
                          />

                          <DateTimePickerModal
                            //  maximumDate={new Date()}
                            minimumDate={new Date()}
                            isVisible={this.state.isDatePickerVisible}
                            onConfirm={date => {
                              this.setState(
                                {
                                  isDatePickerVisible: false,
                                  // selectedDate : date
                                  date: moment(date).format('DD/MM/YYYY'),
                                },
                                () => console.log('date ==> ', date),
                              );
                            }}
                            onCancel={() => {
                              this.setState({isDatePickerVisible: false});
                            }}
                          />

                          <DateTimePickerModal
                            isVisible={this.state.isTimePickerVisible}
                            mode="time"
                            locale="en_GB"
                            onConfirm={time => {
                              this.setState({
                                isTimePickerVisible: false,
                                // selectedDate : date
                                time: moment(time).format('HH:mm'),
                              });
                            }}
                            onCancel={() => {
                              this.setState({isTimePickerVisible: false});
                            }}
                          />
                        </View>

                        <CommonTextInput
                          mainViewStyle={styles.bookmeModalTextInputStyle}
                          placeholder={BookMeT.audienceno}
                          value={this.state.audienceno}
                          onChangeText={text =>
                            this.setState({audienceno: text})
                          }
                          keyboardType="number-pad"
                          maxLength={5}
                        />
                      </View>

                      <ThemeButton
                        TouchableStyle={{
                          marginTop: hp(3),
                          marginBottom: hp(3),
                        }}
                        Text={BookMeT.sendrequest}
                        onPress={() => this.bookmeValidation()}
                        //onPress={() => this.setState({ showBookMeModal: false })}
                      />
                    </View>
                  </ScrollView>
                </View>

                {/* </TouchableOpacity> */}
              </Modal>

              {/* book me modal */}
            </ScrollView>
          </View>
        ) : (
          // Fullscreen Video
          <>
            <StatusBar hidden translucent={true} />
            <Modal
              animationType={'fade'}
              supportedOrientations={['portrait', 'landscape']}
              transparent={true}
              statusBarTranslucent={true}
            >
              <View
                style={styles.fullscreenVideoModal}
                onLayout={event => {
                  const {layout} = event.nativeEvent;
                  this.setState({
                    videoDimensions: layout,
                  });
                }}
              >
                <View style={styles.fullscreenVideoContainer}>
                  <Video
                    ignoreSilentSwitch="ignore"
                    source={{uri: this.state.talk_detail.talk_video}}
                    onEnd={this.onEnd}
                    onLoad={this.onLoad}
                    onLoadStart={this.onLoadStart}
                    onProgress={this.onProgress}
                    rate={this.state.rate}
                    paused={
                      this.state.paused || this.state.fullScreenVideo === false
                    }
                    style={styles.fullscreenVideo}
                    resizeMode="contain"
                    ref={videoPlayer => (this.videoPlayer = videoPlayer)}
                  />
                  <MediaControls
                    duration={this.state.duration}
                    isLoading={this.state.isLoading}
                    mainColor={GColors.themecolor}
                    onFullScreen={this.onFullScreen}
                    onPaused={this.onPaused}
                    onReplay={this.onReplay}
                    onSeek={this.onSeek}
                    onSeeking={this.onSeeking}
                    playerState={this.state.playerState}
                    progress={this.state.currentTime}
                  >
                    <MediaControls.Toolbar>
                      <View
                        style={{
                          flexDirection: 'row',
                          marginTop: hp(5),
                        }}
                      >
                        <View>
                          <TouchableOpacity
                            onPress={this.onFullScreen}
                            hitSlop={hitSlop}
                            activeOpacity={activeOpacity}
                          >
                            <Image
                              resizeMode="contain"
                              source={icons.round_back_icon}
                              style={{
                                tintColor: GColors.white,
                              }}
                            />
                          </TouchableOpacity>
                          <TouchableOpacity
                            activeOpacity={activeOpacity}
                            onPress={() =>
                              this.setState({
                                playSpeedModal: true,
                                paused: true,
                              })
                            }
                            style={{
                              marginTop: hp(2),
                            }}
                          >
                            <Image
                              style={{
                                height: wp(8),
                                aspectRatio: 1,
                                tintColor: GColors.white,
                              }}
                              source={icons.playack_speed_icon}
                              resizeMode="cover"
                            />
                          </TouchableOpacity>
                        </View>
                        <View style={{flex: 1}} />
                        {/* {this.state.talk_detail?.viewer_action === 'Donate' ? (
                          <ThemeButton
                            Text={'Donate'}
                            TouchableStyle={styles.headerDonateBtnStyle}
                            onPress={() => [
                              this.props.navigation.navigate(
                                'LiveDonateScreen',
                                {
                                  isDonateAmount:
                                    this.state.talk_detail?.donate_amount,
                                  isProfilImage:
                                    this.state.talk_detail?.user_image,
                                  isTalkVideo:
                                    this.state.talk_detail?.talk_video,
                                  isFirstName:
                                    this.state.talk_detail?.first_name,
                                  isLastName: this.state.talk_detail?.last_name,
                                  isTalkId: this.state.talk_detail?.id,
                                },
                              ),
                              this.setState({paused: true}),
                            ]}
                          />
                        ) : this.state.talk_detail?.viewer_action ===
                          'Book me' ? (
                          <ThemeButton
                            onPress={() =>
                              this.setState({showBookMeModal: true})
                            }
                            Text={'Book Me'}
                            TouchableStyle={styles.headerDonateBtnStyle}
                          />
                        ) : null} */}
                      </View>
                    </MediaControls.Toolbar>
                  </MediaControls>
                </View>
              </View>
            </Modal>
          </>
        )}
      </View>
    );
  }

  apiAddTalkLikeUnlike = () => {
    this.setState({loading: true});
    let param = {talk_id: this.state.talk_id};

    callPostApi(ApiEndPoints.talk_like_unlike, param, data => {
      console.log('PORPSSS like', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        console.log('response ===> ', data);
        this.apicallTalkDetails();
      } else {
        showDangerMsg(data.message);
      }
    });
  };
  apiAddTalkViewers = () => {
    this.setState({loading: true});
    let param = {talk_id: this.state.talk_id};
    callPostApi(ApiEndPoints.add_talk_viewer, param, data => {
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
      } else {
        showDangerMsg(data.message);
      }
    });
  };
  apiAddTalkMoreViewers = item => {
    this.setState({loading: true});
    let param = {talk_id: item};
    callPostApi(ApiEndPoints.add_talk_viewer, param, data => {
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
      } else {
        showDangerMsg(data.message);
      }
    });
  };

  apicallTalkDetails = () => {
    this.setState({loading: true});
    let param = {id: this.state.talk_id};
    callPostApi(ApiEndPoints.talk_detail, param, data => {
      console.log('PORPSSS TALK detail', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState(
          {
            talk_detail: apiData,
            talk_description: apiData.description,
            //isFollow: apiData.is_follow,
            talktitle: apiData.title,
            talkdescription: apiData.description,
          },
          () => {
            this.apicallFollowers();
          },
        );

        console.log(
          '==================================== TALK DETAILS RESPONSE',
        );
        console.log(apiData);
        console.log('====================================');
      } else {
        showDangerMsg(data.message);
      }
    });
  };

  apicallMoreTalkDetails = item => {
    // console.log("ID ===> ", id);
    this.setState({loading: true});
    let param = {id: item};
    callPostApi(ApiEndPoints.talk_detail, param, data => {
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState(
          {
            talk_detail: apiData,
            talk_description: apiData.description,
            //isFollow: apiData.is_follow,
            talktitle: apiData.title,
            talkdescription: apiData.description,
          },
          () => {
            this.apicallFollowers();
          },
        );
      } else {
        showDangerMsg(data.message);
      }
    });
  };

  apicallFeaturedTalks = () => {
    this.setState({loading: true});
    let param = {
      page: 1,
      tag:
        this.props.route.params?.isParam === 'featured_talk'
          ? 'featured_talk'
          : '',
      category_id:
        this.props.route.params?.isCatId != ''
          ? this.props.route.params?.isCatId
          : '',
    };
    callPostApi(ApiEndPoints.talk_list, param, data => {
      console.log('MORE TALK LIST PARAM', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState({arrVideoData: apiData});
        // this.apicallMyTalkList();
        console.log('MORE TALK LIST response list ===>', apiData);
      }
    });
  };
  apicallCommentList = () => {
    this.setState({loading: true});
    let param = {talk_id: this.state.talk_id, page: this.state.page};
    callPostApi(ApiEndPoints.talk_comment_list, param, data => {
      console.log('response list Comment PARAMS===>', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState({
          arrCommentData:
            this.state.page == 1
              ? apiData
              : [...this.state.arrCommentData, ...apiData],
        });

        console.log('response list Comment list ===>', apiData);
      } else {
        this.setState({
          arrCommentData:
            this.state.page == 1 ? [] : [...this.state.arrCommentData],
        });
      }
    });
  };
  apicallAddComment = () => {
    this.setState({loading: true});
    let param = {talk_id: this.state.talk_id, comment: this.state.Comments};
    callPostApi(ApiEndPoints.add_talk_comment, param, data => {
      console.log('response list add Comment PARAMS===>', param);
      console.log('response list add Comment Data===>', data);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState(
          prevState => ({
            talk_detail: {
              ...prevState.talk_detail,
              coments: this.state.talk_detail.coments + 1,
            },
            Comments: '',
            page: 1,
          }),
          () => {
            this.apicallCommentList();
          },
        );
      }
    });
  };
  apicallSaveTalk = () => {
    this.setState({loading: true});
    let param = {talk_id: this.state.talk_id};
    callPostApi(ApiEndPoints.talk_save_unsave, param, data => {
      console.log('SAVE TALK PARAMS===>', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        // this.apicallMyTalkList();
        console.log('response SAVE ===>', data);
        this.apicallTalkDetails();
      } else {
        showDangerMsg(data.message);
      }
    });
  };
  apicallLikeUnlikeComment = item => {
    console.log('item ==> ', item);
    this.setState({loading: true});
    let param = {comment_id: item};
    callPostApi(ApiEndPoints.talk_comment_like_unlike, param, data => {
      console.log('LIKE UNLIKE TALK PARAMS===>', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        // this.apicallMyTalkList();
        console.log('LIKE UNLIKE response SAVE ===>', data);
        this.apicallCommentList();
      } else {
        showDangerMsg(data.message);
      }
    });
  };
  apicallReportTalk = () => {
    this.setState({loading: true});
    let param = {
      talk_id: this.state.talk_id,
      report:
        this.state.reportSelectText != ''
          ? this.state.reportSelectText
          : this.state.otherReson,
    };
    console.log('PARAMS report  ==> ', param);
    callPostApi(ApiEndPoints.add_talk_report, param, data => {
      console.log('report PARAMS===>', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        // this.apicallMyTalkList();
        showDangerMsg('This video has been reported'),
          this.setState({
            showReportVideo: false,
            otherReson: '',
            isReportSelected: -1,
          });
        console.log('response report ===>', data);
      } else {
        showDangerMsg(data.message);
      }
    });
  };
  apicallEditTalk = () => {
    this.setState({loading: true});
    let param = {
      id: this.state.talk_id,
      title: this.state.talktitle,
      description: this.state.talkdescription,
    };
    callPostApi(ApiEndPoints.edit_talk, param, data => {
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        this.setState({editTalkModal: false});
      } else {
        showDangerMsg(data.message);
      }
    });
  };

  goBack() {
    const {navigation, route} = this.props;
    navigation.goBack();
    route.params.onSelect({selected: true});
  }

  apicallDelete_talk = () => {
    this.setState({loading: true});
    let param = {
      id: this.state.talk_id,
    };
    callPostApi(ApiEndPoints.delete_talk, param, data => {
      console.log('delete_talk PARAMS===>', param);
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        // this.apicallMyTalkList();
        console.log('response delete_talk ===>', data);
        this.setState({editTalkModal: false});
        //this.apicallTalkDetails();
        this.goBack();
        //this.props.navigation.goBack();
      } else {
        showDangerMsg(data.message);
      }
    });
  };
  apicallBookMe = () => {
    this.setState({loading: true});
    let param = {
      talk_id: this.state.talk_id,
      talk_user_id: this.state.user?.id,
      name: this.state.name,
      email: this.state.email,
      mobile_number: this.state.mobile,
      type: this.state.type,
      organisation_name: this.state.organisationName,
      date: this.state.date,
      time: this.state.time,
      audience_no: this.state.audienceno,
    };
    console.log('BOOK ME params ==>', param);
    callPostApi(ApiEndPoints.book_me, param, data => {
      this.setState({loading: false});
      if (data.code == StatusCode.SUCCESS) {
        let apiData = data.data;
        showSuccessMsg(PermissionT.send_request);
        this.setState({showBookMeModal: false});
        console.log('book me response data ==>', data);
      } else {
        showDangerMsg(data.message);
      }
    });
  };
}

const styles = StyleSheet.create({
  media: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  fullscreenVideoModal: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  fullscreenVideoContainer: {
    overflow: 'hidden',
    backgroundColor: '#000',
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'space-between',
  },
  fullscreenVideo: {
    overflow: 'hidden',
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
  copeLossText: {
    color: GColors.black,
    fontFamily: FontFamily.bold,
    fontSize: Fonts.fs16,
  },
  commentBtn: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  comment: {
    color: GColors.black,
    fontFamily: FontFamily.bold,
    fontSize: Fonts.fs12,
  },
  lightHorizontalLine: {
    marginTop: hp(1),
    height: 0.5,
    backgroundColor: '#838589',
    opacity: 0.5,
  },
  optionFiveBtns: {
    marginTop: hp(1),
    alignItems: 'center',
  },
  optionImage: {
    height: hp(2.5),
    width: wp(5),
  },
  optionText: {
    color: GColors.black,
    marginTop: hp(0.5),
    fontSize: Fonts.fs12,
  },
  userName: {
    fontSize: Fonts.fs16,
    color: GColors.black,
    fontFamily: FontFamily.bold,
  },
  followCount: {
    fontSize: Fonts.fs12,
    color: GColors.black,
    fontFamily: FontFamily.bold,
  },
  followBtn: {
    borderRadius: 8,
    backgroundColor: GColors.themecolor,
  },
  followText: {
    fontSize: Fonts.fs12,
    color: GColors.white,
    marginVertical: hp(1),
    marginHorizontal: wp(5),
  },
  moreTalkMain: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: hp(1.5),
  },
  MoreTalkText: {
    fontSize: Fonts.fs15,
    fontFamily: FontFamily.bold,
    color: GColors.black,
  },
  viewAllText: {
    fontSize: Fonts.fs13,
    color: GColors.black,
  },
  disciption: {
    fontSize: Fonts.fs15,
    color: GColors.black,
    fontWeight: '700',
  },
  likeText: {
    marginLeft: wp(1),
    color: GColors.black,
    fontSize: Fonts.fs12,
  },
  viewText: {
    marginLeft: wp(1),
    color: GColors.black,
    fontSize: Fonts.fs12,
  },
  nameText: {
    color: GColors.gray,
    fontSize: Fonts.fs12,
  },
  modalComment: {
    marginLeft: wp(5),
    color: GColors.black,
    fontSize: Fonts.fs18,
    fontWeight: 'bold',
  },
  commentDisc: {
    marginTop: hp(0.5),
    color: GColors.gray,
    fontSize: Fonts.fs14,
  },
  commenter: {
    color: GColors.black,
    fontSize: Fonts.fs16,
    fontFamily: FontFamily.bold,
  },
  modalProfile: {
    height: hp(16),
    aspectRatio: 1,
    marginTop: hp(3),
    alignSelf: 'center',
  },
  TextInputDescriptionView: {
    flexDirection: 'row',
    backgroundColor: '#FAFAFA',
    marginHorizontal: wp(5),
    marginTop: hp(1.5),
    height: hp(23),
    borderRadius: hp(1),
    marginBottom: hp(5),
  },

  modalMainViewStyle: {
    backgroundColor: GColors.backGround_color,
    width: wp(100),
    height: hp(100),
  },
  modalWhiteViewStyle: {
    backgroundColor: GColors.white,
    borderRadius: 40,
  },

  moreModalTouchableStyle: {
    backgroundColor: GColors.white,
    padding: wp(5),
    borderTopLeftRadius: commonBorderRadius,
    borderTopRightRadius: commonBorderRadius,
    alignItems: 'center',
  },
  moreModalTextStyle: {
    fontSize: Fonts.fs18,
    fontFamily: FontFamily.regular,
    fontWeight: '500',
    color: GColors.dark_black,
  },
  rvModalReportVideoTextStyle: {
    fontSize: Fonts.fs18,
    fontFamily: FontFamily.regular,
    fontWeight: '700',
    color: GColors.black,
    marginHorizontal: wp(5),
    marginTop: hp(3),
  },
  rvModalLineViewStyle: {
    marginTop: hp(1.5),
  },

  reportVideoRenderTextTitle: {
    fontSize: Fonts.fs14,
    fontFamily: FontFamily.regular,
    fontWeight: '500',
    color: GColors.black,
    marginStart: wp(3),
  },
  rvModalThemeTextStyle: {
    fontSize: Fonts.fs16,
    fontFamily: FontFamily.regular,
    fontWeight: '500',
    color: GColors.themecolor,
    marginStart: wp(5),
  },
  whiteViewTopLineStyle: {
    marginTop: hp(2),
    height: hp(0.6),
    width: wp(9.6),
    borderRadius: 2,
    opacity: 0.5,
    backgroundColor: GColors.gray,
    alignSelf: 'center',
  },
  bookmeModalBookTextStyle: {
    fontSize: Fonts.fs25,
    fontFamily: FontFamily.regular,
    fontWeight: '700',
    color: GColors.black,
    //marginTop: hp(2),
  },
  bookmeModalImaybeTextStyle: {
    fontSize: Fonts.fs14,
    fontFamily: FontFamily.regular,
    fontWeight: '400',
    color: GColors.gray,
    marginTop: hp(1),
  },

  bookmeModalCenterViewStyle: {
    width: wp(90),
    //alignItems: 'center',
    padding: wp(5),
    marginEnd: wp(3),
    backgroundColor: GColors.white,
    shadowColor: GColors.gray,
    shadowOffset: {width: wp(1), height: hp(0.6)},
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 5,
    borderRadius: commonBorderRadius,
    marginTop: hp(3),
  },
  bookmeModalCenterTitleTextStyle: {
    fontSize: Fonts.fs18,
    fontFamily: FontFamily.regular,
    fontWeight: '700',
    color: GColors.navy_black,
  },

  bookmeModalTextInputStyle: {
    marginTop: hp(2),
  },
  bookmeModalDateTimeTextInputStyle: {
    width: wp(38),
  },
  groupAboutTextStyle: {
    fontSize: Fonts.fs14,
    fontFamily: FontFamily.regular,
    fontWeight: '400',
    color: GColors.gray,
  },
  typeViewStyle: {
    backgroundColor: GColors.light_white,
    marginTop: hp(3),
    padding: 15,
    borderRadius: commonBorderRadius,
    flexDirection: 'row',
    alignItems: 'center',
  },
  typeTextInputStyle: {
    fontSize: Fonts.fs16,
    fontFamily: FontFamily.regular,
    fontWeight: '500',
    color: GColors.black,
  },
  messageTypeViewStyle: {
    flexDirection: 'row',
    marginBottom: hp(3),
    height: hp(7.4),
    alignItems: 'center',
    borderRadius: commonBorderRadius,
    backgroundColor: GColors.light_white,
    width: wp(90),
    alignSelf: 'center',
  },
  headerDonateBtnStyle: {
    width: wp(22),
    height: hp(4),
  },
  rowBack: {
    alignItems: 'center',
    backgroundColor: GColors.red,
    flexDirection: 'row',
    // justifyContent: "space-between",
    height: hp(5.5),
    // paddingLeft: 15,
  },
  backRightBtn: {
    alignItems: 'center',
    bottom: 0,
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    width: 75,
  },
  backRightBtnRight: {
    backgroundColor: 'red',
    right: 0,
  },
  otherViewStyle: {
    marginHorizontal: commonMarginHorizontal,
    flexDirection: 'row',
    alignItems: 'center',
  },
  otherTextStyle: {
    fontSize: Fonts.fs16,
    fontFamily: FontFamily.regular,
    fontWeight: '900',
    color: GColors.black,
  },
  speedTextStyle: {
    fontSize: Fonts.fs15,
    fontFamily: FontFamily.regular,
    fontWeight: '500',
    color: GColors.white,
    marginStart: wp(5),
    marginBottom: hp(1),
  },
  commentBookingTextStyle: {
    color: GColors.gray,
    fontFamily: FontFamily.regular,
  },
  speedModalTextStyle: {
    color: GColors.white,
    marginStart: wp(2),
    fontSize: Fonts.fs14,
  },
  video: {
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  headerBackIconStyle: {
    transform: [{rotate: '90deg'}],
    width: screenHeight,
  },
  editTalkTextStyle: {
    fontSize: Fonts.fs19,
    fontFamily: FontFamily.bold,
    color: GColors.black,
    marginVertical: hp(1),
  },
  talkTitleDesTextStyle: {
    fontSize: Fonts.fs15,
    fontFamily: FontFamily.regular,
    fontWeight: '600',
    color: GColors.black,
  },
  talkDetailsModalTextInputStyle: {
    marginVertical: hp(1.5),
  },
  nextBtnStyle: {
    flex: 1,
    //width: wp(25),
    //marginHorizontal: commonMarginHorizontal
    marginBottom: hp(2),
  },
  mainViewStyle: {
    flex: 1,
  },
  mainWhiteViewStyle: {
    backgroundColor: Colors.white,
    borderTopLeftRadius: wp(6),
    alignItems: 'center',
    borderTopRightRadius: wp(6),
  },
  whiteViewTopLineStyle: {
    marginTop: hp(1.4),
    height: hp(0.6),
    width: wp(9.6),
    borderRadius: 2,
    opacity: 0.5,
    backgroundColor: Colors.gray,
  },
  profileImageStyle: {
    height: wp(30),
    aspectRatio: 1,
    borderRadius: 100,
  },
  donatetoTextStyle: {
    fontSize: Fonts.fs24,
    fontFamily: FontFamily.regular,
    fontWeight: '700',
    color: Colors.black,
    marginTop: hp(2.5),
  },
  yourgenerousTextStyle: {
    fontSize: Fonts.fs16,
    fontFamily: FontFamily.regular,
    fontWeight: '500',
    color: Colors.gray,
    textAlign: 'center',
    marginTop: hp(1),
  },
  donationRenderTouchableStyle: {
    backgroundColor: Colors.themecolor,
    padding: wp(3),
    paddingHorizontal: wp(7),
    borderRadius: commonBorderRadius,
    marginEnd: wp(2),
  },
  donationRenderPriceTextStyle: {
    fontSize: Fonts.fs16,
    fontFamily: FontFamily.regular,
    fontWeight: '700',
    color: Colors.white,
  },
  headerRightTouchableStyle: {
    backgroundColor: Colors.themecolor,
    padding: 10,
    borderRadius: commonBorderRadius,
  },
  modalContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});