reza added Video

master
Reza_ashrafi 3 years ago
parent 8667e32d67
commit f6955073f0
  1. 2
      navigation/index.js
  2. 6
      src/redux/proxy.js
  3. 7
      src/redux/reducers/user.js
  4. 16
      src/screens/Home/index.js
  5. 4
      src/screens/Splash/index.js
  6. BIN
      src/screens/Video/assets/arrowMore.png
  7. BIN
      src/screens/Video/assets/poster.png
  8. BIN
      src/screens/Video/assets/user.png
  9. 148
      src/screens/Video/components/Season.js
  10. 157
      src/screens/Video/index.js
  11. 2
      src/screens/Videos/components/MostViewedVideo.js
  12. 2
      src/screens/Videos/components/NewestVideo.js

@ -20,6 +20,7 @@ import Profile from "../src/screens/Profile";
import Videos from "../src/screens/Videos"; import Videos from "../src/screens/Videos";
import Exams from "../src/screens/Exams"; import Exams from "../src/screens/Exams";
import ShoppingCart from "../src/screens/ShoppingCart"; import ShoppingCart from "../src/screens/ShoppingCart";
import Video from "../src/screens/Video";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
@ -140,6 +141,7 @@ const VODStackScreen = () => {
screenOptions={{ headerShown: false }} screenOptions={{ headerShown: false }}
> >
<VODStack.Screen name="VOD" component={Videos} /> <VODStack.Screen name="VOD" component={Videos} />
<VODStack.Screen name="Video" component={Video} />
<VODStack.Screen name="QR" component={QR} /> <VODStack.Screen name="QR" component={QR} />
<VODStack.Screen name="Orders" component={OrderStackScreen} /> <VODStack.Screen name="Orders" component={OrderStackScreen} />
<VODStack.Screen name="Faq" component={Faq} /> <VODStack.Screen name="Faq" component={Faq} />

@ -150,10 +150,10 @@ class Proxy {
console.log("proxy logout error : ", error); console.log("proxy logout error : ", error);
} }
}; };
status = () => { status = async () => {
try { try {
let refresh = AsyncStorage.getItem("refresh"); let refresh = await AsyncStorage.getItem("refresh");
let userData = AsyncStorage.getItem("userData"); let userData = await AsyncStorage.getItem("userData");
if (!refresh) return false; if (!refresh) return false;
if (refresh == "undefined") { if (refresh == "undefined") {
const keys = ["refresh", "access", "userData"]; const keys = ["refresh", "access", "userData"];

@ -1,8 +1,13 @@
import proxy from "../proxy"; import proxy from "../proxy";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
const checkStatus = async () => {
let status = await proxy.status();
return status;
}
let initialState = { let initialState = {
status: proxy.status(), status: checkStatus(),
loading: false, loading: false,
error: null, error: null,
list: null, list: null,

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next"; import { connect } from "react-redux";
import { import {
View, View,
StyleSheet, StyleSheet,
@ -21,7 +21,7 @@ import Drawer from "../../components/Drawer";
// import { SafeAreaView } from 'react-native-safe-area-context'; // import { SafeAreaView } from 'react-native-safe-area-context';
// Within your render function // Within your render function
function Home(props) { const Home = ({ isLogin }) => {
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
const setBoxPosition = () => { const setBoxPosition = () => {
@ -49,7 +49,7 @@ function Home(props) {
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
} };
// Later on in your styles.. // Later on in your styles..
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -65,4 +65,10 @@ const styles = StyleSheet.create({
}, },
}); });
export default Home; const mapStateToProps = (state) => ({
isLogin: state.user.status,
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

@ -5,8 +5,7 @@ import Logo from "../../assets/images/logo.png";
const { width, height } = Dimensions.get("window"); const { width, height } = Dimensions.get("window");
function Splash({ navigation, isLogin, loading}) { function Splash({ navigation, isLogin}) {
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
!isLogin !isLogin
@ -33,7 +32,6 @@ function Splash({ navigation, isLogin, loading}) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isLogin: state.user.status, isLogin: state.user.status,
loading : state.userProduct.loading,
}); });
const mapDispatchToProps = {}; const mapDispatchToProps = {};

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

@ -0,0 +1,148 @@
import React, { useState } from "react";
import {
View,
Text,
Dimensions,
Pressable,
TouchableOpacity,
} from "react-native";
import tw from "tailwind-rn";
import Colors from "../../../constants/Colors";
const { width, height } = Dimensions.get("window");
const Season = ({ season }) => {
const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
return (
<View
style={[
tw("w-full flex flex-col rounded-md overflow-hidden mb-3"),
{ borderWidth: 1, borderColor: Colors.theme1.light.blue3 },
]}
>
<View
style={[
tw(
"w-full flex flex-row-reverse justify-between items-center py-1.5 px-2"
),
{
borderBottomWidth: 1,
borderColor: Colors.theme1.light.blue3,
backgroundColor: Colors.theme1.light.blue8,
},
]}
>
<Text
style={[
{
fontFamily: "regular",
fontSize: width / 34,
color: Colors.theme1.light.blue5,
},
]}
>
{unit.name}
</Text>
<Text
style={[
{
fontFamily: "regular",
fontSize: width / 36,
color: Colors.theme1.light.blue5,
},
]}
>
{unit.duration}
</Text>
</View>
<View style={[tw("w-full flex flex-row-reverse")]}>
{unit.play && (
<Pressable
style={[
tw("flex flex-1 flex-row items-center py-1.5 px-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1.light.blue3,
backgroundColor: Colors.theme1.light.blue8,
},
]}
>
<Text
style={{
width: "100%",
textAlign: "center",
fontFamily: "regular",
fontSize: width / 34,
color: Colors.theme1.light.blue5,
}}
>
نمایش
</Text>
</Pressable>
)}
{unit.download && (
<Pressable
style={tw("flex flex-1 flex-row items-center py-1.5 px-2")}
>
<Text
style={{
width: "100%",
textAlign: "center",
fontFamily: "regular",
fontSize: width / 34,
color: Colors.theme1.light.blue5,
backgroundColor: Colors.theme1.light.blue8,
}}
>
دانلود
</Text>
</Pressable>
)}
</View>
</View>
);
};
return (
<View style={tw("w-full flex flex-col")}>
<TouchableOpacity
style={[
tw(
"flex flex-row-reverse justify-between items-center rounded-md py-2 px-3 mb-3"
),
{ backgroundColor: Colors.theme1.light.blue5 },
]}
onPress={() =>
setActiveSeason(season.name === activeSeason ? null : season.name)
}
>
<Text
style={[
{
fontFamily: "regular",
fontSize: width / 34,
color: "white",
},
]}
>
{season.name}
</Text>
<Text
style={[
{
fontFamily: "regular",
fontSize: width / 36,
color: "white",
},
]}
>
{season.duration}
</Text>
</TouchableOpacity>
{season.name === activeSeason &&
season.units.map((unit, index) => <Unit unit={unit} key={index} />)}
</View>
);
};
export default Season;

@ -0,0 +1,157 @@
import React, { useState } from "react";
import {
View,
StyleSheet,
Dimensions,
ScrollView,
SafeAreaView,
StatusBar,
LayoutAnimation,
Image,
Text,
} from "react-native";
import { connect } from "react-redux";
import userImage from "./assets/user.png";
import poster from "./assets/poster.png";
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Divider from "../../components/Divider";
import Season from "./components/Season";
import tw from "tailwind-rn";
const { height, width } = Dimensions.get("window");
function Product({
product = {
type: "کتاب ها",
name: "ریاضی",
price: "145.000 تومان",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: poster,
grade: "پایه هفتم ابتدایی",
seasons: [
{
name: "فصل اول: مباحث جوشش مواد مذاب در مرکز زمین",
duration: "2:30:13",
units: [
{
name: "مقدمه جالب توجه نویسنده کتاب برای شما",
duration: "14:30",
download: true,
play: true,
},
{
name: "چگونگی ساخت نیروگاههای برقی ",
duration: "14:30",
download: false,
play: true,
},
{
name: "آیا گوگل از ما دزدی میکند ؟",
duration: "14:30",
download: true,
play: true,
},
],
},
],
},
}) {
const [position, setPosition] = useState("100%");
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar setBoxPosition={setBoxPosition} back={true} />
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
<View style={tw("flex flex-col")}>
<View
style={[
tw(
"w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
),
{ height: height / 3.8 },
]}
>
<Image
source={product.poster}
style={tw("w-full rounded-md h-full absolute left-0 top-0")}
/>
<Image
source={{ uri: product.imageUrl }}
style={[
tw("rounded-md h-full rounded-md ml-2"),
{ width: 70, height: 100 },
]}
/>
</View>
<View
style={[
tw("flex flex-col flex-1 justify-between"),
{
paddingRight: 10,
},
]}
>
<View style={tw("flex flex-col")}>
<Text
style={{
marginTop: 5,
color: "#05335F",
fontSize: width / 21,
marginBottom: 0,
fontFamily: "bold",
}}
>
{product.name}
</Text>
<Text
style={{
color: "#196EC0",
fontSize: width / 37,
marginBottom: 5,
fontFamily: "light",
}}
>
{product.grade}
</Text>
</View>
<Divider type={"vertical"} />
</View>
</View>
<View style={tw('flex flex-col')}>
{
product.seasons.map((season, index) => <Season season={season} key={index} />)
}
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
},
container: {
width: Dimensions.get("window").width,
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 5,
paddingHorizontal: 16,
},
});
export default Product;

@ -19,7 +19,7 @@ function MostViewedVideo({}) {
}, },
tw("flex flex-col items-end rounded-md ml-4"), tw("flex flex-col items-end rounded-md ml-4"),
]} ]}
onPress={() => navigation.navigate("Product")} onPress={() => navigation.navigate("Video")}
> >
<View <View
style={[ style={[

@ -19,7 +19,7 @@ const NewestVideo = () => {
}, },
tw("flex flex-col items-end mb-4"), tw("flex flex-col items-end mb-4"),
]} ]}
onPress={() => navigation.navigate("Product")} onPress={() => navigation.navigate("Video")}
> >
<Image <Image
source={video.poster} source={video.poster}

Loading…
Cancel
Save