reza added projectors

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;

src/assets/icons/projector.svg

@@ -0,0 +1,89 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.34" height="43.706" viewBox="0 0 37.34 43.706">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1.005" x2="0.5" y2="0.008" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#01020f"/>
+      <stop offset="0.094" stop-color="#141a26"/>
+      <stop offset="0.199" stop-color="#232c39"/>
+      <stop offset="0.306" stop-color="#2c3844"/>
+      <stop offset="0.421" stop-color="#303c48"/>
+      <stop offset="0.694" stop-color="#2b3745"/>
+      <stop offset="0.993" stop-color="#1e2a3e"/>
+      <stop offset="1" stop-color="#1e2a3e"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#323b47"/>
+      <stop offset="0.123" stop-color="#343c48"/>
+      <stop offset="0.162" stop-color="#707378"/>
+      <stop offset="0.258" stop-color="#818387"/>
+      <stop offset="0.298" stop-color="#39404c"/>
+      <stop offset="0.417" stop-color="#4c515a"/>
+      <stop offset="0.493" stop-color="#4d525c"/>
+      <stop offset="0.613" stop-color="#242f3f"/>
+      <stop offset="0.772" stop-color="#2b3443"/>
+      <stop offset="0.881" stop-color="#202b3c"/>
+      <stop offset="0.939" stop-color="#232e3e"/>
+      <stop offset="0.993" stop-color="#2e3845"/>
+      <stop offset="1" stop-color="#313a47"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="0" y1="0.5" x2="1" y2="0.5" xlink:href="#linear-gradient-2"/>
+    <linearGradient id="linear-gradient-4" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#1e2a3e"/>
+      <stop offset="0.003" stop-color="#1e2a3e"/>
+      <stop offset="0.119" stop-color="#2b3745"/>
+      <stop offset="0.225" stop-color="#303c48"/>
+      <stop offset="0.659" stop-color="#131925"/>
+      <stop offset="1" stop-color="#01020f"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="-0.007" y1="0.5" x2="1.015" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#303845"/>
+      <stop offset="0.334" stop-color="#404651"/>
+      <stop offset="1" stop-color="#232e3e"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="0.5" y1="1.025" x2="0.5" y2="-0.019" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#232e3e"/>
+      <stop offset="0.004" stop-color="#323c4b"/>
+      <stop offset="0.018" stop-color="#5d6570"/>
+      <stop offset="0.033" stop-color="#838a92"/>
+      <stop offset="0.049" stop-color="#a5a9b0"/>
+      <stop offset="0.067" stop-color="#c1c4c8"/>
+      <stop offset="0.087" stop-color="#d8dadc"/>
+      <stop offset="0.109" stop-color="#e9eaec"/>
+      <stop offset="0.137" stop-color="#f5f6f7"/>
+      <stop offset="0.175" stop-color="#fdfdfd"/>
+      <stop offset="0.268" stop-color="#fff"/>
+      <stop offset="0.629" stop-color="#fff"/>
+      <stop offset="0.689" stop-color="#fff"/>
+      <stop offset="0.767" stop-color="#fcfcfc"/>
+      <stop offset="0.812" stop-color="#f4f4f5"/>
+      <stop offset="0.848" stop-color="#e6e7e9"/>
+      <stop offset="0.879" stop-color="#d2d4d8"/>
+      <stop offset="0.908" stop-color="#b8bcc1"/>
+      <stop offset="0.934" stop-color="#999ea5"/>
+      <stop offset="0.959" stop-color="#737a84"/>
+      <stop offset="0.982" stop-color="#49525f"/>
+      <stop offset="1" stop-color="#232e3e"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="-0.002" y1="0.5" x2="1.001" y2="0.5" xlink:href="#linear-gradient-2"/>
+  </defs>
+  <g id="LightSpot" transform="translate(-181.167 694.919)">
+    <g id="Group_226" data-name="Group 226" transform="translate(181.167 -694.919)">
+      <ellipse id="Ellipse_13" data-name="Ellipse 13" cx="12.514" cy="0.996" rx="12.514" ry="0.996" transform="translate(6.1 20.698)" fill="#fff"/>
+      <ellipse id="Ellipse_14" data-name="Ellipse 14" cx="18.67" cy="0.996" rx="18.67" ry="0.996" transform="translate(0 41.714)" fill="#fff"/>
+      <rect id="Rectangle_180" data-name="Rectangle 180" width="20.679" height="2.972" transform="translate(8.247 10.903)" fill="url(#linear-gradient)"/>
+      <path id="Path_51" data-name="Path 51" d="M117.845-40.848c-3.9,0-7.064.279-7.064.624v8.807H124.91v-8.807C124.91-40.569,121.747-40.848,117.845-40.848Z" transform="translate(-99.217 50.007)" fill="url(#linear-gradient-2)"/>
+      <path id="Path_52" data-name="Path 52" d="M134.574-37.887c0-.548-5.6-1-12.514-1s-12.514.447-12.514,1v2.844c0-.549,25.028-.549,25.028,0Z" transform="translate(-103.445 56.737)" fill="url(#linear-gradient-3)"/>
+      <ellipse id="Ellipse_15" data-name="Ellipse 15" cx="12.514" cy="0.996" rx="12.514" ry="0.996" transform="translate(6.1 20.698)" fill="url(#linear-gradient-4)"/>
+      <path id="Path_53" data-name="Path 53" d="M136.855-37.413c0-.473-4.87-.756-10.837-.756s-10.784.283-10.784.756L108.39-19.9h35.1Z" transform="translate(-107.402 59.178)" fill="url(#linear-gradient-5)"/>
+      <path id="Path_54" data-name="Path 54" d="M136.855-37.413c0-.473-4.87-.756-10.837-.756s-10.784.283-10.784.756l-3.9,9.979L108.39-19.9h35.1l-2.858-7.538Z" transform="translate(-107.402 59.178)" fill="url(#linear-gradient-6)" style="mix-blend-mode: multiply;isolation: isolate"/>
+      <path id="Path_55" data-name="Path 55" d="M110.406-30.994h.691v-9.877l1.4-1.4h13.493l1.667,1.667v9.612h.691V-41.167L126.6-42.919H112.065l-1.611,1.613Z" transform="translate(-100.501 42.919)" fill="#1d2a39"/>
+      <path id="Path_56" data-name="Path 56" d="M145.505-33.242c0-.549-8.356-1-18.671-1s-18.667.447-18.667,1v3.313h37.338Z" transform="translate(-108.166 72.639)" fill="url(#linear-gradient-7)"/>
+      <rect id="Rectangle_181" data-name="Rectangle 181" width="0.691" height="1.585" transform="translate(9.905 11.925)" fill="#0b1e30"/>
+      <rect id="Rectangle_182" data-name="Rectangle 182" width="0.691" height="2.398" transform="translate(9.905 13.51)" fill="#000a1e"/>
+      <rect id="Rectangle_183" data-name="Rectangle 183" width="0.691" height="1.585" transform="translate(27.158 11.925)" fill="#0c1e31"/>
+      <rect id="Rectangle_184" data-name="Rectangle 184" width="0.691" height="2.398" transform="translate(27.158 13.51)" fill="#000613"/>
+      <path id="Path_57" data-name="Path 57" d="M111.962-42.773v5.378l-1.4,1.4v-5.374Z" transform="translate(-99.964 43.418)" fill="#283242"/>
+      <path id="Path_58" data-name="Path 58" d="M113.929-42.773v5.318l1.672,1.672v-5.322Z" transform="translate(-88.438 43.418)" fill="#293342"/>
+      <rect id="Rectangle_185" data-name="Rectangle 185" width="13.493" height="5.378" transform="translate(11.998 0.646)" fill="#222e3e"/>
+    </g>
+  </g>
+</svg>

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 (
-    <div className="flex flex-col items-center fixed z-50 top-1/2 lg:right-5 xl:right-10 transform -translate-y-1/2">
-      {[...Array(count)].map((dot, index) => (
-        <Dot active={active === Number(index) + 1} setPage={setPage} key={index} value={Number(index + 1)} />
+    <div className="flex flex-col items-center fixed z-50 top-1/2 lg:right-3 xl:right-5 transform -translate-y-1/2">
+      {[0, 1, 2, 2.35, 2.5, 3, 4, 4.99, 5.5, 7].map((position, index) => (
+        <Dot key={index} value={position} active={Number(index) === active} setActive={setActive} index={index} />
       ))}
     </div>
   );
 }
 
-const Dot = ({ active, setPage, value }) => {
+const Dot = ({ value, active, index, setActive }) => {
+  const click = () => {
+    setActive(() => index);
+    window.scrollTo(0, value * window.innerHeight);
+
+  }
   return (
     <div
       className={_.join(
-        ["rounded-full mb-2 cursor-pointer transition-all", active ? "p-0.5 border-2 border-blueC0" : "p-0 border-0"],
+        [
+          "rounded-full mb-2 cursor-pointer transition-all",
+          active ? "p-0.5 border-2" : "p-0",
+        ],
         " "
       )}
-      onClick={() => setPage(() => value)}
+      style={{ border : active ? '2px solid blue' : '' }}
+      onClick={() => click()}
     >
       <div
         className={_.join(

src/views/Home/Page1/Header/index.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import projectorIcon from "../../../../assets/icons/projector.svg";
+import lightIcon from "../../../../assets/icons/light.svg";
+import _ from "lodash";
+
+export default function Header() {
+  return (
+    <header className="container flex flex-row justify-between z-50 transform -translate-y-24">
+      {[32, 17, 0, -17, -32].map((light, index) => (
+        <Light degree={light} key={index}/>
+      ))}
+    </header>
+  );
+}
+
+const Light = ({ degree }) => {
+  return (
+    <div
+      className="flex flex-col items-center relative"
+      style={{ transform: `rotate(${degree}deg)` }}
+    >
+      <img src={projectorIcon} alt="" className="w-12 h-12" />
+      <img
+        src={lightIcon}
+        alt=""
+        className={_.join(
+          [
+            "absolute z-50 light-animation",
+          ],
+          " "
+        )}
+        style={{ transform: `scale(6) translateY(24%)` }}
+      />
+    </div>
+  );
+};

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;
+  }
+}

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 }}
     >
       <FloatWithMouse />
+      <Header />
       <img
         src={flatFlower}
         alt=""
@@ -103,7 +105,10 @@ export default function Page1({ list, page }) {
           className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-7"
         />
       </div>
-      <div className="container flex flex-row justify-between relative transform translate-y-12" style={{ alignItems: 'start'}}>
+      <div
+        className="container flex flex-row justify-between relative transform translate-y-12"
+        style={{ alignItems: "start" }}
+      >
         <div className="list-none flex flex-row bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md">
           <strong className="text-white text-sm font-light ml-1 border-l-2 pl-2 border-gray-300">
             لیست محصولات

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
+        }
       >
         <source
           src={`https://dnvn.ir/api/v1/file/${20840}`}

src/views/Home/Page2/index.js

@@ -3,6 +3,7 @@ import _ from "lodash";
 import scroll from "../../../utils/scroll";
 import Mobile from "./Mobile";
 import qrImage from "../../../assets/images/qrImage.png";
+import leftBg from "../../../assets/images/page-bg.png";
 
 export default function Page2({ list, page, autoPlay }) {
   const height = window.innerHeight;
@@ -175,7 +176,6 @@ export default function Page2({ list, page, autoPlay }) {
     } else {
     }
   };
-  
 
   const unitPositionHandler = (scrollY) => {
     if (scrollY > 2 * height && scrollY <= 2.5 * height) {
@@ -212,9 +212,7 @@ export default function Page2({ list, page, autoPlay }) {
     >
       <div
         className={_.join(
-          [
-            "relative shadow-2xl transform flex justify-center bg-white items-center text-center",
-          ],
+          ["relative shadow-2xl transform flex bg-white text-center"],
           " "
         )}
         style={{
@@ -223,13 +221,37 @@ export default function Page2({ list, page, autoPlay }) {
           height: "140%",
         }}
       >
+        <div className="w-1/2 h-full relative">
+          <img
+            src={leftBg}
+            alt=""
+            // style={{
+            //   transform: `rotate(-${boxPosition.rotate}deg))`,
+            // }}
+          />
+          <video
+            className={_.join(
+              [
+                "video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer",
+              ],
+              " "
+            )}
+            controls
+          >
+            <source
+              src={`https://dnvn.ir/api/v1/file/${20840}`}
+              type={"video/mp4"}
+            />
+          </video>
+        </div>
+
         <div className="absolute left-5 top-5 h-40 w-40">
           <img src={qrImage} alt="" />
         </div>
         <div
           className="absolute left-7 bg-black"
           style={{
-            height: (window.innerHeight * 9) / 25 - 20,
+            height: (window.innerHeight * 9) / 25 - 40,
             width: (window.innerHeight * 10) / 20 - 16,
             bottom: (window.innerHeight * 9) / 30,
           }}

src/views/Home/VideoTube/LessonPlayList/index.js

@@ -5,11 +5,11 @@ import { Link } from "react-router-dom";
 import _ from "lodash";
 
 function LessonPlayList({
-  category,
+  list,
   selectedVideo,
   setVideoActive,
-  catergories,
-  realCategories,
+  // catergories,
+  // realCategories,
   vods,
   theme,
 }) {
@@ -36,7 +36,7 @@ function LessonPlayList({
     <>
       {
         <div className={_.join(["w-full mb-2.5 flex flex-col border"], " ")}>
-          {bookId && (
+          {/* {bookId && (
             <header className="mb-1 flex flex-row items-center">
               <h3 className="py-1 px-2.5 m-0 bg-white inline">
                 {
@@ -50,10 +50,11 @@ function LessonPlayList({
                 style={{ height: 2 }}
               ></span>
             </header>
-          )}
+          )} */}
 
-          {bookId ? (
-            category.map((video, i) => (
+          {list
+            ?.filter((item) => !item.isFreeVOD)
+            ?.map((video, i) => (
               <div
                 className={_.join(
                   [
@@ -88,37 +89,7 @@ function LessonPlayList({
                   {/* <p>{file.text}</p> */}
                 </div>
               </div>
-            ))
-          ) : (
-            <div
-              className={
-                "lesson-playlist__item flex align-items-center" +
-                " " +
-                (category?.id === selectedVideo?.id &&
-                  "lesson-playlist__item--active")
-              }
-              onClick={() => setVideoActive(category)}
-              id={"listItem" + category.id}
-            >
-              <span className="lesson-playlist__item--count"></span>
-              <div className="lesson-playlist__item--video">
-                {/* <video>
-                  <source
-                    src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
-                  />
-                </video> */}
-                <img
-                  src={`https://dnvn.ir/api/v1/file/${category.posterId}`}
-                  alt=""
-                />
-                <span>22:05</span>
-              </div>
-              <div className="lesson-playlist__item--text flex flex-col">
-                <h4>{category.name}</h4>
-                {/* <p>{file.text}</p> */}
-              </div>
-            </div>
-          )}
+            ))}
         </div>
       }
     </>
@@ -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,
   }),
   {

src/views/Home/VideoTube/index.js

@@ -85,11 +85,11 @@ function VodTube({
             <h2 className="m-0">نظرات</h2>
             <button className="border-0">بستن نظرات</button>
           </header>
-          <div className="flex flex-col">
+          {/* <div className="flex flex-col">
             {info?.comments?.map((comment, i) => (
               <Comment comment={comment} key={i} />
             ))}
-          </div>
+          </div> */}
         </section>
         <section className="md:hidden sm:hidden xs:hidden px-4 py-0">
           <AddComment theme={theme} />
@@ -119,16 +119,19 @@ function VodTube({
               maxHeight: window.innerHeight / 1.5,
             }}
           >
-            {localStorage.getItem("bookId")
+            {/* {localStorage.getItem("bookId")
               ? categories?.map((video, i) => (
                   <LessonPlayList theme={theme} category={video} key={i} />
                 ))
               : info?.vods.map((video, i) => (
                   <LessonPlayList theme={theme} category={video} key={i} />
-                ))}
+                ))} */}
+            {/* {info?.vods.map((video, i) => ( */}
+            <LessonPlayList theme={theme} list={info?.vods} />
+            {/* ))} */}
           </div>
         </section>
-        {info?.attachments.length > 0 && (
+        {1 > 0 && (
           <section className="flex flex-col mb-7">
             <header className="flex items-center w-full">
               <div className="flex flex-col">
@@ -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,

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 (
     <div
       className="flex flex-col bg-white relative w-full rtl"
-      style={{ height: "900vh" }}
+      style={{ height: "800vh" }}
     >
+      <Dots />
       <Navbar />
       <Page1 page={1} />
       <Page2 page={2} autoPlay={autoPlay} />