You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

110 lines
2.8 KiB

import React, { useState, useEffect } from "react";
import {
View,
StyleSheet,
ScrollView,
SafeAreaView,
StatusBar,
Platform,
LayoutAnimation,
} 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 Divider from "../../components/Divider";
import MostViewedVideo from "./components/MostViewedVideo";
import NewestVideo from "./components/NewestVideo";
//assets
import tw from "tailwind-rn";
function Videos({ grades, videos, getVideos, mobile }) {
const [search, setSearch] = useState("");
const [position, setPosition] = useState("100%");
useEffect(() => {
getVideos({ vod: true });
}, []);
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}
headerOptions={{
logo: true,
menu: false,
hamburgerMenu: true,
title: "",
bookmark: false,
qr: true,
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container]}
>
{!mobile ? <View style={tw("mt-5")}></View> : null}
{/* <Search
value={search}
onChange={setSearch}
placeholder={"نام کتاب یا دوره را جستجو کنید"}
/> */}
{/* <Divider type={"vertical"} /> */}
{videos.length ? (
<>
<MostViewedVideo videos={videos} grades={grades} />
<Divider type={"vertical"} />
<NewestVideo
videos={videos
.sort((a, b) => a.updatedAt - b.updatedAt)
.slice(0, mobile ? 4 : 6)}
grades={grades}
/>
</>
) : null}
</ScrollView>
</SafeAreaView>
);
}
// Later on in your styles..
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
alignItems: "flex-end",
},
container: {
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 16,
},
});
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
videos: state.book.list,
grades: state.publicApi.grades,
mobile: state.publicApi.mobile,
});
const mapDispatchToProps = {
getVideos: book.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(Videos);