reza added vod

src/App.scss

@@ -1,8 +1,10 @@
 @import "./constants/size.scss";
+@import "./constants/colors.scss";
 @import "./views/Home/Page1/index.scss";
 @import "./views/Home/Page2/index.scss";
 @import "./views/Home/Page2/Mobile/index";
 
+
 *{
   font-family: Regular;
 }

src/components/JolPlayer/index.js

@@ -1,13 +1,35 @@
+import React, { useEffect } from "react";
 import JoLPlayer from "jol-player";
 
-const Video = ({ fileIds, posterId }) => {
+function Video({ fileIds, posterId }) {
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 500) {
+        if (!localStorage.getItem("joiRect")) {
+          const jolRect = document
+            .getElementById("video-joi")
+            .getBoundingClientRect();
+          localStorage.setItem("joiRect", JSON.stringify(jolRect));
+        }
+      }
+    });
+  }, []);
+
   return (
-    <div style={{ direction: "ltr", textAlign: "left", marginBottom: 10 }}>
+    <div
+      style={{
+        direction: "ltr",
+        textAlign: "left",
+        marginBottom: 10,
+        zIndex: 10,
+      }}
+      id="video-joi"
+    >
       <JoLPlayer
         option={{
           videoSrc: `https://dnvn.ir/api/v1/file/${fileIds}`,
           width: "100%",
-          height: window.innerWidth > 1000 ? window.innerHeight - 300 : 250,
+          height: window.innerWidth > 1024 ? window.innerHeight - 200 : 250,
           theme: "#4dd35b",
           language: "en",
           isShowMultiple: window.innerWidth > 700,
@@ -30,6 +52,6 @@ const Video = ({ fileIds, posterId }) => {
       />
     </div>
   );
-};
+}
 
 export default Video;

src/components/Navbar/index.js

@@ -5,7 +5,7 @@ import graySearchIcon from "../../assets/icons/gray-search.svg";
 
 export default function Navbar({ pages }) {
   return (
-    <div className="z-10 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full bg-opacity-20 shadow-sm bg-white backdrop-filter backdrop-blur-md lg:px-5 xl:px-10">
+    <div className="z-20 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full bg-opacity-20 shadow-sm bg-white backdrop-filter backdrop-blur-md lg:px-5 xl:px-10">
       <div className="flex flex-row items-center">
         <Link to="/">
           <strong className="ml-3 text-primary lg:text-md xl:text-xl">

src/constants/colors.scss

@@ -0,0 +1,36 @@
+// gray
+$gray : #aaa;
+$gray1 : #383838;
+$gray2 : #6c6c6c;
+$gray3 : rgb(143, 142, 142);
+$gray4 : #666666;
+$gray5 : #555;
+$gray6 : #ddd;
+$gray7 : #797979;
+$gray8 : #272727;
+$gray9 : #b3b3b3;
+$gray10 : #cccccc;
+$gray11 : #969696;
+$gray12 : #e9e9e9;
+$gray13 : #f6f6f6;
+// green
+$green : #4dd35b;
+$green1 : #81C342;
+$green2 : #6cbe44;
+$green3 : #00cc69;
+$green4 : #84de56;
+$green5 : #9cdf52;
+$green6 : #08793d;
+// blue
+$blue : #a2b4cb;
+$blue1 : #505a82;
+$blue2 : #00FFF8;
+// red
+$red : red;
+$red1 : rgb(255, 115, 115);
+
+//yellow
+$yellow : #FFD70F;
+
+//orange
+$orange : orange;

src/constants/size.scss

@@ -2,4 +2,6 @@ $sm : 640px;
 $md : 768px;
 $lg : 1024px;
 $xl : 1280px;
-$xxl : 1536px;
+$xxl : 1536px;
+
+$maxWidth : calc(100% - 120px);

src/index.css

@@ -2,16 +2,20 @@
 @tailwind components;
 @tailwind utilities;
 
+.rtl {
+  direction: rtl;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

src/router.js

@@ -1,15 +1,23 @@
 import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Home from "./views/Home/index";
+import Home from "./views/Home";
+import VideoTube from "./views/Home/VideoTube";
 
 export default function router() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="*" element={<main><h1>No matches routes.</h1></main>} />
+        <Route path="/vod" element={<VideoTube />} />
+        <Route
+          path="*"
+          element={
+            <main>
+              <h1>No matches routes.</h1>
+            </main>
+          }
+        />
       </Routes>
     </BrowserRouter>
-    
   );
 }

src/utils/scroll.js

@@ -1,4 +1,8 @@
 class scroll {
+  goToTop = () => {
+    window.scrollTo(0, 0);
+  };
+
   homeScrollHandler = (index) => {
     const height = Number(window.innerHeight);
     const scrollY = Number(window.scrollY);
@@ -23,20 +27,17 @@ class scroll {
       if (scrollY === 7 * height) {
         return -1 * height;
       }
-    }
+    } else if (index === 3) {
-    // else
+      if (scrollY <= 3 * height) {
-    // if (index === 3) {
+        return height;
-    //   if (scrollY <= height) {
+      }
-    //     return height;
+      if (scrollY > 3 * height && scrollY < 4 * height) {
-    //   }
+        return 4 * height - scrollY;
-    //   if (scrollY > height && scrollY < 3 * height) {
+      }
-    //     return 2 * height - scrollY;
+      if (scrollY === 7 * height) {
-    //   }
+        return -height;
-    //   if(scrollY === 4 * height){
+      }
-    //     return -height;
+    } else if (index === 4) {
-    //   }
-    // }
-    else if (index === 4) {
       if (scrollY <= 2 * height) {
         return height;
       } else if (scrollY > 2 * height && scrollY < 3 * height) {
@@ -94,8 +95,48 @@ class scroll {
   };
 
   doubleLinearFormula = (currentScroll) => {
-    const rect = document.getElementById("video").getBoundingClientRect();
+    if(!localStorage.getItem("htmlRect")){
-    console.log(rect.x / window.innerWidth * 100);
+      localStorage.setItem("htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect()));
+    }
+    const htmlRect = JSON.parse(localStorage.getItem("htmlRect"));
+    const joiRect = JSON.parse(localStorage.getItem("joiRect"));
+
+    const currentWidth = this.linearFormula(
+      currentScroll,
+      htmlRect.width,
+      joiRect.width,
+      3 * window.innerHeight,
+      4 * window.innerHeight
+    );
+    const currentHeight = this.linearFormula(
+      currentScroll,
+      htmlRect.height,
+      joiRect.height,
+      3 * window.innerHeight,
+      4 * window.innerHeight
+    );
+    const currentLeft = this.linearFormula(
+      currentScroll,
+      htmlRect.left,
+      joiRect.left,
+      3 * window.innerHeight,
+      4 * window.innerHeight
+    );
+
+    const currentTop = this.linearFormula(
+      currentScroll,
+      htmlRect.top,
+      joiRect.top - window.innerHeight,
+      3 * window.innerHeight,
+      4 * window.innerHeight
+    );
+
+    return {
+      width: currentWidth,
+      height: currentHeight,
+      top: currentTop,
+      left: currentLeft,
+    };
   };
 }
 

src/views/Home/Page2/Mobile/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import _ from "lodash";
 import codVideo from "../../../../assets/videos/COD.mp4";
-import scroll from '../../../../utils/scroll';
+import scroll from "../../../../utils/scroll";
 
-export default function Mobile({ mobilePosition }) {
+export default function Mobile({ mobilePosition, videoPosition }) {
   const [checked, setChecked] = useState(mobilePosition > 0 ? true : false);
   useEffect(() => {
     if (mobilePosition > 0) {
@@ -12,9 +12,10 @@ export default function Mobile({ mobilePosition }) {
       setChecked(false);
     }
   }, [mobilePosition]);
+
   useEffect(async () => {
-    console.log(document.getElementById("video"));
+    console.log(videoPosition);
-  },[]);
+  }, []);
   return (
     <div
       className={_.join(
@@ -85,17 +86,24 @@ export default function Mobile({ mobilePosition }) {
       {window.scrollY > 2500 ? (
         <video
           id="video"
-          className={_.join(["video border-0 outline-none animation-puls"], " ")}
+          className={_.join(
+            [
+              "video outline-none animation-puls",
+              window.scrollY > 3 * window.innerHeight ? "fixed" : "static",
+            ],
+            " "
+          )}
           style={{
-            height: (window.innerHeight * 9) / 25,
+            height: window.scrollY <= 3 * window.innerHeight ? (window.innerHeight * 9) / 25 : videoPosition?.height,
-            width: "100%",
+            width: window.scrollY <= 3 * window.innerHeight ? "100%" : videoPosition?.width,
-            // transform : scroll.doubleLinearFormula(window.scrollY)
+            left : window.scrollY > 3 * window.innerHeight ? videoPosition?.left : 'auto',
+            top : window.scrollY > 3 * window.innerHeight ? videoPosition?.top : 'auto',
           }}
           controls
-          autoPlay={true}
+          autoPlay={false}
           muted
         >
-          <source src={codVideo} type={"video/mp4"} />
+          <source src={`https://dnvn.ir/api/v1/file/${20680}`} type={"video/mp4"} />
         </video>
       ) : null}
     </div>

src/views/Home/Page2/index.js

@@ -24,6 +24,9 @@ export default function Page2({ list, page }) {
         3 * height
       )
     );
+    setVideoPosition(
+      scroll.doubleLinearFormula(window.scrollY)
+    );
     if (window.scrollY < 2.5 * height) {
       setBoxPosition({
         translateY: scroll.linearFormula(
@@ -144,7 +147,7 @@ export default function Page2({ list, page }) {
     if(scrollY <= 3 * height){
       setVideoPosition(() => null);
     }else if(scrollY > 3 * height && scrollY < 4 * height){
-      scroll.doubleLinearFormula(scrollY);
+      setVideoPosition(scroll.doubleLinearFormula(scrollY));
     }else{
 
     }
@@ -169,7 +172,7 @@ export default function Page2({ list, page }) {
       <div
         className={_.join(
           [
-            "relative shadow-2xl transform d-flex justify-center bg-white items-center text-center",
+            "relative shadow-2xl transform flex justify-center bg-white items-center text-center",
           ],
           " "
         )}
@@ -192,7 +195,7 @@ export default function Page2({ list, page }) {
         ></div>
       </div>
       {/* mobile phone */}
-      <Mobile mobilePosition={mobilePosition} />
+      <Mobile mobilePosition={mobilePosition} videoPosition={videoPosition} />
       {/* video */}
     </div>
   );

src/views/Home/Page5/index.js

@@ -1,28 +0,0 @@
-import React, { useState, useEffect } from "react";
-import _ from "lodash";
-import scroll from "../../../utils/scroll";
-
-
-export default function Page5({ list, page }) {
-  const [top, setTop] = useState(window.innerHeight);
-
-  useEffect(() => {    
-    window.addEventListener("scroll", (e) => {
-      setTop(scroll.homeScrollHandler(page));
-    });
-  }, []);
-  return (
-    <div
-      className={_.join(
-        [
-          "fixed left-0 h-screen w-full pt-20 bg-gray-500",
-        ],
-        " "
-      )}
-      style={{ top: top }}
-    >
-      
-    </div>
-  );
-}
-

src/views/Home/Page6/index.js

@@ -1,28 +0,0 @@
-import React, { useState, useEffect } from "react";
-import _ from "lodash";
-import scroll from "../../../utils/scroll";
-
-
-export default function Page6({ list, page }) {
-  const [top, setTop] = useState(window.innerHeight);
-
-  useEffect(() => {    
-    window.addEventListener("scroll", (e) => {
-      setTop(scroll.homeScrollHandler(page));
-    });
-  }, []);
-  return (
-    <div
-      className={_.join(
-        [
-          "fixed left-0 h-screen w-full pt-20 bg-gray-600",
-        ],
-        " "
-      )}
-      style={{ top: top }}
-    >
-      
-    </div>
-  );
-}
-

src/views/Home/Page7/index.js

@@ -1,27 +0,0 @@
-import React, { useState, useEffect } from "react";
-import _ from "lodash";
-import scroll from "../../../utils/scroll";
-
-export default function Page7({ list, page }) {
-  const [top, setTop] = useState(window.innerHeight);
-
-  useEffect(() => {    
-    window.addEventListener("scroll", (e) => {
-      setTop(scroll.homeScrollHandler(page));
-    });
-  }, []);
-  return (
-    <div
-      className={_.join(
-        [
-          "fixed left-0 h-screen w-full pt-20 bg-gray-700",
-        ],
-        " "
-      )}
-      style={{ top: top }}
-    >
-      
-    </div>
-  );
-}
-

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

@@ -1,15 +1,19 @@
 import React from "react";
 // import Avatar from "@mui/material/Avatar";
-import user3 from "../../../assets/images/user3.png";
+// import user3 from "../../../assets/images/user3.png";
 
 export default function AddComment(props) {
   const { theme } = props;
   return (
     <>
       {/* <Avatar style={{ width: 60, height: 60, marginLeft: 10 }} /> */}
-      <div className="d-flex flex-column" style={{width : '100%'}}>
+      <div className="flex flex-col" style={{ width: "100%" }}>
-        <textarea rows={5} placeholder="نظر خود را در این قسمت بنویسید " />
+        <textarea
-        <div className="d-flex justify-content-end">
+          className="w-full rounded-md p-2.5 outline-none"
+          rows={5}
+          placeholder="نظر خود را در این قسمت بنویسید "
+        />
+        <div className="flex justify-end">
           <button className="submit submit-small mt-2">ارسال نظر</button>
         </div>
       </div>

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

@@ -1,13 +1,15 @@
-import React from 'react';
+import React from "react";
 
-export default function Attachments({file,num}) {
+export default function Attachments({ file, num }) {
   return (
-    <div className="download-attachments d-flex justify-content-between align-items-center">
+    <div className="my-0 mx-auto border-b-2 flex justify-between items-center">
-      <div className="d-flex">
+      <div className="flex">
         <span>{num}</span>
-        <h4>{file.name}</h4>
+        <h4 className="m-0">{file.name}</h4>
       </div>
-      <a href={file.file} download>دریافت</a>
+      <a href={file.file} download className="py-1 px-4 border rounded-md">
+        دریافت
+      </a>
     </div>
-  )
+  );
 }

src/views/Home/VideoTube/Attachments/index.scss

@@ -1,70 +0,0 @@
-.download-attachments{
-  color: white;
-  margin: 0px auto;
-  border-bottom: 1px solid $gray8;
-  span{
-
-  }
-  h4{
-    margin: 0px;
-  }
-  a{
-    padding: 5px 15px;
-    border: 1px solid $gray7;
-    color: white;
-    text-decoration: none;
-    border-radius: 8px;
-  }
-}
-
-@media screen and (min-width: 1441px) {
-  .download-attachments{
-    width: calc(100% - 20px);
-    padding: 20px 0px;
-    a{
-      font-size: 13px;
-    }
-    h4{
-      font-size: 15px;
-    }
-  }
-}
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .download-attachments{
-    width: calc(100% - 20px);
-    padding: 10px 0px;
-    a{
-      font-size: calc(100vw / 100);
-    }
-    h4{
-      font-size: calc(100vw / 100);
-    }
-  }
-}
-
-@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .download-attachments{
-    width: calc(100% - 20px);
-    padding: 10px 0px;
-    a{
-      font-size: calc(100vw / 50);
-    }
-    h4{
-      font-size: calc(100vw / 50);
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .download-attachments{
-    width: calc(100% - 20px);
-    padding: 10px 0px;
-    a{
-      font-size: calc(100vw / 40);
-    }
-    h4{
-      font-size: calc(100vw / 40);
-    }
-  }
-}

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

@@ -1,20 +1,26 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 export default function Book({ data }) {
   const desc = {
-    "ریاضی": 'ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده',
+    ریاضی: "ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده",
-    'علوم': "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه",
+    علوم: "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه",
-    'زیست شناسی': "زیست را در دانوین باید زیست",
+    "زیست شناسی": "زیست را در دانوین باید زیست",
-    'شیمی': 'شیمی اینجا می فهمه کیمیا یعنی چی',
+    شیمی: "شیمی اینجا می فهمه کیمیا یعنی چی",
-    'فیزیک': "با دانوین فیزیکو با یه لنز جدید ببنید"
+    فیزیک: "با دانوین فیزیکو با یه لنز جدید ببنید",
-  }
+  };
   return (
-    <Link to={'/courses/' + data.id} className="video-tube-suggest d-flex flex-column">
+    <Link
-      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" />
+      to={"/courses/" + data.id}
+      className="flex flex-col transform hover:-translate-y-2.5"
+    >
+      <img
+        src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+        alt=""
+        className="transition-all duration-500"
+      />
       <h4>{data.name}</h4>
       <p>{desc[data.name] || ""}</p>
     </Link>
-  )
+  );
 }
-

src/views/Home/VideoTube/Book/index.scss

@@ -1,82 +0,0 @@
-.video-tube-suggest{
-  color: white;
-  img{
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 24px;
-    margin-bottom: 10px;
-    transition: all 0.5s;
-  }
-  &:hover{
-    color: white;
-    img{
-      transform: translateY(-10px);
-    }
-  }
-}
-
-@media screen and (min-width: 1441px) {
-  .video-tube-suggest{
-    width: 30%;
-    img{
-      width: 130px;
-      height: 180px;
-    }
-    h4{
-      font-size: 15px;
-    }
-    p{
-      font-size: 11px;
-    }
-  }
-}
-
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .video-tube-suggest{
-    width: 30%;
-    img{
-      width: 100%;
-      // height: 180px;
-    }
-    h4{
-      font-size: calc(100vw / 90);
-    }
-    p{
-      font-size: calc(100vw / 110);
-    }
-  }
-}
-
-@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .video-tube-suggest{
-    width: 30%;
-    img{
-      width: 200px;
-      // height: 180px;
-    }
-    h4{
-      font-size: calc(100vw / 43);
-    }
-    p{
-      font-size: calc(100vw / 52);
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .video-tube-suggest{
-    width: 30%;
-    img{
-      width: 100px;
-      // height: 180px;
-    }
-    h4{
-      font-size: calc(100vw / 36);
-    }
-    p{
-      font-size: calc(100vw / 43);
-    }
-  }
-}

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

@@ -4,14 +4,14 @@ import React from "react";
 
 export default function Comment({ comment }) {
   return (
-    <div className="video-tube-comment d-flex">
+    <div className="py-2.5 px-0 flex">
       {/* <Avatar src={comment.imageUrl} style={{ width: 65, height: 65, marginLeft: 10 }} /> */}
-      <div className="d-flex flex-column">
+      <div className="flex flex-col">
-        <p>
+        <p className="leading-3 mb-4">
           <strong>{comment.name}</strong> {comment.text}
         </p>
-        <div className="d-flex justify-content-end align-items-center">
+        <div className="flex justify-content-end align-items-center">
-          <button>پاسخ</button>
+          <button className="bg-transparent border-0 ml-5">پاسخ</button>
           <span>{comment.date}</span>
         </div>
       </div>

src/views/Home/VideoTube/Comment/index.scss

@@ -1,92 +0,0 @@
-.video-tube-comment{
-  padding: 10px 0px;
-  color: white;
-  div{
-  }
-  button{
-    background-color: inherit;
-    color: $green;
-    border: none;
-    margin-left: 20px;
-  }
-  p{
-    line-height: 1.5;
-    margin-bottom: 15px;
-  }
-}
-
-@media screen and (min-width: 1441px){
-  .video-tube-comment{
-    width: 90%;
-    p{
-      font-size: 13px;
-      strong{
-        font-size: 15px;
-        margin-left: 5px;
-      }
-    }
-    button{
-      font-size: 13px;
-    }
-    span{
-      font-size: 15px;
-    }
-  }
-}
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .video-tube-comment{
-    width: 90%;
-    p{
-      font-size: calc(100vw / 105);
-      strong{
-        font-size: calc(100vw / 90);
-        margin-left: 5px;
-      }
-    }
-    button{
-      font-size: calc(100vw / 100) !important;
-    }
-    span{
-      font-size: calc(100vw / 90);
-    }
-  }
-}
-
-@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .video-tube-comment{
-    width: 95%;
-    p{
-      font-size: calc(100vw / 50);
-      strong{
-        font-size: calc(100vw / 45);
-        margin-left: 5px;
-      }
-    }
-    button{
-      font-size: calc(100vw / 50) !important;
-    }
-    span{
-      font-size: calc(100vw / 45);
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .video-tube-comment{
-    width: 95%;
-    p{
-      font-size: calc(100vw / 38);
-      strong{
-        font-size: calc(100vw / 35);
-        margin-left: 5px;
-      }
-    }
-    button{
-      font-size: calc(100vw / 40) !important;
-    }
-    span{
-      font-size: calc(100vw / 35);
-    }
-  }
-}

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

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 // import { publicApi } from "../../../redux/actions";
 import { Link } from "react-router-dom";
-import _ from 'lodash';
+import _ from "lodash";
 
 function LessonPlayList({
   category,
@@ -17,16 +17,12 @@ function LessonPlayList({
   useEffect(() => {
     if (localStorage.getItem("scroll-list") && vods) {
       const list = document.getElementById("list");
-      const listItem = document.getElementById(
+      const listItem = document.getElementById("listItem" + selectedVideo?.id);
-        "listItem" + selectedVideo?.id
+      const elementHeight = listItem?.offsetHeight;
-      );
+      const listHeight = list.offsetHeight;
-      const elementHeight = (listItem)?.offsetHeight;
-      const listHeight = (list).offsetHeight;
       const index = vods?.findIndex(
         (item) => item?.name === selectedVideo?.name
       );
-      console.log(index);
-      console.log(listHeight, elementHeight * (Number(index) + 1));
 
       if (elementHeight * (Number(index) + 1) > listHeight) {
         list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
@@ -39,25 +35,17 @@ function LessonPlayList({
   return (
     <>
       {
-        <div
+        <div className={_.join(["w-full mb-2.5 flex flex-col"], " ")}>
-          className={_.join(
-            [
-              "lesson-playlist d-flex flex-column",
-              light ? "lesson-playlist-light" : "lesson-playlist-dark",
-            ],
-            " "
-          )}
-        >
           {bookId && (
-            <header>
+            <header className="mb-1">
-              <h3>
+              <h3 className="py-1 px-2.5 m-0">
                 {
                   realCategories.filter(
                     (item) => item.id === category[0].categoryId
                   )[0].name
                 }
               </h3>
-              <span></span>
+              <span className="flex flex-1" style={{ height: 1 }}></span>
             </header>
           )}
 
@@ -66,7 +54,7 @@ function LessonPlayList({
               <Link
                 to={"/video/" + video.id}
                 className={
-                  "lesson-playlist__item d-flex align-items-center" +
+                  "flex flex-row items-center py-2" +
                   " " +
                   (video?.id === selectedVideo?.id &&
                     "lesson-playlist__item--active")
@@ -75,23 +63,27 @@ function LessonPlayList({
                 id={"listItem" + video.id}
                 onClick={() => setVideoActive(video)}
               >
-                <span className="lesson-playlist__item--count">
+                <span className="w-8 text-center">
                   {Number(i) + 1}
                 </span>
-                <div className="lesson-playlist__item--video">
+                <div className="relative">
                   {/* <video>
                   <source
                     src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
                   />
                 </video> */}
                   <img
+                    className="m-0 rounded-sm"
                     src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
                     alt=""
+                    style={{ width : 150 }}
                   />
-                  <span>22:05</span>
+                  <span className="py-0 px-1 absolute left-1 bottom-2.5">
+                    22:05
+                  </span>
                 </div>
-                <div className="lesson-playlist__item--text d-flex flex-column">
+                <div className="py-4 px-2.5 flex flex-col">
-                  <h4>{video.name}</h4>
+                  <h4 className="m-0">{video.name}</h4>
                   {/* <p>{file.text}</p> */}
                 </div>
               </Link>
@@ -100,7 +92,7 @@ function LessonPlayList({
             <Link
               to={"/video/" + category.id}
               className={
-                "lesson-playlist__item d-flex align-items-center" +
+                "lesson-playlist__item flex align-items-center" +
                 " " +
                 (category?.id === selectedVideo?.id &&
                   "lesson-playlist__item--active")
@@ -121,7 +113,7 @@ function LessonPlayList({
                 />
                 <span>22:05</span>
               </div>
-              <div className="lesson-playlist__item--text d-flex flex-column">
+              <div className="lesson-playlist__item--text flex flex-col">
                 <h4>{category.name}</h4>
                 {/* <p>{file.text}</p> */}
               </div>

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

@@ -1,265 +0,0 @@
-.lesson-playlist {
-  width: 100%;
-  padding-bottom: 10px;
-  &-light {
-    header {
-      background-color: inherit !important;
-      h3 {
-        background-color: $gray12;
-      }
-    }
-    .lesson-playlist {
-      &__item {
-        * {
-          color: black !important;
-        }
-        &--active{
-          background-color: $gray13;
-        }
-      }
-    }
-  }
-  &-dark {
-    header {
-      background-color: inherit !important;
-      h3 {
-        background-color: $gray7;
-      }
-      span {
-        background-color: $gray7;
-      }
-    }
-    .lesson-playlist {
-      
-      &__item {
-        &--count {
-          color: white;
-        }
-        &--active {
-          background: rgba($gray12, 0.21);
-        }
-        &--text {
-          h4 {
-            color: white;
-          }
-          p {
-            color: $gray7;
-          }
-        }
-        &--video {
-          span {
-            background-color: #0000006d;
-            color: white;
-          }
-        }
-      }
-    }
-  }
-  header {
-    margin-bottom: 5px;
-    h3 {
-      padding: 5px 10px;
-      margin: 0px;
-    }
-    span {
-      display: flex;
-      flex: 1;
-      height: 1px;
-    }
-  }
-  &__item {
-    &--text {
-      padding: 15px 10px;
-      h4 {
-        margin: 0px;
-      }
-      p {
-        margin: 0px;
-      }
-    }
-    &--video {
-      span {
-        padding: 0px 5px;
-        position: absolute;
-        left: 5px;
-        bottom: 10px;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1441px) {
-  .lesson-playlist {
-    width: 100%;
-    header {
-      padding: 10px 40px 0px 0px !important;
-      h3 {
-        font-size: 16px;
-      }
-      span {
-      }
-    }
-    &__item {
-      padding: 10px 0px 5px 0px;
-      cursor: pointer;
-      &--count {
-        font-size: 18px;
-        width: 40px;
-        text-align: center;
-      }
-      &--text {
-        max-width: 55%;
-        h4 {
-          font-size: 17px;
-        }
-        p {
-          font-size: 14px;
-        }
-      }
-      &--video {
-        width: 142px;
-        height: 90px;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        span {
-          font-size: 18px;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .lesson-playlist {
-    width: 100%;
-    header {
-      padding: 10px 40px 0px 0px !important;
-      h3 {
-        font-size: calc(100vw / 95);
-      }
-      span {
-      }
-    }
-    &__item {
-      padding: 10px 0px 5px 0px;
-      cursor: pointer;
-      &--count {
-        font-size: calc(100vw / 72);
-        width: 40px;
-        text-align: center;
-      }
-      &--text {
-        max-width: 55%;
-        h4 {
-          font-size: calc(100vw / 90);
-        }
-        p {
-          font-size: calc(100vw / 100);
-        }
-      }
-      &--video {
-        width: 132px;
-        height: 90px;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        span {
-          font-size: calc(100vw / 100);
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .lesson-playlist {
-    width: 100%;
-    header {
-      padding: 10px 50px 0px 0px !important;
-      h3 {
-        font-size: calc(100vw / 45);
-      }
-      span {
-      }
-    }
-    &__item {
-      padding: 10px 0px 5px 0px;
-      cursor: pointer;
-      &--count {
-        font-size: calc(100vw / 35);
-        width: 50px;
-        text-align: center;
-      }
-      &--text {
-        max-width: 55%;
-        h4 {
-          font-size: calc(100vw / 45);
-        }
-        p {
-          font-size: calc(100vw / 50);
-        }
-      }
-      &--video {
-        width: 182px;
-        // height: 90px;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        span {
-          font-size: calc(100vw / 45);
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .lesson-playlist {
-    width: 100%;
-    header {
-      padding: 10px 40px 0px 0px !important;
-      h3 {
-        font-size: calc(100vw / 38);
-      }
-      span {
-      }
-    }
-    &__item {
-      padding: 10px 0px 5px 0px;
-      cursor: pointer;
-      &--count {
-        font-size: calc(100vw / 25);
-        width: 40px;
-        text-align: center;
-      }
-      &--text {
-        max-width: 55%;
-        h4 {
-          font-size: calc(100vw / 35);
-        }
-        p {
-          font-size: calc(100vw / 40);
-        }
-      }
-      &--video {
-        width: 132px;
-        height: 90px;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        span {
-          font-size: calc(100vw / 40);
-        }
-      }
-    }
-  }
-}

src/views/Home/VideoTube/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import Navbar from "../../../components/Navbar";
 import LessonPlayList from "./LessonPlayList";
 import Attachments from "./Attachments";
 import Book from "./Book";
@@ -6,15 +7,16 @@ import Comment from "./Comment";
 import AddComment from "./AddComment";
 import Video from "../../../components/JolPlayer";
 
-import listIcon from "../../assets/icons/list.png";
+import listIcon from "../../../assets/icons/list.png";
 import { connect } from "react-redux";
 import _ from "lodash";
 import scroll from "../../../utils/scroll.js";
 import location from "../../../utils/location.js";
-import { book, publicApi } from "../../redux/actions";
+import { book, publicApi } from "../../../redux/actions";
-import Loader from "../../components/Loader";
+// import Loader from "../../components/Loader";
 
 function VodTube({
+  page,
   selectedVideo,
   info,
   bookSection,
@@ -25,10 +27,13 @@ function VodTube({
   allBooks,
   theme,
 }) {
+  const [top, setTop] = useState(window.innerHeight);
   const videoListTag = useRef(null);
   useEffect(() => {
+    window.addEventListener("scroll", (e) => {
+      setTop(scroll.homeScrollHandler(page));
+    });
     localStorage.setItem("scroll-list", "on");
-    scroll.goToTop();
     getInfo({
       bookId: localStorage.getItem("bookId")
         ? localStorage.getItem("bookId")
@@ -45,124 +50,115 @@ function VodTube({
 
   const light = theme === "light";
   return (
-    <>
+    <div
-      <div
+      className={_.join(
-        className={_.join(
+        [
-          [
+          "fixed flex flex-row rtl pt-20 lg:px-5 xl:px-10 w-full bg-white transition-opacity duration-500",
-            "video-tube main d-flex flex-column",
+          top > 0 ? "opacity-0" : "opacity-100",
-            light ? "video-tube-light bg-white" : "video-tube-dark bg-black",
+        ],
-          ],
+        " "
-          " "
+      )}
-        )}
+      style={{ top: top }}
-        style={{ filter: loading ? "blur(8px)" : "" }}
+    >
-      >
+      {/* <Navbar /> */}
-        <main className="d-flex">
+      <div className="ml-4.5 flex flex-col ml-2" style={{ flex: 8 }}>
-          <div className="video-tube__content d-flex flex-column">
+        <section className="pb-7 flex flex-col">
-            <section className="video-tube__content--display d-flex flex-column">
+          <Video
-              {/* <video controls>
+            fileIds={selectedVideo?.fileIds}
-              <source src={selectedVideo.src} />
+            posterId={selectedVideo?.posterId}
-            </video> */}
+          />
-              <Video
+          {/* <span className="desktop">درس دوم / بیست و یکم</span> */}
-                fileIds={selectedVideo?.fileIds}
+          <h1 className="md:hidden sm:hidden xs:hidden mb-5">
-                posterId={selectedVideo?.posterId}
+            {selectedVideo?.name}
-              />
+          </h1>
-              {/* <span className="desktop">درس دوم / بیست و یکم</span> */}
+          {/* <p className="desktop">{selectedVideo.text}</p> */}
-              <h1 className="desktop">{selectedVideo?.name}</h1>
+        </section>
-              {/* <p className="desktop">{selectedVideo.text}</p> */}
+        <section className="md:hidden sm:hidden xs:hidden pb-7 flex flex-col">
-            </section>
+          <header className="flex flex-row justify-between items-center px-5 py-0">
-            <section className="desktop video-tube__content--comments flex-column">
+            <h2 className="m-0">نظرات</h2>
-              <header className="d-flex justify-content-between align-items-center">
+            <button className="border-0">بستن نظرات</button>
-                <h2>نظرات</h2>
+          </header>
-                <button>بستن نظرات</button>
+          <div className="flex flex-col">
-              </header>
+            {info?.comments?.map((comment, i) => (
-              <div className="video-tube__content-comments___list d-flex flex-column">
+              <Comment comment={comment} key={i} />
-                {info?.comments?.map((comment, i) => (
+            ))}
-                  <Comment comment={comment} key={i} />
+          </div>
+        </section>
+        <section className="md:hidden sm:hidden xs:hidden px-4 py-0">
+          <AddComment theme={theme} />
+        </section>
+      </div>
+      <div className="flex flex-col" style={{ flex: 3 }}>
+        <section className="mb-7 flex flex-col">
+          <header className="w-full flex justify-between items-center px-2 py-2 bg-gray-100">
+            <div className="flex flex-col">
+              <h2 className="m-0">
+                {localStorage.getItem("category")?.split(",")[1] ||
+                  "لیست فیلم‌ها"}
+              </h2>
+              {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
+            </div>
+            <img src={listIcon} alt="" />
+          </header>
+          <div
+            ref={videoListTag}
+            className="pt-2.5 overflow-y-scroll flex flex-col"
+            id="list"
+          >
+            {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} />
                 ))}
-              </div>
-            </section>
-            <section className="desktop video-tube__content--addComment">
-              <AddComment theme={theme} />
-            </section>
           </div>
-          <div className="video-tube__sidebar d-flex flex-column">
+        </section>
-            <section className="video-tube__sidebar--playlist d-flex flex-column">
+        {info?.attachments.length > 0 && (
-              <header className="d-flex justify-content-between align-items-center">
+          <section className="flex flex-col mb-7">
-                <div className="d-flex flex-column">
+            <header className="flex items-center w-full">
-                  <h2>
+              <div className="flex flex-col">
-                    {localStorage.getItem("category")?.split(",")[1] ||
+                <h2 className="m-0">فایل پیوست تمارین این فصل</h2>
-                      "لیست فیلم‌ها"}
+                {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
-                  </h2>
-                  {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
-                </div>
-                <img src={listIcon} alt="" />
-              </header>
-              <div
-                ref={videoListTag}
-                className="video-tube__sidebar--playlist___list d-flex flex-column"
-                id="list"
-              >
-                {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} />
-                    ))}
               </div>
-            </section>
+            </header>
-            {info?.attachments.length > 0 && (
+            <div className="overflow-y-scroll flex flex-col">
-              <section className="video-tube__sidebar--attachments d-flex flex-column">
+              {info?.attachments?.map((file, i) => (
-                <header className="d-flex align-items-center">
+                <Attachments file={file} key={i} />
-                  <div className="d-flex flex-column">
+              ))}
-                    <h2>فایل پیوست تمارین این فصل</h2>
+            </div>
-                    {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
+          </section>
-                  </div>
+        )}
-                </header>
+        {info?.related && (
-                <div className="video-tube__sidebar--attachments___list d-flex flex-column">
+          <section className="video-tube__sidebar--suggests flex flex-col bg-transparent">
-                  {info?.attachments?.map((file, i) => (
+            <header className="flex justify-between items-center w-full">
-                    <Attachments file={file} key={i} />
+              <h2 className="m-0">پیشنهاد دانوین برای شما</h2>
-                  ))}
+              <span className="px-2 py-1">تا 50% تخفیف </span>
-                </div>
+            </header>
-              </section>
+            <div className="video-tube__sidebar--suggests___list flex justify-between align-items-center">
-            )}
+              {info?.related.slice(0, 3).map((item, i) => (
-            {info?.related && (
+                <Book data={item} key={i} />
-              <section className="video-tube__sidebar--suggests d-flex flex-column">
+              ))}
-                <header className="d-flex justify-content-between align-items-center">
+            </div>
-                  <h2>پیشنهاد دانوین برای شما</h2>
+          </section>
-                  <span>تا 50% تخفیف </span>
+        )}
-                </header>
-                <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center">
-                  {info?.related.slice(0, 3).map((item, i) => (
-                    <Book data={item} key={i} />
-                  ))}
-                </div>
-              </section>
-            )}
 
-            <section className="mobile video-tube__content--comments flex-column">
+        <section className="mobile video-tube__content--comments flex-col">
-              <header className="d-flex justify-content-between align-items-center">
+          <header className="flex justify-between align-items-center">
-                <h2>نظرات</h2>
+            <h2>نظرات</h2>
-                <button>بستن نظرات</button>
+            <button>بستن نظرات</button>
-              </header>
+          </header>
-              <div className="video-tube__content-comments___list d-flex flex-column">
+          <div className="video-tube__content-comments___list flex flex-col">
-                {info?.comments?.map((comment, i) => (
+            {info?.comments?.map((comment, i) => (
-                  <Comment comment={comment} key={i} />
+              <Comment comment={comment} key={i} />
-                ))}
+            ))}
-              </div>
-            </section>
           </div>
-          <section className="mobile video-tube__content--addComment">
+        </section>
-            <AddComment />
-          </section>
-        </main>
       </div>
-      {loading && (
+      {/* <section className="mobile video-tube__content--addComment">
-        <div className="full-loader">
+            <AddComment />
-          <Loader size={50} />
+          </section> */}
-        </div>
+    </div>
-      )}
-    </>
   );
 }
 

src/views/Home/VideoTube/index.scss

@@ -1,672 +0,0 @@
-@import "./Attachments/index.scss";
-@import "./Book/index.scss";
-@import "./Comment/index.scss";
-@import "./LessonPlayList/index.scss";
-
-.video-tube {
-  &-light {
-    background-color: white;
-    h1,
-    p {
-      color: black !important;
-    }
-    .video-tube {
-      &__content {
-        &--comments {
-          color: black !important;
-          header{
-            background-color: inherit !important;
-            h2{
-              color: $green !important;
-            }
-          }
-          button{
-            color: $green !important;
-            background-color: inherit;
-          }
-        }
-        &--addComment {
-          textarea {
-            background-color: $gray13;
-            color: black !important;
-            border: none;
-          }
-        }
-      }
-      &__sidebar {
-        header {
-          background-color: $gray12;
-          * {
-            color: black !important;
-          }
-        }
-        &--playlist{
-          border: 1px solid $gray7;
-          border-top: none;
-        }
-        &--suggests{
-          border : none;
-          &__list{
-            background-color: inherit;
-          }
-        }
-        &--attachments{
-          border: none;
-        }
-      }
-    }
-  }
-  &-dark {
-    .video-tube{
-      &__content {
-        &--display {
-          border-bottom: 1px solid $gray8;
-          video {
-            border: 1px solid $gray8;
-          }
-          span {
-            color: $green4;
-          }
-          h1 {
-            color: white;
-          }
-          p {
-            color: white;
-          }
-        }
-        &--comments {
-          color: white;
-          border-bottom: 1px solid $gray8;
-          header {
-            h2 {
-              color: white;
-            }
-          }
-          button {
-            background-color: inherit;
-            color: $green;
-          }
-        }
-        &--addComment {
-          textarea {
-            background-color: $gray8;
-            color: white;
-            &::placeholder {
-              color: $gray4;
-            }
-          }
-        }
-      }
-      &__sidebar {
-        &--playlist {
-          border: 1px solid $gray8;
-          header {
-            color: white;
-          }
-          &___list {
-            /* Track */
-            &::-webkit-scrollbar-track {
-              box-shadow: inset 0 0 5px inherit;
-            }
-  
-            /* Handle */
-            &::-webkit-scrollbar-thumb {
-              background: $gray;
-            }
-  
-            /* Handle on hover */
-            &::-webkit-scrollbar-thumb:hover {
-              background: white;
-            }
-          }
-        }
-        &--attachments {
-          border: 1px solid $gray8;
-          header {
-            color: white;
-          }
-          &___list {
-            /* Track */
-            &::-webkit-scrollbar-track {
-              box-shadow: inset 0 0 5px inherit;
-            }
-            /* Handle */
-            &::-webkit-scrollbar-thumb {
-              background: $gray10;
-            }
-            /* Handle on hover */
-            &::-webkit-scrollbar-thumb:hover {
-              background: white;
-            }
-          }
-        }
-        &--suggests {
-          border: 1px solid $gray8;
-          header {
-            color: white;
-            span {
-              background-color: #00fff74f;
-              color: $blue2;
-            }
-          }
-        }
-      }
-    }
-  }
-  &__content {
-    margin-left: 15px;
-
-    &--display {
-      padding-bottom: 30px;
-      video {
-      }
-      span {
-        padding: 15px 0px;
-      }
-      h1 {
-        margin-bottom: 20px;
-      }
-      p {
-      }
-    }
-    &--comments {
-      padding-bottom: 30px;
-      header {
-        padding: 20px 0px;
-        h2 {
-          margin: 0px;
-        }
-      }
-      button {
-        border: none;
-      }
-    }
-    &--addComment {
-      padding: 15px 0px;
-
-      textarea {
-        width: 100%;
-        border-radius: 12px;
-        padding: 10px;
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-  }
-  &__sidebar {
-    &--playlist {
-      margin-bottom: 30px;
-      header {
-        width: 100%;
-        h2,
-        p {
-          margin: 0px;
-        }
-        p {
-          margin-top: 5px;
-        }
-      }
-      &___list {
-        padding-top: 10px;
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-          width: 8px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-          border-radius: 10px;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-          border-radius: 10px;
-        }
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-        }
-      }
-    }
-    &--attachments {
-      margin-bottom: 30px;
-      header {
-        width: 100%;
-        h2,
-        p {
-          margin: 0px;
-        }
-        p {
-          margin-top: 5px;
-        }
-      }
-      &___list {
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-          width: 8px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-          border-radius: 10px;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-          border-radius: 10px;
-        }
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-        }
-      }
-    }
-    &--suggests {
-      background-color: inherit;
-      header {
-        width: 100%;
-        h2 {
-          margin: 0px;
-        }
-        span {
-          padding: 5px 8px;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1441px) {
-  .video-tube {
-    main {
-      max-width: $maxWidth;
-      margin-top: 10px;
-    }
-    &__content {
-      flex: 8;
-      &--display {
-        span {
-          font-size: 16px;
-        }
-        h1 {
-          font-size: 24px;
-        }
-        p {
-          font-size: 16px;
-        }
-      }
-      &--comments {
-        header {
-          h2 {
-            font-size: 20px;
-          }
-        }
-        button {
-          font-size: 14px;
-        }
-      }
-      &--addComment {
-        width: 60%;
-        textarea {
-          font-size: 14px;
-          &::placeholder {
-            font-size: 14px;
-          }
-        }
-      }
-    }
-    &__sidebar {
-      flex: 4;
-      &--playlist {
-        max-height: calc(100vh - 140px);
-        header {
-          padding: 12px;
-          background-color: #2c2c2c;
-          img {
-            transform: translateY(-5px);
-          }
-          h2 {
-            font-size: 16px;
-          }
-          p {
-            font-size: 10px;
-          }
-        }
-      }
-      &--attachments {
-        max-height: 320px;
-        header {
-          padding: 14px 12px;
-          background-color: rgba(#ebebeb, 0.21);
-          h2 {
-            font-size: 16px;
-          }
-          p {
-            font-size: 10px;
-          }
-        }
-      }
-      &--suggests {
-        header {
-          padding: 20px 12px;
-          // background-color: #8bd09746;
-          h2 {
-            font-size: 16px;
-          }
-          span {
-            font-size: 11px;
-          }
-        }
-        &___list {
-          padding: 15px 12px;
-          // background-color: #08793d58;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .video-tube {
-    main {
-      max-width: 1250px;
-      margin-top: 10px;
-      padding: 0px 10px;
-    }
-    &__content {
-      flex: 8;
-      &--display {
-        video {
-          width: 100%;
-        }
-        span {
-          font-size: calc(100vw / 100);
-        }
-        h1 {
-          font-size: calc(100vw / 60);
-        }
-        p {
-          font-size: calc(100vw / 100);
-        }
-      }
-      &--comments {
-        header {
-          h2 {
-            font-size: calc(100vw / 80);
-          }
-        }
-        button {
-          font-size: calc(100vw / 90);
-        }
-      }
-      &--addComment {
-        width: 60%;
-        button {
-          font-size: calc(100vw / 110);
-        }
-        textarea {
-          font-size: calc(100vw / 90);
-          &::placeholder {
-            font-size: calc(100vw / 90);
-          }
-        }
-      }
-    }
-    &__sidebar {
-      flex: 4;
-      &--playlist {
-        max-height: calc(100vh - 140px);
-        header {
-          padding: 14px 12px;
-          background-color: #2c2c2c;
-          img {
-            transform: translateY(-5px);
-          }
-          h2 {
-            font-size: calc(100vw / 85);
-          }
-          p {
-            font-size: calc(100vw / 120);
-          }
-        }
-      }
-      &--attachments {
-        max-height: 250px;
-        header {
-          padding: 14px 12px;
-          background-color: rgba(#ebebeb, 0.21);
-          h2 {
-            font-size: calc(100vw / 85);
-          }
-          p {
-            font-size: calc(100vw / 120);
-          }
-        }
-      }
-      &--suggests {
-        background-color: #001702;
-        header {
-          padding: 26px 12px;
-          background-color: rgba(#ebebeb, 0.21);
-          h2 {
-            font-size: calc(100vw / 85);
-          }
-          span {
-            font-size: calc(100vw / 120);
-          }
-        }
-        &___list {
-          padding: 15px 12px;
-          background-color: #ffffff00;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .video-tube {
-    background: black;
-    main {
-      max-width: 900px;
-      margin-top: 10px;
-      padding: 0px 10px;
-      flex-direction: column;
-    }
-    &__content {
-      flex: 8;
-      margin: 0px;
-      &--display {
-        padding: 0px;
-        video {
-          width: 100%;
-          margin-bottom: 10px;
-        }
-        span {
-          font-size: calc(100vw / 40);
-        }
-        h1 {
-          font-size: calc(100vw / 30);
-        }
-        p {
-          font-size: calc(100vw / 40);
-        }
-      }
-      &--comments {
-        header {
-          h2 {
-            font-size: calc(100vw / 40);
-          }
-        }
-        button {
-          font-size: calc(100vw / 50);
-        }
-      }
-      &--addComment {
-        width: 100%;
-        button {
-          font-size: calc(100vw / 45);
-        }
-        textarea {
-          font-size: calc(100vw / 45);
-          &::placeholder {
-            font-size: calc(100vw / 45);
-          }
-        }
-      }
-    }
-    &__sidebar {
-      flex: 4;
-      &--playlist {
-        max-height: 450px;
-        header {
-          padding: 12px 12px;
-          background-color: #2c2c2c;
-          img {
-            transform: translateY(-5px);
-            width: 40px;
-          }
-          h2 {
-            font-size: calc(100vw / 40);
-          }
-          p {
-            font-size: calc(100vw / 55);
-          }
-        }
-      }
-      &--attachments {
-        max-height: 250px;
-        header {
-          padding: 14px 12px;
-          background-color: #2c2c2c;
-          h2 {
-            font-size: calc(100vw / 40);
-          }
-          p {
-            font-size: calc(100vw / 55);
-          }
-        }
-      }
-      &--suggests {
-        header {
-          padding: 14px 12px;
-          background-color: #8bd09746;
-          h2 {
-            font-size: calc(100vw / 40);
-          }
-          span {
-            font-size: calc(100vw / 55);
-          }
-        }
-        &___list {
-          padding: 15px 12px;
-          background-color: #ffffff00;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .video-tube {
-    background: black;
-    margin-top: 20px;
-    main {
-      max-width: 500px;
-      margin-top: 0px;
-      padding: 0px 10px;
-      flex-direction: column;
-    }
-    &__content {
-      flex: 8;
-      margin: 0px;
-      &--display {
-        padding: 0px;
-        video {
-          width: 100%;
-          margin-bottom: 10px;
-        }
-        span {
-          font-size: calc(100vw / 40);
-        }
-        h1 {
-          font-size: calc(100vw / 30);
-        }
-        p {
-          font-size: calc(100vw / 40);
-        }
-      }
-      &--comments {
-        header {
-          h2 {
-            font-size: calc(100vw / 30);
-          }
-        }
-        button {
-          font-size: calc(100vw / 37);
-        }
-      }
-      &--addComment {
-        width: 100%;
-        button {
-          font-size: calc(100vw / 40);
-        }
-        textarea {
-          font-size: calc(100vw / 35);
-          &::placeholder {
-            font-size: calc(100vw / 35);
-          }
-        }
-      }
-    }
-    &__sidebar {
-      flex: 4;
-      &--playlist {
-        max-height: calc(60vh);
-        header {
-          padding: 8px 12px;
-          background-color: #2c2c2c;
-          img {
-            transform: translateY(-5px);
-            width: 30px;
-          }
-          h2 {
-            font-size: calc(100vw / 30);
-          }
-          p {
-            font-size: calc(100vw / 45);
-          }
-        }
-      }
-      &--attachments {
-        max-height: 200px;
-        header {
-          padding: 14px 12px;
-          background-color: #2c2c2c;
-          h2 {
-            font-size: calc(100vw / 30);
-          }
-          p {
-            font-size: calc(100vw / 45);
-          }
-        }
-      }
-      &--suggests {
-        header {
-          padding: 10px 12px;
-          background-color: #8bd09746;
-          h2 {
-            font-size: calc(100vw / 30);
-          }
-          span {
-            font-size: calc(100vw / 45);
-          }
-        }
-        &___list {
-          padding: 15px 12px;
-        }
-      }
-    }
-  }
-}

src/views/Home/index.js

@@ -5,26 +5,20 @@ import Page1 from "./Page1";
 import Page2 from "./Page2";
 import Page3 from "./Page3";
 import Page4 from "./Page4";
-import Page5 from "./Page5";
+import VideoTube from "./VideoTube";
-import Page6 from "./Page6";
-import Page7 from "./Page7";
 import Dots from "../../components/Dots";
 
 export default function Home() {
   return (
     <div
-      className="flex flex-col bg-white relative w-full"
+      className="flex flex-col bg-white relative w-full rtl"
       style={{ height: "700vh"}}
     >
       <Dots page={1} />
       <Navbar />
       <Page1 page={1} />
       <Page2 page={2} />
-      {/* <Page3 page={3} /> */}
+      <VideoTube page={3} />
-      {/* <Page4 page={4} /> */}
-      {/* <Page5 page={5} /> */}
-      {/* <Page6 page={6} /> */}
-      {/* <Page7 page={7} />  */}
     </div>
   );
 }