tiefen_space_h5/components/Photos/index.js

"use client";

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 { handleShowVideo } from "@/utils/tools/handleFuns";
// import dynamic from 'next/dynamic'
import ImagesMask from "@/components/ImagesMask";
// const ImagesMask = dynamic(() =>
// import('@/components/ImagesMask'), { ssr: false }
// )
export default function Photos({
  isUnlocked,
  mediaVisibleRange,
  mediaAmount,
  media,
  type,
  data,
}) {
  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(() => {
    if (media) {
      let imgArr = media.images.map((item) => ({
        type: "img",
        url: item.urls?.[0],
        // fullwidth:item.w>item.h，
        w: item.w,
        h: item.h,
      }));
      let videoArr = media.videos.map((item) => ({
        type: "video",
        url: item.cover_urls?.[0],
        mp4: item.urls?.[0],
        w: item.cover_w,
        h: item.cover_h,
        // fullwidth:item.cover_w>item.cover_h
      }));
      let arr = [...imgArr, ...videoArr];
      let newPhotos = [...arr];
      if (mediaAmount && !isUnlocked) {
        // console.log("newPhotos", newPhotos);
        newPhotos = Array(mediaAmount)
          .fill(null)
          .map((item, index) => {
            return newPhotos[index] && mediaVisibleRange
              ? newPhotos[index]
              : {
                  mp4: newPhotos[0]?.type === "video",
                  url: newPhotos[0]?.url,
                  type: "hid",
                  w: newPhotos[0]?.w,
                  h: newPhotos[0]?.h,
                };
          });
      }
      setPhotos(newPhotos);
      if (newPhotos.length > 9) {
        newPhotos = newPhotos.slice(0, 9);
      }
      // console.log("newPhotos", newPhotos);
      setCurrentPhotos(newPhotos);
    }
  }, [media]);
  useEffect(() => {
    // window.addEventListener('resize', (e)=>{
    //   // alert(window.innerHeight)
    //   setMaskHeight(window.innerHeight)
    // });
    return () => {
      // window.removeEventListener("resize")
    };
  }, []);
  const showPhotos = (photos, 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,interval);
    //     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,interval);
    //     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,interval);
    // handleShowImages(index, photos, interval);

    // setVisible(true)
    console.log(imagesMaskRef.current, photos);
    imagesMaskRef.current.show(photos, index, data);
  };
  // const handleShowImages = (index, photos, interval) => {
  //   const mediaDom = document.createElement("div");
  //   mediaDom.style.width = "100vw";
  //   document.body.appendChild(mediaDom);
  //   mediaDom.className = `${
  //     photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
  //   }`;
  //   // mediaDom.appendChild(btns);
  //   document.body.style.overflow = "hidden";
  //   ImageViewer.clear();
  //   ImageViewer.Multi.show({
  //     images: photos.map((item) => item?.url),
  //     defaultIndex: index,
  //     renderFooter: (image, index) => {
  //       return renderFooter(photos[index]?.type == "hid", mediaDom);
  //     },

  //     getContainer: mediaDom,
  //     onIndexChange: (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);
  //       document.body.style.overflow = "auto";
  //     },
  //     classNames: { body: "photos-bodyBox" },
  //   });
  // };
  const handleSeeAllPhotos = (e) => {
    e.stopPropagation();
    e.preventDefault();
    // console.log(e);
    setSeeAllPhotos((old) => {
      if (old) {
        const newPhotos = [...photos];
        setCurrentPhotos(newPhotos.slice(0, 9));
        return false;
      } else {
        setCurrentPhotos(photos);
        return true;
      }
    });
  };
  const renderFooter = (hidden, fatherDom) => {
    return hidden ? (
      <div className="flex justify-center">
        <div
          className="rounded-full text-base -mt-[50vh] h-max w-max px-6 py-3 bg-primary"
          onClick={() => {
            fatherDom && fatherDom.remove();
            router.push(
              "/webView/" +
                encodeURIComponent(
                  "/zone/pay/" +
                    data?.zid +
                    "/h5_zone_moment/" +
                    data?.id +
                    "?base=" +
                    encodeURIComponent(JSON.stringify(base))
                )
            );
          }}
          style={{ marginTop: "calc(-85px )" }}
        >
          此内容暂未解锁，立即解锁
        </div>
      </div>
    ) : null;
  };
  return (
    <>
      <div
        className={`${
          currentPhotos.length > 1
            ? "grid grid-cols-3 gap-1.5 min-h-[24vw]"
            : "auto"
        }`}
      >
        {currentPhotos.map((item, index) => {
          return (
            <div
              className={`relative w-max`}
              // style={{ width:  }}
              key={index}
              onClick={() => {
                if (item?.type == "video") {
                  if (!isUnlocked && type == "space") {
                    const mediaDom = document.createElement("div");
                    document.body.appendChild(mediaDom);
                    ImageViewer.show({
                      image: item.url,
                      maxZoom: 8,
                      classNames: { body: "customize-body" },
                      getContainer: mediaDom,
                      renderFooter: () => renderFooter(true, mediaDom),
                    });
                    return;
                  }
                  handleShowVideo(item);
                } else {
                  showPhotos(photos, index);
                }
              }}
            >
              {
                <div
                  className={`overflow-hidden rounded h-full ${
                    currentPhotos.length > 1 ? "h-[24vw]" : ""
                  }`}
                >
                  <Image
                    // lazy={true}
                    placeholder={
                      <div className="w-full min-h-[24vw] bg-[#1d1d1d] rounded"></div>
                    }
                    width={
                      currentPhotos.length > 1
                        ? "24vw"
                        : item.w > item.h
                        ? `calc(100vw - 72px  - 2rem)`
                        : `calc(46vw * ${item.w / item.h})`
                    }
                    height={
                      currentPhotos.length > 1
                        ? "24vw"
                        : item.w > item.h
                        ? `calc((100vw - 72px  - 2rem) * ${item.h / item.w})`
                        : "46vw"
                    }
                    className={`rounded max-w-full ${
                      item?.type == "hid" && type == "space" ? "imageBlur" : ""
                    }`}
                    fit={currentPhotos.length > 1 ? "cover" : "contain"}
                    src={item?.url}
                  />
                </div>
              }
              {item?.mp4 && (
                <div className="absolute top-0 w-full h-full rounded flex justify-center items-center">
                  <Image
                    className=""
                    width={98}
                    height={98}
                    src={
                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/play.png"
                    }
                    placeholder={
                      <div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
                    }
                  />
                </div>
              )}
              {/* {index==8 && currentPhotos.length>9 && (
                <div className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]">
                  <span className="text-2xl">+{currentPhotos.length}</span>
                </div>
              )} */}
              {index == currentPhotos.length - 1 &&
                photos.length > 9 &&
                (!seeAllPhotos ? (
                  <div
                    className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]"
                    onClick={handleSeeAllPhotos}
                  >
                    <span className="text-2xl">+{currentPhotos.length}</span>
                  </div>
                ) : (
                  <div
                    className="absolute top-0 h-full flex justify-center items-center bg-[#33333348]"
                    key="closeBtn"
                    onClick={handleSeeAllPhotos}
                  >
                    <FontAwesomeIcon
                      icon={faAngleUp}
                      size="xl"
                      className="h-14"
                    />
                  </div>
                ))}
            </div>
          );
        })}
      </div>
      <ImagesMask ref={imagesMaskRef} />
      {/* <Viewer
      visible={visible}
      onClose={() => { setVisible(false); } }
      images={currentPhotos.map((it,index)=>({src:it.url,alt:index}))}
      /> */}
    </>
  );
}