reza added profile

master
Reza_ashrafi 3 years ago
parent c7cc797b83
commit 26c33c70ca
  1. 6
      App.js
  2. 0
      assets/fonts/Farsi/Black.ttf
  3. 0
      assets/fonts/Farsi/Bold.ttf
  4. 0
      assets/fonts/Farsi/DemiBold.ttf
  5. 17
      navigation/index.js
  6. 4
      src/components/Drawer.js
  7. 2
      src/components/Navbar.js
  8. 12
      src/components/Search.js
  9. 8
      src/redux/actions/public.js
  10. 15
      src/screens/Home/components/Blogs.js
  11. 14
      src/screens/Home/components/MyBooks.js
  12. 20
      src/screens/Home/components/Videos.js
  13. 4
      src/screens/Products/components/Header.js
  14. 4
      src/screens/Profile/arrow-left.svg
  15. 246
      src/screens/Profile/components/List.js
  16. 85
      src/screens/Profile/components/Trophy.js
  17. 162
      src/screens/Profile/components/User.js
  18. 96
      src/screens/Profile/index.js
  19. 178
      src/screens/Video/components/Season.js
  20. 105
      src/screens/Video/index.js
  21. 145
      src/screens/VideoDisplay/components/Season/index.js
  22. 46
      src/screens/VideoDisplay/index.js
  23. 98
      src/screens/Videos/components/MostViewedVideo.js
  24. 20
      src/screens/Videos/components/NewestVideo.js
  25. 5
      src/screens/Videos/index.js

@ -9,9 +9,9 @@ import store from './src/redux/store';
const App = () => { const App = () => {
let [fontsLoaded] = useFonts({ let [fontsLoaded] = useFonts({
light : require("./assets/fonts/Farsi/Light.ttf"), light : require("./assets/fonts/Farsi/Regular.ttf"),
regular: require("./assets/fonts/Farsi/Regular.ttf"), regular: require("./assets/fonts/Farsi/Medium.ttf"),
bold: require("./assets/fonts/Farsi/Medium.ttf"), bold: require("./assets/fonts/Farsi/DemiBold.ttf"),
}); });
if (!fontsLoaded) { if (!fontsLoaded) {

@ -29,6 +29,7 @@ import Tests from "../src/screens/Tests";
import ShoppingCart from "../src/screens/ShoppingCart"; import ShoppingCart from "../src/screens/ShoppingCart";
import DeliveryForm from "../src/screens/DeliveryForm"; import DeliveryForm from "../src/screens/DeliveryForm";
import Address from "../src/screens/Address"; import Address from "../src/screens/Address";
import Profile from "../src/screens/Profile";
//style //style
import fontSize from "../src/constants/fontSize"; import fontSize from "../src/constants/fontSize";
@ -61,8 +62,8 @@ const BottomTabNavigator = () => {
}} }}
> >
<Tab.Screen <Tab.Screen
name="Profile" name="ProfileTab"
component={Login} component={PROFILEStackScreen}
options={{ options={{
title: "پروفایل", title: "پروفایل",
tabBarIcon: ({ focused, color }) => tabBarIcon: ({ focused, color }) =>
@ -384,17 +385,15 @@ const CARTStackScreen = () => {
); );
} }
const AuthStack = createNativeStackNavigator(); const PROFILEStack = createNativeStackNavigator();
const AuthStackScreen = () => { const PROFILEStackScreen = () => {
return ( return (
<AuthStack.Navigator <PROFILEStack.Navigator
screenOptions={{ headerShown: false }} screenOptions={{ headerShown: false }}
// initialRouteName="Splash" // initialRouteName="Splash"
> >
<AuthStack.Screen name="Splash" component={Splash} /> <PROFILEStack.Screen name="Profile" component={Profile} />
<AuthStack.Screen name="Login" component={Login} /> </PROFILEStack.Navigator>
<AuthStack.Screen name="Otp" component={Otp} />
</AuthStack.Navigator>
); );
}; };

@ -164,7 +164,7 @@ const Drawer = ({ position, setBoxPosition, user }) => {
<Text <Text
style={{ style={{
fontSize: fontSize.lg, fontSize: fontSize.lg,
color: Colors.theme1[colorScheme].black, color: "white",
fontFamily: "bold", fontFamily: "bold",
}} }}
> >
@ -173,7 +173,7 @@ const Drawer = ({ position, setBoxPosition, user }) => {
<Text <Text
style={{ style={{
fontSize: fontSize.tiny, fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].black, color: "white",
fontFamily: "bold", fontFamily: "bold",
}} }}
> >

@ -67,7 +67,7 @@ const Navbar = ({ notification, setBoxPosition, headerOptions }) => {
style={{ style={{
fontFamily: "bold", fontFamily: "bold",
fontSize: fontSize.xl, fontSize: fontSize.xl,
color: Color.theme1.light.blue5, color: Color.theme1[colorScheme].green79,
paddingRight: 16, paddingRight: 16,
}} }}
> >

@ -29,12 +29,12 @@ const Search = ({
fontSize: fontSize.tiny, fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].gray2077, color: Colors.theme1[colorScheme].gray2077,
borderWidth: 0.5, borderWidth: 0.5,
borderColor: Colors.theme1[colorScheme].gray2077, borderColor: Colors.theme1[colorScheme].gray20,
paddingVertical: 4, paddingVertical: 10,
paddingHorizontal: 10, paddingHorizontal: 10,
direction: direction, direction: direction,
textAlign: textAlign, textAlign: textAlign,
backgroundColor: Colors.theme1[colorScheme].grayF9, backgroundColor: Colors.theme1[colorScheme].white,
fontFamily : 'regular' fontFamily : 'regular'
}, },
}); });
@ -44,11 +44,11 @@ const Search = ({
style={[styles.inputStyle, tw('rounded-md')]} style={[styles.inputStyle, tw('rounded-md')]}
onChangeText={text => onChange(text)} onChangeText={text => onChange(text)}
placeholder={placeholder} placeholder={placeholder}
placeholderTextColor={Colors.theme1[colorScheme].grayCC} placeholderTextColor={Colors.theme1[colorScheme].gray2077}
value={value} value={value}
/> />
<Pressable style={tw('absolute left-3 top-0 inset-y-2')}> <Pressable style={tw('absolute left-3 top-0 inset-y-3.5')}>
<AntDesign name="search1" size={18} color="#52796F" /> <AntDesign name="search1" size={20} color="#52796F" />
</Pressable> </Pressable>
</View> </View>
); );

