Untitled

 avatar
unknown
javascript
4 years ago
14 kB
5
Indexable
 return (       
        <> 
        {
            (loading) ? null :
            <SafeAreaView style = {{flex: 1, backgroundColor: "red"}}>
            <ScrollView  style = {{flex: 1}} contentContainerStyle = {{alignItems: "center", justifyContent: "center", flex: 1, backgroundColor: "yellow", flexGrow: 1, flexWrap: "wrap"}}>
                <View style = {{flex: 1, flexGrow: 1, flexWrap: "wrap"}}>
                <ImageBackground  source = {require("../images/beautiful.png")} style = {{width: "100%", height: "100%", flex: 1}} blurRadius = {30} resizeMode = "contain" imageStyle = {{opacity: 0.5}}>
                    <View style = {styles.songInfo}>
                        <View style = {styles.imageTitleIconContainer}> 
                            <View style = {styles.titleContainer}>
                                <View style = {{flexDirection: "row"}}>
                                    <View style = {{flexDirection: "column"}}>
                                        <Text style = {{paddingLeft: 5, fontSize: 18, color: "#484848"}}>{song.title}</Text>
                                        <Text style = {{paddingLeft: 5, fontSize: 25, color: "#484848"}}>貓狗可以不吃肉嗎?</Text>
                                        <Text style = {{paddingLeft: 5, fontSize: 25, color: "#484848"}}>蟋蟀是新出路</Text>
                                    </View>
                                </View>
                            </View>
                            <View style = {{flexDirection: "column"}}>
                                <Feather name = "x" size = {20} color = "gray" />
                            </View> 
                        </View>
                        <View style = {styles.smallDetaisContainer}>
                            <View style = {{flexDirection: "column"}}>
                                <View style = {{flexDirection: "row"}}>
                                    <Text style = {{color: "#484848"}}>5 May 2020</Text>
                                    <Text style = {{color: "#484848"}}> | </Text>
                                    <Text style = {{color: "#484848"}}>收聽時間 {duration} 分鐘 </Text>
                                    <Text style = {{marginTop: 2}}><Camera width = {15} height = {15} color = {"#484848"}/> </Text>
                                    <Text style = {{marginTop: 2}}><Sound width = {15} height = {15} color = {"#484848"}/></Text>
                                </View> 
                            </View>
                            <View style = {{flexDirection: "column"}}>
                                <View style = {{flexDirection: "row"}}>
                                    <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>
                
                
                    <View style = {styles.songDetails}>
                        <View style = {styles.songImageContainer}>
                            <Image source = {require("../images/cat.jpg")} style = {{width: "100%", height: "100%"}} resizeMode = "cover"></Image>
                        </View>
                        <View style = {{width: "100%", flexDirection: "row", justifyContent: "space-around", alignItems: "center", padding: 5, marginTop: -13}}>
                            <Text><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"}}>{duration}</Text>
                        </View>
                        <View style = {{paddingLeft: 10, paddingRight: 10}}>
                            <ScrollView>
                            {
                            songList.map((song, index) => {
                                return (
                                    <>
                                    {
                                    (index == 0) ?
                                    <TouchableOpacity key = {song.id}>
                                        <View style = {{flexDirection: "row"}}>
                                            <Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {6}/>
                                        </View>
                                        <View style = {{flexDirection: "row", alignItems: "center", padding: 8}}>
                                            <Text style = {{fontSize: 11, color: "#484848"}}>{song.duration}</Text>
                                            <Text style = {{fontSize: 18, marginLeft: 10, color: "#484848"}}>{song.title} </Text>
                                        </View>
                                        <View style = {{flexDirection: "row"}}>
                                            <Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {6}/>
                                        </View>
                                    </TouchableOpacity>
                                    : 
                                    <TouchableOpacity key = {song.id}>
                                        <View style = {{flexDirection: "row", alignItems: "center", padding: 8}}>
                                            <Text style = {{fontSize: 11, color: "#484848"}}>{song.duration}</Text>
                                            <Text style = {{fontSize: 18, marginLeft: 10, color: "#484848"}}>{song.title}</Text>
                                        </View>
                                        <View style = {{flexDirection: "row"}}>
                                            <Points direction = {"horizontal"} color = {"#9b9a9a"} fill_time = {6}/>
                                        </View>
                                    </TouchableOpacity>
                                    }
                                </>
                                )
                            })
                            }
                        </ScrollView>
                    </View>

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

                    <View style = {styles.extrasTextContainer}>
                        <Text style = {{fontSize: 13, color: "#484848"}}>開聽更多其他文章</Text>
                        <Points direction = {"horizontal"} color = {"#C4C4C4"} fill_time = {5}/>
                    </View>
                    <View style = {styles.extrasContainer}>
                        <ScrollView horizontal = {true}>
                            {
                            extras.map((extra) => {
                                return  (
                                <View style = {styles.extrasContentContainer} key = {extra.id}>
                                    <ImageBackground source = {require("../images/nano.jpeg")} style = {{width: "100%", height: "100%"}} 
                                    resizeMode = "cover" imageStyle = {{opacity: 0.8, borderRadius: 5}}>
                                        <View style = {{flexDirection: "row", justifyContent: "space-between", marginTop: 2, paddingLeft: 2, paddingRight: 2, width: "100%", maxWidth: "100%"}}>
                                            <Text style = {{fontSize: 9, color: "white"}}>{extra.date}</Text>
                                            <Text style = {{fontSize: 9, color: "white"}}>收聽時間 {extra.duration} 分鐘</Text>
                                        </View>
                                        <View style = {{flexDirection: "row"}}>
                                            <Camera width = {16} height = {16} left = {3}/>
                                            <Sound width = {16} height = {16} left = {3}/>
                                        </View>
                                        <View style = {{flexDirection: "row", height: "70%", paddingLeft: 2, paddingRight: 2}}>
                                            <View style = {{flexDirection: "column", justifyContent: "flex-end"}}>
                                                <Text style = {{color: "white"}}>{extra.title}</Text>
                                                <Text style = {{color: "white"}}>{extra.content}</Text>  
                                            </View>
                                        </View>
                                        <View style = {{flexDirection: "row", justifyContent: "flex-end", backgroundColor: "black", borderBottomRightRadius: 5, borderBottomLeftRadius: 5}}>
                                            <Up width = {15} height = {15}/>
                                            <Text style = {{color: "white"}}>762</Text> 
                                            <Down width = {20} height = {20}/>
                                            <Text><Feather name = "bookmark" size = {18} color = "white"/> </Text> 
                                        </View>
                                    </ImageBackground>
                                </View>
                                )
                            })
                            }
                        </ScrollView>
                    </View> 
                    </View>
                </ImageBackground>
                </View>
        </ScrollView>
        </SafeAreaView>
        }      
    </>
    )
}

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
    },
    detailsButton: {
        width: "35%", 
        alignSelf: "center",
        alignItems: "center",
        borderRadius: 20, 
        backgroundColor: "rgba(255, 255, 255, 0.6)",
        padding: 15
    },
    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 ArtistSection;
Editor is loading...