reza added video

temp
Reza_ashrafi 3 years ago
parent b69c8c9981
commit 3c2422578f
  1. 21
      src/router.js
  2. 49
      src/views/Video/components/Season.js
  3. 93
      src/views/Video/index.js
  4. 25
      src/views/Videos/components/MostViewedVideo.js
  5. 7
      src/views/Videos/components/NewestVideo.js
  6. 5
      src/views/Videos/components/VerticalGradeFilter.js

@ -13,6 +13,7 @@ import Product from "./views/Product";
import ShoppingCart from "./views/ShoppingCart"; import ShoppingCart from "./views/ShoppingCart";
import DeliveryForm from "./views/DeliveryForm"; import DeliveryForm from "./views/DeliveryForm";
import Videos from "./views/Videos"; import Videos from "./views/Videos";
import Video from "./views/Video";
import QR from "./views/QR"; import QR from "./views/QR";
import NotFound from "./views/404"; import NotFound from "./views/404";
import Orders from "./views/Orders"; import Orders from "./views/Orders";
@ -27,7 +28,7 @@ function Router({ isDark, isLogin, headerOptions }) {
[ [
"min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0", "min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0",
isDark ? "" : "bg-white", isDark ? "" : "bg-white",
headerOptions?.shown ? "pt-16" : "pt-4", headerOptions?.shown ? "pt-20" : "pt-4",
], ],
" " " "
)} )}
@ -139,6 +140,24 @@ function Router({ isDark, isLogin, headerOptions }) {
/> />
} }
/> />
<Route
path="/videos/:id"
exact
element={
<Video
headerOptions={{
logo: false,
hamburgerMenu: false,
qr: false,
title: false,
back: true,
shown: true,
menu: true,
bookmark: true,
}}
/>
}
/>
<Route <Route
path="/scan" path="/scan"
exact exact

@ -0,0 +1,49 @@
import React, { useState } from "react";
import {Link} from 'react-router-dom';
const Season = ({ season }) => {
const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
return (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE">
<div className="w-full flex flex-row justify-between items-center py-1.5 px-2 border-b border-solid border-blueFE">
<strong className="text-blueC0 text-xs">{unit.name}</strong>
<span className="text-xs text-blueC0">{unit.duration}</span>
</div>
<div className="w-full flex flex-row">
{unit.play && (
<Link
to={"/videos/:id/display"}
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE justify-center text-xs text-blueC0"
>
نمایش
</Link>
)}
{unit.download && (
<Link to="/videos/:id/download" className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0">
دانلود
</Link>
)}
</div>
</div>
);
};
return (
<div className="w-full flex flex-col">
<button
className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0"
onClick={() =>
setActiveSeason(season.name === activeSeason ? null : season.name)
}
>
<strong className="text-xs text-white">{season.name}</strong>
<span className="text-xs text-white">{season.duration}</span>
</button>
{season.name === activeSeason &&
season.units.map((unit, index) => <Unit unit={unit} key={index} />)}
</div>
);
};
export default Season;