@ -7,9 +7,11 @@ const publicApi = {
setFaqActive: (data) => async (dispatch) => setFaqActive: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/activate", data: data }), await dispatch({ type: "public/faq/activate", data: data }),
bookInfo: bookInfo:
(data = {}) => (data = {}, data2 = {}) =>
async (dispatch) => async (dispatch) => {
await proxy.get("public/vod/bookCourse", data, { dispatch }), await proxy.get("public/vod/bookCourse", data, { dispatch });
await proxy.get("book/info", data2, { dispatch });
},
bookSection: bookSection:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>

@ -6,7 +6,8 @@ import {
Dimensions, Dimensions,
TouchableOpacity, TouchableOpacity,
FlatList, FlatList,
Pressable Pressable,
Appearance
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Svg, { G, Path } from "react-native-svg"; import Svg, { G, Path } from "react-native-svg";
@ -16,7 +17,7 @@ import Header from "../components/Header";
//Style //Style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import Color from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
//asssets //asssets
@ -25,6 +26,7 @@ import userImage from "../assets/user.png";
const { width } = Dimensions.get("window"); const { width } = Dimensions.get("window");
function Blogs({ blogs }) { function Blogs({ blogs }) {
const colorScheme = Appearance.getColorScheme();
const Blog = ({ blog }) => { const Blog = ({ blog }) => {
return ( return (
<Pressable <Pressable
@ -44,13 +46,14 @@ function Blogs({ blogs }) {
<View <View
style={[ style={[
{ transform: [{ translateY: -20 }], marginHorizontal: 10 }, { transform: [{ translateY: -20 }], marginHorizontal: 10 },
tw("flex flex-col bg-white rounded-md p-2"), tw("flex flex-col justify-between bg-white rounded-md p-2"),
{ {
shadowColor: "#000", shadowColor: "#000",
shadowOffset: { width: 0, height: 1 }, shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8, shadowOpacity: 0.8,
shadowRadius: 2, shadowRadius: 2,
elevation: 5, elevation: 5,
minHeight : 70
}, },
]} ]}
> >
@ -58,7 +61,7 @@ function Blogs({ blogs }) {
style={[ style={[
tw("mb-2"), tw("mb-2"),
{ {
color: Color.theme1.light.blue7, color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold", fontFamily: "bold",
fontSize: fontSize.tiny, fontSize: fontSize.tiny,
}, },
@ -75,7 +78,7 @@ function Blogs({ blogs }) {
<Text <Text
style={[ style={[
{ {
color: Color.theme1.light.blue5, color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular", fontFamily: "regular",
fontSize: fontSize.sm, fontSize: fontSize.sm,
}, },
@ -89,7 +92,7 @@ function Blogs({ blogs }) {
style={[ style={[
tw("ml-1"), tw("ml-1"),
{ {
color: Color.theme1.light.blue5, color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular", fontFamily: "regular",
fontSize: fontSize.sm, fontSize: fontSize.sm,
}, },

@ -5,7 +5,7 @@ import {
TouchableOpacity, TouchableOpacity,
FlatList, FlatList,
Appearance, Appearance,
Platform Platform,
} from "react-native"; } from "react-native";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
@ -19,7 +19,7 @@ import Progress from "../../../components/Progress";
//Color //Color
import Color from "../../../constants/Colors"; import Color from "../../../constants/Colors";
const ios = Platform.OS === 'ios'; const ios = Platform.OS === "ios";
function MyBooks({ books, grades }) { function MyBooks({ books, grades }) {
const colorScheme = Appearance.getColorScheme(); const colorScheme = Appearance.getColorScheme();
@ -38,8 +38,8 @@ function MyBooks({ books, grades }) {
style={[ style={[
tw("rounded-md"), tw("rounded-md"),
{ {
height: 160, minHeight: 160,
width: 110, minWidth: 110,
}, },
]} ]}
/> />
@ -47,7 +47,7 @@ function MyBooks({ books, grades }) {
style={[ style={[
tw("mt-2 pr-1"), tw("mt-2 pr-1"),
{ {
color: Color.theme1.light.blue6, color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold", fontFamily: "bold",
fontSize: fontSize.base, fontSize: fontSize.base,
}, },
@ -59,9 +59,9 @@ function MyBooks({ books, grades }) {
style={[ style={[
tw("pr-1"), tw("pr-1"),
{ {
color: Color.theme1.light.blue5, color: Colors.theme1[colorScheme].gray20,
fontFamily: "light", fontFamily: "light",
fontSize: fontSize.base, fontSize: fontSize.tiny,
}, },
]} ]}
> >

@ -1,4 +1,11 @@
import { View, Text, Image, TouchableOpacity, FlatList } from "react-native"; import {
View,
Text,
Image,
TouchableOpacity,
FlatList,
Appearance,
} from "react-native";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -8,10 +15,11 @@ import Progress from "../../../components/Progress";
import Header from "../components/Header"; import Header from "../components/Header";
//style //style
import Color from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
function Videos({ videos, grades }) { function Videos({ videos, grades }) {
const colorScheme = Appearance.getColorScheme();
const Video = ({ video }) => { const Video = ({ video }) => {
const navigation = useNavigation(); const navigation = useNavigation();
return ( return (
@ -33,9 +41,9 @@ function Videos({ videos, grades }) {
style={[ style={[
tw("mt-2 pr-1"), tw("mt-2 pr-1"),
{ {
color: Color.theme1.light.blue6, color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold", fontFamily: "bold",
fontSize: fontSize.tiny, fontSize: fontSize.base,
}, },
]} ]}
> >
@ -45,9 +53,9 @@ function Videos({ videos, grades }) {
style={[ style={[
tw("mt-1 pr-1"), tw("mt-1 pr-1"),
{ {
color: Color.theme1.light.blue5, color: Colors.theme1[colorScheme].gray20,
fontFamily: "light", fontFamily: "light",
fontSize: fontSize.sm, fontSize: fontSize.tiny,
}, },
]} ]}
> >

@ -13,13 +13,13 @@ import Select from "../../../components/Select";
const Header = ({ setFilterOptions, filterOptions, levels, productTypes }) => { const Header = ({ setFilterOptions, filterOptions, levels, productTypes }) => {
return ( return (
<View style={tw("flex flex-col px-4 h-28 bg-white")}> <View style={tw("flex flex-col px-4 h-32 bg-white")}>
<Search <Search
onChange={(val) => setFilterOptions({ ...filterOptions, search: val })} onChange={(val) => setFilterOptions({ ...filterOptions, search: val })}
placeholder={"نام کتاب یا دوره را جستجو کنید"} placeholder={"نام کتاب یا دوره را جستجو کنید"}
/> />
<View <View
style={[tw("flex flex-1 flex-row justify-between items-center my-2")]} style={[tw("flex flex-1 flex-row justify-between items-center")]}
> >
<Select <Select
defaultValue={productTypes[0]} defaultValue={productTypes[0]}

@ -0,0 +1,4 @@
<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(7.902 4.08)" fill="none" stroke="#c6c6c6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 438 B

@ -0,0 +1,246 @@
import {
View,
Text,
Image,
Appearance,
Platform,
TouchableOpacity,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import Svg, { Path, G } from "react-native-svg";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const ios = Platform.OS === "ios";
const List = ({}) => {
const colorScheme = Appearance.getColorScheme();
const [dropdown, setDropdown] = React.useState(true);
const pages = [
{
icon: (
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<Path
d="M17 7a5 5 0 1 1-5-5 5 5 0 0 1 5 5Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
<Path
data-name="Vector"
d="M20.59 22c0-3.87-3.85-7-8.59-7s-8.59 3.13-8.59 7"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
</Svg>
),
name: "اطلاعات حساب کاربری",
},
{
icon: (
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<Path
d="M7.5 7.67V6.7a4.773 4.773 0 0 1 4.06-4.67 4.5 4.5 0 0 1 4.94 4.478v1.38"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
<Path
data-name="Vector"
d="M9 22h6c4.02 0 4.74-1.61 4.95-3.57l.75-6C20.97 9.99 20.27 8 16 8H8c-4.27 0-4.97 1.99-4.7 4.43l.75 6C4.26 20.39 4.98 22 9 22Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
<Path
data-name="Vector"
d="M15.496 12h.005M8.495 12H8.5"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
</Svg>
),
name: "سفارشات",
},
{
icon: (
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={23.746}>
<Path
d="M22 16.548V4.642a1.959 1.959 0 0 0-2.17-1.963h-.06a19.029 19.029 0 0 0-7.07 2.338l-.17.109a1.121 1.121 0 0 1-1.06 0l-.25-.148a18.935 18.935 0 0 0-7.06-2.309A1.957 1.957 0 0 0 2 4.632v11.916a2.036 2.036 0 0 0 1.74 1.953l.29.039a25.941 25.941 0 0 1 7.44 2.407l.04.02a1.094 1.094 0 0 0 .96 0 25.705 25.705 0 0 1 7.46-2.427l.33-.039A2.036 2.036 0 0 0 22 16.548Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
<Path
data-name="Vector"
d="M12 5.236v15M19.955 8.4h-2.25M19.918 11.369h-3"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
</Svg>
),
name: "کتابهای من",
},
{
icon: (
<Svg xmlns="http://www.w3.org/2000/svg" width={24.613} height={21.519}>
<G data-name="Group 2005">
<Path
d="M18.085 20.769H6.528c-3.467 0-5.778-2-5.778-6.673V7.423C.75 2.75 3.061.75 6.528.75h11.557c3.467 0 5.778 2 5.778 6.673v6.673c0 4.671-2.313 6.673-5.778 6.673Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
data-name="vuesax/linear/music-playlist"
/>
<Path
data-name="Vector"
d="M8.954 10.76V9.296c0-1.878 1.329-2.646 2.951-1.708l1.268.732 1.268.732c1.622.939 1.622 2.476 0 3.415l-1.267.732-1.268.732c-1.623.938-2.952.17-2.952-1.708V10.76Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
</G>
</Svg>
),
name: "دورههای من",
},
{
icon: (
<Svg xmlns="http://www.w3.org/2000/svg" width={25.5} height={25.5}>
<Path
d="M15.407 11.316h-5.313"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
<Path
data-name="Vector"
d="M12.75 8.723v5.313M17.872 2.125H7.628a4.111 4.111 0 0 0-4.1 4.1v14.972c0 1.912 1.371 2.72 3.049 1.8l5.185-2.879a2.251 2.251 0 0 1 1.987 0l5.185 2.879c1.679.935 3.049.128 3.049-1.8V6.225a4.127 4.127 0 0 0-4.111-4.1Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
</Svg>
),
name: "لیست علاقهمندیها",
},
{
icon: (
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<G
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
>
<Path d="M12.14 15.07v-1.96a4.569 4.569 0 0 1 4.57-4.57h1.96" />
<Path
data-name="Vector"
d="M5.62 8.55h1.96a4.569 4.569 0 0 1 4.57 4.57v4.13"
/>
<Path
data-name="Vector"
d="m7.14 6.75-1.8 1.8 1.8 1.8M16.86 6.75l1.8 1.8-1.8 1.8"
/>
</G>
<Path
data-name="Vector"
d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z"
fill="none"
stroke="#37a865"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
</Svg>
),
name: "آدرسها",
},
];
return (
<View style={tw(`w-full flex-col mt-8 ${ios ? "items-end" : ""}`)}>
{pages.map((page, index) => (
<TouchableOpacity
key={index}
style={[
tw(
`w-full flex items-center justify-between mb-4 pb-4 ${
ios ? "flex-row-reverse" : "flex-row"
}`
),
{
borderBottomWidth: 1,
borderColor: Colors.theme1[colorScheme].grayE3 + "aa",
},
]}
>
<View
style={tw(
`flex items-center ${ios ? "flex-row-reverse" : "flex-row"}`
)}
>
{page.icon}
<Text
style={{
fontFamily: "light",
marginTop: 5,
marginRight: 10,
color: Colors.theme1[colorScheme].gray20,
}}
>
{page.name}
</Text>
</View>
<Svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<Path
d="M15.002 19.92 8.479 13.4a1.986 1.986 0 0 1 0-2.8l6.523-6.52"
fill="none"
stroke="#c6c6c6"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
/>
</Svg>
</TouchableOpacity>
))}
</View>
);
};
const mapStateToProps = (state) => ({});
export default connect(mapStateToProps)(List);

@ -0,0 +1,85 @@
import { View, Text, Appearance, Platform, Pressable } from "react-native";
import React from "react";
import { connect } from "react-redux";
import Svg, { G, Path } from "react-native-svg";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const ios = Platform.OS === "ios";
const Trophy = ({}) => {
const colorScheme = Appearance.getColorScheme();
const [dropdown, setDropdown] = React.useState(true);
return (
<View
style={[
tw(
`w-full flex py-4 px-3 justify-between ${
ios ? "flex-row-reverse" : "flex-row"
}`
),
{ backgroundColor: Colors.theme1[colorScheme].yellow2 },
]}
>
<View style={[tw(`flex ${ios ? "flex-row-reverse" : "flex-row"}`)]}>
<Svg xmlns="http://www.w3.org/2000/svg" width={23.862} height={23.862}>
<G fill="none" stroke="#d6d020" data-name="vuesax/linear/cup">
<Path
d="M12.08 16.405v2.088"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<Path
data-name="Vector"
strokeWidth="1.5"
d="M7.109 21.874h9.942v-.995a1.994 1.994 0 0 0-1.988-1.988H9.097a1.994 1.994 0 0 0-1.988 1.988v.994Z"
/>
<Path
data-name="Vector"
d="M6.115 21.873h11.931M11.931 15.907a6.955 6.955 0 0 1-6.96-6.959V5.965a3.976 3.976 0 0 1 3.977-3.977h5.965a3.976 3.976 0 0 1 3.977 3.977v2.983a6.955 6.955 0 0 1-6.959 6.959Z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<Path
data-name="Vector"
d="M5.438 11.583a4.831 4.831 0 0 1-1.919-1.193 5.3 5.3 0 0 1-1.491-3.579 2.461 2.461 0 0 1 2.486-2.486h.646a3.734 3.734 0 0 0-.3 1.491v2.983a7.007 7.007 0 0 0 .578 2.784ZM18.423 11.583a4.831 4.831 0 0 0 1.919-1.193 5.3 5.3 0 0 0 1.491-3.579 2.461 2.461 0 0 0-2.485-2.486h-.647a3.734 3.734 0 0 1 .3 1.491v2.983a7.007 7.007 0 0 1-.578 2.784Z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
</G>
</Svg>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.lg,
marginRight: 10,
color: Colors.theme1[colorScheme].green79,
}}
>
{"امتیاز شما" + " " + 14560}
</Text>
</View>
<Pressable>
<Text
style={{
fontFamily: "light",
fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].green79,
}}
>
مشاهده جوایز
</Text>
</Pressable>
</View>
);
};
const mapStateToProps = (state) => ({});
export default connect(mapStateToProps)(Trophy);

@ -0,0 +1,162 @@
import { View, Text, Image, Appearance, Platform, Pressable } from "react-native";
import React from "react";
import { connect } from "react-redux";
import Svg, { Path } from "react-native-svg";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const ios = Platform.OS === "ios";
const User = ({ user }) => {
const colorScheme = Appearance.getColorScheme();
const [dropdown, setDropdown] = React.useState(true);
return (
<View style={tw(`w-full flex-col ${ios ? "items-end" : ""}`)}>
<Pressable
style={tw(
`w-full mt-2 mb-2 flex justify-between items-center ${
ios ? "flex-row-reverse" : "flex-row"
}`
)}
onPress={() => setDropdown(!dropdown)}
>
<View
style={tw(
`flex items-center ${ios ? "flex-row-reverse" : "flex-row"}`
)}
>
{user?.picFileId ? (
<Image
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
style={[tw("rounded-full"), { width: 70, height: 70 }]}
/>
) : (
<View
style={[
tw("rounded-full bg-gray-400"),
{ minWidth: 60, minHeight: 60, zIndex: 1 },
]}
></View>
)}
<View style={tw(`flex flex-col ${ios ? "items-end" : ""}`)}>
<Text
style={{
fontSize: fontSize.xl,
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
}}
>
{user?.firstName + " " + user?.lastName}
</Text>
<Text
style={{
fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].gray20,
fontFamily: "light",
}}
>
{user?.cellphone}
</Text>
</View>
</View>
<Svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
style={{ transform: [{ rotate: dropdown ? "0deg" : "180deg" }] }}
>
<Path
d="M6.08 15.82h11.84a1.077 1.077 0 0 0 .76-1.84L13.499 8.8a2.131 2.131 0 0 0-3.01 0l-1.97 1.97-3.21 3.21a1.082 1.082 0 0 0 .771 1.84Z"
fill="#c6c6c6"
data-name="vuesax/bold/arrow-down"
/>
</Svg>
</Pressable>
{dropdown && (
<View
style={tw(`flex flex-col w-full pr-16 ${ios ? "items-end" : " "}`)}
>
<View
style={[
tw(
`flex items-center w-full pb-3 mb-4 ${
ios ? "flex-row-reverse" : "flex-row "
}`
),
{
borderBottomWidth: 1,
borderColor: Colors.theme1[colorScheme].grayE3,
},
]}
>
{user?.picFileId ? (
<Image
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
style={[tw("rounded-full"), { width: 30, height: 30 }]}
/>
) : (
<View
style={[
tw("rounded-full bg-gray-400"),
{ minWidth: 30, minHeight: 30, zIndex: 1 },
]}
></View>
)}
<Text
style={{
fontSize: fontSize.base,
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
}}
>
{user?.firstName + " " + user?.lastName}
</Text>
</View>
<View
style={[
tw(
`flex items-center w-full pb-3 mb-3 ${
ios ? "flex-row-reverse" : "flex-row "
}`
),
{
borderBottomWidth: 1,
borderColor: Colors.theme1[colorScheme].grayE3,
},
]}
>
<Text
style={{
fontSize: fontSize.base,
fontFamily: "bold",
color: Colors.theme1[colorScheme].gray20,
}}
>
افزودن حساب کاربری جدید
</Text>
<Text
style={{
marginRight: 5,
marginTop: 3,
fontSize: fontSize.xl2,
fontFamily: "bold",
color: Colors.theme1[colorScheme].gray20,
}}
>
+
</Text>
</View>
</View>
)}
</View>
);
};
const mapStateToProps = (state) => ({
user: JSON.parse(state.user.status),
});
export default connect(mapStateToProps)(User);

@ -1,13 +1,93 @@
import React from 'react' import React, { useState, useEffect } from "react";
import { View, Text } from 'react-native'; import {
import {connect} from 'react-redux'; View,
Text,
ScrollView,
Dimensions,
StyleSheet,
Pressable,
SafeAreaView,
StatusBar,
LayoutAnimation,
Appearance,
} from "react-native";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
//components
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import User from "./components/User";
import Trophy from "./components/Trophy";
import List from "./components/List";
//style
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
import tw from "tailwind-rn";
const { width, height } = Dimensions.get("window");
function Profile({}) { function Profile({}) {
const navigation = useNavigation();
const colorScheme = Appearance.getColorScheme();
const [position, setPosition] = useState("100%");
useEffect(() => {}, []);
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return ( return (
<View> <SafeAreaView
<Text></Text> style={{
</View> paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
) position: "relative",
}}
>
<Navbar
setBoxPosition={setBoxPosition}
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "حساب کاربری",
bookmark: false,
qr: false,
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
<User />
<Trophy />
<List />
</ScrollView>
</SafeAreaView>
);
} }
export default Profile; const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Profile);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
position: "relative",
},
container: {
width: Dimensions.get("window").width,
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 5,
paddingHorizontal: 16,
},
});

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { View, Text, Pressable, TouchableOpacity } from "react-native"; import { View, Text, Pressable, Appearance } from "react-native";
import {SimpleLineIcons} from '@expo/vector-icons'; import { SimpleLineIcons } from "@expo/vector-icons";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions"; import { publicApi } from "../../../redux/actions";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
@ -20,67 +20,77 @@ const duration = (value) => {
); );
}; };
const Season = ({ season, toggle, activeSeason, realSeasons, seasonName }) => { const Season = ({
season,
toggle,
activeSeason,
realSeasons,
seasonName,
id,
}) => {
// const [selectedSeason, setSelectedSeason] = useState(null); // const [selectedSeason, setSelectedSeason] = useState(null);
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation(); const navigation = useNavigation();
const Unit = ({ unit }) => { const Unit = ({ unit, index }) => {
return ( return (
<View <View
style={[ style={[
tw("w-full flex flex-col rounded-md overflow-hidden mb-3"), tw("w-full flex flex-col overflow-hidden mb-3"),
{ borderWidth: 1, borderColor: Colors.theme1.light.blue3 }, {
borderBottomWidth: 1,
borderColor: Colors.theme1[colorScheme].grayE3,
},
]} ]}
> >
<View <View
style={[ style={[
tw( tw(
"w-full flex flex-row-reverse justify-between items-center py-2 px-3" "w-full flex flex-row-reverse justify-between items-center py-2 px-0"
), ),
{
borderBottomWidth: 1,
borderColor: Colors.theme1.light.blue3,
},
]} ]}
> >
<Text <Text
style={[ style={[
{ {
fontFamily: "regular", fontFamily: "bold",
fontSize: fontSize.base, fontSize: fontSize.base,
color: Colors.theme1.light.blue5, color: Colors.theme1[colorScheme].green79,
}, },
]} ]}
> >
{unit.name} {unit.name}
</Text> </Text>
<Text <View style={tw("flex flex-row-reverse items-center")}>
style={[ <Text
{ style={[
fontFamily: "regular", {
fontSize: fontSize.base, fontFamily: "regular",
color: Colors.theme1.light.blue5, fontSize: fontSize.base,
}, color: Colors.theme1[colorScheme].green79,
]} },
> ]}
{duration(unit.duration)} >
</Text> {duration(unit.duration)}
</View> </Text>
<View style={[tw("w-full flex flex-row-reverse")]}>
{1 && (
<Pressable <Pressable
style={[ style={[
tw("flex flex-1 flex-row items-center py-2 px-2"), tw("py-1 rounded-sm px-4 mr-4"),
{ {
borderLeftWidth: 1, borderWidth: 1,
borderColor: Colors.theme1.light.blue3, borderColor:
Number(index) === 0
? Colors.theme1[colorScheme].greenC8
: Colors.theme1[colorScheme].gray2077,
}, },
]} ]}
onPress={() => onPress={() =>
navigation.navigate("VideoDisplay", { Number(index) === 0
season: season, ? navigation.navigate("VideoDisplay", {
unit: unit, season: season,
name: seasonName, unit: unit,
}) name: seasonName,
})
: {}
} }
> >
<Text <Text
@ -88,76 +98,62 @@ const Season = ({ season, toggle, activeSeason, realSeasons, seasonName }) => {
width: "100%", width: "100%",
textAlign: "center", textAlign: "center",
fontFamily: "regular", fontFamily: "regular",
fontSize: fontSize.base, fontSize: fontSize.tiny,
color: Colors.theme1.light.blue5, color:
Number(index) === 0
? Colors.theme1[colorScheme].greenC8
: Colors.theme1[colorScheme].gray2077,
}} }}
> >
نمایش نمایش
</Text> </Text>
</Pressable> </Pressable>
)} </View>
{/* {0 && (
<Pressable
style={tw("flex flex-1 flex-row items-center py-1.5 px-2")}
>
<Text
style={{
width: "100%",
textAlign: "center",
fontFamily: "regular",
fontSize: fontSize.sm,
color: Colors.theme1.light.blue5,
}}
>
دانلود
</Text>
</Pressable>
)} */}
</View> </View>
</View> </View>
); );
}; };
return ( return (
<View style={tw("w-full flex flex-col")}> <View style={tw("w-full flex flex-col mb-4")}>
<TouchableOpacity <Pressable
style={[ style={[
tw( tw("flex flex-col rounded-md py-3 px-3"),
"flex flex-row-reverse justify-between items-center rounded-md py-3 px-3 mb-3" {
), backgroundColor: Colors.theme1[colorScheme].greenCF + "05",
{ backgroundColor: Colors.theme1.light.blue5 }, borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenC8,
},
]} ]}
onPress={() => toggle(season[0].categoryId)} onPress={() => toggle(season[0].categoryId)}
> >
<Text <View style={tw("flex flex-row-reverse justify-between items-center")}>
style={[ <Text
{ style={[
fontFamily: "regular", {
fontSize: fontSize.base, fontFamily: "bold",
color: "white", fontSize: fontSize.base,
}, color: Colors.theme1[colorScheme].green79,
]} },
> ]}
{ >
realSeasons.filter((item) => item.id === season[0].categoryId)[0] {realSeasons?.length > 0 &&
.name realSeasons?.filter(
} (item) => item?.id === season[0]?.categoryId
</Text> )[0]?.name}
<SimpleLineIcons name={season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down"} size={14} color="white" /> </Text>
{/* <Text <SimpleLineIcons
style={[ name={
{ season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down"
fontFamily: "regular", }
fontSize: fontSize.sm, size={14}
color: "white", color={Colors.theme1[colorScheme].green79}
}, />
]} </View>
> {season[0]?.categoryId === activeSeason &&
{season.duration} season?.map((unit, index) => (
</Text> */} <Unit unit={unit} key={index} index={index} />
</TouchableOpacity> ))}
</Pressable>
{season[0].categoryId === activeSeason &&
season.map((unit, index) => <Unit unit={unit} key={index} />)}
</View> </View>
); );
}; };

@ -9,15 +9,23 @@ import {
LayoutAnimation, LayoutAnimation,
Image, Image,
Text, Text,
Appearance,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import {publicApi} from '../../redux/actions'; import { publicApi, userProduct } from "../../redux/actions";
import separate from "../../utils/separate";
//components
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer"; import Drawer from "../../components/Drawer";
import Divider from "../../components/Divider"; import Divider from "../../components/Divider";
import Season from "./components/Season"; import Season from "./components/Season";
import CustomPressable from "../../components/Pressable";
//style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from '../../constants/fontSize'; import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
const { height } = Dimensions.get("window"); const { height } = Dimensions.get("window");
@ -27,24 +35,29 @@ function Product({
book, book,
seasons, seasons,
grades, grades,
isLogin,
userId,
pushToCart,
loading,
}) { }) {
const colorScheme = Appearance.getColorScheme();
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
useEffect(() => { useEffect(() => {
getBook({bookId : route.params.id }); getBook({ bookId: route.params.id }, { id: route.params.id, vod: true });
},[]); }, []);
const setBoxPosition = () => { const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%"); setPosition(position === "100%" ? "0%" : "100%");
}; };
return ( return (
<SafeAreaView <SafeAreaView
style={{ style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative", position: "relative",
height : height height: height,
}} }}
> >
<Navbar <Navbar
@ -68,61 +81,73 @@ function Product({
<View <View
style={[ style={[
tw( tw(
"w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden" "w-full flex flex-row-reverse flex-1 justify-between relative overflow-hidden"
), ),
{ height: height / 3.8 },
]} ]}
> >
<Image
source={{uri : `https://dnvn.ir/api/v1/file/${book?.fileIds}`}}
style={[tw("rounded-md absolute left-0 top-0 w-full h-full")]}
/>
<Image <Image
source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }} source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
style={[ style={[
tw("rounded-md h-full rounded-md ml-2"), tw("rounded-md h-full rounded-md ml-2"),
{ width: 70, height: 100 }, { width: ((height / 5) * 3) / 4, height: height / 5 },
]} ]}
/> />
</View> <View style={tw("flex flex-col items-end flex-1")}>
<View
style={[
tw("flex flex-col flex-1 justify-between"),
{
paddingRight: 10,
},
]}
>
<View style={tw("flex flex-col")}>
<Text <Text
style={{ style={{
marginTop: 5, marginTop: 5,
color: "#05335F", color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.xl, fontSize: fontSize.xl,
marginBottom: 0, marginBottom: 0,
fontFamily: "bold", fontFamily: "bold",
}} }}
> >
{book?.name} {"دوره ویدئویی" + "" + book?.product[2]?.name}
</Text> </Text>
<Text <Text
style={{ style={{
color: "#196EC0", color: Colors.theme1[colorScheme].greenCF,
fontSize: fontSize.sm, fontSize: fontSize.tiny,
marginBottom: 5, marginTop: 10,
fontFamily: "light", fontFamily: "regular",
}} }}
> >
{'پایه' + ' ' + grades[book?.gradeId]} {"پایه" + " " + grades[book?.gradeId]}
</Text> </Text>
</View> </View>
</View>
<View
style={[
tw("flex flex-col flex-1 justify-between"),
{
paddingRight: 10,
},
]}
>
<Divider type={"vertical"} /> <Divider type={"vertical"} />
</View> </View>
<CustomPressable
title={`خرید با قیمت ${separate(book?.product[2]?.price)} تومان`}
backgroundColor={Colors.theme1[colorScheme].greenCF}
color={"white"}
border={{ color: "#196EC0", width: 0 }}
width={"100%"}
loading={loading}
onPress={() =>
pushToCart({
productId: book?.product[2]?.id,
userId: userId,
count: 1,
})
}
/>
</View> </View>
<View style={tw("flex flex-col")}> <View style={tw("flex flex-col")}>
{seasons?.map((season, index) => ( {seasons
<Season season={season} key={index} id={route.params.id} seasonName={book?.name} /> ?.sort((a, b) => a[0]?.categoryId - b[0]?.categoryId)
))} ?.map((season, index) => (
<Season season={season} key={index} id={book?.id} />
))}
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
@ -144,12 +169,16 @@ const styles = StyleSheet.create({
}); });
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
book : state.publicApi.bookInfo, book: state.book.info,
seasons : state.publicApi.categories, seasons: state.publicApi.categories,
grades : state.publicApi.grades grades: state.publicApi.grades,
isLogin: state.user.status,
userId: state.user.status.id,
loading: state.userProduct.loading,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
getBook: publicApi.bookInfo getBook: publicApi.bookInfo,
} pushToCart: userProduct.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(Product); export default connect(mapStateToProps, mapDispatchToProps)(Product);

@ -1,16 +1,31 @@
import React from "react"; import React from "react";
import { View, Text, Dimensions, Pressable } from "react-native"; import { View, Text, Dimensions, Pressable, Appearance } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../../../redux/actions"; import { publicApi } from "../../../../redux/actions";
import { useNavigation } from "@react-navigation/native";
//style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../../../../constants/fontSize"; import fontSize from "../../../../constants/fontSize";
import Colors from "../../../../constants/Colors"; import Colors from "../../../../constants/Colors";
import { useNavigation } from "@react-navigation/native";
const { width } = Dimensions.get("window"); const { width } = Dimensions.get("window");
const Season = ({ season, activeUnit, name, setVideoActive }) => { const Season = ({ season, activeUnit, name, setVideoActive }) => {
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation(); const navigation = useNavigation();
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 Unit = ({ unit }) => { const Unit = ({ unit }) => {
const selectVideo = () => { const selectVideo = () => {
setVideoActive(unit); setVideoActive(unit);
@ -18,7 +33,7 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => {
season: season, season: season,
unit: unit, unit: unit,
name: name, name: name,
}) });
}; };
return ( return (
<View <View
@ -26,127 +41,77 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => {
tw("w-full flex flex-col rounded-md overflow-hidden mb-3"), tw("w-full flex flex-col rounded-md overflow-hidden mb-3"),
{ {
borderWidth: 1, borderWidth: 1,
borderColor: Colors.theme1.light.blue3, borderColor: Colors.theme1[colorScheme].greenD9,
backgroundColor:
activeUnit === unit
? Colors.theme1[colorScheme].greenCF
: "transparent",
}, },
]} ]}
> >
<View <View
style={[ style={[
tw( tw(
"w-full flex flex-row-reverse justify-between items-center py-1.5 px-3" "w-full flex flex-row-reverse justify-between items-center py-2 px-3"
), ),
{ {
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.theme1.light.blue3, borderColor: Colors.theme1[colorScheme].greenD9,
backgroundColor: activeUnit === unit ? "#1a1" : "transparent",
}, },
]} ]}
> >
<Text <Text
style={[ style={[
{ {
fontFamily: "regular", fontFamily: "bold",
fontSize: fontSize.base, fontSize: fontSize.xl,
color: color:
activeUnit === unit ? "white" : Colors.theme1.light.blue5, activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
}, },
]} ]}
> >
{unit.name} {unit.name}
</Text> </Text>
{/* <Text <Text
style={[ style={[
{ {
fontFamily: "regular", fontFamily: "bold",
fontSize: width / 36, fontSize: fontSize.base,
color: Colors.theme1.light.blue5, color: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
backgroundColor: "white", borderRightWidth: 1,
borderColor: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
paddingRight: 8,
}, },
]} ]}
> >
{unit.duration} {duration(unit.duration)}
</Text> */} </Text>
</View> </View>
<View style={[tw("w-full flex flex-row-reverse")]}> <View style={[tw("w-full flex flex-row-reverse")]}>
{1 && ( <Pressable
<Pressable style={[
style={[ tw("flex flex-1 flex-row items-center py-2 px-2"),
tw("flex flex-1 flex-row items-center py-2 px-2"), ]}
{ onPress={() => selectVideo()}
borderLeftWidth: 1, >
borderColor: Colors.theme1.light.blue3, <Text
backgroundColor: "white", style={{
}, width: "100%",
]} textAlign: "center",
onPress={() => selectVideo()} fontFamily: "bold",
> fontSize: fontSize.lg,
<Text color: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
style={{ }}
width: "100%",
textAlign: "center",
fontFamily: "regular",
fontSize: fontSize.sm,
color: Colors.theme1.light.blue5,
}}
>
نمایش
</Text>
</Pressable>
)}
{/* {0 && (
<Pressable
style={tw("flex flex-1 flex-row items-center py-1.5 px-2")}
> >
<Text نمایش
style={{ </Text>
width: "100%", </Pressable>
textAlign: "center",
fontFamily: "regular",
fontSize: width / 34,
color: Colors.theme1.light.blue5,
}}
>
دانلود
</Text>
</Pressable>
)} */}
</View> </View>
</View> </View>
); );
}; };
return ( return (
<View style={tw("w-full flex flex-col mt-5")}> <View style={tw("w-full flex flex-col")}>
<Pressable
style={[
tw(
"flex flex-row-reverse justify-between items-center rounded-md py-2.5 px-3 mb-3"
),
{ backgroundColor: Colors.theme1.light.blue5 },
]}
>
<Text
style={[
{
fontFamily: "regular",
fontSize: fontSize.base,
color: "white",
},
]}
>
{name}
</Text>
<Text
style={[
{
fontFamily: "regular",
fontSize: fontSize.sm,
color: "white",
},
]}
>
{season.duration}
</Text>
</Pressable>
{season.map((unit, index) => ( {season.map((unit, index) => (
<Unit unit={unit} key={index} /> <Unit unit={unit} key={index} />
))} ))}

@ -7,18 +7,28 @@ import {
SafeAreaView, SafeAreaView,
StatusBar, StatusBar,
LayoutAnimation, LayoutAnimation,
Appearance,
Text,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
//components
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer"; import Drawer from "../../components/Drawer";
import { Video } from "expo-av"; import { Video } from "expo-av";
import tw from 'tailwind-rn'; import * as ScreenOrientation from "expo-screen-orientation";
import * as ScreenOrientation from 'expo-screen-orientation';
import Season from "./components/Season"; import Season from "./components/Season";
import Divider from "../../components/Divider";
import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
const { height, width } = Dimensions.get("window"); const { width } = Dimensions.get("window");
function VideoDisplay({ route, selectedVideo }) { function VideoDisplay({ route }) {
const colorScheme = Appearance.getColorScheme();
const video = React.useRef(null); const video = React.useRef(null);
const [status, setStatus] = React.useState({}); const [status, setStatus] = React.useState({});
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
@ -31,11 +41,10 @@ function VideoDisplay({ route, selectedVideo }) {
}; };
function setOrientation() { function setOrientation() {
if (Dimensions.get('window').height > Dimensions.get('window').width) { if (Dimensions.get("window").height > Dimensions.get("window").width) {
//Device is in portrait mode, rotate to landscape mode. //Device is in portrait mode, rotate to landscape mode.
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
} } else {
else {
//Device is in landscape mode, rotate to portrait mode. //Device is in landscape mode, rotate to portrait mode.
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT); ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
} }
@ -70,7 +79,7 @@ function VideoDisplay({ route, selectedVideo }) {
ref={video} ref={video}
style={{ width: "100%", height: (width * 9) / 16 - 16 }} style={{ width: "100%", height: (width * 9) / 16 - 16 }}
source={{ source={{
uri: `https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`, uri: `https://dnvn.ir/api/v1/file/${route.params.unit?.fileIds}`,
}} }}
useNativeControls useNativeControls
resizeMode="cover" resizeMode="cover"
@ -78,6 +87,21 @@ function VideoDisplay({ route, selectedVideo }) {
isLooping isLooping
onPlaybackStatusUpdate={(status) => setStatus(() => status)} onPlaybackStatusUpdate={(status) => setStatus(() => status)}
/> />
<Text
style={{ fontSize: fontSize.xl, fontFamily: "bold", marginTop: 8 }}
>
{route.params.unit?.name}
</Text>
<View
style={[
tw("flex flex-col flex-1 justify-between"),
{
paddingRight: 10,
},
]}
>
<Divider type={"vertical"} />
</View>
<Season <Season
season={route.params.season} season={route.params.season}
activeUnit={route.params.unit} activeUnit={route.params.unit}
@ -103,9 +127,7 @@ const styles = StyleSheet.create({
}); });
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
selectedVideo: state.publicApi.selectedVideo, grades: state.publicApi.grades,
}); });
const mapDispatchToProps = {}; export default connect(mapStateToProps)(VideoDisplay);
export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);

@ -1,43 +1,56 @@
import React from "react"; import React from "react";
import { View, FlatList, Pressable, Image, Dimensions, Text } from "react-native"; import {
import {useNavigation} from '@react-navigation/native'; View,
FlatList,
Pressable,
Image,
Dimensions,
Text,
Appearance,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import separate from "../../../utils/separate";
//style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from '../../../constants/fontSize'; import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const { width, height } = Dimensions.get("window"); const { width } = Dimensions.get("window");
import Header from "../../Home/components/Header"; import Header from "../../Home/components/Header";
function MostViewedVideo({videos, grades}) { function MostViewedVideo({ videos, grades }) {
const navigation = useNavigation(); const navigation = useNavigation();
const colorScheme = Appearance.getColorScheme();
const Video = ({ video }) => { const Video = ({ video }) => {
return ( return (
<Pressable <Pressable
style={[ style={[
{ {
width : width / 1.5, width: width / 1.5,
minWidth: (150 * 16) / 9,
}, },
tw("flex flex-col items-end rounded-md ml-6"), tw("flex flex-col items-end rounded-md ml-6"),
]} ]}
onPress={() => navigation.navigate("Video", {id: video.id})} onPress={() => navigation.navigate("Video", { id: video.id })}
> >
<View <View
style={[ style={[
tw( tw(
"w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden" "w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
), ),
{ height: height / 4 }, { height: ((width / 1.5) * 9) / 16, minHeight: 150 },
]} ]}
> >
<Image <Image
source={{uri : `https://dnvn.ir/api/v1/file/${video.fileIds}`}} source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }}
style={tw("w-full h-full absolute left-0 top-0 rounded-md")} style={tw("w-full h-full absolute left-0 top-0 rounded-md")}
/> />
<Image <Image
source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }} source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }}
style={[ style={[
tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"), tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"),
{ width: 70, height: 100 }, { width: 70, height: 100, borderWidth: 2, borderColor: "white" },
]} ]}
/> />
</View> </View>
@ -45,58 +58,69 @@ function MostViewedVideo({videos, grades}) {
style={{ style={{
fontSize: fontSize.lg, fontSize: fontSize.lg,
marginTop: 5, marginTop: 5,
paddingRight : 4, paddingRight: 4,
color: "#05335F", color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold", fontFamily: "bold",
}} }}
> >
{video.name} {'دوره ویدئویی' + ' ' + video?.name}
</Text> </Text>
<View <View
style={tw("w-full flex flex-row justify-between items-center px-1")} style={tw(
"w-full flex flex-row justify-between items-center px-1 mt-1"
)}
> >
<Text <View style={tw("flex flex-row items-center")}>
style={[ <Text
tw(""), style={[
{ {
marginTop: 10, color: Colors.theme1[colorScheme].gray20,
color: "#132F52", fontFamily: "bold",
fontFamily: "bold", fontSize: fontSize.sm,
fontSize: fontSize.sm, marginRight : 3
}, },
]} ]}
> >
{video.product[0].price + ' ' + 'تومان'} تومان
</Text> </Text>
<Text
style={[
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold",
fontSize: fontSize.xl,
},
]}
>
{separate(video?.product[2]?.price)}
</Text>
</View>
<Text <Text
style={{ style={{
color: "#196EC0", color: Colors.theme1[colorScheme].gray20 ,
fontFamily: "light", fontFamily: "light",
fontSize: fontSize.sm, fontSize: fontSize.tiny,
marginTop: 5, marginTop: 5,
}} }}
> >
{"پایه" + " " + grades[video.gradeId]} {"پایه" + " " + grades[video?.gradeId]}
</Text> </Text>
</View> </View>
</Pressable> </Pressable>
); );
}; };
return ( return (
<View style={tw("w-full flex flex-col w-full")}> <View style={tw("w-full flex flex-col w-full mt-3")}>
<Header title="پربازدیدترین" /> <Header title="پربازدیدترین" />
<FlatList <FlatList
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
horizontal={true} horizontal={true}
inverted={true} inverted={true}
style={tw("pb-1.5 mt-3 flex flex-row w-full")} style={tw("pb-1.5 mt-3 flex flex-row w-full")}
data={videos} data={videos}
renderItem={({ item }) => ( renderItem={({ item }) => <Video video={item} />}
<Video
video={item}
/>
)}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
/> />
</View> </View>

@ -1,14 +1,26 @@
import React from "react"; import React from "react";
import { View, Pressable, Image, Dimensions, Text } from "react-native"; import {
View,
Pressable,
Image,
Dimensions,
Text,
Appearance,
} from "react-native";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import separate from "../../../utils/separate";
//style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const { width } = Dimensions.get("window"); const { width } = Dimensions.get("window");
import Header from "../../Home/components/Header"; import Header from "../../Home/components/Header";
const NewestVideo = ({ videos, grades }) => { const NewestVideo = ({ videos, grades }) => {
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation(); const navigation = useNavigation();
const Video = ({ video }) => { const Video = ({ video }) => {
return ( return (
@ -32,7 +44,7 @@ const NewestVideo = ({ videos, grades }) => {
style={{ style={{
fontSize: fontSize.base, fontSize: fontSize.base,
marginTop: 5, marginTop: 5,
color: "#05335F", color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold", fontFamily: "bold",
}} }}
> >
@ -40,9 +52,9 @@ const NewestVideo = ({ videos, grades }) => {
</Text> </Text>
<Text <Text
style={{ style={{
color: "#196EC0", color: Colors.theme1[colorScheme].gray20,
fontFamily: "light", fontFamily: "light",
fontSize: fontSize.sm, fontSize: fontSize.tiny,
marginTop: 5, marginTop: 5,
}} }}
> >

@ -27,7 +27,7 @@ function Videos({ grades, videos, getVideos }) {
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
useEffect(() => { useEffect(() => {
getVideos(); getVideos({vod : true});
},[]); },[]);
const setBoxPosition = () => { const setBoxPosition = () => {
@ -64,8 +64,7 @@ function Videos({ grades, videos, getVideos }) {
onChange={setSearch} onChange={setSearch}
placeholder={"نام کتاب یا دوره را جستجو کنید"} placeholder={"نام کتاب یا دوره را جستجو کنید"}
/> />
<VerticalGradeFilter grades={grades} /> {/* <Divider type={"vertical"} /> */}
<Divider type={"vertical"} />
{videos.length > 0 && ( {videos.length > 0 && (
<> <>
<MostViewedVideo videos={videos} grades={grades} /> <MostViewedVideo videos={videos} grades={grades} />

Loading…
Cancel
Save