zojgame/graff-estate-histories
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2024-03-20 13:02:08 +05:00
parent 60711e07da
commit 5aa1fb2d1b
1 changed files with 68 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Histories.tsx
+68 -37
View File
@@ -17,7 +17,9 @@ const Histories = () => {
const handlers = useSwipeable({
onSwipedLeft: handleOnRightMove,
onSwipedRight: handleOnLeftMove,
trackMouse: true,
});
const [selectedVideo, setSelectedVideo] = useState<number>(1);
useLayoutEffect(() => {
const screenWidth = window.screen.width;
@@ -49,9 +51,7 @@ const Histories = () => {
video.current.pause();
}
});
}, [currentOffset, videoRefs]);
useEffect(() => {
for (let i = 0; i < videoRefs.length; i++) {
const video = videoRefs[i];
if (video.current && i === -currentOffset) {
@@ -72,10 +72,10 @@ const Histories = () => {
const interval = setInterval(() => {
if (!currentVideoRef || !currentVideoRef.current) return;
const progress = Math.round(
const progress =
(100 / currentVideoRef.current.duration) *
currentVideoRef.current.currentTime
);
currentVideoRef.current.currentTime;
setVideoProgress(progress);
if (progress === 100) {
clearInterval(interval);
@@ -132,55 +132,86 @@ const Histories = () => {
</button>
</div>
</div>
<div className="relative sm:border-l border-l-[#3D425C] sm:h-full h-[548px]">
<div className="absolute left-0 overflow-x-hidden h-full 2xl:pl-10 xl:pl-8 sm:pl-3 xl:pb-10 sm:pb-[25px]">
<div className="relative sm:border-l border-l-[#3D425C] sm:h-full h-[548px] w-full">
<div
{...handlers}
className="absolute overflow-x-clip h-full 2xl:pl-10 xl:pl-8 sm:pl-3 xl:pb-10 sm:pb-[25px]"
>
<div
{...handlers}
className="flex gap-4 w-full h-full transition-all duration-300 ease-in-out"
style={{
transform: `translateX(${currentOffset * cardWidth}px)`,
}}
>
<div
className={`relative flex justify-center items-center overflow-clip 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px]`}
className={`2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px] h-full`}
>
<div className="absolute w-[1080px]">
<video ref={videoRefs[0]} src="videos/video.mp4" muted />
<video
ref={videoRefs[0]}
src="videos/video.mp4"
muted
loop
className=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
<div className="w-full h-1 bg-[#52587A] bottom-0 sm:block hidden">
<div
className="w-0 bg-white h-1 transition-all duration-500 "
style={{ width: `${videoProgress}%` }}
></div>
</div>
{currentOffset === 0 && (
<div className="w-full h-1 bg-[#52587A] absolute bottom-0 sm:block hidden">
<div
className="w-0 bg-white h-1 transition-all duration-500"
style={{ width: `${videoProgress}%` }}
></div>
</div>
)}
</div>
<div
className={`relative flex justify-center items-center overflow-clip 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px]`}
className={`relative 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px] h-full`}
>
<div className="absolute w-[1080px]">
<video ref={videoRefs[1]} src="videos/video.mp4" muted />
<video
ref={videoRefs[1]}
src="videos/video.mp4"
muted
loop
className=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
<div
className={`absolute bottom-0 w-full h-1 bg-[#52587A] sm:block hidden transition-opacity duration-500 ${
currentOffset === -1 ? "opacity-100" : "opacity-0"
}`}
>
<div
className="w-0 bg-white h-1 transition-[width] duration-500"
style={{ width: `${videoProgress}%` }}
></div>
</div>
{currentOffset === -1 && (
<div className="w-full h-1 bg-[#52587A] absolute bottom-0 sm:block hidden">
<div
className="w-0 bg-white h-1 transition-all duration-500"
style={{ width: `${videoProgress}%` }}
></div>
</div>
)}
</div>
<div
className={`relative flex justify-center items-center overflow-clip 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px]`}
className={`2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px] h-full`}
>
<div className="absolute w-[1080px]">
<video ref={videoRefs[2]} src="videos/video.mp4" muted />
</div>
{currentOffset === -2 && (
<div className="w-full h-1 bg-[#52587A] absolute bottom-0 sm:block hidden">
<video
ref={videoRefs[2]}
src="videos/video.mp4"
muted
loop
className=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
{currentOffset === 2 && (
<div className="w-full h-1 bg-[#52587A] bottom-0 sm:block hidden">
<div
className="w-0 bg-white h-1 transition-all duration-500"
className="w-0 bg-white h-1 transition-all"
style={{ width: `${videoProgress}%` }}
></div>
</div>