From bfcdbb60f4dff8ccdeb25bbf93cdf570b735c15d Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Wed, 7 Aug 2024 16:00:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=85=B6=E4=BB=96=E6=9C=89=E5=85=B3?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css                 |   6 +-
 app/index.css                   |  27 +++++++-
 app/layout.js                   |   1 +
 app/login/page.js               |  13 ++--
 app/my/unlockedWechat/page.jsx  |   2 +-
 app/page.js                     |   4 +-
 app/search/page.js              |   2 +
 app/space/[id]/page.js          |   2 +-
 app/space/page.js               |   7 +-
 components/AddToHome/index.jsx  | 112 +++++++++++++++++++++---------
 components/ImagesMask/index.jsx | 117 ++++++++++++++++++++++++++++++++
 components/Photos/index.js      |  95 ++++++++++++++++++++++----
 components/PostItem/index.js    |   2 +-
 package-lock.json               |  17 +++++
 package.json                    |   1 +
 public/icons/left.png           | Bin 0 -> 2186 bytes
 public/icons/right.png          | Bin 0 -> 2205 bytes
 17 files changed, 342 insertions(+), 66 deletions(-)
 create mode 100644 components/ImagesMask/index.jsx
 create mode 100644 public/icons/left.png
 create mode 100644 public/icons/right.png

