Untitled
unknown
plain_text
2 years ago
107 kB
5
Indexable
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',
},
});
Editor is loading...