Untitled
unknown
plain_text
2 years ago
21 kB
0
Indexable
Never
// Customizable Area Start
// @ts-nocheck
// @ts-ignore
import React from "react";
import {
StyleSheet,
Text,
TouchableOpacity,
View,
ScrollView,
Platform,
StatusBar,
SafeAreaView,
Dimensions,
FlatList,
ImageBackground,
Modal
} from "react-native";
import { SvgXml } from 'react-native-svg';
import COLOR_CONST, { FONTS } from "framework/src/AppFonts";
import FastImage from "react-native-fast-image";
import Apptheme from "../../../HamburgerMenu/src/Apptheme";
const { height, width } = Dimensions.get('screen')
import RadioAudioPlayerController, {
Props,
configJSON
} from "./RadioAudioPlayerController";
import Scale from "../../../../components/src/Scale";
import { screenHeight, screenWidth } from "framework/src/Dimension";
import AppHeaderAudioplayer from "../../../../components/src/AppHeaderAudioplayer";
import { COLORS } from "framework/src/Globals";
import {
closeChevron, greenhearticon,
dashIcon, heartfilled, pausesvg, playsvg, whitePausebig
} from "../../../HamburgerMenu/src/assets";
import MenuOfStationEdit from "../../../../components/src/MenuOFStationEdit";
import { Divider, Icon, ListItem, Slider } from "react-native-elements";
import { primaryColor } from "framework/src/Utilities";
import Carousel from 'react-native-snap-carousel'
import { frame } from "../assets";
export default class RadioAudioPlayer extends RadioAudioPlayerController {
constructor(props: Props) {
super(props);
}
_renderItem = ({ item, index }: any) => {
return (
<>
<View style={styles.swiperWrap}>
<FastImage source={{ uri: item.attributes.image_url }}
style={{ borderRadius: Scale(10), height: Scale(200), width: Scale(200) }}
resizeMode='contain' />
</View>
</>
);
}
render() {
const BACKGROUND_COLOR = ['rgb(239,140,158)', 'rgb(105,193,205)']
return (
<>
<MyStatusBar backgroundColor="transparent" barStyle="light-content" />
<View style={{ flex: 1, backgroundColor: '#1C1C24' }}>
<ImageBackground style={styles.container} source={this.state.bgimage !== null ? { uri: this.state.bgimage } : frame}>
<ScrollView
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="always"
contentContainerStyle={{ flexGrow: 1 }}
style={styles.scrollcontainer}>
<View style={{ flex: 1, }}>
<AppHeaderAudioplayer
testID="app"
bgcolor={COLORS.TRANSPARENT}
left={
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
testID="handlesBackNavigtion"
activeOpacity={1} onPress={() => this.handleBackNavigation()}
style={styles.leftIconViewSty}>
<FastImage
source={closeChevron}
resizeMode="contain" style={styles.backIconeSty} />
</TouchableOpacity>
<Text style={styles.onBtnTxtSty}>{this.state.radioName}</Text>
</View>
}
right={() => (
this.state.showSubscibe && !this.state.loader ? (
<TouchableOpacity
testID="right"
onPress={() => this.props.navigation.navigate("EditYourRadioStation", {
id: this.state.radioId
})}
style={[styles.songContainView, { backgroundColor: "transparent" }]}
>
<Text style={[styles.songNameTxtSty, { color: "#fff" }]}>Edit</Text>
</TouchableOpacity>
)
:
null
)}
/>
{!this.state.loader ?
<>
<View>
<ListItem
testID="ListItem"
containerStyle={{ alignItems: 'flex-start', backgroundColor: 'trasparent', }}
leftElement={
() => (
<View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ marginTop: Platform.OS === 'ios' ? -Scale(5) : -Scale(18), flexDirection: 'row', alignItems: 'center' }}>
<Text numberOfLines={1} style={styles.curatedName} >Curated by: </Text>
<View style={styles.box}>
<Text style={styles.curatedbyName}>{this.state.curatedBy}</Text>
</View>
</View>
{/* <Text numberOfLines={1} style={styles.curatedName} >{this.state.numOfListerns} Listeners</Text> */}
<TouchableOpacity
// onPress={() => this.deleteRadio()}
onPress={() => this.setState({ showDeleteModal: true })
}
style={{ borderColor: '#FFF', borderRadius: Scale(8), borderWidth: Scale(1), paddingHorizontal: Scale(13), paddingVertical: Scale(4) }}>
<Text style={[{
color: "#fff",
fontSize: Scale(14),
letterSpacing: 1,
fontFamily: FONTS.RobotoCondensedRegular,
fontWeight: '400'
}]}>Delete</Text>
</TouchableOpacity>
</View>
<Divider style={styles.divider} />
<View style={{ marginTop: Scale(10) }}>
<View style={{ marginRight: Scale(25) }}>
<Text style={styles.curatedName} >{this.state.radiodescription}</Text>
</View>
</View>
<View style={{ marginTop: Scale(10) }}>
<FlatList
testID="genre"
data={this.state.genre}
numColumns={5}
renderItem={({ item, index }) => (
<Text style={styles.genres} >#{item?.attributes?.name} </Text>
)}
/>
</View>
</View>
)
}
/>
</View>
<View >
<Carousel
ref={(c) => { this.carouselRef = c; }}
data={this.state.selectedsong}
renderItem={this._renderItem}
horizontal={true}
firstItem={0}
loop={false}
layout={'default'}
loopClonesPerSide={10}
autoplayDelay={500}
autoplayInterval={3000}
sliderWidth={width - 15}
sliderHeight={150}
itemWidth={Scale(200)}
onSnapToItem={(index: any) => this.handleSwitch(index)}
/>
</View>
<View style={styles.imageView1}>
<View
style={{ flexDirection: "row", justifyContent: 'space-between' }}
>
<Text numberOfLines={1} style={[styles.titleName, { color: Apptheme.getsongtextcolor() }]}>
{this.state.currentSongTitle}
</Text>
<View style={{ backgroundColor: 'transparent' }}>
<TouchableOpacity>
<FastImage
resizeMode="contain"
style={styles.spotifyIcon}
source={Apptheme.getspotifyimage()}
/>
</TouchableOpacity>
</View>
</View>
<View
style={{ flexDirection: "row", justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}
>
<View>
<Text numberOfLines={1} style={[styles.author, { color: Apptheme.getsongtextcolor() }]}>{this.state.currSongArtist}</Text>
<Text numberOfLines={1} style={[styles.descriptionName]}>
{this.state.currSongDescription}
</Text>
</View>
<View>
{this.state.isLiked ?
<TouchableOpacity
testID="handleliked"
onPress={() => this.handleliked()}>
<FastImage
source={Apptheme.getwhitestaricon()}
style={styles.blankheart}
resizeMode="contain"
/>
</TouchableOpacity>
:
<TouchableOpacity
testID="greenheart"
onPress={() => this.handleliked()}>
<SvgXml
xml={greenhearticon}
style={[styles.blankheart, {
width: Scale(21),
height: Scale(21)
}]}
/>
</TouchableOpacity>
}
</View>
</View>
</View>
<View style={{ alignItems: 'center', marginTop: Platform.OS === 'ios' ? Scale(1) : Scale(10) }}>
<Slider
style={styles.slider}
minimumTrackTintColor={Apptheme.getartisttextcolor()}
thumbTintColor={Apptheme.getartisttextcolor()}
thumbStyle={[styles.thumb, { backgroundColor: Apptheme.getartisttextcolor() }]}
value={this.state.elapsedInPercent}
maximumValue={this.state.duration}
trackStyle={{ height: Scale(2) }}
maximumTrackTintColor={Apptheme.getusernameColor()}
/>
</View>
<View style={styles.rowOfCurrentTime} >
<Text style={[styles.currentTime, { color: Apptheme.getsongtextcolor() }]} >{this.state.currentTime.toFixed(0) <= 9 ? '0' + this.state.currentTime.toFixed(0) : this.state.currentTime.toFixed(0)} </Text>
<Text style={[styles.DurationTime, { color: Apptheme.getsongtextcolor() }]} >{this.state.duration.toFixed(0)} </Text>
</View>
<View style={styles.seekButton}>
<TouchableOpacity
testID="goBack"
style={{ opacity: 0.5 }} onPress={() => this.handleback(this.state.selectedsong)}>
<FastImage
resizeMode="contain"
style={styles.imagenext}
source={Apptheme.gethomepreviousicon()}
/>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.handlePlayer()}>
{this.state.isPlaying ?
<FastImage
resizeMode="contain"
style={styles.whitePausebig}
source={whitePausebig}
/>
:
<SvgXml xml={playsvg} width={Scale(50)} height={Scale(50)} />
}
</TouchableOpacity>
<TouchableOpacity style={{ opacity: 0.5 }} onPress={() => this.handlenext(this.state.selectedsong)}>
<FastImage
resizeMode="contain"
style={styles.imagenext}
source={Apptheme.gethomenexticon()}
/>
</TouchableOpacity>
</View>
</>
: null}
</View>
</ScrollView>
</ImageBackground>
</View>
<Modal
animationType='none'
transparent={true}
visible={this.state.showDeleteModal}
onRequestClose={() => this.setState({ showDeleteModal: false })}
onDismiss={() => this.setState({ showDeleteModal: false })}
>
<View style={styles.modalContentContainer}>
<View style={{ backgroundColor: '#17161F', borderRadius: Scale(20), }}>
<TouchableOpacity style={{ marginTop: Scale(9), alignItems: 'center', marginBottom: Scale(29) }}
onPress={() => this.setState({ showDeleteModal: false })}>
<FastImage
source={dashIcon}
style={styles.imageDash}
resizeMode="contain"
/>
</TouchableOpacity>
<Text
style={{
fontFamily: FONTS.RobotoCondensedRegular,
fontWeight: '700',
fontSize: Scale(16),
color: '#FFF',
textAlign: 'center',
marginBottom: Scale(55)
}}>Are you sure you want to Delete this Radio?</Text>
<View style={{ flexDirection: 'row', alignItem: 'center', justifyContent: 'space-between', marginHorizontal: Scale(31), marginBottom: Scale(56) }}>
<TouchableOpacity
onPress={() => this.setState({showDeleteModal : false})}
style={{ backgroundColor: '#292A2F', paddingVertical: Scale(4), paddingHorizontal: Scale(21), borderRadius: Scale(8) }}>
<Text style={{
color: '#FFF',
fontFamily: FONTS.RobotoCondensedRegular,
fontWeight: '700',
fontSize: Scale(20)
}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.deleteRadio()}
style={{ backgroundColor: '#FF0000', paddingVertical: Scale(4), paddingHorizontal: Scale(21), borderRadius: Scale(8) }}>
<Text style={{
color: '#FFF',
fontFamily: FONTS.RobotoCondensedRegular,
fontWeight: '700',
fontSize: Scale(20)
}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</>
);
}
}
const styles = StyleSheet.create({
modalContentContainer: {
flex: 1,
backgroundColor: "rgba(50,50,50,0.6)",
justifyContent: 'flex-end',
},
imageDash: {
width: Scale(21),
height: Scale(21),
marginEnd: Scale(10),
},
scrollcontainer: {
flex: 1,
backgroundColor: 'transparent',
height: height,
width: width,
},
container: {
flex: 1,
backgroundColor: '#1C1C24',
height: Platform.OS === 'ios' ? screenHeight : '105%',
width: width,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
},
leftIconViewSty: {
height: Scale(30),
width: Scale(30),
borderRadius: Scale(30),
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
backIconeSty: {
width: Scale(40),
height: Scale(40),
},
threeDotsImgSty: {
width: Scale(30),
height: Scale(30),
},
radioName: {
color: "#fff",
fontWeight: '900',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(30),
letterSpacing: 1
},
blankheart: {
width: Scale(25),
height: Scale(25),
},
heart: {
width: Scale(22),
height: Scale(22),
bottom: Scale(5),
},
curatedName: {
color: "#fff",
fontWeight: '900',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(18),
letterSpacing: 1,
},
descriptionName: {
color: "#fff",
fontWeight: '900',
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(18),
letterSpacing: 1,
lineHeight: Scale(20)
},
curatedbyName: {
color: "#D198A7",
fontWeight: '900',
marginTop: Scale(3),
marginHorizontal: Scale(8),
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(16),
},
divider: {
width: Scale(340),
height: Scale(1),
marginTop: Scale(10),
},
subscribeView: {
borderColor: 'white',
borderWidth: Scale(1),
borderRadius: Scale(10)
},
subscribeText: {
color: 'white',
margin: Scale(5),
fontSize: Scale(12)
},
genres: {
fontSize: Scale(16),
fontFamily: FONTS.AppleSymbols,
color: "#fff",
textDecorationLine: 'underline',
marginRight: Scale(15),
},
imagePause: {
width: Scale(70),
height: Scale(70),
},
imagenext: {
width: Scale(35),
height: Scale(35),
},
whitePausebig: {
width: Scale(50),
height: Scale(50),
},
spotifyIcon: {
width: Scale(25),
height: Scale(25),
},
box: {
backgroundColor: Apptheme.getsongtextcolor(),
borderRadius: Scale(12),
},
imageView1: {
flexDirection: "column",
height: Scale(60),
marginHorizontal: Scale(20),
marginTop: Scale(15),
marginBottom: Scale(10)
},
titleName: {
fontSize: Scale(21),
width: "75%",
fontWeight: 'bold',
fontFamily: FONTS.RobotoCondensedBold
},
heartFilled: {
backgroundColor: 'transparent'
},
seekButton: {
alignItems: "center",
flexDirection: "row",
justifyContent: "space-evenly",
marginTop: Scale(21),
},
rowOfCurrentTime: {
flexDirection: "row",
justifyContent: 'space-between',
},
currentTime: {
color: COLOR_CONST.toggleTxtColor,
paddingLeft: '5%'
},
DurationTime: {
color: COLOR_CONST.toggleTxtColor,
paddingRight: '5%',
},
description: {
fontSize: Scale(16),
width: '98%',
fontFamily: FONTS.RobotoCondensedRegular,
color: '#d8d8d8',
},
author: {
fontSize: Scale(20),
fontFamily: FONTS.AppleSymbols,
lineHeight: Scale(30)
},
thumb: {
backgroundColor: primaryColor,
height: Scale(13), width: Scale(13)
},
slider: {
width: "90%",
},
onBtnTxtSty: {
fontSize: Scale(24),
color: COLORS.white,
fontFamily: FONTS.RobotoCondensedBold,
marginLeft: Scale(10)
},
songNameTxtSty: {
color: '#fff',
fontSize: Scale(12),
letterSpacing: 1,
fontFamily: FONTS.RobotoCondensedRegular,
marginHorizontal: Scale(10),
marginVertical: Scale(5)
},
songContainView: {
borderWidth: Scale(1),
borderRadius: Scale(10),
borderColor: '#fff',
alignSelf: 'flex-end',
marginRight: Scale(15)
},
swiperWrap: {
alignSelf: 'center',
paddingTop: '10%'
}
})
const APPBAR_HEIGHT = Platform.OS === 'ios' ? Scale(0) : Scale(0)
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[statusBarStyle.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar
translucent
backgroundColor={backgroundColor}
{...props}
barStyle={'dark-content'}
/>
</SafeAreaView>
</View>
)
const statusBarStyle = StyleSheet.create({
statusBar: {
height: APPBAR_HEIGHT,
},
})
// Customizable Area End