282 lines
9.3 KiB
JavaScript
282 lines
9.3 KiB
JavaScript
"use client";
|
||
|
||
import React, { useEffect, useState } 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";
|
||
export default function Photos({
|
||
isUnlocked,
|
||
mediaVisibleRange,
|
||
mediaAmount,
|
||
media,
|
||
type,
|
||
data,
|
||
}) {
|
||
const [seeAllPhotos, setSeeAllPhotos] = useState(false);
|
||
const [currentPhotos, setCurrentPhotos] = useState([]);
|
||
const [photos, setPhotos] = useState([]);
|
||
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) => {
|
||
const mediaDom = document.createElement("div");
|
||
document.body.appendChild(mediaDom);
|
||
mediaDom.className = `${
|
||
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
|
||
}`;
|
||
ImageViewer.Multi.show({
|
||
images: photos.map((item) => item?.url),
|
||
defaultIndex: index,
|
||
renderFooter: (image, index) =>
|
||
renderFooter(photos[index]?.type == "hid", mediaDom),
|
||
getContainer: mediaDom,
|
||
onIndexChange: (index) => {
|
||
mediaDom.className = `${
|
||
photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
|
||
}`;
|
||
},
|
||
afterClose: () => {
|
||
mediaDom.remove();
|
||
},
|
||
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-12">
|
||
<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>
|
||
</>
|
||
);
|
||
}
|