diff --git a/src/assets/icons/timer.svg b/src/assets/icons/timer.svg new file mode 100644 index 0000000..aa494c2 --- /dev/null +++ b/src/assets/icons/timer.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/videos/COD.mp4 b/src/assets/videos/COD.mp4 deleted file mode 100644 index 0263b2a..0000000 Binary files a/src/assets/videos/COD.mp4 and /dev/null differ diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js index aeacb48..bee3b3b 100644 --- a/src/components/JolPlayer/index.js +++ b/src/components/JolPlayer/index.js @@ -1,7 +1,9 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useRef, useState } from "react"; import JoLPlayer from "jol-player"; -function Video({ fileIds, posterId }) { +function Video({ fileIds, posterId, autoPlay }) { + const videoRef = useRef(null); + const [flag, setFlag] = useState(false); useEffect(() => { window.addEventListener("scroll", () => { if (window.scrollY > 500) { @@ -15,6 +17,25 @@ function Video({ fileIds, posterId }) { }); }, []); + const videoMethod = (status) => { + if (status === "play") { + videoRef.current.play(); + setFlag(() => true); + } + }; + // useEffect(() => { + // console.log(`videoRef.current`, videoRef.current); + // }, [videoRef.current]); + + useEffect(() => { + if (window.scrollY > 3 * window.innerHeight) { + if (autoPlay && !flag) { + videoMethod("play"); + } + } + }, [autoPlay]); + + return (
diff --git a/src/utils/scroll.js b/src/utils/scroll.js index 473a0c2..583e62e 100644 --- a/src/utils/scroll.js +++ b/src/utils/scroll.js @@ -94,7 +94,7 @@ class scroll { return currectPosition; }; - doubleLinearFormula = (currentScroll) => { + videoLinearFormula = (currentScroll) => { if(!localStorage.getItem("htmlRect")){ localStorage.setItem("htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect())); } @@ -138,6 +138,46 @@ class scroll { left: currentLeft, }; }; + + testLinearFolmula = (currentScroll) => { + const testRect = JSON.parse(localStorage.getItem("testRect")); + const currentWidth = this.linearFormula( + currentScroll, + testRect.width, + window.innerWidth, + 5.5 * window.innerHeight, + 6 * window.innerHeight + ); + const currentHeight = this.linearFormula( + currentScroll, + testRect.height, + window.innerHeight, + 5.5 * window.innerHeight, + 6 * window.innerHeight + ); + const currentLeft = this.linearFormula( + currentScroll, + testRect.left, + 0, + 5.5 * window.innerHeight, + 6 * window.innerHeight + ); + + const currentTop = this.linearFormula( + currentScroll, + testRect.top, + 0, + 5.5 * window.innerHeight, + 6 * window.innerHeight + ); + + return { + width: currentWidth, + height: currentHeight, + top: currentTop, + left: currentLeft, + }; + } } const _scroll = new scroll(); diff --git a/src/views/Home/Page2/Mobile/index.js b/src/views/Home/Page2/Mobile/index.js index cb2818f..32e4c36 100644 --- a/src/views/Home/Page2/Mobile/index.js +++ b/src/views/Home/Page2/Mobile/index.js @@ -1,9 +1,8 @@ import React, { useEffect, useState } from "react"; import _ from "lodash"; -import codVideo from "../../../../assets/videos/COD.mp4"; -import scroll from "../../../../utils/scroll"; +import {connect} from 'react-redux'; -export default function Mobile({ mobilePosition, videoPosition }) { +function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) { const [checked, setChecked] = useState(mobilePosition > 0 ? true : false); useEffect(() => { if (mobilePosition > 0) { @@ -13,9 +12,6 @@ export default function Mobile({ mobilePosition, videoPosition }) { } }, [mobilePosition]); - useEffect(async () => { - console.log(videoPosition); - }, []); return (
3 * window.innerHeight ? "fixed" : "static", ], " " @@ -100,12 +96,15 @@ export default function Mobile({ mobilePosition, videoPosition }) { top : window.scrollY > 3 * window.innerHeight ? videoPosition?.top : 'auto', }} controls - autoPlay={false} - muted + autoPlay={'true'} > - + ) : null}
); } + +export default connect((state) => ({ + selectedVideo : state.publicApi.selectedVideo +}), {})(Mobile); \ No newline at end of file diff --git a/src/views/Home/Page2/index.js b/src/views/Home/Page2/index.js index 918c508..b9a132d 100644 --- a/src/views/Home/Page2/index.js +++ b/src/views/Home/Page2/index.js @@ -4,7 +4,7 @@ import scroll from "../../../utils/scroll"; import Mobile from "./Mobile"; import qrImage from "../../../assets/images/qrImage.png"; -export default function Page2({ list, page }) { +export default function Page2({ list, page, autoPlay }) { const height = window.innerHeight; const [top, setTop] = useState(window.innerHeight); const [videoPosition, setVideoPosition] = useState(null); @@ -17,16 +17,16 @@ export default function Page2({ list, page }) { useEffect(() => { setMobilePosition( scroll.linearFormula( - window.scrollY > 3 * height ? 3 * height : window.scrollY, + window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100), 6, 2 * height, - 3 * height + 2.5 * height ) ); setVideoPosition( window.scrollY > 3 * height - ? scroll.doubleLinearFormula(window.scrollY) + ? scroll.videoLinearFormula(window.scrollY) : null ); if (window.scrollY < 2.5 * height) { @@ -149,12 +149,13 @@ export default function Page2({ list, page }) { if (scrollY <= 3 * height) { setVideoPosition(() => null); } else if (scrollY > 3 * height && scrollY < 4 * height) { - setVideoPosition(scroll.doubleLinearFormula(scrollY)); + setVideoPosition(scroll.videoLinearFormula(scrollY)); } else { } }; return (
e.stopPropagation()} className={_.join( ["home-page2 h-screen w-full fixed left-0 origin-top overflow-hidden"], " " @@ -196,7 +197,11 @@ export default function Page2({ list, page }) { >
{/* mobile phone */} - + {/* video */} ); diff --git a/src/views/Home/Test/Question.js b/src/views/Home/Test/Question.js new file mode 100644 index 0000000..33e66ba --- /dev/null +++ b/src/views/Home/Test/Question.js @@ -0,0 +1,62 @@ +import React, { useState } from "react"; +import _ from "lodash"; + +export default function Question({ question }) { + const [select, setSelect] = useState(""); + return ( +
+ + سوال ۱ + +

{question.text}

+
    + {question.options.map((option, index) => ( +
  • setSelect(option)} + className={_.join( + [ + "rounded-md w-full overflow-hidden flex flex-row items-center my-2 cursor-pointer transition-all duration-500", + ], + " " + )} + style={{ + backgroundColor: select === option ? "#32af00" : "transparent", + borderColor: select === option ? "transparent" : "#f5f5f5", + borderWidth: 1, + borderStyle: "solid", + }} + key={index} + > + + الف + +

    + {option} +

    +
    • + ))} +
+
+ ); +} diff --git a/src/views/Home/Test/index.js b/src/views/Home/Test/index.js new file mode 100644 index 0000000..dee3621 --- /dev/null +++ b/src/views/Home/Test/index.js @@ -0,0 +1,114 @@ +import React, { useEffect, useState } from "react"; +import _ from "lodash"; +import timerIcon from "../../../assets/icons/timer.svg"; +import QuestionBox from "./Question"; +import scroll from "../../../utils/scroll"; + +export default function Test({ title, duration, questions }) { + const [translateY, setTranslateY] = useState(0); + const [testPosition, setTestPosition] = useState(null); + useEffect(() => { + setTranslateY(() => + scroll.linearFormula( + window.scrollY > 5 * window.innerHeight + ? 5 * window.innerHeight + : window.scrollY, + 0, + -101, + 4.5 * window.innerHeight, + 5 * window.innerHeight + ) + ); + window.addEventListener("scroll", () => { + testTransformHandler(window.scrollY); + if (window.scrollY > 1000) { + localStorage.setItem( + "testRect", + JSON.stringify( + document.getElementById("test").getBoundingClientRect() + ) + ); + } + }); + }, []); + const testTransformHandler = (scrollY) => { + const height = window.innerHeight; + if (scrollY <= 4.5 * height) { + setTranslateY(() => 0); + setTestPosition(() => null) + } else if (scrollY > 4.5 * height && scrollY < 5 * height) { + setTranslateY(() => + scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height) + ); + setTestPosition(() => null); + } else if(scrollY > 5.5 * height && scrollY < 6 * height) { + setTestPosition(() => scroll.testLinearFolmula(scrollY)); + setTranslateY(() => 0); + }else{ + + } + }; + return ( +
e.stopPropagation()} + id="test" + className="w-full flex flex-col items-center justify-center bg-black bg-opacity-80 backdrop-filter backdrop-blur-2xl z-50" + style={{ + minHeight: window.innerHeight - 180, + transform: `translateY(${translateY}%)`, + position : testPosition ? 'fixed' : 'static', + left : testPosition?.left ? testPosition?.left : 'auto', + top : testPosition?.top ? testPosition?.top : 'auto', + width : testPosition?.width ? testPosition?.width : 'auto', + height : testPosition?.height ? testPosition?.height : 'auto' + }} + > +
+
+ +

{title}

+
+
+ +
+ {_.join(["زمان باقیمانده", duration], " ")} +
+
+
+ {questions.map((question, index) => ( + + ))} +
+ ); +} + +Test.defaultProps = { + title: "آزمون شیمی پایه دوازدهم متوسطه", + duration: "48:29", + questions: [ + { + text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + options: [ + "امکان دارد شاید و یا یک چیز دیگر", + "امکان دارد شاید و یا یک چیز دیگرر", + "امکان دارد شاید و یا یک چیز دیگرر", + "امکان دارد شاید و یا یک چیز دیگررر", + ], + }, + { + text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + options: [ + "امکان دارد شاید و یا یک چیز دیگر", + "امکان دارد شاید و یا یک چیز دیگرر", + "امکان دارد شاید و یا یک چیز دیگرر", + "امکان دارد شاید و یا یک چیز دیگررر", + ], + }, + ], +}; diff --git a/src/views/Home/VideoTube/LessonPlayList/index.js b/src/views/Home/VideoTube/LessonPlayList/index.js index 273fbd7..eab7204 100644 --- a/src/views/Home/VideoTube/LessonPlayList/index.js +++ b/src/views/Home/VideoTube/LessonPlayList/index.js @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { connect } from "react-redux"; -// import { publicApi } from "../../../redux/actions"; +import { publicApi } from "../../../../redux/actions"; import { Link } from "react-router-dom"; import _ from "lodash"; @@ -37,35 +37,36 @@ function LessonPlayList({ {
{bookId && ( -
-

+
+

{ realCategories.filter( (item) => item.id === category[0].categoryId )[0].name }

- +
)} {bookId ? ( category.map((video, i) => ( - setVideoActive(video)} > - - {Number(i) + 1} - + {Number(i) + 1}
{/*
- +

)) ) : ( - {category.name} {/*

{file.text}

*/} - + )} } @@ -132,6 +132,6 @@ export default connect( vods: state.publicApi.bookSection?.vods, }), { - // setVideoActive: publicApi.setVideoActive, + setVideoActive: publicApi.setVideoActive, } )(LessonPlayList); diff --git a/src/views/Home/VideoTube/index.js b/src/views/Home/VideoTube/index.js index 413682e..665232c 100644 --- a/src/views/Home/VideoTube/index.js +++ b/src/views/Home/VideoTube/index.js @@ -6,7 +6,7 @@ import Book from "./Book"; import Comment from "./Comment"; import AddComment from "./AddComment"; import Video from "../../../components/JolPlayer"; - +import Test from "../Test"; import listIcon from "../../../assets/icons/list.png"; import { connect } from "react-redux"; import _ from "lodash"; @@ -16,6 +16,7 @@ import { book, publicApi } from "../../../redux/actions"; // import Loader from "../../components/Loader"; function VodTube({ + autoPlay, page, selectedVideo, info, @@ -33,28 +34,27 @@ function VodTube({ window.addEventListener("scroll", (e) => { setTop(scroll.homeScrollHandler(page)); }); - localStorage.setItem("scroll-list", "on"); + // localStorage.setItem("scroll-list", "on"); getInfo({ - bookId: localStorage.getItem("bookId") - ? localStorage.getItem("bookId") - : localStorage.getItem("category")?.split(",")[0], + bookId: 8, }); }, []); - useEffect(() => { - if (allBooks && localStorage.getItem("category")) { - const cat = localStorage.getItem("category")?.split(","); - bookSection({ bookId: cat[0], categoryId: cat[1] }); - } - }, [allBooks]); + // useEffect(() => { + // if (allBooks && localStorage.getItem("category")) { + // const cat = localStorage.getItem("category")?.split(","); + // bookSection({ bookId: cat[0], categoryId: cat[1] }); + // } + // }, [allBooks]); const light = theme === "light"; return (
e.stopPropagation()} className={_.join( [ "fixed flex flex-row rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md", - top > 0 ? "opacity-0" : "opacity-100", + top > 0 ? "opacity-0 z-0" : "opacity-100 z-10", ], " " )} @@ -63,10 +63,17 @@ function VodTube({ {/* */}
-
-
+

@@ -104,7 +114,10 @@ function VodTube({ ref={videoListTag} className="pt-2.5 overflow-y-scroll flex flex-col" id="list" - style={{ minHeight: window.innerHeight / 1.5, maxHeight: window.innerHeight / 1.5}} + style={{ + minHeight: window.innerHeight / 1.5, + maxHeight: window.innerHeight / 1.5, + }} > {localStorage.getItem("bookId") ? categories?.map((video, i) => ( diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 9816706..2aebf81 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,24 +1,34 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Navbar from "../../components/Navbar"; import Page1 from "./Page1"; import Page2 from "./Page2"; -import Page3 from "./Page3"; -import Page4 from "./Page4"; +// import Page3 from "./Page3"; +// import Page4 from "./Page4"; import VideoTube from "./VideoTube"; -import Dots from "../../components/Dots"; +// import Dots from "../../components/Dots"; export default function Home() { + const [autoPlay, setAutoPlay] = useState(false); + useEffect(() => { + window.addEventListener("scroll", () => { + if (window.scrollY > 3 * window.innerHeight) { + setAutoPlay(() => true); + // alert('here'); + } else { + setAutoPlay(() => false); + } + }); + }, []); return (
- {/* */} - - + +
); } diff --git a/tailwind.config.js b/tailwind.config.js index 7267939..4627379 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,11 +6,15 @@ module.exports = { ...theme("colors"), blueC0: "#196EC0", blueB0 : "#517AB0", - blue90: "#235A90" + blue90: "#235A90", + blueFF : '#E8FCFF' }), textColor : (theme) => ({ ...theme("colors"), primary: "#235A90", + blueE8 : '#2E81E8', + green71 : '#067182', + blue52 : '#132F52', }), borderColor : (theme) => ({ ...theme("colors"),