Untitled

mail@pastecode.io avatar
unknown
javascript
2 years ago
12 kB
2
Indexable
Never
return (
        <>
        {
            (loading) ? null :
            <ScrollView contentContainerStyle = {{flex: 1, justifyContent: "center", marginTop: StatusBar.currentHeight}}>
                <View style = {{flexGrow: 1}}>
                    <ImageBackground source = {require("../images/beautiful.png")} style = {{backgroundColor: "red", width: "100%", height: "100%", alignSelf: "center"}} resizeMode = "contain">
                        <View style = {{flexDirection: "row", backgroundColor: "red", padding: 10, justifyContent: "center"}}>
                            <View style = {{flexDirection: "column"}}>
                                <Text style = {{fontSize: 18, color: "#484848"}}>perpetual</Text>
                                <Text style = {{fontSize: 25, color: "#484848"}}>貓狗可以不吃肉嗎?</Text>
                                <Text style = {{fontSize: 25, color: "#484848"}}>蟋蟀是新出路</Text>
                            </View>
                        </View>

                        <View style = {{flexDirection: "row", backgroundColor: "yellow", justifyContent: "space-between", padding: 5}}>
                            <View style = {{flexDirection: "column"}}>
                                <View style = {{flexDirection: "row", backgroundColor: "orange"}}>
                                    <Text style = {{color: "#484848"}}>5 May 2020</Text>
                                    <Text style = {{color: "#484848"}}> | </Text>
                                    <Text style = {{color: "#484848"}}>收聽時間 {duration} 分鐘 </Text>
                                    <Text><Camera width = {15} height = {15} color = {"#484848"}/> </Text>
                                    <Text><Sound width = {15} height = {15} color = {"#484848"}/></Text>
                                </View>
                            </View>
                            <View style = {{flexDirection: "column", width: "25%"}}>
                                <View style = {{flexDirection: "row", backgroundColor: "green", justifyContent: "space-evenly"}}>
                                    <Up  width = {15} height = {15}/>
                                    <Text style = {{color: "#484848"}}>762</Text>
                                    <Down width = {20} height = {20}/> 
                                    <Text><Feather name = "bookmark" size = {18} color = "#484848"/> </Text> 
                                </View>
                            </View>
                        </View>

                        <View style = {{flexDirection: "row", width: "100%", height: "30%", backgroundColor: "orange", padding: 5}}>
                            <Image source = {require("../images/cat.jpg")} style = {{width: "100%", height: "100%"}} resizeMode = "cover"></Image>
                        </View>

                        <View style = {{flexDirection: "row", backgroundColor: "green", justifyContent: "center", justifyContent: "space-evenly"}}>
                            <Text style = {{alignSelf: "center"}}>
                                <FontAwesome5 name = {icon} size = {25} color = "#818181" onPress = {play_music}/>
                            </Text>
                                <Slider 
                                    trackStyle = {{width: 300, height: 15, backgroundColor: "#B3B3B3", borderRadius: 10}}
                                    minimumValue = {0} 
                                    maximumValue = {1}
                                    value = {current_time} 
                                    minimumTrackTintColor = {"#20D88A"}
                                    maximumTrackTintColor = {"#B3B3B3"}
                                    onSlidingComplete = {() => console.log("complete")}
                                    thumbStyle = {{backgroundColor: "transparent"}}
                                >
                                </Slider>
                            <Text style = {{fontSize: 18, color: "#484848", alignSelf: "center"}}>{duration}</Text>
                        </View>

                        <View style = {{backgroundColor: "yellow", padding: 5, height: "26%"}}>
                            <ScrollView contentContainerStyle = {{justifyContent: "center"}}> 
                                {
                                songList.map((song, index) => {
                                    return (
                                        <>
                                        {
                                        (index == 0) ?
                                        <TouchableOpacity key = {song.id}>
                                            <View style = {{flexDirection: "row"}}>
                                                <Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {8}/>
                                            </View>
                                            <View style = {{flexDirection: "row", alignItems: "center", padding: 10}}>
                                                <Text style = {{fontSize: 18, color: "#484848"}}>{song.duration}</Text>
                                                <Text style = {{fontSize: 11, marginLeft: 10, color: "#484848"}}>{song.title}</Text>
                                            </View>
                                            <View style = {{flexDirection: "row"}}>
                                                <Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {8}/>
                                            </View>
                                        </TouchableOpacity>
                                        : 
                                        <TouchableOpacity key = {song.id}>
                                            <View style = {{flexDirection: "row", alignItems: "center", padding: 10}}>
                                                <Text style = {{fontSize: 18, color: "#484848"}}>{song.duration}</Text>
                                                <Text style = {{fontSize: 11, marginLeft: 10, color: "#484848"}}>{song.title}</Text>
                                            </View>
                                            <View style = {{flexDirection: "row"}}>
                                                <Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {8}/>
                                            </View>
                                        </TouchableOpacity>
                                        }
                                    </>
                                    )
                                })
                                }
                            </ScrollView>
                        </View>

                        <View style = {{flexDirection: "row", backgroundColor: "orange", justifyContent: "center", padding: 15}}>
                            <TouchableOpacity 
                                style = {{  
                                    width: "35%", 
                                    alignSelf: "center",
                                    alignItems: "center",
                                    borderRadius: 60, 
                                    backgroundColor: "rgba(255, 255, 255, 0.6)",
                                    padding: 10
                                }}>
                                <Text style = {{fontSize: 11, color: "#484848"}}>詳細內容</Text>
                            </TouchableOpacity>
                        </View>

                        <View style = {styles.extrasTextContainer}>
                            <Text style = {{fontSize: 13, color: "#484848"}}>更多Audio</Text>
                            <Points direction = {"horizontal"} color = {"#C4C4C4"} fill_time = {8}/>
                        </View>
                        
                        <View style = {{flexDirection: "row", justifyContent: "space-around", alignItems: "center"}}>
                            <TouchableOpacity onPress = {move_cassettes_left}>
                              <Left width = {40} height = {40}></Left>
                            </TouchableOpacity>
                            <Carousel
                                layout = {"default"}
                                sliderWidth = {200}
                                itemWidth={500}
                                data = {carousel_items}
                                renderItem={carousel_images}
                                enableSnap = {false}
                                ref = {scrollCassettes}
                                style = {{flex: 1}}
                            />
                            <TouchableOpacity onPress = {move_cassettes_right}>
                                <Right width = {40} height = {40}></Right>
                            </TouchableOpacity>
                        </View>

                        <View style = {{flexDirection: "row", justifyContent: "space-around", alignItems: "center"}}>
                            <TouchableOpacity onPress = {move_cassettes_left}>
                              <Left width = {40} height = {40}></Left>
                            </TouchableOpacity>
                            <Carousel
                                layout = {"default"}
                                sliderWidth = {200}
                                itemWidth={500}
                                data = {carousel_items}
                                renderItem={carousel_images}
                                enableSnap = {false}
                                ref = {scrollCassettes}
                                style = {{flex: 1}}
                            />
                            <TouchableOpacity onPress = {move_cassettes_right}>
                                <Right width = {40} height = {40}></Right>
                            </TouchableOpacity>
                        </View>
                    </ImageBackground>
                </View>
            </ScrollView>
        }
        </>
    )

}

