From 5aa1fb2d1b63e6f3e2972e6f257900cafcf97fe1 Mon Sep 17 00:00:00 2001
From: inmake <inmake.ru@gmail.com>
Date: Wed, 20 Mar 2024 13:02:08 +0500
Subject: [PATCH] upd

---
 src/components/Histories.tsx | 105 +++++++++++++++++++++++------------
 1 file changed, 68 insertions(+), 37 deletions(-)

diff --git a/src/components/Histories.tsx b/src/components/Histories.tsx
index 1f9e050..34ebd40 100644
--- a/src/components/Histories.tsx
+++ b/src/components/Histories.tsx
@@ -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>