You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

177 lines
4.9 KiB

import React from "react";
import { View, Text, Pressable, Appearance } from "react-native";
import { SimpleLineIcons } from "@expo/vector-icons";
import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions";
import { useNavigation } from "@react-navigation/native";
//assets
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const duration = (value) => {
const minute = value % 60;
const hour = Math.round(value / 60);
return (
(hour > 0
? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + ""
: "") +
":" +
(minute.toString().length === 1 ? "0" + minute.toString() : minute)
);
};
const Season = ({
season,
toggle,
activeSeason,
realSeasons,
seasonName,
mobile,
theme,
}) => {
// const [selectedSeason, setSelectedSeason] = useState(null);
const navigation = useNavigation();
const Unit = ({ unit, index }) => {
return (
<View
style={[
tw("w-full flex overflow-hidden mb-3"),
{
borderBottomWidth: 1,
borderColor: Colors.theme1.grayE3,
},
]}
>
<View
style={[
tw(
"w-full flex flex-row-reverse justify-between items-center py-3 px-0"
),
]}
>
<Text
style={[
{
fontFamily: "bold",
fontSize: mobile ? fontSize.base : fontSize.lg,
color: Colors.theme1.green79,
},
]}
>
{unit.name}
</Text>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
fontFamily: "regular",
fontSize: mobile ? fontSize.base : fontSize.lg,
color: Colors.theme1.green79,
},
]}
>
{duration(unit.duration)}
</Text>
<Pressable
style={[
tw(`py-1 rounded-sm px-4 ${mobile ? "mr-4" : "mr-8"}`),
{
borderWidth: 1,
borderColor:
Number(index) === 0
? Colors.theme1.greenCF
: Colors.theme1.gray2077,
},
]}
onPress={() =>
Number(index) === 0
? navigation.navigate("VideoDisplay", {
season: season,
unit: unit,
name: seasonName,
})
: {}
}
>
<Text
style={{
width: "100%",
textAlign: "center",
fontFamily: "bold",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
color:
Number(index) === 0
? Colors.theme1.greenCF
: Colors.theme1.gray2077,
}}
>
نمایش
</Text>
</Pressable>
</View>
</View>
</View>
);
};
return (
<View style={tw("w-full flex mb-4")}>
<Pressable
style={[
tw("flex rounded-sm py-3 px-3"),
{
backgroundColor: Colors.theme1.greenCF + "05",
borderWidth: 1,
borderColor: Colors.theme1.greenC8,
},
]}
onPress={() => toggle(season[0].categoryId)}
>
<View style={tw("flex flex-row-reverse justify-between items-center")}>
<Text
style={[
{
fontFamily: "bold",
fontSize: mobile ? fontSize.base : fontSize.xl,
color: Colors.theme1.green79,
},
]}
>
{realSeasons?.length
? realSeasons?.filter(
(item) => item?.id === season[0]?.categoryId
)[0]?.name
: null}
</Text>
<SimpleLineIcons
name={
season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down"
}
size={14}
color={Colors.theme1.green79}
/>
</View>
{season[0]?.categoryId === activeSeason
? season?.map((unit, index) => (
<Unit unit={unit} key={index} index={index} />
))
: null}
</Pressable>
</View>
);
};
const mapStateToProps = (state) => ({
activeSeason: state.publicApi.activeCategory,
realSeasons: state.publicApi.bookInfo?.categories,
vodDuration: state.publicApi.bookInfo?.vodDuration,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
toggle: publicApi.activeCategory,
};
export default connect(mapStateToProps, mapDispatchToProps)(Season);