From f2f88573b6c30e6141cb30b85cfba5a30ee46231 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 12 Apr 2022 19:17:18 +0430 Subject: [PATCH] reza fixed all colors --- navigation/index.js | 49 +++-- .../BottomSheetComponents/ProductQuestion.js | 18 +- .../BottomSheetComponents/ProductReview.js | 16 +- .../ProductSpecifications.js | 14 +- .../BottomSheetComponents/Ticket.js | 5 +- src/components/Drawer.js | 21 +-- src/components/Empty.js | 20 +- src/components/Navbar.js | 9 +- src/components/Progress.js | 32 ++-- src/components/Search.js | 22 +-- src/screens/Products/components/Main.js | 4 +- src/screens/Video/components/Season.js | 33 ++-- src/screens/Video/index.js | 9 +- .../VideoDisplay/components/Season/index.js | 41 +++-- src/screens/VideoDisplay/index.js | 14 +- .../Videos/components/MostViewedVideo.js | 174 +++++++++--------- src/screens/Videos/components/NewestVideo.js | 15 +- src/screens/Videos/index.js | 6 +- 18 files changed, 258 insertions(+), 244 deletions(-) diff --git a/navigation/index.js b/navigation/index.js index c900402..d6695d5 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -39,12 +39,8 @@ import Blog from "../src/screens/Blog"; import Sample from "../src/screens/Product/components/Sample"; //style -import fontSize from "../src/constants/fontSize"; import Colors from "../src/constants/Colors"; -const ios = Platform.OS === "ios"; -const colorScheme = Appearance.getColorScheme(); - const Tab = createBottomTabNavigator(); const BottomTabNavigator = ({}) => { const [headerShown, setHeaderShown] = React.useState(true); @@ -64,10 +60,10 @@ const BottomTabNavigator = ({}) => { }, tabBarIconStyle: {}, tabBarLabelPosition: "below-icon", - tabBarActiveTintColor: Colors.theme1[colorScheme].green79, + tabBarActiveTintColor: Colors.theme1['light'].green79, tabBarInactiveTintColor: "grey", tabBarStyle: { - backgroundColor: Colors.theme1[colorScheme].white, + backgroundColor: Colors.theme1['light'].white, }, tabBarLabelStyle: { // fontSize: fontSize.sm, @@ -88,7 +84,7 @@ const BottomTabNavigator = ({}) => { width={31.192} height={31.192} > - + { > { // tabBarBadge: count, // tabBarBadgeStyle: { // color: "white", - // backgroundColor: Colors.theme1[colorScheme].green79, + // backgroundColor: Colors.theme1['light'].green79, // fontSize: fontSize.sm, // }, title: "سبد خرید", @@ -141,7 +137,7 @@ const BottomTabNavigator = ({}) => { height={31.017} > { > { { { data-name="Vector" d="M12.427 14.995v-2.083c0-2.673 1.892-3.766 4.2-2.43l1.805 1.042 1.806 1.041c2.308 1.336 2.308 3.523 0 4.86l-1.806 1.041-1.805 1.046c-2.308 1.332-4.2.239-4.2-2.434v-2.083Z" fill="none" - stroke={Colors.theme1[colorScheme].green79} + stroke={Colors.theme1['light'].green79} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} @@ -250,7 +246,7 @@ const BottomTabNavigator = ({}) => { > { > { > { { data-name="Vector" d="M16.79 25.471v-6.693" fill="none" - stroke={Colors.theme1[colorScheme].green79} + stroke={Colors.theme1['light'].green79} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} @@ -348,7 +344,7 @@ const HomeStackScreen = () => { @@ -371,7 +367,7 @@ const ProductsStackScreen = () => { @@ -388,7 +384,7 @@ const VODStackScreen = () => { @@ -404,7 +400,7 @@ const CARTStackScreen = () => { @@ -419,7 +415,7 @@ const PROFILEStackScreen = () => { @@ -444,7 +440,7 @@ const Navigation = ({ getStatus, isLogin, userProducts }) => { // initialRouteName="Root" screenOptions={{ headerShown: false, - contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, + contentStyle: { backgroundColor: Colors.theme1['light'].white }, }} > @@ -479,6 +475,7 @@ const Navigation = ({ getStatus, isLogin, userProducts }) => { const mapStateToProps = (state) => ({ isLogin: state.user.status, userProducts: state.userProduct.list, + theme : state.publicApi.theme }); const mapDispatchToProps = { getStatus: user.getStatus, diff --git a/src/components/BottomSheetComponents/ProductQuestion.js b/src/components/BottomSheetComponents/ProductQuestion.js index 51586a8..f4518ae 100644 --- a/src/components/BottomSheetComponents/ProductQuestion.js +++ b/src/components/BottomSheetComponents/ProductQuestion.js @@ -2,7 +2,6 @@ import { View, Text, ScrollView, - Dimensions, Appearance, Platform, } from "react-native"; @@ -17,8 +16,7 @@ import Colors from "../../constants/Colors"; const ios = Platform.OS === "ios"; -const ProductQuestion = ({ list, mobile }) => { - const colorScheme = Appearance.getColorScheme(); +const ProductQuestion = ({ list, mobile, theme }) => { return ( { } mb-4` ), { - backgroundColor: Colors.theme1[colorScheme].greenFF1, + backgroundColor: Colors.theme1[theme].greenFF1, }, ]} > @@ -38,7 +36,7 @@ const ProductQuestion = ({ list, mobile }) => { style={[ { fontSize: mobile ? fontSize.sm : fontSize.xl3, - color: Colors.theme1[colorScheme].green79, + color: Colors.theme1[theme].green79, fontFamily: "demi", }, ]} @@ -55,14 +53,13 @@ const ProductQuestion = ({ list, mobile }) => { ); }; -const Question = ({ question, mobile }) => { - const colorScheme = Appearance.getColorScheme(); +const Question = ({ question, mobile, theme }) => { return ( { { { const mapStateToProps = (state) => ({ mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); export default connect(mapStateToProps)(ProductQuestion); diff --git a/src/components/BottomSheetComponents/ProductReview.js b/src/components/BottomSheetComponents/ProductReview.js index ef8b634..7357bba 100644 --- a/src/components/BottomSheetComponents/ProductReview.js +++ b/src/components/BottomSheetComponents/ProductReview.js @@ -10,8 +10,8 @@ import tw from "tailwind-rn"; const { width } = Dimensions.get("window"); const ios = Platform.OS === "ios"; -const ProductReviews = ({ list, mobile }) => { - const colorScheme = Appearance.getColorScheme(); +const ProductReviews = ({ list, mobile, theme }) => { + const Property = ({ question }) => { return ( @@ -22,7 +22,7 @@ const ProductReviews = ({ list, mobile }) => { `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 ${mobile ? "py-3" : "py-4"} mb-4` ), { - backgroundColor: Colors.theme1[colorScheme].greenFF1 + '66', + backgroundColor: Colors.theme1[theme].greenFF1 + '66', }, ]} > @@ -30,7 +30,7 @@ const ProductReviews = ({ list, mobile }) => { style={[ { fontSize: mobile ? fontSize.tiny : fontSize.lg, - color: Colors.theme1[colorScheme].green79, + color: Colors.theme1[theme].green79, fontFamily: "bold", }, ]} @@ -69,6 +69,7 @@ const ProductReviews = ({ list, mobile }) => { ); }; + return ( { "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-2" ), { - backgroundColor: Colors.theme1[colorScheme].greenFF1 , + backgroundColor: Colors.theme1[theme].greenFF1 , }, ]} > @@ -86,7 +87,7 @@ const ProductReviews = ({ list, mobile }) => { style={[ { fontSize: fontSize.sm, - color: Colors.theme1[colorScheme].green79, + color: Colors.theme1[theme].green79, fontFamily: "demi", }, ]} @@ -104,7 +105,8 @@ const ProductReviews = ({ list, mobile }) => { }; const mapStateToProps = (state) => ({ - mobile : state.publicApi.mobile + mobile : state.publicApi.mobile, + theme : state.publicApi.theme }) export default connect(mapStateToProps)(ProductReviews); diff --git a/src/components/BottomSheetComponents/ProductSpecifications.js b/src/components/BottomSheetComponents/ProductSpecifications.js index 97b72c9..deb9070 100644 --- a/src/components/BottomSheetComponents/ProductSpecifications.js +++ b/src/components/BottomSheetComponents/ProductSpecifications.js @@ -1,4 +1,4 @@ -import { View, Text, ScrollView, Dimensions, Appearance, Platform } from "react-native"; +import { View, Text, ScrollView, Dimensions, Platform } from "react-native"; import React from "react"; import {connect} from 'react-redux'; @@ -10,8 +10,8 @@ import tw from "tailwind-rn"; const { width } = Dimensions.get("window"); const ios = Platform.OS === "ios"; -const ProductSpecifications = ({ list, mobile }) => { - const colorScheme = Appearance.getColorScheme(); +const ProductSpecifications = ({ list, mobile, theme }) => { + const Property = ({ prop }) => { return ( @@ -57,6 +57,7 @@ const ProductSpecifications = ({ list, mobile }) => { ); }; + return ( { "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-3 py-3 mb-4" ), { - backgroundColor: Colors.theme1[colorScheme].greenFF1 , + backgroundColor: Colors.theme1[theme].greenFF1 , }, ]} > @@ -74,7 +75,7 @@ const ProductSpecifications = ({ list, mobile }) => { style={[ { fontSize: fontSize.sm, - color: Colors.theme1[colorScheme].green79 , + color: Colors.theme1[theme].green79 , fontFamily: "demi", }, ]} @@ -92,7 +93,8 @@ const ProductSpecifications = ({ list, mobile }) => { }; const mapStateToProps = (state) => ({ - mobile: state.publicApi.mobile + mobile: state.publicApi.mobile, + theme : state.publicApi.theme }); export default connect(mapStateToProps)(ProductSpecifications); diff --git a/src/components/BottomSheetComponents/Ticket.js b/src/components/BottomSheetComponents/Ticket.js index 417c58d..9d89153 100644 --- a/src/components/BottomSheetComponents/Ticket.js +++ b/src/components/BottomSheetComponents/Ticket.js @@ -23,8 +23,8 @@ export const Ticket = ({ upload, setTicket, grades, + theme }) => { - const colorScheme = Appearance.getColorScheme(); let opt = useMemo( () => ["واحد مورد نظر", "واحد فروش", "واحد فنی", "واحد محتوایی"], [status] @@ -132,7 +132,7 @@ export const Ticket = ({ ({ status: state.user.status, ticket: state.form.ticket, grades: state.publicApi.grades, + theme: state.publicApi.theme }); const mapDispatchToProps = { diff --git a/src/components/Drawer.js b/src/components/Drawer.js index 78608ae..29672bc 100644 --- a/src/components/Drawer.js +++ b/src/components/Drawer.js @@ -8,11 +8,9 @@ import { Text, TouchableOpacity, Image, - Appearance, LayoutAnimation, } from "react-native"; import { useNavigation } from "@react-navigation/native"; -import { Ionicons, AntDesign } from "@expo/vector-icons"; import { connect } from "react-redux"; import { user } from "../redux/actions"; import Svg, { Path, G } from "react-native-svg"; @@ -21,7 +19,6 @@ import Svg, { Path, G } from "react-native-svg"; import tw from "tailwind-rn"; import fontSize from "../constants/fontSize"; import Colors from "../constants/Colors"; -import { drop } from "lodash"; const ios = Platform.OS === "ios"; @@ -32,13 +29,14 @@ if ( UIManager.setLayoutAnimationEnabledExperimental(true); } -const Drawer = ({ position, setBoxPosition, user, mobile }) => { +const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => { const [height, setHeight] = useState(Dimensions.get("window").height); const [width, setWidth] = useState(Dimensions.get("window").width); const [dropdown, setDropdown] = useState(false); const [dropdownHeight, setDropdownHeight] = useState(0); + const navigation = useNavigation(); + - const colorScheme = Appearance.getColorScheme(); const routes = [ { name: "صفحه اصلی", @@ -205,8 +203,8 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => { message: "", }, ]; - const [addUserDropdown, setAddUserDropdown] = useState(false); - const navigation = useNavigation(); + + const Route = ({ route }) => { return ( { {user?.picFileIds ? ( @@ -353,7 +351,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => { ), { borderBottomWidth: 1, - borderColor: Colors.theme1[colorScheme].grayE3, + borderColor: Colors.theme1[theme].grayE3, height: dropdownHeight, }, ]} @@ -362,7 +360,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => { style={{ fontSize: mobile ? fontSize.base : fontSize.xl, fontFamily: "regular", - color: Colors.theme1[colorScheme].gray20, + color: Colors.theme1[theme].gray20, }} > افزودن حساب کاربری جدید @@ -373,7 +371,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => { marginTop: 3, fontSize: fontSize.xl4, fontFamily: "bold", - color: Colors.theme1[colorScheme].gray20 + "77", + color: Colors.theme1[theme].gray20 + "77", }} > + @@ -393,6 +391,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => { const mapStateToProps = (state) => ({ user: state.user.status, mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); const mapDispatchToProps = { diff --git a/src/components/Empty.js b/src/components/Empty.js index 18b0534..888e5ae 100644 --- a/src/components/Empty.js +++ b/src/components/Empty.js @@ -1,13 +1,13 @@ -import { View, Text, Pressable, Appearance } from "react-native"; +import { View, Text, Pressable } from "react-native"; import React from "react"; +import { connect } from "react-redux"; //style import Colors from "../constants/Colors"; import tw from "tailwind-rn"; import fontSize from "../constants/fontSize"; -const Empty = ({ text, buttonText, buttonAction }) => { - const colorScheme = Appearance.getColorScheme(); +const Empty = ({ text, buttonText, buttonAction, theme }) => { return ( { {text + " " + ":("} {buttonText && ( - buttonAction()}> + buttonAction()} + > { ); }; -export default Empty; +const mapStateToProps = (state) => ({ + theme: state.publicApi.theme, +}); + +export default connect(mapStateToProps)(Empty); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index eef3ef4..8037d6f 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -34,9 +34,9 @@ const Navbar = ({ addToBookmark, deleteBookmark, userFavoriteList, + theme }) => { const navigation = useNavigation(); - const colorScheme = Appearance.getColorScheme(); const isActiveBookmark = React.useMemo(() => { return userFavoriteList.filter((object) => @@ -52,8 +52,8 @@ const Navbar = ({ style={[ tw("rounded-md p-1"), { - backgroundColor: Color.theme1[colorScheme].greenCF + "05", - borderColor: Color.theme1[colorScheme].green79, + backgroundColor: Color.theme1[theme].greenCF + "05", + borderColor: Color.theme1[theme].green79, borderWidth: 1, marginLeft: route === "AR" ? 10 : 0, }, @@ -92,7 +92,7 @@ const Navbar = ({ style={{ fontFamily: "bold", fontSize: fontSize.lg, - color: Color.theme1[colorScheme].green79, + color: Color.theme1[theme].green79, paddingRight: 16, }} > @@ -305,6 +305,7 @@ const Navbar = ({ const mapStateToProps = (state) => ({ userFavoriteList: state.userFavorite.list, + theme: state.publicApi.theme }); const mapDispatchToProps = { diff --git a/src/components/Progress.js b/src/components/Progress.js index 40379ef..2cc30f1 100644 --- a/src/components/Progress.js +++ b/src/components/Progress.js @@ -1,36 +1,26 @@ -import React, { useState, useEffect } from "react"; -import { View, Appearance } from "react-native"; -import tw from "tailwind-rn"; +import React from "react"; +import { View } from "react-native"; +import {connect} from "react-redux"; +//assets +import tw from "tailwind-rn"; import Colors from "../constants/Colors"; -//Color -import Color from "../constants/Colors"; - -function Progress({ percent, alignItems }) { - const colorScheme = Appearance.getColorScheme(); - const [delayPercent, setDelayPercent] = useState(60); - // useEffect(() => { - // if (percent) { - // setTimeout(() => { - // setDelayPercent(() => percent); - // }, 1000); - // } - // }, [percent]); +function Progress({ percent, alignItems, theme }) { return ( ({ + theme: state.publicApi.theme, +}) + +export default connect(mapStateToProps)(Progress); diff --git a/src/components/Search.js b/src/components/Search.js index c30acdb..0abd6f7 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -2,11 +2,10 @@ import React, { useState } from "react"; import { TextInput, View, - Dimensions, StyleSheet, Pressable, - Appearance, } from "react-native"; +import {connect} from "react-redux"; import tw from "tailwind-rn"; import { AntDesign } from "@expo/vector-icons"; @@ -14,21 +13,18 @@ import { AntDesign } from "@expo/vector-icons"; import Colors from "../constants/Colors"; import fontSize from "../constants/fontSize"; -const width = Dimensions.get("window").width; - -const Search = ({ placeholder, textAlign, direction, onChange, value }) => { - const colorScheme = Appearance.getColorScheme(); +const Search = ({ placeholder, textAlign, direction, onChange, value, theme }) => { const styles = StyleSheet.create({ inputStyle: { fontSize: fontSize.tiny, - color: Colors.theme1[colorScheme].gray2077, + color: Colors.theme1[theme].gray2077, borderWidth: 0.5, - borderColor: Colors.theme1[colorScheme].gray20 + '88', + borderColor: Colors.theme1[theme].gray20 + '88', paddingVertical: 10, paddingHorizontal: 10, direction: direction, textAlign: textAlign, - backgroundColor: Colors.theme1[colorScheme].white, + backgroundColor: Colors.theme1[theme].white, fontFamily: "regular", }, }); @@ -38,7 +34,7 @@ const Search = ({ placeholder, textAlign, direction, onChange, value }) => { style={[styles.inputStyle, tw("rounded-sm")]} onChangeText={(text) => onChange(text)} placeholder={placeholder} - placeholderTextColor={Colors.theme1[colorScheme].gray20 + '88'} + placeholderTextColor={Colors.theme1[theme].gray20 + '88'} value={value} /> @@ -48,7 +44,11 @@ const Search = ({ placeholder, textAlign, direction, onChange, value }) => { ); }; -export default Search; +const mapStateToProps = (state) => ({ + theme : state.publicApi.theme, +}) + +export default connect(mapStateToProps)(Search); Search.defaultProps = { direction: "rtl", diff --git a/src/screens/Products/components/Main.js b/src/screens/Products/components/Main.js index 68e829c..ad3c9cd 100644 --- a/src/screens/Products/components/Main.js +++ b/src/screens/Products/components/Main.js @@ -132,7 +132,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => { )) : bySearchFilter?.map((product, index) => ( - <> + {(productType ? productType === ("کتاب دیجیتال" || "همه محصولات") : true) && ( @@ -315,7 +315,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => { )} - + )); }; diff --git a/src/screens/Video/components/Season.js b/src/screens/Video/components/Season.js index 455e1c7..0e0d1a0 100644 --- a/src/screens/Video/components/Season.js +++ b/src/screens/Video/components/Season.js @@ -3,10 +3,12 @@ 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"; -import { useNavigation } from "@react-navigation/native"; const duration = (value) => { const minute = value % 60; @@ -26,10 +28,10 @@ const Season = ({ activeSeason, realSeasons, seasonName, - mobile + mobile, + theme }) => { // const [selectedSeason, setSelectedSeason] = useState(null); - const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); const Unit = ({ unit, index }) => { return ( @@ -38,7 +40,7 @@ const Season = ({ tw("w-full flex overflow-hidden mb-3"), { borderBottomWidth: 1, - borderColor: Colors.theme1[colorScheme].grayE3, + borderColor: Colors.theme1[theme].grayE3, }, ]} > @@ -54,7 +56,7 @@ const Season = ({ { fontFamily: "bold", fontSize: mobile ? fontSize.base : fontSize.lg, - color: Colors.theme1[colorScheme].green79, + color: Colors.theme1[theme].green79, }, ]} > @@ -66,7 +68,7 @@ const Season = ({ { fontFamily: "regular", fontSize: mobile ? fontSize.base : fontSize.lg, - color: Colors.theme1[colorScheme].green79, + color: Colors.theme1[theme].green79, }, ]} > @@ -79,8 +81,8 @@ const Season = ({ borderWidth: 1, borderColor: Number(index) === 0 - ? Colors.theme1[colorScheme].greenCF - : Colors.theme1[colorScheme].gray2077, + ? Colors.theme1[theme].greenCF + : Colors.theme1[theme].gray2077, }, ]} onPress={() => @@ -101,8 +103,8 @@ const Season = ({ fontSize: mobile ? fontSize.tiny : fontSize.lg, color: Number(index) === 0 - ? Colors.theme1[colorScheme].greenCF - : Colors.theme1[colorScheme].gray2077, + ? Colors.theme1[theme].greenCF + : Colors.theme1[theme].gray2077, }} > نمایش @@ -119,9 +121,9 @@ const Season = ({ style={[ tw("flex rounded-sm py-3 px-3"), { - backgroundColor: Colors.theme1[colorScheme].greenCF + "05", + backgroundColor: Colors.theme1[theme].greenCF + "05", borderWidth: 1, - borderColor: Colors.theme1[colorScheme].greenC8, + borderColor: Colors.theme1[theme].greenC8, }, ]} onPress={() => toggle(season[0].categoryId)} @@ -132,7 +134,7 @@ const Season = ({ { fontFamily: "bold", fontSize: mobile ? fontSize.base : fontSize.xl, - color: Colors.theme1[colorScheme].green79, + color: Colors.theme1[theme].green79, }, ]} > @@ -146,7 +148,7 @@ const Season = ({ season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down" } size={14} - color={Colors.theme1[colorScheme].green79} + color={Colors.theme1[theme].green79} /> {season[0]?.categoryId === activeSeason && @@ -162,7 +164,8 @@ const mapStateToProps = (state) => ({ activeSeason: state.publicApi.activeCategory, realSeasons: state.publicApi.bookInfo?.categories, vodDuration: state.publicApi.bookInfo?.vodDuration, - mobile: state.publicApi.mobile + mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); const mapDispatchToProps = { diff --git a/src/screens/Video/index.js b/src/screens/Video/index.js index fed6cbb..829b229 100644 --- a/src/screens/Video/index.js +++ b/src/screens/Video/index.js @@ -40,8 +40,8 @@ function Product({ pushToCart, loading, mobile, + theme }) { - const colorScheme = Appearance.getColorScheme(); const [position, setPosition] = useState("100%"); useEffect(() => { @@ -97,7 +97,7 @@ function Product({ ({ userId: state.user.status?.id, loading: state.userProduct.loading, mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); const mapDispatchToProps = { diff --git a/src/screens/VideoDisplay/components/Season/index.js b/src/screens/VideoDisplay/components/Season/index.js index 8c49aed..d5d8862 100644 --- a/src/screens/VideoDisplay/components/Season/index.js +++ b/src/screens/VideoDisplay/components/Season/index.js @@ -11,20 +11,20 @@ import Colors from "../../../../constants/Colors"; const { width } = Dimensions.get("window"); -const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { - const colorScheme = Appearance.getColorScheme(); +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, activeUnit, name, setVideoActive, mobile, theme }) => { 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 selectVideo = () => { @@ -41,10 +41,10 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { tw(`w-full flex rounded-md overflow-hidden ${mobile ? "mb-3" : "mb-5"}`), { borderWidth: 1, - borderColor: Colors.theme1[colorScheme].greenD9, + borderColor: Colors.theme1[theme].greenD9, backgroundColor: activeUnit === unit - ? Colors.theme1[colorScheme].greenCF + ? Colors.theme1[theme].greenCF : "transparent", }, ]} @@ -56,7 +56,7 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { ), { borderBottomWidth: 1, - borderColor: Colors.theme1[colorScheme].greenD9, + borderColor: Colors.theme1[theme].greenD9, }, ]} > @@ -68,7 +68,7 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { color: activeUnit === unit ? "white" - : Colors.theme1[colorScheme].green79, + : Colors.theme1[theme].green79, }, ]} > @@ -82,12 +82,12 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { color: activeUnit === unit ? "white" - : Colors.theme1[colorScheme].green79, + : Colors.theme1[theme].green79, borderRightWidth: 1, borderColor: activeUnit === unit ? "white" - : Colors.theme1[colorScheme].green79, + : Colors.theme1[theme].green79, paddingRight: 8, }, ]} @@ -109,7 +109,7 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { color: activeUnit === unit ? "white" - : Colors.theme1[colorScheme].green79, + : Colors.theme1[theme].green79, }} > نمایش @@ -134,6 +134,7 @@ const mapStateToProps = (state) => ({ vods: state.publicApi.bookSection?.vods, userid: state.user.status?.id, mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); const mapDispatchToProps = { diff --git a/src/screens/VideoDisplay/index.js b/src/screens/VideoDisplay/index.js index dc98c2c..c722aa1 100644 --- a/src/screens/VideoDisplay/index.js +++ b/src/screens/VideoDisplay/index.js @@ -7,29 +7,28 @@ import { SafeAreaView, StatusBar, LayoutAnimation, - Appearance, Text, Platform, } from "react-native"; import { connect } from "react-redux"; import { publicApi } from "../../redux/actions"; +import { Video } from "expo-av"; +import * as ScreenOrientation from "expo-screen-orientation"; //components import Navbar from "../../components/Navbar"; import Drawer from "../../components/Drawer"; -import { Video } from "expo-av"; -import * as ScreenOrientation from "expo-screen-orientation"; import Season from "./components/Season"; import Divider from "../../components/Divider"; +//assets import tw from "tailwind-rn"; import fontSize from "../../constants/fontSize"; import Colors from "../../constants/Colors"; const ios = Platform.OS === "ios"; -function VideoDisplay({ route, mobile }) { - const colorScheme = Appearance.getColorScheme(); +function VideoDisplay({ route, mobile, theme }) { const video = React.useRef(null); const [width, setWidth] = useState(Dimensions.get("window").width); const [status, setStatus] = React.useState({}); @@ -40,7 +39,7 @@ function VideoDisplay({ route, mobile }) { setPosition(position === "100%" ? "0%" : "100%"); }; - function setOrientation() { + const setOrientation = () => { if (Dimensions.get("window").height > Dimensions.get("window").width) { //Device is in portrait mode, rotate to landscape mode. ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); @@ -95,7 +94,7 @@ function VideoDisplay({ route, mobile }) { fontSize: fontSize.xl, fontFamily: "bold", marginTop: mobile ? 8 : 12, - color: Colors.theme1[colorScheme].gray20, + color: Colors.theme1[theme].gray20, textAlign: ios ? "right" : "auto", }} > @@ -137,6 +136,7 @@ const styles = StyleSheet.create({ const mapStateToProps = (state) => ({ grades: state.publicApi.grades, mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); export default connect(mapStateToProps)(VideoDisplay); diff --git a/src/screens/Videos/components/MostViewedVideo.js b/src/screens/Videos/components/MostViewedVideo.js index b699484..1ebf048 100644 --- a/src/screens/Videos/components/MostViewedVideo.js +++ b/src/screens/Videos/components/MostViewedVideo.js @@ -16,111 +16,114 @@ import tw from "tailwind-rn"; import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; -const { width } = Dimensions.get("window"); - +//components import Header from "../../Home/components/Header"; -function MostViewedVideo({ videos, grades, mobile }) { +const { width } = Dimensions.get("window"); + +function MostViewedVideo({ videos, grades, mobile, theme }) { const navigation = useNavigation(); - const colorScheme = Appearance.getColorScheme(); - const Video = ({ video }) => { - return ( - navigation.navigate("Video", { id: video.id })} - > - { + return ( + navigation.navigate("Video", { id: video.id })} > - - - - - {"دوره ویدئویی" + " " + video?.name} - - - - - - تومان - - + + - {separate(video?.product[2]?.price)} - + /> - - {"پایه" + " " + grades[video?.gradeId]} + {"دوره ویدئویی" + " " + video?.name} - - - ); - }; + + + + + تومان + + + {separate(video?.product[2]?.price)} + + + + + {"پایه" + " " + grades[video?.gradeId]} + + + + ); + }, + [videos, theme, mobile] + ); + return (
@@ -139,6 +142,7 @@ function MostViewedVideo({ videos, grades, mobile }) { const mapStateToProps = (state) => ({ mobile: state.publicApi.mobile, + theme: state.publicApi.theme, }); export default connect(mapStateToProps)(MostViewedVideo); diff --git a/src/screens/Videos/components/NewestVideo.js b/src/screens/Videos/components/NewestVideo.js index 1ef3f87..5cc4c5a 100644 --- a/src/screens/Videos/components/NewestVideo.js +++ b/src/screens/Videos/components/NewestVideo.js @@ -5,26 +5,26 @@ import { Image, Dimensions, Text, - Appearance, Platform, } from "react-native"; import { useNavigation } from "@react-navigation/native"; import { connect } from "react-redux"; -import separate from "../../../utils/separate"; //style import tw from "tailwind-rn"; import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; +//components +import Header from "../../Home/components/Header"; + const { width } = Dimensions.get("window"); const ios = Platform.OS === "ios"; -import Header from "../../Home/components/Header"; -const NewestVideo = ({ videos, grades, mobile }) => { - const colorScheme = Appearance.getColorScheme(); +const NewestVideo = ({ videos, grades, mobile, theme }) => { const navigation = useNavigation(); + const Video = ({ video }) => { return ( { style={{ fontSize: mobile ? fontSize.base : fontSize.xl, marginTop: 5, - color: Colors.theme1[colorScheme].gray20, + color: Colors.theme1[theme].gray20, fontFamily: "bold", }} > @@ -58,7 +58,7 @@ const NewestVideo = ({ videos, grades, mobile }) => { { const mapStateToProps = (state) => ({ mobile: state.publicApi.mobile, + theme: state.publicApi.theme }); export default connect(mapStateToProps)(NewestVideo); diff --git a/src/screens/Videos/index.js b/src/screens/Videos/index.js index 00a7778..9f6bb55 100644 --- a/src/screens/Videos/index.js +++ b/src/screens/Videos/index.js @@ -11,19 +11,19 @@ import { } from "react-native"; import { connect } from "react-redux"; import { book } from "../../redux/actions"; + +//components 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 import tw from 'tailwind-rn'; -const width = Dimensions.get("window").width; - function Videos({ grades, videos, getVideos, mobile }) { const [search, setSearch] = useState(""); const [position, setPosition] = useState("100%");