Untitled
unknown
plain_text
2 years ago
36 kB
9
Indexable
// Customizable Area Start
// @ts-nocheck
// @ts-ignore
import React from 'react';
import {
Text,
View,
TouchableOpacity,
ImageBackground,
FlatList,
Dimensions,
Platform,
StatusBar,
StyleSheet,
SafeAreaView,
ActivityIndicator,
} from 'react-native';
import { Icon } from 'react-native-elements';
import CustomAlert from '../../../../components/src/CustomAlert';
import SmallCard from '../../../categoriessubcategories/src/MainFeed/SmallCard';
import { responsiveWidth,
responsiveScreenHeight,
responsiveFontSize,
responsiveHeight } from 'react-native-responsive-dimensions';
import { deviceBasedDynamicDimension } from 'framework/src/Dimension';
import {
whiteMiniPause,
playbutton,
} from '../assets';
import FastImage from 'react-native-fast-image';
import styles from './FeedBlockProfileStyle';
import Apptheme from '../../../HamburgerMenu/src/Apptheme';
import FeedBlockProfileController, {
Props,
} from './FeedBlockProfileController';
import {
Scale
} from '../../../../framework/src/Utilities';
import FeedCardNewComponent from '../../../categoriessubcategories/src/MainFeed/FeedCardNewComponent';
import CustomBottomBar from '../../../../components/src/CustomBottomBar';
import Miniplayer from '../../../categoriessubcategories/src/MainFeed/Miniplayer';
import EditProfile from '../../../CustomisableUserProfiles/src/EditProfile';
import { menuicon, heartIcon } from '../../../HamburgerMenu/src/assets';
import RBSheet from 'react-native-raw-bottom-sheet';
import verticalScale from '../../../../framework/src/Scale';
import { Card, ListItem } from 'react-native-elements';
import CustomBottomBarClass from '../../../../components/src/CustomBottomBarClass';
import { whiteMiniPlayerForward } from '../../../categoriessubcategories/src/assets';
import { configJSON } from './CustomisableUserProfiles3Controller';
export default class MyProfile extends FeedBlockProfileController {
isEdit: any;
likeFunction: any;
frameHeight: number;
contentHeight: any;
constructor(props: Props) {
super(props);
}
renderFeedcard = (item: any, index: any) => {
const data = {item:item}
return (
<FeedCardNewComponent
navigation={this.props.navigation}
isProfile={true}
data={data}
Repost={this.handleRepost}
showtrending={false}
share={this.sharePostNotification}
hastag={(id: any) => this.hastag(id)}
deletepost={this.handleDeleteFeedPost}
editpost={() => this.editpost(itemFeed)}
array={this.state.postarray}
index={index}
onPressGenre={(e) =>
this.redirectToGenre(e)
}
/>
);
};
renderFavcard = (item: any, index: any) => {
const data = {item:item}
return (
<FeedCardNewComponent
navigation={this.props.navigation}
isProfile={true}
data={data}
Repost={this.handleRepost}
showtrending={false}
share={this.sharePostNotification}
hastag={(id: any) => this.hastag(id)}
deletepost={this.handleDeleteFeedPost}
editpost={() => this.editpost(itemFeed)}
array={this.state.favArray}
index={index}
onPressGenre={(e) =>
this.redirectToGenre(e)
}
/>
);
};
renderGenre = (item: any, index: any) => {
return (
<>
{item?.attributes?.is_following ?
<TouchableOpacity onPress={() => this.props.navigation.navigate("FeedBlock", {
index: 3,
item: item
})}
style={{marginVertical:responsiveWidth(0.9)}}
>
<View style={styles.viewOne}>
<Text
style={[
styles.genretext,
{ color: item?.attributes?.is_following ? '#F9705B' : 'white' },
]}
>
#{item?.attributes?.name}
</Text>
</View>
</TouchableOpacity>
: null}
</>
);
};
renderGenrelist = (item: any, index: any) => {
return (
<TouchableOpacity
style={styles.genreTouch}
>
<Text style={styles.booxgenretxt}>{item?.attributes?.name}</Text>
</TouchableOpacity>
);
};
playlistList = (item: any) => {
return (
<>
<TouchableOpacity activeOpacity={1}>
<Card containerStyle={[styles.container3, { borderColor: this.state.clickedPlaylist === item ? '#F9705B' : 'transparent' }]} wrapperStyle={styles.wraperStyle} >
<ListItem
containerStyle={styles.songListItem}
leftIcon={
<View style={{ flex: 0.4 }}>
{
item?.image ?
(<FastImage
source={{
uri: item?.image
}}
style={styles.rightAvatar}
resizeMode="contain"
/>) : (<FastImage
source={this.placeholderImage}
style={styles.rightAvatar}
resizeMode="contain"
/>)
}
</View>
}
title={
<View >
<Text numberOfLines={1} style={[styles.songName, { color: Apptheme.getsongTextColor() }]}>{item?.name} </Text>
<Text numberOfLines={1} style={[styles.authorName, { color: Apptheme.getusernameColor() }]}>{item?.owner?.name} </Text>
<Text numberOfLines={1} style={[styles.authorName, { color: Apptheme.getusernameColor() }]}>No of tracks: {item?.tracks?.count} </Text>
<View style={{ alignItems: 'flex-end', justifyContent: 'flex-end', marginTop: Scale(10), }}>
<FastImage
source={Apptheme.getplyerIcon()}
resizeMode="contain"
style={styles.spotifyIcon1}
/>
</View>
</View>
}
/>
</Card>
</TouchableOpacity>
</>
)
}
AppleMusicplaylistList = (item: any) => {
return (
<>
<TouchableOpacity activeOpacity={1}>
<Card containerStyle={[styles.container3, { borderColor: this.state.clickedPlaylist === item ? '#F9705B' : 'transparent' }]} wrapperStyle={styles.wraperStyle} >
<ListItem
containerStyle={styles.songListItem}
leftIcon={
<View style={{ flex: 0.4 }}>
{
item?.image ?
(<FastImage
source={{
uri: item?.image
}}
style={styles.rightAvatar}
resizeMode="contain"
/>) : (<FastImage
source={this.placeholderImage}
style={styles.rightAvatar}
resizeMode="contain"
/>)
}
</View>
}
title={
<View >
<Text numberOfLines={1} style={[styles.songName, { color: Apptheme.getsongTextColor() }]}>{item?.name} </Text>
<Text numberOfLines={1} style={[styles.authorName, { color: Apptheme.getusernameColor() }]}>{item?.owner} </Text>
<Text numberOfLines={1} style={[styles.authorName, { color: Apptheme.getusernameColor() }]}>No of tracks: {item?.total_tracks} </Text>
<View style={{ alignItems: 'flex-end', justifyContent: 'flex-end', marginTop: Scale(10), }}>
<FastImage
source={Apptheme.getplyerIcon()}
resizeMode="contain"
style={styles.spotifyIcon1}
/>
</View>
</View>
}
/>
</Card>
</TouchableOpacity>
</>
)
}
handleScroll = (e: any) => {
this.setState({ height: e.nativeEvent.contentOffset.y });
};
menuIcon = () => {
return(
<View style={styles.imagebgView}>
<TouchableOpacity
style={styles.menuView}
onPress={() => this.handleMenuIcon()}
testID="menu-icon"
>
<FastImage style={styles.image_backImage} source={menuicon} />
</TouchableOpacity>
</View>
)
}
imageDp = () => {
return(
<View style={styles.profileImageView}>
<FastImage
style={styles.image_DP}
// source={{ uri: this.context?.userProfileData?.photoUrl }}
source={this.context?.userProfileData?.photoUrl ?{ uri: this.context?.userProfileData?.photoUrl } : require('../../assets/dymmyUser.png') }
/>
</View>
)
}
userNameText = () => {
return(
<Text numberOfLines={1} style={styles.textlabel_AshfakSayemText}>
{this.context?.userProfileData?.userName}
</Text>
)
}
editProfileText = () => {
return(
<TouchableOpacity testID="EdutProfile" onPress={() => this.handleEditProfile()}>
<View style={styles.follow}>
<Text style={styles.follow_text}>{configJSON.editProfile} </Text>
</View>
</TouchableOpacity>
)
}
imageBackground =() => {
return(
<ImageBackground
resizeMode="cover"
style={[
styles.image_BitmapImage,
{
backgroundColor: !this.state.coverImage || this.state.coverImage === null
? Apptheme.getfeedHeaderBgcolor()
: '#000',
},
]}
source={
{ uri: this.state.coverImage ? this.state.coverImage : null }
}
>
{this.menuIcon()}
{this.imageDp()}
<View style={{ width: Scale(50) }}></View>
<View style={styles.usernameView}>
{this.userNameText()}
{this.editProfileText()}
</View>
</ImageBackground>
)
}
statusBar = () => {
return(
<StatusBar translucent backgroundColor="transparent" />
)
}
handleNameText = () => {
return(
<Text style={styles.textlabel_handleText} numberOfLines={1}>
@{this.state.handle}
</Text>
)
}
userFollowingText = () => {
return(
<TouchableOpacity
testID="followngBtn"
onPress={() => this.navigateFollowing()}
>
<Text
style={[
styles.textlabel_6105Text,
{ color: Apptheme.getfollowingcolor() },
]}
>
{this.state.userFollowing}
</Text>
</TouchableOpacity>
)
}
followingText = () => {
return(
<Text style={styles.textlabel_FollowersText}>{configJSON.followingText}:</Text>
)
}
userFollowerText = () => {
return(
<TouchableOpacity
testID="followerBtn"
onPress={() => this.navigateFollower()}
>
<Text
style={[
styles.textlabel_346Text,
{ color: Apptheme.getfollowingcolor() },
]}
>
{this.state.userFollower}
</Text>
</TouchableOpacity>
)
}
followerView = () => {
return(
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: deviceBasedDynamicDimension(2, true, 1),
marginBottom: deviceBasedDynamicDimension(15, true, 1),
}}
>
<Text style={styles.textlabel_FollowersText}>{configJSON.followerText}:</Text>
{this.userFollowerText()}
</View>
)
}
smallCardView = () => {
return(
<View
style={{ width: '58%', marginTop: '2%', right: Scale(15) }}
>
<SmallCard
songName={this.state.songName}
authorName={this.state.artistName}
songImage={this.state.imageUrl}
placeholderImage={this.placeholderImage}
priority={FastImage.priority.high}
spotify={this._checkPlayMusic}
musicIcon={
this.context.platform === 'apple'
? Apptheme.getapplemusic()
: Apptheme.getspotifyhomeicon()
}
spotify_track_id={this.state.selectedSongTrack_idInput}
playIcon={
this.context.contextId == this.state.indexId &&
!this.context.isplay
? Apptheme.getProfilePauseIcon()
: Apptheme.getProfilePlayIcon()
}
/>
</View>
)
}
genreView = () => {
return(
<View style={styles.genreBoxstyle}>
<FlatList
testID="Genre"
data={this.state.favGenre}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) =>
this.renderGenrelist(item, index)
}
keyExtractor={(item, index) => index.toString()}
style={{ marginRight: Scale(3) }}
/>
<View
style={{
marginRight: Scale(5),
alignSelf: 'center',
bottom: Scale(5),
}}
>
<TouchableOpacity
testID="ShowHideAbutText"
onPress={() => this.ShowHideTextComponentView()}
>
<Icon
name={
this.state.status
? 'chevron-thin-up'
: 'chevron-thin-down'
}
type="entypo"
color="rgb(103,103,113)"
size={Scale(15)}
containerStyle={{}}
/>
</TouchableOpacity>
</View>
</View>
)
}
customBottomBar = () => {
return(
<CustomBottomBarClass
showCreatepost={this.state.showCreatepost}
testID={'testing'}
selectedTab={'MyProfile'}
onCreatePost={(value) => {
this.setState({ showCreatepost: value });
}}
navigation={this.props.navigation}
onRefresh={() =>
this.props.navigation.navigate('FeedBlock', { index: 1 })
}
/>
)
}
miniPlayerView = () => {
return(
<View
style={[
styles.miniplayerstyle,
{
backgroundColor: "transparent",
},
]}
>
<Miniplayer
songId={this.context?.playSongData}
playerIcon={
this.context.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={heartIcon}
pausePlay={whiteMiniPlayerForward}
next={this.context.isplay ? playbutton : whiteMiniPause}
onpressPlayPause={this.playPauseSong}
type={this.context?.playSongData?.type}
RadioName={this.context?.playSongData?.RadioName}
/>
</View>
)
}
render() {
const { guideList, eventList, exhibitionList, playList } = this.state;
return (
<>
<View style={[styles.container, { backgroundColor: Apptheme.getprofileBgColor()}]}>
{this.imageBackground()}
<View
style={[
styles.StandardProfileGenreView,
{ backgroundColor: Apptheme.getprofileBgColor() },
]}
>
{this.statusBar()}
<View>
<View
style={{
flexDirection: 'row',
width: '100%',
}}
>
<View
style={{
width: '36%',
marginLeft: deviceBasedDynamicDimension(15, true, 1),
marginRight: deviceBasedDynamicDimension(7, true, 1),
}}
>
{this.handleNameText()}
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: deviceBasedDynamicDimension(2, true, 1),
}}
>
{this.followingText()}
{this.userFollowingText()}
</View>
{this.followerView()}
</View>
{this.smallCardView()}
</View>
</View>
</View>
{this.genreView()}
{this.state.status ? (
<View style={styles.genrebox}>
<Text
style={{
fontSize: Scale(12),
fontFamily: 'AirbnbCerealApp-Book',
color: Apptheme.getsongTextColor(),
left: Scale(2),
}}
>
{this.state.aboutText}
</Text>
</View>
) : null}
<View
style={{
flex: 1,
position: 'relative',
left: 0,
right: 0,
marginTop:
this.state.status && this.state.headerShown
? Scale(70)
: Scale(0),
height: '100%',
}}
>
<View
style={[
styles.toggleContainerbox,
{
backgroundColor: Apptheme.getprofiletogglecolor(),
},
]}
>
<TouchableOpacity
onPress={() => {
this.refresh();
}}
testID="refresh"
style={{ marginLeft: Scale(15) }}
>
<Text
style={[
guideList
? [
styles.pressFeedText,
{ color: Apptheme.getpressFeedText() },
]
: [
styles.feedTxt,
{ color: Apptheme.getusernameColor() },
],
]}
>
POSTS
</Text>
</TouchableOpacity>
<TouchableOpacity
testID="PlaylistButton"
onPress={() => {
this.toggleTabsButtons(1);
}}
>
<Text
style={[
playList
? [
styles.pressFeedText,
{ color: Apptheme.getpressFeedText() },
]
: [
styles.feedTxt,
{ color: Apptheme.getusernameColor() },
],
]}
>
PLAYLISTS
</Text>
</TouchableOpacity>
<TouchableOpacity
testID="GenreButton"
onPress={() => {
this.toggleTabsButtons(2);
}}
>
<Text
style={[
eventList
? [
styles.pressFeedText,
{ color: Apptheme.getpressFeedText() },
]
: [
styles.feedTxt,
{ color: Apptheme.getusernameColor() },
],
]}
>
GENRES
</Text>
</TouchableOpacity>
<TouchableOpacity
testID="FavouritesButton"
onPress={() => {
this.toggleTabsButtons(3);
}}
style={{ marginRight: Scale(15) }}
>
<Text
style={[
exhibitionList
? [
styles.pressFeedText,
{ color: Apptheme.getpressFeedText() },
]
: [
styles.feedTxt,
{ color: Apptheme.getusernameColor() },
],
]}
>
FAVORITES
</Text>
</TouchableOpacity>
</View>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
}}
>
<View
style={{
flex: 1,
}}
>
{this.state.showGenre ? (
<View style={{ marginTop: Scale(25) }}>
<View
style={{
marginTop: Scale(-5),
height: Scale(320),
marginLeft: Scale(35),
}}
>
<FlatList
testID="GenreArray"
data={this.state.genrearray}
showsVerticalScrollIndicator={false}
renderItem={({ item, index }) =>
this.renderGenre(item, index)
}
keyExtractor={(item, index) => index.toString()}
scrollEnabled={true}
onScroll={(event) => {
const scrolling = event.nativeEvent.contentOffset.y;
if (scrolling > 1) {
this.setState({ headerShown: false });
} else if (scrolling < 1) {
this.setState({ headerShown: true });
}
}}
/>
{this.state.genrearray.length === 0 && (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Apptheme.getprofileBgColor(),
alignSelf: 'center',
position: 'absolute',
top: responsiveHeight(10),
paddingRight: responsiveWidth(6.5),
}}
>
<ActivityIndicator
size="large"
color="#f9705a"
style={{
justifyContent: 'center',
alignSelf: 'center',
}}
/>
</View>
)}
</View>
</View>
) : this.state.guideList ? (
// <Text style={{color:'#fff'}} >hello</Text>
<FlatList
testID="GuidLisArray"
data={this.state.postarray}
showsVerticalScrollIndicator={false}
renderItem={({ item, index }) =>
this.renderFeedcard(item, index)
}
keyExtractor={(item, index) => index.toString()}
scrollEnabled={true}
ListEmptyComponent={() => null}
onScroll={(event) => {
const scrolling = event.nativeEvent.contentOffset.y;
if (scrolling > 0.1) {
this.setState({ headerShown: false });
} else if (scrolling < 1) {
this.setState({ headerShown: true });
}
}}
/>
// <View>
// <FlatList
// testID="GuidLisArray"
// data={this.state.postarray}
// showsVerticalScrollIndicator={false}
// renderItem={({ item, index }) =>
// this.renderFeedcard(item, index)
// }
// keyExtractor={(item, index) => index.toString()}
// scrollEnabled={true}
// ListEmptyComponent={() => null}
// onScroll={(event) => {
// const scrolling = event.nativeEvent.contentOffset.y;
// if (scrolling > 0.1) {
// this.setState({ headerShown: false });
// } else if (scrolling < 1) {
// this.setState({ headerShown: true });
// }
// }}
// />
// {this.state.postarray.length === 0 && (
// <View
// style={{
// justifyContent: 'center',
// alignItems: 'center',
// position: 'absolute',
// top: responsiveHeight(15),
// bottom: 0,
// left: 0,
// right: 0,
// backgroundColor: 'rgba(0, 0, 0, 0.5)',
// }}
// >
// <ActivityIndicator
// size="large"
// color="#f9705a"
// />
// </View>
// )}
// </View>
) : this.state.exhibitionList ? (
<><FlatList
testID="favListArray"
data={this.state.favArray}
showsVerticalScrollIndicator={false}
renderItem={({ item, index }) => this.renderFavcard(item, index)}
keyExtractor={(item, index) => index.toString()}
scrollEnabled={true}
onScroll={(event) => {
const scrolling = event.nativeEvent.contentOffset.y;
if (scrolling > 0.1) {
this.setState({ headerShown: false });
} else if (scrolling < 1) {
this.setState({ headerShown: true });
}
} } /><>
{this.state.favArray.length === 0 && (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Apptheme.getprofileBgColor(),
alignSelf: 'center',
position: 'absolute',
top: responsiveHeight(10),
paddingRight: responsiveWidth(6.5),
}}
>
<ActivityIndicator
size="large"
color="#f9705a"
style={{
justifyContent: 'center',
alignSelf: 'center',
}} />
</View>
)}
</></>
) : (
this.context.platform !== "apple" ? (
this.state.playList &&
this.state.error !== 'The access token expired' &&
this.state.error !== "Invalid access token" &&
this.state.playlistsearchList.length !== 0 ? (
<><FlatList
testID="playlistsearchList"
data={this.state.playlistsearchList}
renderItem={({ item, index }) => this.playlistList(item)}
keyExtractor={(item, index) => index.toString()}
contentContainerStyle={{ paddingBottom: Scale(100) }}
onEndReached={this._handlePostMore} />
<>
{this.state.playlistsearchList.length === 0 && (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Apptheme.getprofileBgColor(),
alignSelf: 'center',
position: 'absolute',
top: responsiveHeight(10),
paddingRight: responsiveWidth(6.5),
}}
>
<ActivityIndicator
size="large"
color="#f9705a"
style={{
justifyContent: 'center',
alignSelf: 'center',
}}
/>
</View>
)}
</>
</>
) : (
<View
style={{
backgroundColor: Apptheme.getbottomFeedBackGroundColor(),
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text
style={{
marginTop: responsiveScreenHeight(10),
alignSelf: 'center',
color: 'gray',
fontSize: responsiveFontSize(3),
}}
>
No Playlists
</Text>
</View>
)
) : (
Array.isArray(this.state.appleMusicPlaylist) &&
this.state.appleMusicPlaylist.length === 0 &&
this.state.error === "something went wrong" ? (
<>
<View
style={{
backgroundColor: Apptheme.getbottomFeedBackGroundColor(),
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text
style={{
marginTop: responsiveScreenHeight(10),
alignSelf: 'center',
color: 'gray',
fontSize: responsiveFontSize(3),
}}
>
No Playlists
</Text>
</View>
</>
) : (
<>
<FlatList
testID="playlistsearchList"
data={this.state.appleMusicPlaylist}
renderItem={({ item, index }) =>
this.AppleMusicplaylistList(item)
}
keyExtractor={(item, index) => index.toString()}
contentContainerStyle={{ paddingBottom: Scale(100) }}
onEndReached={this._handlePostMore}
/>
{this.state.appleMusicPlaylist.length === 0 && (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Apptheme.getprofileBgColor(),
alignSelf: 'center',
position: 'absolute',
top: responsiveHeight(10),
paddingRight: responsiveWidth(6.5),
}}
>
<ActivityIndicator
size="large"
color="#f9705a"
style={{
justifyContent: 'center',
alignSelf: 'center',
}}
/>
</View>
)}
</>
)
)
)}
</View>
</View>
</View>
{this.miniPlayerView()}
{this.customBottomBar()}
</View>
<RBSheet
ref={(ref) => {
this.RBSheet = ref;
}}
height={Platform.OS == 'ios' ? Scale(650) : Scale(670)}
openDuration={250}
keyboardAvoidingViewEnabled={true}
customStyles={{
container: {
justifyContent: 'center',
alignItems: 'center',
borderTopRightRadius: verticalScale(35),
borderTopLeftRadius: verticalScale(35),
marginTop: Platform.OS == 'ios' ? Scale(40) : Scale(5)
},
}}
>
<EditProfile
navigation={this.props.navigation}
close={() => this.handlecloseEditProfile()}
/>
</RBSheet>
{this.state.showNotification && this.state.message !== '' ?
<CustomAlert
message={this.state.message} />
: null}
</>
);
}
}
const { width, height } = Dimensions.get('screen');
const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? height * 0.015 : height * 0.015;
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[statusBarStyle.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar
translucent
backgroundColor={backgroundColor}
{...props}
barStyle="light-content"
/>
</SafeAreaView>
</View>
);
const statusBarStyle = StyleSheet.create({
statusBar: {
height: STATUSBAR_HEIGHT,
paddingTop: Scale(20),
},
appBar: {
backgroundColor: '#F9705B',
height: APPBAR_HEIGHT,
},
});
// Customizable Area End
Editor is loading...