Reza_ashrafi
/
danovin_vod
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added dialog

Browse Source
master
Reza_ashrafi 3 years ago
parent ad59726ceb
commit 43a4ee2d60
6 changed files with 164 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/BookToggle/index.scss
  2. 39
      src/components/Dialog/index.js
  3. 15
      src/components/Dialog/index.scss
  4. 5
      src/components/Navbar/index.scss
  5. 6
      src/custom.scss
  6. 179
      src/views/VideoTube/LessonPlayList/index.tsx

10
src/components/BookToggle/index.scss
Unescape View File

@ -19,8 +19,6 @@
padding: 10px 35px; padding: 10px 35px;
align-self: end; align-self: end;
margin-top: 60px; margin-top: 60px;
border: 1px solid white;
color: white;
&:hover{ &:hover{
border-color: $green; border-color: $green;
color: $green; color: $green;
@ -31,12 +29,20 @@
p { p {
color: $gray5; color: $gray5;
} }
a {
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
color: $gray7;
}
} }
&-dark { &-dark {
strong, strong,
p { p {
color: $gray12; color: $gray12;
} }
a{
border: 1px solid white;
color: white;
}
} }
} }

39
src/components/Dialog/index.js
Unescape View File

@ -0,0 +1,39 @@
import * as React from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
export default function AlertDialog({ open, setOpen, text }) {
return (
<div className="dialog">
<Dialog
open={open}
onClose={() => setOpen(false)}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
{/* <DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle> */}
<div className='dialog-box'>
<DialogContent>
<DialogContentText id="alert-dialog-description">
<p className="dialog-text">{text}</p>
</DialogContentText>
</DialogContent>
<DialogActions>
<button
className="dialog-submit"
onClick={() => setOpen(false)}
autoFocus
>
متوجه شدم!
</button>
</DialogActions>
</div>
</Dialog>
</div>
);
}

15
src/components/Dialog/index.scss
Unescape View File

@ -0,0 +1,15 @@
.dialog{
&-text{
color: white;
font-family: numeralLight;
}
&-submit{
background-color: inherit;
border: none;
color: $green;
font-family: numeralLight;
}
&-box{
background-color: rgba($red, 0.2);
}
}

5
src/components/Navbar/index.scss
Unescape View File

