import React, { useState, useEffect } from "react"; import _ from "lodash"; import ARImage from "../../../../../../assets/images/ar.jpg"; import scroll from "../../../../../../utils/scroll"; export default function Video({ selectedVideo, videoPosition }) { const height = window.innerHeight; const [top, setTop] = useState(null); useEffect(() => { scroll.linearFormula( window.scrollY > 3 * height ? 3 * height : window.scrollY, 70, 50, 2.8 * height, 3 * height ); window.addEventListener("scroll", () => { videoTopPositionHandler(window.scrollY); }); }, []); const videoTopPositionHandler = (scrollY) => { if (scrollY < 2.8 * height) { setTop(() => 50); } else if (scrollY >= 2.8 * height && scrollY < 3 * height) { setTop(() => scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height) ); } else { setTop(() => 50); } }; return ( <div className="relative h-full w-full bg-transparent"> <video id="video" className={_.join( [ "video outline-none animation-puls transform", window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute", window.scrollY > 3.5 * window.innerHeight ? "" : "-translate-y-1/2", ], " " )} style={{ height: window.scrollY < 3.5 * window.innerHeight ? (window.innerHeight * 9) / 25 : videoPosition?.height, width: window.scrollY < 3.5 * window.innerHeight ? "100%" : videoPosition?.width, left: window.scrollY < 3.5 * window.innerHeight ? "0px" : videoPosition?.left, top: window.scrollY < 3.5 * window.innerHeight ? top + "%" : videoPosition?.top, }} controls autoPlay={ window.scrollY > 3 * window.innerHeight && window.scrollY < 3.5 * window.innerHeight } > <source src={`https://dnvn.ir/api/v1/file/${20840}`} type={"video/mp4"} /> </video> <img src={ARImage} className="w-full absolute bottom-0 left-0" /> </div> ); }