You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

77 lines
2.2 KiB

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