Video Display Desktop Separated

temp
Pedram Keshavarzi 3 years ago
parent 48ddb1fdc7
commit 8a9ae7046c
  1. 139
      src/components/CourseChapter/index.js
  2. 30
      src/views/VideoDisplay/Desktop/index.js
  3. 10
      src/views/VideoDisplay/index.js

@ -0,0 +1,139 @@
import React, { useState } from "react";
const CourseChapter = ({ chapters }) => {
const [selectedLesson, setSelectedLesson] = useState(null);
return (
<section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
<div
className="rounded py-5 px-4 relative"
style={{ backgroundColor: "#196EC033" }}
>
{/* top */}
<div className="flex flex-row items-center justify-between">
<div>
<h2 className="text-blue-800 text-base">سرفصل دوره</h2>
</div>
<div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
<span className="text-blue-800 text-sm px-2">علوم تجربی</span>
<span className="text-blue-800 text-sm px-2">پایه ششم</span>
</div>
</div>
{/* divider */}
<div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
{/* course title */}
{chapters.map((chapter, index) => (
<div className="flex flex-col" key={index}>
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
<p className="text-sm text-white">{chapter.title}</p>
<span className="text-sm text-white">{chapter.duration}</span>
</div>
{/* course lessons */}
{chapter.lessons.map((lesson, i) => (
<div
className="flex flex-row items-center justify-around"
key={i}
>
{/* right div dot dot */}
<div
className="flex items-center relative flex-col "
style={{ width: "10%", transform: "translateY(30px)" }}
>
<div
className={`flex justify-center items-center w-4 h-4 rounded-full
${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
${lesson.passed ? "bg-red-600" : "bg-blue-600"}
`}
></div>
<span
className="w-1"
style={{
borderRight: "2px dotted yellow",
transform: "translateX(-1px)",
height: "65px",
}}
></span>
</div>
{/* left div content */}
<div
className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group hover:bg-blue-600
${selectedLesson === lesson ? "bg-blue-600" : ""}`}
style={{ width: "80%" }}
onClick={() => setSelectedLesson(lesson)}
>
{/* top */}
<div className="flex flex-row items-center justify-between p-2">
<p
className={`text-sm text-blue-500 group-hover:text-white
${selectedLesson === lesson ? "text-red-600" : ""}`}
>
{lesson.title}
</p>
<span
className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
${selectedLesson === lesson ? "text-red-600" : ""}`}
>
{lesson.duration}
</span>
</div>
{/* divider */}
<div
className={`border-t border-blue-600 group-hover:border-white ${
selectedLesson === lesson ? "border-red-600" : ""
}`}
></div>
{/* bottom */}
<span
className={`text-xs text-center text-blue-500 group-hover:text-white p-2
${selectedLesson === lesson ? "text-red-600" : ""}`}
>
{lesson.play}
</span>
</div>
</div>
))}
</div>
))}
{/* blue left border */}
<div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
</div>
</section>
);
};
export default CourseChapter;
CourseChapter.defaultProps = {
chapters: [
{
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "2:30:13",
lessons: [
{
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
passed: true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
passed: true,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
passed: false,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
passed: false,
},
],
},
],
};

@ -0,0 +1,30 @@
import React from "react";
import CourseChapter from "../../../components/CourseChapter";
const DesktopVideoDisplay = () =>{
return(
<div className="w-full flex flex-col px-4 items-center">
<div className="w-11/12 flex flex-col mb-6 items-center">
<div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
<video style={{ width: "70%", }} controls>
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4"
/>
</video>
<CourseChapter />
</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 dark:text-white">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
</div>
<Divider type={"vertical"} />
</div> */}
</div>
</div>
);
};
export default DesktopVideoDisplay;

@ -4,8 +4,10 @@ import { publicApi } from "../../redux/actions";
import poster from "../../assets/images/poster.svg";
import Divider from "../../components/Divider";
import Season from "./components/Season";
import DesktopVideoDisplay from "./Desktop";
function VideoDisplay({
isMobile,
product = {
type: "کتاب ها",
name: "ریاضی",
@ -47,6 +49,7 @@ function VideoDisplay({
setHeaderOptions(headerOptions);
}, []);
return (
isMobile ?
<div className="w-full flex flex-col px-4">
<div className="w-full flex flex-col mb-6">
<div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
@ -72,11 +75,14 @@ function VideoDisplay({
<Season season={season} key={index} />
))}
</div>
</div>
</div> :
<DesktopVideoDisplay />
);
}
const mapStateToProps = (state) => ({});
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,

Loading…
Cancel
Save