tiefen_space_h5/components/Photos/index.js

"use client";

import React, { useEffect, useRef, useState } from "react";
import { Image, ImageViewer, Dialog } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleUp, faClose, faSave } from "@fortawesome/free-solid-svg-icons";

const tabItems = [
  { key: "commend", title: "推荐" },
  { key: "follow", title: "关注" },
];

export default function Photos({ media }) {
  const [seeAllPhotos, setSeeAllPhotos] = useState(false);
  const [currentPhotos, setCurrentPhotos] = useState([]);
  const [photos, setPhotos] = useState([]);
  useEffect(() => {
    if (media) {
      let imgArr = media.images.map(item=>({type:"img",url:item.urls?.[0]}))
      let videoArr = media.videos.map(item=>({type:"video",url:item.cover_urls?.[0],mp4:item.urls?.[0]}))
      let arr=[...imgArr,...videoArr]
      let newPhotos = [...arr];
      setPhotos(arr);
      if (arr.length > 9) {
        newPhotos = newPhotos.slice(0, 9);
      }
      setCurrentPhotos(newPhotos);
    }
    
  }, [media]);
  const showPhotos = (photos, index) => {
    ImageViewer.Multi.show({
      images: photos.map((item) => item.url),
      defaultIndex: index,
    });
  };
  const handleShowVideo = (video) => {
    Dialog.className = "videoMask";
    Dialog.show({
      title: "",
      content: (
        <div className="flex flex-col gap-2">
          <div className="flex w-full justify-end">
            <div
              className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
              key="closeBtn"
              onClick={() => Dialog.clear()}
            >
              <FontAwesomeIcon icon={faClose} size="2xl" />
            </div>
          </div>
          <div className="my-4">
            <video
              width="100%"
              height="100%"
              controls
              className="w-screen h-[70vh] rounded-lg object-contain"
              poster={video.url}
            >
              <source
                src={video.mp4}
                type="video/mp4"
              />
              您的浏览器不支持 Video 标签。
            </video>
          </div>
          <div
            className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
            key="closeBtn"
            // onClick={handleSeeAllPhotos}
          >
            <FontAwesomeIcon icon={faSave} size="2xl"/>
          </div>
        </div>
      ),
      bodyStyle: {
        background: "none",
        maxHeight: "none",
        height: "100%",
      },
    });
  };
  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;
      }
    });
  };
  return (
    <>
      <div className={`grid ${currentPhotos.length > 1?"grid-cols-3 gap-1.5":"grid-cols-1"}`}>
        {currentPhotos.map((item, index) => {
          return (
            <div
              className="relative w-mfull"
              key={index}
              onClick={() => {
                if (item.type == "video") {
                  handleShowVideo(item);
                } else {
                  showPhotos(photos, index);
                }
              }}
            >
              <Image
                // lazy={true}
                placeholder={
                  <div className="w-full h-full bg-[#1d1d1d] rounded"></div>
                }
                width={currentPhotos.length>1 ? "24vw":"100%"}
                height={currentPhotos.length>1 ? "24vw":"100%"}
                className={`rounded max-w-full`}
                fit="cover"
                src={item.url}
              />
              {item.type == "video" && (
                <div className="absolute top-0 w-full h-full rounded flex justify-center items-center bg-[#33333348]">
                  <Image
                    className=""
                    width={98}
                    height={98}
                    src="/icons/play.png"
                    placeholder=""
                  />
                </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>
          );
        })}
        {seeAllPhotos && (
          <div
            className="flex justify-center items-center bg-[#33333348] rounded"
            key="closeBtn"
            onClick={handleSeeAllPhotos}
          >
            <FontAwesomeIcon icon={faAngleUp} size="2xl" className="h-14" />
          </div>
        )}
      </div>
    </>
  );
}