355 lines
12 KiB
JavaScript
355 lines
12 KiB
JavaScript
"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") {
|
||
if (typeof window == "undefined") return;
|
||
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">
|
||
+{photos.length - currentPhotos.length}
|
||
</span>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="absolute top-0 w-full 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}))}
|
||
/> */}
|
||
</>
|
||
);
|
||
}
|