Untitled
unknown
plain_text
2 months ago
36 kB
6
Indexable
Never
// 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