diff --git a/src/App.scss b/src/App.scss index f7c5467..f1c9ca3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -3,7 +3,7 @@ @import "./views/Home/Page1/index.scss"; @import "./views/Home/Page2/index.scss"; @import "./views/Home/Page2/Mobile/index"; - +@import "./views/Home/Page1/Header/index.scss"; *{ font-family: Regular; diff --git a/src/assets/icons/light.svg b/src/assets/icons/light.svg new file mode 100644 index 0000000..e41ea82 --- /dev/null +++ b/src/assets/icons/light.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/page2-right.svg b/src/assets/icons/page2-right.svg new file mode 100644 index 0000000..e65078b --- /dev/null +++ b/src/assets/icons/page2-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/projector.svg b/src/assets/icons/projector.svg new file mode 100644 index 0000000..f325fe2 --- /dev/null +++ b/src/assets/icons/projector.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/page-bg.png b/src/assets/images/page-bg.png new file mode 100644 index 0000000..169806a Binary files /dev/null and b/src/assets/images/page-bg.png differ diff --git a/src/components/Dots/index.js b/src/components/Dots/index.js index 7bc5b9b..c2234b8 100644 --- a/src/components/Dots/index.js +++ b/src/components/Dots/index.js @@ -1,24 +1,75 @@ +import React, { useState, useEffect } from "react"; import _ from "lodash"; -import React from "react"; -export default function Dots({ count = 7, active, setPage }) { +export default function Dots({ count = 7, setPage }) { + const [scroll, setScroll] = useState(null); + const [active, setActive] = useState(null); + const height = window.innerHeight; + useEffect(() => { + window.addEventListener( + "scroll", + _.debounce(() => setScroll(window.scrollY), 20) + ); + }, []); + + useEffect(() => { + if (window.scrollY < height) { + setActive(() => 0); + } + if (window.scrollY > height && window.scrollY < 2 * height) { + setActive(() => 1); + } + if (window.scrollY > height && window.scrollY < 2 * height) { + setActive(() => 2); + } + if (window.scrollY > 2 * height && window.scrollY < 2.3 * height) { + setActive(() => 3); + } + if (window.scrollY > 2.3 * height && window.scrollY < 2.5 * height) { + setActive(() => 4); + } + if (window.scrollY > 2.5 * height && window.scrollY < 3 * height) { + setActive(() => 5); + } + if (window.scrollY > 3 * height && window.scrollY < 4 * height) { + setActive(() => 6); + } + if (window.scrollY > 4 * height && window.scrollY < 4.99 * height) { + setActive(() => 7); + } + if (window.scrollY > 4.99 * height && window.scrollY < 5.5 * height) { + setActive(() => 8); + } + if (window.scrollY > 5.5 * height && window.scrollY < 7 * height) { + setActive(() => 9); + } + }, [scroll]); return ( -
- {[...Array(count)].map((dot, index) => ( - +
+ {[0, 1, 2, 2.35, 2.5, 3, 4, 4.99, 5.5, 7].map((position, index) => ( + ))}
); } -const Dot = ({ active, setPage, value }) => { +const Dot = ({ value, active, index, setActive }) => { + const click = () => { + setActive(() => index); + window.scrollTo(0, value * window.innerHeight); + + } return (
setPage(() => value)} + style={{ border : active ? '2px solid blue' : '' }} + onClick={() => click()} >
+ {[32, 17, 0, -17, -32].map((light, index) => ( + + ))} + + ); +} + +const Light = ({ degree }) => { + return ( +
+ + +
+ ); +}; diff --git a/src/views/Home/Page1/Header/index.scss b/src/views/Home/Page1/Header/index.scss new file mode 100644 index 0000000..c3a0033 --- /dev/null +++ b/src/views/Home/Page1/Header/index.scss @@ -0,0 +1,47 @@ +.light-animation { + animation-name: light-animation; + animation-duration: 6s; + animation-iteration-count: 1; +} + +@keyframes light-animation { + 0% { + opacity: 1; + } + 3% { + opacity: 0; + } + 6% { + opacity: 1; + } + 9% { + opacity: 0; + } + 30% { + opacity: 1; + } + 33% { + opacity: 0; + } + 36% { + opacity: 1; + } + 39% { + opacity: 0; + } + 60% { + opacity: 1; + } + 63% { + opacity: 0; + } + 66% { + opacity: 1; + } + 69% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/views/Home/Page1/index.js b/src/views/Home/Page1/index.js index 13fef51..8dc682e 100644 --- a/src/views/Home/Page1/index.js +++ b/src/views/Home/Page1/index.js @@ -3,6 +3,7 @@ import { Link } from "react-router-dom"; import { Carousel } from "@trendyol-js/react-carousel"; import Book from "./Book"; import FloatWithMouse from "../../../components/FloatWidthMouse"; +import Header from "./Header"; import scroll from "../../../utils/scroll"; import _ from "lodash"; @@ -57,6 +58,7 @@ export default function Page1({ list, page }) { style={{ top: top }} > +
-
+
لیست محصولات diff --git a/src/views/Home/Page2/Mobile/Video/index.js b/src/views/Home/Page2/Mobile/Video/index.js index 09b8ede..63d6523 100644 --- a/src/views/Home/Page2/Mobile/Video/index.js +++ b/src/views/Home/Page2/Mobile/Video/index.js @@ -15,13 +15,11 @@ export default function Video({ selectedVideo, videoPosition }) { 3 * height ); window.addEventListener("scroll", () => { - console.log(window.scrollY); videoTopPositionHandler(window.scrollY); }); }, []); const videoTopPositionHandler = (scrollY) => { - console.log(scrollY); if (scrollY < 2.8 * height) { setTop(() => 50); } else if (scrollY >= 2.8 * height && scrollY < 3 * height) { @@ -63,7 +61,10 @@ export default function Video({ selectedVideo, videoPosition }) { : videoPosition?.top, }} controls - autoPlay={"true"} + autoPlay={ + window.scrollY > 3 * window.innerHeight && + window.scrollY < 3.5 * window.innerHeight + } > { if (scrollY > 2 * height && scrollY <= 2.5 * height) { @@ -212,9 +212,7 @@ export default function Page2({ list, page, autoPlay }) { >
+
+ + +
+
{
- {bookId && ( + {/* {bookId && (

{ @@ -50,10 +50,11 @@ function LessonPlayList({ style={{ height: 2 }} >

- )} + )} */} - {bookId ? ( - category.map((video, i) => ( + {list + ?.filter((item) => !item.isFreeVOD) + ?.map((video, i) => (
{file.text}

*/}
- )) - ) : ( -
setVideoActive(category)} - id={"listItem" + category.id} - > - -
- {/* */} - - 22:05 -
-
-

{category.name}

- {/*

{file.text}

*/} -
-
- )} + ))}
} @@ -128,7 +99,7 @@ function LessonPlayList({ export default connect( (state) => ({ selectedVideo: state.publicApi.selectedVideo, - realCategories: state.publicApi.bookInfo?.categories, + // realCategories: state.publicApi.bookInfo?.categories, vods: state.publicApi.bookSection?.vods, }), { diff --git a/src/views/Home/VideoTube/index.js b/src/views/Home/VideoTube/index.js index 665232c..bbb6dc1 100644 --- a/src/views/Home/VideoTube/index.js +++ b/src/views/Home/VideoTube/index.js @@ -85,11 +85,11 @@ function VodTube({

نظرات

-
+ {/*
{info?.comments?.map((comment, i) => ( ))} -
+
*/}
@@ -119,16 +119,19 @@ function VodTube({ maxHeight: window.innerHeight / 1.5, }} > - {localStorage.getItem("bookId") + {/* {localStorage.getItem("bookId") ? categories?.map((video, i) => ( )) : info?.vods.map((video, i) => ( - ))} + ))} */} + {/* {info?.vods.map((video, i) => ( */} + + {/* ))} */}
- {info?.attachments.length > 0 && ( + {1 > 0 && (
@@ -179,7 +182,7 @@ function VodTube({ export default connect( (state) => ({ selectedVideo: state.publicApi.selectedVideo, - info: state.publicApi.bookSection, + info: state.publicApi?.bookInfo, loading: state.publicApi.loading, categories: state.publicApi.categories, allBooks: state.publicApi.bookInfo?.vods, diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 787230b..986acb5 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -5,6 +5,7 @@ import Page1 from "./Page1"; import Page2 from "./Page2"; import Page3 from "./Page3"; import Page4 from "./Page4"; +import Dots from '../../components/Dots'; import VideoTube from "./VideoTube"; export default function Home() { @@ -32,8 +33,9 @@ export default function Home() { return (
+