@ -8,8 +8,10 @@
z-index: 150; z-index: 150;
&-light{ &-light{
.nav___share{ .nav___share{
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
background-color: inherit !important; background-color: inherit !important;
border: 1px solid $green1 !important; border: none;
// border: 1px solid $green1 !important;
a{ a{
color: $green1 !important; color: $green1 !important;
@ -41,6 +43,7 @@
border: 2px solid $gray5; border: 2px solid $gray5;
} }
&___login{ &___login{
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
background-color: $green1; background-color: $green1;
} }
&___logo{ &___logo{

6
src/custom.scss
Unescape View File

@ -1,5 +1,6 @@
@import "./constants/colors.scss"; @import "./constants/colors.scss";
@import "./constants/width.scss"; @import "./constants/width.scss";
@import "./components/Dialog/index.scss";
@import "./components/BookToggle/index.scss"; @import "./components/BookToggle/index.scss";
@import "./components/BreadCrumbs/index.scss"; @import "./components/BreadCrumbs/index.scss";
@import "./components/GradeFilter/index.scss"; @import "./components/GradeFilter/index.scss";
@ -29,6 +30,10 @@
font-weight: 300; font-weight: 300;
} }
button{
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1) !important;
}
.mobile, .mobile,
.desktop { .desktop {
display: flex; display: flex;
@ -500,3 +505,4 @@ p {
line-height: 1.5 !important; line-height: 1.5 !important;
} }
} }

179
src/views/VideoTube/LessonPlayList/index.tsx
Unescape View File

@ -1,8 +1,9 @@
import React, { useEffect } from "react"; import React, { useEffect, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions"; import { publicApi } from "../../../redux/actions";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import _ from "lodash"; import _ from "lodash";
import Dialog from "../../../components/Dialog";
function LessonPlayList({ function LessonPlayList({
category, category,
@ -14,6 +15,7 @@ function LessonPlayList({
theme, theme,
}: any) { }: any) {
const bookId = localStorage.getItem("bookId"); const bookId = localStorage.getItem("bookId");
const [open, setOpen] = useState(false);
useEffect(() => { useEffect(() => {
if (localStorage.getItem("scroll-list") && vods) { if (localStorage.getItem("scroll-list") && vods) {
const list: HTMLElement = document.getElementById("list") as HTMLElement; const list: HTMLElement = document.getElementById("list") as HTMLElement;
@ -25,8 +27,6 @@ function LessonPlayList({
const index = vods?.findIndex( const index = vods?.findIndex(
(item: any) => item?.name === selectedVideo?.name (item: any) => item?.name === selectedVideo?.name
); );
console.log(index);
console.log(listHeight, elementHeight * (Number(index) + 1));
if (elementHeight * (Number(index) + 1) > listHeight) { if (elementHeight * (Number(index) + 1) > listHeight) {
list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight); list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
@ -37,99 +37,104 @@ function LessonPlayList({
const light = theme === "light"; const light = theme === "light";
return ( return (
<> <div
{ className={_.join(
<div [
className={_.join( "lesson-playlist d-flex flex-column",
[ light ? "lesson-playlist-light" : "lesson-playlist-dark",
"lesson-playlist d-flex flex-column", ],
light ? "lesson-playlist-light" : "lesson-playlist-dark", " "
], )}
" " >
)} {bookId && (
> <header>
{bookId && ( <h3>
<header> {
<h3> realCategories.filter(
{ (item: any) => item.id === category[0].categoryId
realCategories.filter( )[0].name
(item: any) => item.id === category[0].categoryId }
)[0].name </h3>
} <span></span>
</h3> </header>
<span></span> )}
</header>
)}
{bookId ? ( {bookId ? (
category.map((video: any, i: any) => ( category.map((video: any, i: any) => (
<Link <Link
to={"/video/" + video.id} to={video.isFreeVod ? "/video/" + video.id : "#"}
className={ className={
"lesson-playlist__item d-flex align-items-center" + "lesson-playlist__item d-flex align-items-center" +
" " + " " +
(video?.id === selectedVideo?.id && (video?.id === selectedVideo?.id &&
"lesson-playlist__item--active") "lesson-playlist__item--active")
} }
key={i} key={i}
id={"listItem" + video.id} id={"listItem" + video.id}
onClick={() => video.isFreeVod ? setVideoActive(video) : {}} onClick={() =>
> video.isFreeVod ? setVideoActive(video) : setOpen(true)
<span className="lesson-playlist__item--count"> }
{Number(i) + 1} >
</span> <span className="lesson-playlist__item--count">
<div className="lesson-playlist__item--video"> {Number(i) + 1}
{/* <video> </span>
<div className="lesson-playlist__item--video">
{/* <video>
<source <source
src={`https://dnvn.ir/api/v1/file/${video.fileIds}`} src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
/> />
</video> */} </video> */}
<img <img
src={`https://dnvn.ir/api/v1/file/${video.posterId}`} src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
alt="" alt=""
/> />
<span>22:05</span> <span>22:05</span>
</div> </div>
<div className="lesson-playlist__item--text d-flex flex-column"> <div className="lesson-playlist__item--text d-flex flex-column">
<h4>{video.name}</h4> <h4>{video.name}</h4>
{/* <p>{file.text}</p> */} {/* <p>{file.text}</p> */}
</div> </div>
</Link> </Link>
)) ))
) : ( ) : (
<Link <Link
to={"/video/" + category.id} to={category.isFreeVod ? "/video/" + category.id : "#"}
className={ className={
"lesson-playlist__item d-flex align-items-center" + "lesson-playlist__item d-flex align-items-center" +
" " + " " +
(category?.id === selectedVideo?.id && (category?.id === selectedVideo?.id &&
"lesson-playlist__item--active") "lesson-playlist__item--active")
} }
onClick={() => category.isFreeVod ? setVideoActive(category) : ''} onClick={() =>
id={"listItem" + category.id} category.isFreeVod ? setVideoActive(category) : setOpen(true)
> }
<span className="lesson-playlist__item--count"></span> id={"listItem" + category.id}
<div className="lesson-playlist__item--video"> >
{/* <video> <span className="lesson-playlist__item--count"></span>
<div className="lesson-playlist__item--video">
{/* <video>
<source <source
src={`https://dnvn.ir/api/v1/file/${video.fileIds}`} src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
/> />
</video> */} </video> */}
<img <img
src={`https://dnvn.ir/api/v1/file/${category.posterId}`} src={`https://dnvn.ir/api/v1/file/${category.posterId}`}
alt="" alt=""
/> />
<span>22:05</span> <span>22:05</span>
</div> </div>
<div className="lesson-playlist__item--text d-flex flex-column"> <div className="lesson-playlist__item--text d-flex flex-column">
<h4>{category.name}</h4> <h4>{category.name}</h4>
{/* <p>{file.text}</p> */} {/* <p>{file.text}</p> */}
</div> </div>
</Link> </Link>
)} )}
</div> <Dialog
} open={open}
</> setOpen={setOpen}
text="برای مشاهده این فیلم باید دوره را خریداری کنید."
/>
</div>
); );
} }

Write Preview
Loading…
Cancel
Save