@ -0,0 +1,93 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import poster from "../../assets/images/poster.svg";
import Divider from "../../components/Divider";
import Season from "./components/Season";
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,
},
],
},
],
},
headerOptions,
setHeaderOptions,
}) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<div className="w-full flex flex-col px-4">
<div className="w-full flex flex-col">
<div
className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
style={{
backgroundImage: `url(${product.poster})`,
backgroundSize: "100% 100%",
repeat: "no-repeat",
minWidth: "calc(100vw / 1.5)",
minHeight: "calc(100vw / 1.5 * 11 / 16)",
}}
>
<img
src={product.imageUrl}
className="rounded-md absolute left-2 top-1/2 transform -translate-y-1/2"
style={{ width: 70, height: 100 }}
/>
</div>
<div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col">
<strong className="mt-1 text-blue5F text-base">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1">{product.grade}</span>
</div>
<Divider type={"vertical"} />
</div>
</div>
<div className="flex flex-col">
{product.seasons.map((season, index) => (
<Season season={season} key={index} />
))}
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Product);

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import Header from "../../../components/Header"; import Header from "../../../components/Header";
import posterImage from "../../../assets/images/poster.svg"; import posterImage from "../../../assets/images/poster.svg";
@ -7,35 +7,36 @@ function MostViewedVideo({}) {
const Video = ({ video }) => { const Video = ({ video }) => {
return ( return (
<Link <Link
to={"/products/" + video.id} to={"/videos/" + video.id}
className="flex flex-col rounded-md ml-4" className="flex flex-col rounded-md ml-4"
> >
<div <div
className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden" className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
style={{ style={{
backgroundImage: `url(${video.poster})`, backgroundImage: `url(${video.poster})`,
backgroundSize : '100% 100%', backgroundSize: "100% 100%",
repeat : 'no-repeat', repeat: "no-repeat",
minWidth: 'calc(100vw / 1.5)', minWidth: "calc(100vw / 1.5)",
minHeight: 'calc(100vw / 1.5 * 9 / 16)' minHeight: "calc(100vw / 1.5 * 9 / 16)",
}} }}
> >
<img <img
src={video.imageUrl} src={video.imageUrl}
className="rounded-md h-full absolute left-2 top-1/2 transform -translate-y-1/2" className="rounded-md h-full absolute left-2 top-1/2 transform -translate-y-1/2"
style={{ width: 'calc(100vw / 7)', height: 'calc(100vw / 8 * 15 / 9)' }} style={{
width: "calc(100vw / 7)",
height: "calc(100vw / 8 * 15 / 9)",
}}
/> />
</div> </div>
<strong <strong className="text-sm mt-1 text-blue5F dark:text-white">
className="text-sm mt-1 text-blue5F"
>
{video.name} {video.name}
</strong> </strong>
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<strong className="mt-2 text-blue52 text-xs"> <strong className="mt-2 text-blue52 text-xs dark:text-greenBA">
{video.price} {video.price}
</strong> </strong>
<span className="text-blueC0 text-xs mt-1"> <span className="text-blueC0 text-xs mt-1 dark:text-white">
{"پایه" + " " + video.grade} {"پایه" + " " + video.grade}
</span> </span>
</div> </div>

@ -7,7 +7,7 @@ const NewestVideo = () => {
const Video = ({ video }) => { const Video = ({ video }) => {
return ( return (
<Link <Link
to={'/products/product'} to={'/videos/' + video.id}
className="flex flex-col items-start mb-4" className="flex flex-col items-start mb-4"
style={{width: 'calc(100vw / 2.3)'}} style={{width: 'calc(100vw / 2.3)'}}
> >
@ -16,11 +16,11 @@ const NewestVideo = () => {
className="w-full rounded-md" className="w-full rounded-md"
/> />
<strong <strong
className="text-sm mt-1 text-blue5F" className="text-sm mt-1 text-blue5F dark:text-white"
> >
{video.name} {video.name}
</strong> </strong>
<span className="text-blueC0 text-xs mt-1"> <span className="text-blueC0 text-xs mt-1 dark:text-greenBA">
{"پایه" + " " + video.grade} {"پایه" + " " + video.grade}
</span> </span>
</Link> </Link>
@ -34,6 +34,7 @@ const NewestVideo = () => {
<Video <Video
key={index} key={index}
video={{ video={{
id : 0,
name: "ریاضی", name: "ریاضی",
price: "145.000 تومان", price: "145.000 تومان",
grade: "4", grade: "4",

@ -2,12 +2,11 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Header from "../../../components/Header"; import Header from "../../../components/Header";
const VerticalGradeFilter = ({ grades }) => { const VerticalGradeFilter = ({ grades }) => {
const Grade = ({ grade }) => { const Grade = ({ grade }) => {
return ( return (
<button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9"> <button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 dark:border-blueC0 dark:border-opacity-60">
<strong className="text-xs text-gray-600">{grades[grade]}</strong> <strong className="text-xs text-gray-600 dark:text-white">{grades[grade]}</strong>
</button> </button>
); );
}; };

Loading…
Cancel
Save