diff --git a/app/globals.css b/app/globals.css
index 63b70d9..6e694a3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -37,6 +37,9 @@ footer{
 /* .adm-image-viewer-slides-inner > *{
   margin: 0;
 } */
+.adm-swiper-horizontal .adm-swiper-track {
+  transform: none;
+}
 .custom-tabs .adm-tabs {
   border: none;
   --active-line-color: #ff8383;
@@ -301,4 +304,5 @@ footer{
 .adm-checkbox.adm-checkbox-checked .adm-checkbox-icon {
   border-color: #FF669E;
   background-color: #FF669E;
-}
\ No newline at end of file
+}
+
diff --git a/app/index.css b/app/index.css
index d3cccab..3cd366d 100644
--- a/app/index.css
+++ b/app/index.css
@@ -35,4 +35,29 @@
 }
 
 
-
+.imagesBtnsControllers{
+  position: fixed;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  padding: 0 12px;
+  justify-content: space-between;
+  z-index: 10001;
+  pointer-events: none;
+}
+.imagesBtnsControllerLeft,.imagesBtnsControllerRight{
+  width: 42px;
+  height: 42px;
+  border-radius: 53px;
+  background-color: #0000001A;
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: all;
+}
+.imagesBtnsControllerLeft{
+  background-image: url("/icons/left.png");
+  opacity: 0.5;
+}
+.imagesBtnsControllerRight{
+  background-image: url("/icons/right.png");
+}
\ No newline at end of file
diff --git a/app/layout.js b/app/layout.js
index c7bc061..30ee1b0 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -193,6 +193,7 @@ export default function RootLayout({ children }) {
         <main className={`w-full bg-deepBg h-full`}>
           {withAuth(<Provider store={store}>{children}</Provider>)}
           {/* <Provider store={store}>{children}</Provider> */}
+          <div id="maskDomBox"></div>
         </main>
         <footer className="fixed left-0 w-screen bg-black">
           <div>
diff --git a/app/login/page.js b/app/login/page.js
index fef53df..cf13426 100644
--- a/app/login/page.js
+++ b/app/login/page.js
@@ -60,10 +60,7 @@ function Login({ handleLogin }) {
       if(res && account){
         router.replace("/")
       }
-      
     })
-    
-    
   }, []);
   useEffect(() => {
     let interval;
@@ -158,11 +155,11 @@ function Login({ handleLogin }) {
         }
       );
       if (data.ret === -1) {
-        Toast.show({
-          icon: "fail",
-          content: data.msg,
-          position: "top",
-        });
+        // Toast.show({
+        //   icon: "fail",
+        //   content: data.msg,
+        //   position: "top",
+        // });
         return;
       }
       //登录
diff --git a/app/my/unlockedWechat/page.jsx b/app/my/unlockedWechat/page.jsx
index 75fb4a5..7a1d56a 100644
--- a/app/my/unlockedWechat/page.jsx
+++ b/app/my/unlockedWechat/page.jsx
@@ -116,7 +116,7 @@ export default function UnlockedWechat() {
         streamerData={{
           streamer_ext: {
             wechat_lock_type:
-              currentStreamer.current?.streamer?.wechat_lock_type,
+              currentStreamer.current?.lock_type,
           },
         }}
       />
diff --git a/app/page.js b/app/page.js
index a9d44a3..850258f 100644
--- a/app/page.js
+++ b/app/page.js
@@ -76,6 +76,7 @@ export default function Home() {
       </div>
       <Swiper
         direction="horizontal"
+        allowTouchMove={false}
         loop={false}
         indicator={() => null}
         ref={swiperRef}
@@ -83,6 +84,7 @@ export default function Home() {
         onIndexChange={(index) => {
           setActiveIndex(index);
         }}
+       
       >
         <Swiper.Item>
           {!activeIndex && (
@@ -97,7 +99,7 @@ export default function Home() {
       </Swiper>
       <div
         id="rightddd"
-        className={`fixed bottom-[96px] right-4 z-[999] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
+        className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
         }`}
         onClick={childrenFunc}
       >
diff --git a/app/search/page.js b/app/search/page.js
index d74208c..927754f 100644
--- a/app/search/page.js
+++ b/app/search/page.js
@@ -179,6 +179,8 @@ const ZoneItem = ({ data, showMore, link,search }) => {
             <Image
               className="flex-none w-10 h-10 rounded-full mr-2"
               src={data?.avatar?.images[0]?.urls[0]}
+              width="2.5rem"
+              height="2.5rem"
               alt=""
               fit="cover"
             />
diff --git a/app/space/[id]/page.js b/app/space/[id]/page.js
index 54056fa..ace95d0 100644
--- a/app/space/[id]/page.js
+++ b/app/space/[id]/page.js
@@ -434,7 +434,7 @@ export default function PersonSpace() {
           </JumboTabs>
         </FloatingPanel>
         <div
-          className={`fixed bottom-[96px] right-4 z-[999] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white ${
+          className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white ${
             loading && !offset ? "animate-spin" : ""
           }`}
         >
diff --git a/app/space/page.js b/app/space/page.js
index 803d472..d7c167f 100644
--- a/app/space/page.js
+++ b/app/space/page.js
@@ -129,10 +129,7 @@ export default function Space() {
     }
   }
   return (
-    <div
-      className=""
-      
-    >
+    <div className="">
       <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
         <Tabs
           activeKey={tabItems[activeIndex].key}
@@ -299,7 +296,7 @@ export default function Space() {
         </Swiper.Item>
       </Swiper>
       <div
-        className={`fixed bottom-[96px] right-4 z-[999] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white ${
+        className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white ${
           loading && !offset ? "animate-spin" : ""
         }`}
       >
diff --git a/components/AddToHome/index.jsx b/components/AddToHome/index.jsx
index d2096c4..1f37e6b 100644
--- a/components/AddToHome/index.jsx
+++ b/components/AddToHome/index.jsx
@@ -1,42 +1,88 @@
 "use client";
 
-import React,{useState,useEffect} from "react";
-import { Image ,Toast} from "antd-mobile";
+import React, { useState, useEffect } from "react";
+import { Image } from "antd-mobile";
 import { get,save } from "@/utils/storeInfo";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
 export default function AddToHome() {
-  const [firstLogin, setFirstLogin] = useState("0");
+  const [firstLogin, setFirstLogin] = useState({ first: "0", second: false });
   useEffect(() => {
-    if(!(("standalone" in window.navigator) && window.navigator.standalone)
-    ){
-      setFirstLogin(get("firstLogin"))
+    if (!("standalone" in window.navigator && window.navigator.standalone)) {
+      setFirstLogin((old) => ({ ...old, first: get("firstLogin") }));
     }
-
   }, []);
-  return (
-    firstLogin=="1"?<div
-      className="fixed top-0 z-[999] flex flex-col justify-end items-center h-screen w-screen bg-[#262626b0]"
-      onClick={() => {save("firstLogin", 0);setFirstLogin("0")}}
+  return firstLogin.first == "1" ? (
+    <div
+      className="fixed z-[50]"
+      style={{ bottom: !firstLogin.second ? "57px" : "0" }}
     >
-      <div className="font-bold text-xl mb-2 flex items-center">
-        点击
-        <Image
-          fit="cover"
-          // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
-          src={"/icons/ios_share.png"}
-          placeholder=""
-          width={32}
-          height={32}
-        />
-        添加到主屏幕
-      </div>
-      <Image
-        fit="cover"
-        // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
-        src={"/images/addToHome.png"}
-        placeholder=""
-        width={54}
-        height={54}
-      />
-    </div>:null
-  );
+      {!firstLogin.second ? (
+        <div className="bg-[#13121f] p-3 w-screen flex items-center justify-between relative">
+          <div className="flex items-center">
+            <Image
+              fit="cover"
+              className="rounded-md mr-3"
+              // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
+              src={"/images/icon.png"}
+              placeholder=""
+              width={46}
+              height={46}
+            />
+            <div>
+              <p className="font-bold text-[0.9rem]">
+                建议您添加<span className="text-primary">铁粉空间</span>
+                到手机桌面
+              </p>
+              <p className="text-[#ffffffb2] text-xs">以便随时关注圈子动态</p>
+            </div>
+          </div>
+          <div
+            className="bg-primary px-4 py-2 rounded-full font-bold"
+            onClick={() => setFirstLogin((old) => ({ ...old, second: true }))}
+          >
+            去添加
+          </div>
+          <FontAwesomeIcon
+            icon={faClose}
+            size=""
+            className="absolute left-1 top-1"
+            onClick={() => {
+              save("firstLogin", 0);
+              setFirstLogin((old) => ({ first: "0", second: false }));
+            }}
+          />
+        </div>
+      ) : (
+        <div
+          className="flex flex-col justify-end items-center h-screen w-screen bg-[#00000099]"
+          onClick={() => {
+            save("firstLogin", 0);
+            setFirstLogin((old) => ({ first: "0", second: false }));
+          }}
+        >
+          <div className="font-bold text-xl mb-2 flex items-center">
+            点击
+            <Image
+              fit="cover"
+              // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
+              src={"/icons/ios_share.png"}
+              placeholder=""
+              width={32}
+              height={32}
+            />
+            添加到主屏幕
+          </div>
+          <Image
+            fit="contain"
+            // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
+            src={"/images/addToHome.png"}
+            placeholder=""
+            width={54}
+            height={70}
+          />
+        </div>
+      )}
+    </div>
+  ) : null;
 }
diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx
new file mode 100644
index 0000000..4de306a
--- /dev/null
+++ b/components/ImagesMask/index.jsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import { Mask, Image } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+function ImagesMask({}, ref) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [visible, setVisible] = useState(false);
+  const [images, setImages] = useState([]);
+  const [distance, setDistance] = useState(0);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      setTimeout(() => {
+        scrollRef.current.scrollLeft = 414 * currentIndex;
+      }, 200);
+    }
+  }, [currentIndex]);
+  useImperativeHandle(ref, () => ({
+    show: (arr, index) => {
+      setCurrentIndex(index);
+      setImages(arr);
+      setVisible(true);
+      // Mask.show
+      // const maskDomBox = document.getElementById("maskDomBox");
+    },
+    close: () => setVisible(false),
+  }));
+  const getDistance = (e) => {
+    e.stopPropagation();
+    const distance = scrollRef.current.scrollLeft;
+    setDistance(distance);
+  };
+  const handleMoveImages = (e,index) => {
+    e.stopPropagation();
+    // console.log("distance",distance)
+    if (
+      distance > window.innerWidth * currentIndex &&
+      distance < window.innerWidth + window.innerWidth * currentIndex
+    ) {
+      setCurrentIndex(Math.ceil(distance/414))
+    } else if(distance < window.innerWidth * currentIndex) {
+      setCurrentIndex(Math.ceil(distance/414)-1)
+    }
+  };
+  return (
+    <Mask
+      visible={visible}
+      className="z-[99] h-screen flex justify-center items-center"
+    >
+      <div className="relative">
+        <div className="text-center mb-2">
+          {currentIndex + 1}/{images.length}
+        </div>
+        <div
+          ref={scrollRef}
+          id="imagesScrollBox"
+          className="flex overflow-auto"
+        >
+          {images.map((item, index) => {
+            return (
+              // <Image
+              //   key={index}
+              //   fit="cover"
+              //   className="mr-3"
+              //   // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
+              //   src={item}
+              //   placeholder=""
+              //   width="100vw"
+              //   // height="90vh"
+              // />
+              <img
+                key={index}
+                src={item}
+                // onTouchMove={(e) => handleMoveImages(e, index)}
+                onTouchMove={getDistance}
+                onTouchEnd={(e) => handleMoveImages(e,index)}
+                onClick={() => {
+                  setVisible(false), setImages([]), setCurrentIndex(0);
+                }}
+              />
+            );
+          })}
+        </div>
+        <div className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none">
+          <div
+            className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
+            onClick={() => {
+              setCurrentIndex((old) => (old > 0 ? old - 1 : old));
+            }}
+          >
+            <FontAwesomeIcon icon={faAngleLeft} size="xl" />
+          </div>
+          <div
+            className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left pointer-events-auto"
+            onClick={() => {
+              setCurrentIndex((old) =>
+                old < images.length - 1 ? old + 1 : old
+              );
+            }}
+          >
+            <FontAwesomeIcon icon={faAngleRight} size="xl" />
+          </div>
+        </div>
+      </div>
+    </Mask>
+  );
+}
+
+export default forwardRef(ImagesMask);
diff --git a/components/Photos/index.js b/components/Photos/index.js
index 703d992..7e2ecb0 100644
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@@ -1,12 +1,14 @@
 "use client";
 
-import React, { useEffect, useState,useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Image, ImageViewer, Dialog } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
 import Player from "next-video/player";
+// import ImagesMask from "@/components/ImagesMask";
+// import Viewer from 'react-viewer';
 export default function Photos({
   isUnlocked,
   mediaVisibleRange,
@@ -18,7 +20,10 @@ export default function Photos({
   const [seeAllPhotos, setSeeAllPhotos] = useState(false);
   const [currentPhotos, setCurrentPhotos] = useState([]);
   const [photos, setPhotos] = useState([]);
+  const [visible, setVisible] = useState(false);
   const currentIndex = useRef();
+  const swiper = useRef(null);
+  // const imagesMaskRef = useRef(null);
   const router = useRouter();
   const base = baseRequest();
   useEffect(() => {
@@ -57,22 +62,65 @@ export default function Photos({
     }
   }, [media]);
   const showPhotos = (photos, index) => {
-    currentIndex.current=index;
+    currentIndex.current = index;
+    // const interval = setInterval(() => {
+    //   const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
+    //   if (bodyBox) {
+    //     bodyBox.firstChild.lastChild.style.transform = `translateX(-${
+    //       currentIndex.current * (window.innerWidth + 16)
+    //     }px)`;
+    //     // console.log(bodyBox.firstChild.lastChild.style.transform);
+    //   }
+    // }, 400);
+
+    // 添加左右切换按钮
+    const btns = document.createElement("div");
+    btns.className = "imagesBtnsControllers";
+    const btnL = document.createElement("div");
+    btnL.className = "imagesBtnsControllerLeft";
+    btnL.addEventListener("click", () => {
+      if (currentIndex.current > 0) {
+        currentIndex.current = currentIndex.current - 1;
+        handleShowImages(currentIndex.current, photos, btns);
+        if (!currentIndex.current) {
+          btnL.style.opacity = 0.5;
+          btnR.style.opacity = 1;
+        } else {
+          btnR.style.opacity = 1;
+          btnL.style.opacity = 1;
+        }
+      }
+    });
+    const btnR = document.createElement("div");
+    btnR.className = "imagesBtnsControllerRight";
+    btnR.addEventListener("click", () => {
+      if (currentIndex.current < currentPhotos.length - 1) {
+        currentIndex.current = currentIndex.current + 1;
+        handleShowImages(currentIndex.current, photos, btns);
+        if (currentIndex.current == currentPhotos.length - 1) {
+          btnR.style.opacity = 0.5;
+          btnL.style.opacity = 1;
+        } else {
+          btnR.style.opacity = 1;
+          btnL.style.opacity = 1;
+        }
+      }
+    });
+    btns.append(btnL, btnR);
+    handleShowImages(index, photos, btns);
+
+    // setVisible(true)
+    // imagesMaskRef.current.show(photos.map((item) => item?.url),index)
+  };
+  const handleShowImages = (index, photos, btns) => {
     const mediaDom = document.createElement("div");
     mediaDom.style.width = "100vw";
     document.body.appendChild(mediaDom);
     mediaDom.className = `${
       photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
     }`;
-    const interval = setInterval(() => {
-      const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
-      if(bodyBox){
-        bodyBox.firstChild.lastChild.style.transform = `translateX(-${
-          (currentIndex.current) * (window.innerWidth + 16)
-        }px)`;
-        // console.log(bodyBox.firstChild.lastChild.style.transform);
-      }
-    }, 400);
+    mediaDom.appendChild(btns);
+    ImageViewer.clear();
     ImageViewer.Multi.show({
       images: photos.map((item) => item?.url),
       defaultIndex: index,
@@ -82,18 +130,31 @@ export default function Photos({
 
       getContainer: mediaDom,
       onIndexChange: (index) => {
-        currentIndex.current=index;
+        currentIndex.current = index;
         mediaDom.className = `${
           photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
         }`;
+        const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
+        const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
+        if(leftBtn && rightBtn){
+          if(!index){
+            leftBtn.style.opacity=0.5
+            rightBtn.style.opacity=1
+          }else if(index==currentPhotos.length-1){
+            leftBtn.style.opacity=1
+            rightBtn.style.opacity=0.5
+          }else{
+            leftBtn.style.opacity=1
+            rightBtn.style.opacity=1
+          }
+        }
       },
       afterClose: () => {
         mediaDom.remove();
-        clearInterval(interval);
+        // clearInterval(interval);
       },
       classNames: { body: "photos-bodyBox" },
     });
-    
   };
   const handleShowVideo = (video) => {
     Dialog.className = "videoMask";
@@ -293,6 +354,12 @@ export default function Photos({
           );
         })}
       </div>
+      {/* <ImagesMask ref={imagesMaskRef}/> */}
+      {/* <Viewer
+      visible={visible}
+      onClose={() => { setVisible(false); } }
+      images={currentPhotos.map((it,index)=>({src:it.url,alt:index}))}
+      /> */}
     </>
   );
 }
diff --git a/components/PostItem/index.js b/components/PostItem/index.js
index 04e06e5..7323564 100644
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@@ -219,7 +219,7 @@ export default function PostItem({
                               "天前"
                         }有更新`}
                         空间 */}
-                    {formatZoneUpdateTime(
+                    空间{formatZoneUpdateTime(
                       data?.streamer_ext
                         ?.days_elapsed_since_the_last_zones_update
                     )}
diff --git a/package-lock.json b/package-lock.json
index 3406c42..47c50e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-dom": "^18",
         "react-player": "^2.16.0",
         "react-redux": "^9.1.2",
+        "react-viewer": "^3.2.2",
         "redux": "^5.0.1",
         "sass": "^1.77.6"
       },
@@ -5876,6 +5877,14 @@
         }
       }
     },
+    "node_modules/react-viewer": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/react-viewer/-/react-viewer-3.2.2.tgz",
+      "integrity": "sha512-DHOq1x6cXsAViY43204ILRzLVR5ovP1MgzsC+LzZCWlInRuHjzAgpQZ8GzWm1CkiNYuHGwCxH36X0JUHl2xDSg==",
+      "dependencies": {
+        "classnames": "^2.2.5"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
@@ -11195,6 +11204,14 @@
         "use-sync-external-store": "^1.0.0"
       }
     },
+    "react-viewer": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/react-viewer/-/react-viewer-3.2.2.tgz",
+      "integrity": "sha512-DHOq1x6cXsAViY43204ILRzLVR5ovP1MgzsC+LzZCWlInRuHjzAgpQZ8GzWm1CkiNYuHGwCxH36X0JUHl2xDSg==",
+      "requires": {
+        "classnames": "^2.2.5"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2b14b1d..ba908d7 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^18",
     "react-player": "^2.16.0",
     "react-redux": "^9.1.2",
+    "react-viewer": "^3.2.2",
     "redux": "^5.0.1",
     "sass": "^1.77.6"
   },
diff --git a/public/icons/left.png b/public/icons/left.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e7d93e0ab3837ab05e826888d5234e99056ad82
GIT binary patch
literal 2186
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
RAJ#t?G)(L#YVwZ6{{vSJk@Wxo

literal 0
HcmV?d00001

diff --git a/public/icons/right.png b/public/icons/right.png
new file mode 100644
index 0000000000000000000000000000000000000000..2285d7dc714d2be5fc817782e3a60fa1b54270b4
GIT binary patch
literal 2205
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
V)dQoD(}sTozym|Y75;I=e*mepnlb<Y

literal 0
HcmV?d00001