reza added Videos

master
Reza_ashrafi 3 years ago
parent ebaefb4b66
commit 8667e32d67
  1. 19
      src/components/Divider.js
  2. 4
      src/screens/Products/components/Video.js
  3. 4
      src/screens/Products/index.js
  4. 110
      src/screens/Videos/components/MostViewedVideo.js
  5. 75
      src/screens/Videos/components/NewestVideo.js
  6. 43
      src/screens/Videos/components/VerticalGradeFilter.js
  7. 14
      src/screens/Videos/index.js

@ -0,0 +1,19 @@
import React from "react";
import { View, Text } from "react-native";
import tw from "tailwind-rn";
const Divider = ({ type }) => {
return (
<View
style={[
tw(`bg-gray-100 my-4`),
{
height: type === "horizontal" ? "100%" : 1,
width: type === 'horizontal' ? 1 : "100%",
},
]}
></View>
);
};
export default Divider;

@ -21,10 +21,6 @@ function Video({
<Pressable
style={[
{
// shadowColor : "#000",
// shadowOffset : {width : 0, height : 2},
// shadowRadius : 20,
// shadowOpacity : 1,
marginBottom: 15,
borderWidth: 1,
borderColor: "#ddd",

@ -74,8 +74,8 @@ function Products({ grades, productTypes }) {
"flex flex-1 w-full py-5 flex-row flex-wrap justify-between bg-white"
)}
>
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) =>
productType === "ویدئوها" ? <Video /> : <Book />
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, index) =>
productType === "ویدئوها" ? <Video key={index} /> : <Book key={index} />
)}
</View>
</ScrollView>

@ -0,0 +1,110 @@
import React from "react";
import { View, FlatList, Pressable, Image, Dimensions, Text } from "react-native";
import {useNavigation} from '@react-navigation/native';
import tw from "tailwind-rn";
const { width, height } = Dimensions.get("window");
import Header from "../../Home/components/Header";
import posterImage from "../../Products/assets/poster.png";
function MostViewedVideo({}) {
const navigation = useNavigation();
const Video = ({ video }) => {
return (
<Pressable
style={[
{
width : 320,
},
tw("flex flex-col items-end rounded-md ml-4"),
]}
onPress={() => navigation.navigate("Product")}
>
<View
style={[
tw(
"w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
),
{ height: height / 3.8 },
]}
>
<Image
source={video.poster}
style={tw("w-full h-full absolute left-0 top-0 rounded-md")}
/>
<Image
source={{ uri: video.imageUrl }}
style={[
tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"),
{ width: 70, height: 100 },
]}
/>
</View>
<Text
style={{
fontSize: width / 27,
marginTop: 5,
color: "#05335F",
fontFamily: "bold",
}}
>
{video.name}
</Text>
<View
style={tw("w-full flex flex-row justify-between items-center")}
>
<Text
style={[
tw(""),
{
marginTop: 10,
color: "#132F52",
fontFamily: "light",
fontSize: width / 37,
},
]}
>
{video.price}
</Text>
<Text
style={{
color: "#196EC0",
fontFamily: "light",
fontSize: width / 37,
marginTop: 5,
}}
>
{"پایه" + " " + video.grade}
</Text>
</View>
</Pressable>
);
};
return (
<View style={tw("w-full flex flex-col w-full")}>
<Header title="پربازدیدترین" />
<FlatList
horizontal={true}
inverted={true}
style={tw("pb-1.5 mt-3 flex flex-row w-full")}
data={[0,1,2]}
renderItem={({ item }) => (
<Video
video={{
name: "ریاضی",
price: "145.000 تومان",
grade: "4",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
}}
/>
)}
keyExtractor={(item) => item}
/>
</View>
);
}
export default MostViewedVideo;

@ -0,0 +1,75 @@
import React from "react";
import { View, Pressable, Image, Dimensions, Text } from "react-native";
import { useNavigation } from "@react-navigation/native";
import tw from "tailwind-rn";
const { width, height } = Dimensions.get("window");
import Header from "../../Home/components/Header";
import posterImage from "../../Products/assets/poster.png";
const NewestVideo = () => {
const navigation = useNavigation();
const Video = ({ video }) => {
return (
<Pressable
style={[
{
width: width / 2.3,
},
tw("flex flex-col items-end mb-4"),
]}
onPress={() => navigation.navigate("Product")}
>
<Image
source={video.poster}
style={[
tw("rounded-sm"),
{ width: '100%', height: ((width / 2.5 * 3 / 4)) },
]}
/>
<Text
style={{
fontSize: width / 27,
marginTop: 5,
color: "#05335F",
fontFamily: "bold",
}}
>
{video.name}
</Text>
<Text
style={{
color: "#196EC0",
fontFamily: "light",
fontSize: width / 37,
marginTop: 5,
}}
>
{"پایه" + " " + video.grade}
</Text>
</Pressable>
);
};
return (
<View style={tw("w-full flex flex-col w-full")}>
<Header title="جدیدترین دورهها" />
<View style={tw("w-full flex flex-row flex-wrap justify-between mt-3")}>
{[0, 1, 2, 3].map((video, index) => (
<Video
video={{
name: "ریاضی",
price: "145.000 تومان",
grade: "4",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
}}
key={index}
/>
))}
</View>
</View>
);
};
export default NewestVideo;

@ -0,0 +1,43 @@
import React from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import tw from "tailwind-rn";
import Header from "../../Home/components/Header";
const VerticalGradeFilter = ({ grades }) => {
const Grade = ({ grade }) => {
return (
<TouchableOpacity
style={[
tw("p-3 rounded-sm border border-gray-300 mt-2 ml-2"),
{ backgroundColor: "#f9f9f9" },
]}
>
<Text style={[tw("text-xs text-gray-600"), { fontFamily: "light" }]}>
{grades[grade]}
</Text>
</TouchableOpacity>
);
};
return (
<View style={tw("w-full flex flex-col mt-3")}>
<Header title={"پایه تحصیلی"} />
<FlatList
style={tw("flex flex-row w-full pb-1.5")}
horizontal={true}
inverted={true}
data={Object.keys(grades)}
renderItem={({ item }) => <Grade grade={item} />}
keyExtractor={(item) => item}
/>
</View>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
});
export default connect(mapStateToProps)(VerticalGradeFilter);

@ -7,13 +7,16 @@ import {
SafeAreaView,
StatusBar,
Platform,
LayoutAnimation
LayoutAnimation,
} from "react-native";
import tw from "tailwind-react-native-classnames";
import tw from "tailwind-rn";
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Search from "../../components/Search";
import VerticalGradeFilter from "./components/VerticalGradeFilter";
import Divider from "../../components/Divider";
import MostViewedVideo from './components/MostViewedVideo';
import NewestVideo from './components/NewestVideo';
//assets
const width = Dimensions.get("window").width;
@ -45,6 +48,11 @@ function Videos(props) {
onChange={setSearch}
placeholder={"نام کتاب یا دوره را جستجو کنید"}
/>
<VerticalGradeFilter />
<Divider type={'vertical'} />
<MostViewedVideo />
<Divider type={'vertical'} />
<NewestVideo />
</ScrollView>
</SafeAreaView>
);

Loading…
Cancel
Save