376 lines
13 KiB
JavaScript
376 lines
13 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 Player from "next-video/player";
|
||
// 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],
|
||
}));
|
||
let videoArr = media.videos.map((item) => ({
|
||
type: "video",
|
||
url: item.cover_urls?.[0],
|
||
mp4: item.urls?.[0],
|
||
}));
|
||
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",
|
||
};
|
||
});
|
||
}
|
||
setPhotos(newPhotos);
|
||
if (newPhotos.length > 9) {
|
||
newPhotos = newPhotos.slice(0, 9);
|
||
}
|
||
// console.log("newPhotos", newPhotos);
|
||
setCurrentPhotos(newPhotos);
|
||
}
|
||
}, [media]);
|
||
const showPhotos = (photos, index) => {
|
||
currentIndex.current = index;
|
||
const interval = setInterval(() => {
|
||
console.log("bbbbbb")
|
||
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);
|
||
// imagesMaskRef.current.show(
|
||
// photos.map((item) => item?.url),
|
||
// index
|
||
// );
|
||
};
|
||
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);
|
||
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);
|
||
},
|
||
classNames: { body: "photos-bodyBox" },
|
||
});
|
||
};
|
||
const handleShowVideo = (video) => {
|
||
Dialog.className = "videoMask";
|
||
Dialog.show({
|
||
title: "",
|
||
content: (
|
||
<div className="h-screen flex justify-center items-center">
|
||
<div className="flex flex-col gap-2 -mt-24">
|
||
<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
|
||
muted={true}
|
||
className="w-screen h-[70vh] rounded-lg object-contain"
|
||
poster={video?.url}
|
||
// autoPlay={true}
|
||
>
|
||
<source src={video.mp4} type="video/mp4" />
|
||
您的浏览器不支持 Video 标签。
|
||
</video> */}
|
||
{/* <Video as={ReactPlayer} src={video.mp4} /> */}
|
||
<Player
|
||
src={video.mp4}
|
||
poster={video?.url.src}
|
||
blurDataURL={video?.url.blurDataURL}
|
||
autoPlay={true}
|
||
style={{ height: "500px", width: "100vw" }}
|
||
/>
|
||
{/* <Player
|
||
src="https://www.mydomain.com/remote-video.mp4"
|
||
poster="https://www.mydomain.com/remote-poster.webp"
|
||
blurDataURL="data:image/webp;base64,UklGRlA..."
|
||
/> */}
|
||
</div>
|
||
{/* <div
|
||
className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
||
key="closeBtn"
|
||
onClick={() => saveFile(video.mp4)}
|
||
>
|
||
<FontAwesomeIcon icon={faSave} size="2xl" />
|
||
</div> */}
|
||
</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;
|
||
}
|
||
});
|
||
};
|
||
const renderFooter = (hidden, fatherDom) => {
|
||
return hidden ? (
|
||
<div className="flex justify-center">
|
||
<div
|
||
className="rounded-full bg-[#131313d4] -mt-[50vh] h-max w-max px-4 py-2 text-primary"
|
||
onClick={() => {
|
||
fatherDom && fatherDom.remove();
|
||
router.push(
|
||
"/webView/" +
|
||
encodeURIComponent(
|
||
"/zone/pay/" +
|
||
data?.zid +
|
||
"/h5_zone_moment/" +
|
||
data?.id +
|
||
"?base=" +
|
||
encodeURIComponent(JSON.stringify(base))
|
||
)
|
||
);
|
||
}}
|
||
>
|
||
此内容暂未解锁，立即解锁
|
||
</div>
|
||
</div>
|
||
) : null;
|
||
};
|
||
return (
|
||
<>
|
||
<div
|
||
className={`grid ${
|
||
currentPhotos.length > 1 ? "grid-cols-3 gap-1.5" : "grid-cols-1"
|
||
}`}
|
||
>
|
||
{currentPhotos.map((item, index) => {
|
||
return (
|
||
<div
|
||
className="relative"
|
||
style={{ maxWidth: "calc(100vw - 72px)" }}
|
||
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 max-h-80 ${
|
||
currentPhotos.length > 1 ? "min-h-[24vw]" : "min-h-[38vw]"
|
||
}`}
|
||
>
|
||
<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" : "auto"}
|
||
className={`rounded max-w-full ${
|
||
item?.type == "hid" && type == "space" ? "imageBlur" : ""
|
||
}`}
|
||
fit="cover"
|
||
src={item?.url}
|
||
/>
|
||
</div>
|
||
}
|
||
{item?.mp4 && (
|
||
<div className="absolute top-0 w-full h-full rounded flex justify-center items-center bg-[#33333348]">
|
||
<Image
|
||
className=""
|
||
width={98}
|
||
height={98}
|
||
src={
|
||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/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
|
||
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}))}
|
||
/> */}
|
||
</>
|
||
);
|
||
}
|