reza added VideoDisplay

master
Reza_ashrafi 3 years ago
parent f6955073f0
commit 48de8b9d4d
  1. 31
      navigation/index.js
  2. 2
      package.json
  3. BIN
      src/assets/video.mp4
  4. 3
      src/screens/Video/components/Season.js
  5. 1
      src/screens/Video/index.js
  6. 147
      src/screens/VideoDisplay/components/Season/index.js
  7. 102
      src/screens/VideoDisplay/index.js
  8. 7
      yarn.lock

@ -2,7 +2,12 @@ import React from "react";
import { NavigationContainer } from "@react-navigation/native"; import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Entypo, FontAwesome, Ionicons, MaterialIcons } from "@expo/vector-icons"; import {
Entypo,
FontAwesome,
Ionicons,
MaterialIcons,
} from "@expo/vector-icons";
import OrderDetails from "../src/screens/OrderDetails"; import OrderDetails from "../src/screens/OrderDetails";
import OrdersFollowUp from "../src/screens/OrdersFollowUp"; import OrdersFollowUp from "../src/screens/OrdersFollowUp";
import { Dimensions } from "react-native"; import { Dimensions } from "react-native";
@ -13,7 +18,7 @@ import Login from "../src/screens/Login";
import Otp from "../src/screens/Otp"; import Otp from "../src/screens/Otp";
import Product from "../src/screens/Product"; import Product from "../src/screens/Product";
import QR from "../src/screens/QR"; import QR from "../src/screens/QR";
import Faq from "../src/screens/Faq" import Faq from "../src/screens/Faq";
import Activation from "../src/screens/Activation"; import Activation from "../src/screens/Activation";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Profile from "../src/screens/Profile"; import Profile from "../src/screens/Profile";
@ -21,6 +26,7 @@ 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"; import Video from "../src/screens/Video";
import VideoDisplay from "../src/screens/VideoDisplay";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
@ -71,7 +77,11 @@ const BottomTabNavigator = () => {
component={VODStackScreen} component={VODStackScreen}
options={{ options={{
tabBarIcon: ({ focused, color }) => ( tabBarIcon: ({ focused, color }) => (
<MaterialIcons name="ondemand-video" size={focused ? 27 : 23} color={color} /> <MaterialIcons
name="ondemand-video"
size={focused ? 27 : 23}
color={color}
/>
), ),
}} }}
/> />
@ -121,9 +131,7 @@ const HomeStackScreen = () => {
const ProductsStack = createNativeStackNavigator(); const ProductsStack = createNativeStackNavigator();
const ProductsStackScreen = () => { const ProductsStackScreen = () => {
return ( return (
<ProductsStack.Navigator <ProductsStack.Navigator screenOptions={{ headerShown: false }}>
screenOptions={{ headerShown: false }}
>
<ProductsStack.Screen name="Products" component={Products} /> <ProductsStack.Screen name="Products" component={Products} />
<ProductsStack.Screen name="QR" component={QR} /> <ProductsStack.Screen name="QR" component={QR} />
<ProductsStack.Screen name="Product" component={Product} /> <ProductsStack.Screen name="Product" component={Product} />
@ -137,11 +145,10 @@ const ProductsStackScreen = () => {
const VODStack = createNativeStackNavigator(); const VODStack = createNativeStackNavigator();
const VODStackScreen = () => { const VODStackScreen = () => {
return ( return (
<VODStack.Navigator <VODStack.Navigator 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="Video" component={Video} />
<VODStack.Screen name="VideoDisplay" component={VideoDisplay} />
<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} />
@ -175,7 +182,7 @@ const OrderStackScreen = () => {
<OrderStack.Screen name="Order" component={OrderDetails} /> <OrderStack.Screen name="Order" component={OrderDetails} />
</OrderStack.Navigator> </OrderStack.Navigator>
); );
} };
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const Navigation = ({}) => { const Navigation = ({}) => {
@ -195,9 +202,7 @@ const Navigation = ({ }) => {
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {};
};
}; };
export default connect(mapStateToProps)(Navigation); export default connect(mapStateToProps)(Navigation);

@ -19,6 +19,7 @@
"axios": "^0.24.0", "axios": "^0.24.0",
"expo": "^44.0.1", "expo": "^44.0.1",
"expo-app-loading": "~1.3.0", "expo-app-loading": "~1.3.0",
"expo-av": "~10.2.0",
"expo-barcode-scanner": "~11.2.0", "expo-barcode-scanner": "~11.2.0",
"expo-camera": "~12.1.0", "expo-camera": "~12.1.0",
"expo-device": "~4.1.0", "expo-device": "~4.1.0",
@ -49,6 +50,5 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.9" "@babel/core": "^7.12.9"
}, },
"private": true "private": true
} }

Binary file not shown.

@ -8,9 +8,11 @@ import {
} from "react-native"; } from "react-native";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import Colors from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
import { useNavigation } from "@react-navigation/native";
const { width, height } = Dimensions.get("window"); const { width, height } = Dimensions.get("window");
const Season = ({ season }) => { const Season = ({ season }) => {
const navigation = useNavigation();
const [activeSeason, setActiveSeason] = useState(null); const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => { const Unit = ({ unit }) => {
return ( return (
@ -66,6 +68,7 @@ const Season = ({ season }) => {
backgroundColor: Colors.theme1.light.blue8, backgroundColor: Colors.theme1.light.blue8,
}, },
]} ]}
onPress={() => navigation.navigate("VideoDisplay")}
> >
<Text <Text
style={{ style={{

@ -97,7 +97,6 @@ function Product({
]} ]}
/> />
</View> </View>
<View <View
style={[ style={[
tw("flex flex-col flex-1 justify-between"), tw("flex flex-col flex-1 justify-between"),

@ -0,0 +1,147 @@
import React, { useState } from "react";
import {
View,
Text,
Dimensions,
Pressable,
} from "react-native";
import tw from "tailwind-rn";
import Colors from "../../../../constants/Colors";
import { useNavigation } from "@react-navigation/native";
const { width, height } = Dimensions.get("window");
const Season = ({ season }) => {
const navigation = useNavigation();
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,
},
]}
onPress={() => navigation.navigate("VideoDisplay")}
>
<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 mt-5")}>
<Pressable
style={[
tw(
"flex flex-row-reverse justify-between items-center rounded-md py-2 px-3 mb-3"
),
{ backgroundColor: Colors.theme1.light.blue5 },
]}
>
<Text
style={[
{
fontFamily: "regular",
fontSize: width / 34,
color: "white",
},
]}
>
{season.name}
</Text>
<Text
style={[
{
fontFamily: "regular",
fontSize: width / 36,
color: "white",
},
]}
>
{season.duration}
</Text>
</Pressable>
{season.units.map((unit, index) => (
<Unit unit={unit} key={index} />
))}
</View>
);
};
export default Season;

@ -0,0 +1,102 @@
import React, { useState } from "react";
import {
View,
StyleSheet,
Dimensions,
ScrollView,
SafeAreaView,
StatusBar,
LayoutAnimation,
} from "react-native";
import { connect } from "react-redux";
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import { Video, AVPlaybackStatus } from "expo-av";
import tw from "tailwind-rn";
import Season from './components/Season';
import movie from "../../assets/video.mp4";
const { height, width } = Dimensions.get("window");
function VideoDisplay({
product = {
type: "کتاب ها",
name: "ریاضی",
grade: "پایه هفتم ابتدایی",
video: movie,
season: {
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 video = React.useRef(null);
const [status, setStatus] = React.useState({});
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")}>
<Video
ref={video}
style={{ width: "100%", height: (width * 9) / 16 - 16 }}
source={product.video}
useNativeControls
resizeMode="cover"
isLooping
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
/>
<Season season={product.season} />
</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 VideoDisplay;

@ -2842,6 +2842,13 @@ expo-asset@~8.4.5:
path-browserify "^1.0.0" path-browserify "^1.0.0"
url-parse "^1.4.4" url-parse "^1.4.4"
expo-av@~10.2.0:
version "10.2.0"
resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-10.2.0.tgz#4bc4b1f409f3ad2e247586f22e4fb9e1aa666b0a"
integrity sha512-jo7Nv3IgJPAiOerKRwlL4guKkULZfvE5KIRZmgLurgPvJFHHAye4pFe2IlqQftKd66NHo1vq2zIGF3B3fsTPmw==
dependencies:
"@expo/config-plugins" "^4.0.2"
expo-barcode-scanner@~11.2.0: expo-barcode-scanner@~11.2.0:
version "11.2.0" version "11.2.0"
resolved "https://registry.yarnpkg.com/expo-barcode-scanner/-/expo-barcode-scanner-11.2.0.tgz#9d316a36962f74f117f19f7c722de1334a4fd8d2" resolved "https://registry.yarnpkg.com/expo-barcode-scanner/-/expo-barcode-scanner-11.2.0.tgz#9d316a36962f74f117f19f7c722de1334a4fd8d2"

Loading…
Cancel
Save