Untitled
unknown
plain_text
a year ago
18 kB
3
Indexable
Never
// Customizable Area Start
import React from 'react';
// Customizable Area Start
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import ChatDetailsController, { Props } from './ChatDetailsController';
import {
whiteminipause,
whiteminiplayerforward,
playbutton,
information,
} from '../../../categoriessubcategories/src/assets';
import { Icon, Header } from 'react-native-elements';
import {
GiftedChat,
Send,
InputToolbar,
Composer,
Time,
Avatar,
Message,
} from 'react-native-gifted-chat';
import FastImage from 'react-native-fast-image';
import { primaryColor } from 'framework/src/Utilities';
import Scale from 'framework/src/Scale';
import { FONTS } from 'framework/src/AppFonts';
import Apptheme from '../../../HamburgerMenu/src/Apptheme';
import { closeChevron } from '../../../HamburgerMenu/src/assets';
import { SvgXml } from 'react-native-svg';
import Miniplayer from '../MainFeed/Miniplayer';
import CustomBottomBar from '../../../../components/src/CustomBottomBar';
import ChatIcons from './ChatIcons';
const htmlReg = /<\/?[a-z][\s\S]*>/i;
// Customizable Area End
export default class ChatDetails extends ChatDetailsController {
constructor(props: Props) {
super(props);
// Customizable Area Start
// Customizable Area End
}
renderBubble = (props: any) => {
// console.log(props?.currentMessage?.post, "props?.currentMessageprops?.currentMessageprops?.currentMessageprops?.currentMessage")
return (
<>
{props?.currentMessage?.text === null ? (
<View
style={{
backgroundColor: '#22232E',
margin: 0,
padding: 0,
borderRadius: 9,
width: '71%',
}}
>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}
>
<View
style={{
justifyContent: 'space-between',
width: '100%',
flex: 1,
}}
>
<View style={{ marginLeft: Scale(18), marginTop: Scale(9) }}>
<Text
style={{
color: '#fff',
fontFamily: FONTS.RobotoCondensedBold,
fontSize: Scale(18),
}}
>
{props?.currentMessage?.post?.name}
</Text>
<Text
style={{
color: primaryColor,
fontFamily: FONTS.RobotoCondensedBold,
fontSize: Scale(12),
}}
>
{props?.currentMessage?.post?.account}
</Text>
</View>
<View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingBottom: Scale(3),
}}
>
<FastImage
source={Apptheme.getspotifyhomeicon()}
resizeMode="contain"
style={{
width: Scale(21),
height: Scale(21),
marginBottom: Scale(7),
marginLeft: Scale(16),
}}
/>
<TouchableOpacity onPress={()=> this._playSong(props?.currentMessage?.post?.spotify_post_media_url)} >
<SvgXml
style={{ marginRight: Scale(6) }}
// xml={Apptheme.getplayIconRed()}
xml={this.context?.contextId == this.state.indexId && !this.context?.isplay ? Apptheme.getpauseicon() : Apptheme.getplayIconRed()}
width={Scale(24)}
height={Scale(24)}
/>
</TouchableOpacity>
</View>
{/* <Icon name="applemusic" type='fontisto' /> */}
</View>
</View>
<FastImage
source={{
uri: (props?.currentMessage?.post?.spotify_post_image_url !== null ) ? props?.currentMessage?.post?.spotify_post_image_url : Apptheme.getspotifyhomeicon(),
}}
style={{ width: Scale(87), height: Scale(87) }}
/>
</View>
</View>
) : (
<View>
{/* <Text style={{color:'#fff'}} >{ this.state.likeArray.includes(props.currentMessage._id) ? 'correct':'incorrect' } </Text> */}
{props?.currentMessage?.user._id == this.state.userId ? (
<View
style={{
backgroundColor: '#F9705B',
flexDirection: 'row',
borderTopRightRadius: Scale(9),
borderTopLeftRadius: Scale(9),
borderBottomLeftRadius: Scale(9),
alignSelf: 'flex-end',
padding: Scale(6),
width:'90%'
}}
>
{props?.currentMessage?.is_favourite ? (
<Icon
onPress={()=> console.log('liked')}
size={21}
name="heart"
color="#fff"
type="font-awesome"
containerStyle={{
marginLeft: -Scale(9),
position: 'absolute',
bottom: -Scale(6),
}}
/>
) : null}
<Text
style={{
color: '#fff',
fontFamily: FONTS.AppleSymbols,
letterSpacing: 1,
fontSize: Scale(18),
marginLeft: Scale(9),
}}
>
{props?.currentMessage?.text}{' '}
</Text>
</View>
) : (
<View
style={{
backgroundColor: '#22232E',
flexDirection: 'row',
justifyContent: 'space-between',
borderTopRightRadius: Scale(9),
borderTopLeftRadius: Scale(9),
borderBottomLeftRadius: Scale(9),
alignSelf: 'flex-start',
padding: Scale(9),
// marginTop: Scale(51),
width:'90%'
}}
>
{this.state.likeArray.includes(props?.currentMessage._id) ? (
<View
style={{
position: 'absolute',
bottom: -Scale(6),
right: 3,
marginTop: Scale(21),
}}
>
{this.state.cableCon !== null ? <ChatIcons
cable={this.state?.cableCon}
likeid={props?.currentMessage._id}
/>:null }
</View>
) : (
// <Icon
// size={Scale(21)}
// name="heart"
// color="#fff"
// type="font-awesome"
// containerStyle={{
// position: 'absolute',
// bottom: -Scale(6),
// right: 2,
// marginTop: Scale(21),
// }}
// />
<View
style={{
position: 'absolute',
bottom: -Scale(6),
right: 3,
marginTop: Scale(21),
}}
>
<ChatIcons cable={this.state?.cableCon} likeid={props?.currentMessage._id} />
</View>
)}
<Text
style={{
color: '#fff',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(18),
letterSpacing: 1,
// marginLeft:Scale(9),
}}
>
{props?.currentMessage?.text}{' '}
</Text>
</View>
)}
<View style={{ paddingTop: Scale(6), marginTop: Scale(6) }}>
{props?.currentMessage?.user._id != this.state.userId ? (
<View style={{ flexDirection: 'row' }}>
{props?.currentMessage?.user._id != this.state.userId ? (
<Text
style={{
color: '#707082',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(14),
}}
>
{props?.currentMessage?.user.name}{' '}
<Text style={{ fontSize: Scale(3), color: '#707082' }}>
{'\u2B24'}
</Text>
</Text>
) : null}
<Time
{...props}
timeTextStyle={{
right: {
color: '#707082',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(15),
},
left: {
color: '#707082',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(15),
alignSelf: 'flex-start',
},
}}
/>
</View>
) : (
<Time
{...props}
timeTextStyle={{
right: {
color: '#707082',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(15),
},
left: {
color: '#707082',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(15),
alignSelf: 'flex-start',
},
}}
/>
)}
</View>
</View>
)}
</>
);
};
renderAvatar = (props: any) => {
return (
<Avatar
imageStyle={{}}
containerStyle={{
left: {},
}}
renderAvatar={() => (
<FastImage
source={{ uri: props?.currentMessage?.user?.avatar }}
style={{
height: Scale(29),
width: Scale(29),
borderRadius: 51,
borderColor: '#fff',
borderWidth: 2,
}}
/>
)}
{...props}
/>
);
};
customMessage = (props: any) => {
return (
<Message
{...props}
containerStyle={{
left: {
position: 'relative',
margin: 0,
padding: 0,
// flexDirection: 'row-reverse',
},
right: {
// flexDirection: 'row-reverse',
},
}}
/>
);
};
renderInputToolbar = (props: any) => {
return (
<InputToolbar
avoidKeyboard={true}
optionTintColor="#fff"
{...props}
containerStyle={{
backgroundColor: '#111017',
paddingTop: 6,
borderTopColor: 'transparent',
}}
/>
);
};
renderComposer = (props: any) => {
return (
<Composer
textInputProps={{maxLength:2,}}
// onTextChanged={(e)=>
// this._countCharacterLimit(e)
// // {this.setState({imputMessage:e})
keyboardAppearance
// }
{...props}
textInputStyle={{
color: '#fff',
fontFamily: FONTS.AppleSymbols,
// fontSize: Scale(21),
}}
/>
);
};
renderSend = (props: any) => {
return (
<Send
{...props}
disabled={!props?.text}
containerStyle={{
// width: 44,
// height: 44,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 4,
}}
>
<SvgXml
xml={Apptheme.getrepostsicon()}
width={Scale(31)}
height={Scale(31)}
style={{ alignSelf: 'center', marginTop: -Scale(15) }}
/>
</Send>
);
};
// Customizable Area End
// Customizable Area Start
render() {
return (
//Merge Engine DefaultContainer
<View style={{ backgroundColor: '#17171D', flex: 1 }}>
<Header
containerStyle={{
backgroundColor: '#17171D',
borderBottomColor: '#17171D',
// marginTop: Scale(21),
maxHeight: Scale(120),
flex: 1,
}}
rightComponent={
<>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate('SenderInfoScreen', {
profileName: this.state.name,
profilePhoto: this.state.profilePhoto,
handleName: this.state.handleName,
id:this.state.msgID
})
}
>
<SvgXml
style={{ marginRight: Scale(6) }}
xml={information}
// xml={this.context?.contextId == this.state.indexId && !this.context?.isplay ? Apptheme.getpauseicon() : Apptheme.getplyericon()}
width={Scale(24)}
height={Scale(24)}
/>
</TouchableOpacity>
</>
}
centerComponent={
<>
<FastImage
source={{ uri: this.state?.profilePhoto }}
style={{
width: Scale(56),
height: Scale(56),
borderRadius: 51,
borderWidth: 2.5,
borderColor: '#fff',
}}
/>
<View style={{ height: Scale(5) }} />
<Text
style={{
color: '#fff',
fontFamily: FONTS.RobotoCondensedBold,
fontSize: Scale(21),
}}
>
{this.state.name}
</Text>
</>
}
leftComponent={
<>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<FastImage
style={{ width: Scale(45), height: Scale(45) }}
source={closeChevron}
/>
</TouchableOpacity>
</>
}
/>
<GiftedChat
loadEarlier={true}
onLoadEarlier={()=> console.log('Loading earlier')}
placeholder="Send a Message..."
placeholderTextColor="#707082"
renderMessage={(props) => this.customMessage(props)}
renderComposer={this.renderComposer}
renderInputToolbar={this.renderInputToolbar}
renderBubble={this.renderBubble}
renderSend={this.renderSend}
renderAvatar={this.renderAvatar}
// showAvatarForEveryMessage
// renderCustomView={this.renderCustomView}
renderTime={() => {
return null;
}}
messages={this.state.messages}
onSend={(messages) => this._sendMessage(messages)}
user={{
_id: this.state.userId,
}}
alwaysShowSend
/>
<View style={styles.minplayerview}>
<Miniplayer
songId={this.context?.playSongData?.songId}
playerIcon={
this.state.platform === 'apple'
? Apptheme.getapplemusic()
: Apptheme.getspotifyhomeicon()
}
SongImage={this.context?.playSongData?.songImageUrl}
songName={this.context?.playSongData?.songName}
artistName={this.context?.playSongData?.artistName}
playerimg={this.context?.playSongData?.playerimage}
heart={this.state.platform}
pausePlay={whiteminiplayerforward}
next={this.context?.isplay ? playbutton : whiteminipause}
sliderValue={this.state.sliderValue}
onpressPlayPause={this.playPauseSong}
type={this.context?.playSongData?.type}
RadioName={this.context?.playSongData?.RadioName}
/>
<CustomBottomBar
showCreatepost={false}
selectedTab={'Chats'}
onCreatePost={(value) => {
this.setState({ showCreatepost: value });
}}
navigation={this.props.navigation}
onRefresh={() =>
this.props.navigation.navigate('FeedBlock', { index: 1 })
}
/>
</View>
</View>
//Merge Engine End DefaultContainer
);
}
// Customizable Area End
}
// Customizable Area Start
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
width: '100%',
},
minplayerview: {
width: '100%',
backgroundColor: Apptheme.getfeedheaderColor(),
},
});
// Customizable Area End
// Customizable Area End