const styles =  StyleSheet.create({
    container: {
    },
    songInfo: {
        height: Dimensions.get("window").height * 0.15,
        padding: 10,
    },
    imageTitleIconContainer: {
        justifyContent: "space-between", 
        flexDirection: "row", 
        justifyContent: "center",
        alignSelf: "center", 
        padding: 5,
        marginTop: -10
    },
    imageContainer: {
        flexDirection: "column", 
        height: "60%",
        backgroundColor: "yellow",
    },
    titleContainer: {
        flexDirection: "column", 
        width: Dimensions.get("window").width * 0.8, 
        maxWidth: Dimensions.get("window").width * 0.8
    },
    smallDetaisContainer: {
        flexDirection: "row", 
        justifyContent: "space-between",
        padding: 5,
        marginTop: -8
    },
    songDetails: {
        height: Dimensions.get("window").height * 0.50,
        paddingTop: 0,
        marginTop: -20
    },
    songImageContainer: {
        height: "65%", 
        width: "100%",
        padding: 15, 
        marginTop: -8
    },
    cassettesContainer: {
        flexDirection: "row", 
        justifyContent: "space-between", 
    },
    extrasTextContainer: {
        flexDirection: "row", 
        padding: 5, 
        width: Dimensions.get("window").width, 
        maxWidth: Dimensions.get("window").width
    },
    extrasContainer: {
        flexDirection: "row", 
        width: Dimensions.get("window").width, 
        maxWidth: Dimensions.get("window").width, 
    },
    extrasContentContainer:{
        flexDirection: "column", 
        width: Dimensions.get("window").width * 0.3,
        margin: 5,
        marginTop: 0
    }

});

export default ArtistSectionTest;