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