diff --git a/app/profile/[mid]/page.js b/app/profile/[mid]/page.js index 947f631..3ded087 100644 --- a/app/profile/[mid]/page.js +++ b/app/profile/[mid]/page.js @@ -26,6 +26,7 @@ import { getStreamerDetailInfo } from "@/api/space"; import { get } from "@/utils/storeInfo"; import { handleShowVideo } from "@/utils/tools/handleFuns"; import clipboard from "copy-to-clipboard"; +import ImagesMask from "@/components/ImagesMask"; // import * as Clipboard from "expo-clipboard"; export default function PersonSpace() { const { mid } = useParams(); @@ -37,6 +38,7 @@ export default function PersonSpace() { const [isFollow, setIsFollow] = useState(false); const [topPhotos, setTopPhotos] = useState([]); const currentIndex = useRef(); + const imagesMaskRef = useRef(null); // 获取屏幕高度 // const scrollHeight = 600; useEffect(() => { @@ -46,40 +48,20 @@ export default function PersonSpace() { }, []); const showPhotos = (photos, index) => { currentIndex.current = index; - const interval = setInterval(() => { - console.log("bbbbbb"); - if (typeof window == "undefined") return; - document.addEventListener("touchstart", function (event) { - if (event.touches.length > 1) { - event.preventDefault(); - } - }); - var lastTouchEnd = 0; - document.addEventListener( - "touchend", - function (event) { - var now = new Date().getTime(); - if (now - lastTouchEnd <= 300) { - event.preventDefault(); - } - lastTouchEnd = now; - }, - false - ); - document.addEventListener("gesturestart", function (event) { - event.preventDefault(); - }); - 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); - - handleShowImages(index, photos, interval); + // 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); + // handleShowImages(index, photos, interval); + // console.log(imagesMaskRef.current, photos); + imagesMaskRef.current.show(photos, index, streamerInfo); // setVisible(true) // console.log(imagesMaskRef.current); // imagesMaskRef.current.show( @@ -87,55 +69,49 @@ export default function PersonSpace() { // index // ); }; - const handleShowImages = (index, photos, interval) => { - if (typeof window == "undefined") return; - const mediaDom = document.createElement("div"); - mediaDom.style.width = "100vw"; - document.body.appendChild(mediaDom); - mediaDom.className = `${ - photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" - }`; - ImageViewer.clear(); - ImageViewer.Multi.show({ - images: photos.map((item) => item.url), - defaultIndex: index, - // renderFooter: (image, index) => { - // return renderFooter(photos[index]?.type == "hid", mediaDom); - // }, + // 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" + // }`; + // 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) => { - if (typeof window == "undefined") return; - 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 == photos.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" }, - }); - }; + // 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==photos.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 handleGetStreamerInfo = async () => { try { setLoading(true); @@ -646,6 +622,7 @@ export default function PersonSpace() { avatar={streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0]} streamerData={streamerInfo} /> + ); } diff --git a/app/space/person_space_introduce/[mid]/page.js b/app/space/person_space_introduce/[mid]/page.js index b723463..7fd05f4 100644 --- a/app/space/person_space_introduce/[mid]/page.js +++ b/app/space/person_space_introduce/[mid]/page.js @@ -15,6 +15,7 @@ import { getStreamerInfo } from "@/api/space"; import baseRequest from "@/utils/baseRequest"; import requireAPI from "@/utils/requireAPI"; import { handleShowVideo } from "@/utils/tools/handleFuns"; +import ImagesMask from "@/components/ImagesMask"; export default function PersonSpaceIntroduce() { const base = baseRequest(); const router = useRouter(); @@ -25,6 +26,7 @@ export default function PersonSpaceIntroduce() { const [data, setData] = useState(null); const [isLoading, setIsloading] = useState(true); const currentIndex = useRef(); + const imagesMaskRef = useRef(null); const { mid } = useParams(); useEffect(() => { if (contentBox.current) { @@ -42,75 +44,74 @@ export default function PersonSpaceIntroduce() { }, []); const showPhotos = (photos, index) => { currentIndex.current = index; - const interval = setInterval(() => { - if (typeof window == "undefined") return; - 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 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); - handleShowImages(index, photos, interval); - - // setVisible(true) - // console.log(imagesMaskRef.current); - // imagesMaskRef.current.show( - // photos.map((item) => item?.url), - // index - // ); - }; - const handleShowImages = (index, photos, interval) => { - if (typeof window == "undefined") return; - const mediaDom = document.createElement("div"); - mediaDom.style.width = "100vw"; - document.body.appendChild(mediaDom); - mediaDom.className = `${ - photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom" - }`; - ImageViewer.clear(); - ImageViewer.Multi.show({ - images: photos.map((item) => item?.urls[0]), - defaultIndex: index, - // renderFooter: (image, index) => { - // return renderFooter(photos[index]?.type == "hid", mediaDom); - // }, - - getContainer: mediaDom, - onIndexChange: (index) => { - if (typeof window == "undefined") return; - 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 == photos.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" }, + // handleShowImages(index, photos, interval); + // console.log(imagesMaskRef.current, photos); + let newPhotos = photos.map((item) => { + return { + ...item, + url: item.urls[0], + }; }); + imagesMaskRef.current.show(newPhotos, 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" + // }`; + // ImageViewer.clear(); + // ImageViewer.Multi.show({ + // images: photos.map((item) => item?.urls[0]), + // 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 == photos.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" }, + // }); + // }; //当空间价格为0时，直接加入空间 const handleJoinFreeSpace = async () => { try { @@ -348,6 +349,7 @@ export default function PersonSpaceIntroduce() { )} + ); } diff --git a/components/ImagesMask/index.jsx b/components/ImagesMask/index.jsx index d85e8d4..c177224 100644 --- a/components/ImagesMask/index.jsx +++ b/components/ImagesMask/index.jsx @@ -13,14 +13,12 @@ import { faAngleLeft, faAngleRight, faDownload, + faMinus, + faAdd, } from "@fortawesome/free-solid-svg-icons"; import { createRoot } from "react-dom/client"; import { useRouter } from "next/navigation"; import baseRequest from "@/utils/baseRequest"; -const root = - typeof window !== "undefined" - ? createRoot(document?.getElementById("maskDomBox")) - : null; function ImagesMask({}, ref) { const [visible, setVisible] = useState(false); const [images, setImages] = useState([]); @@ -29,20 +27,25 @@ function ImagesMask({}, ref) { const defaultIndex = useRef(null); const router = useRouter(); useEffect(() => { - root.render( -
- -
- ); + if (visible) { + const root = createRoot(document?.getElementById("maskDomBox")); + root.render( +
+ +
+ ); + } + // root.render(
xxxx
); }, [visible]); @@ -67,16 +70,32 @@ function ImagesMask({}, ref) { const ImagesMaskContaint = forwardRef( ( - { visible, images, setVisible, setImages, router, data, defaultIndex = 0 }, + { + visible, + images, + setVisible, + setImages, + router, + data, + defaultIndex = 0, + root, + }, ref ) => { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState("left"); const [initialX, setInitialX] = useState(0); const [xOffset, setXOffset] = useState(0); + const [initialMoveX, setInitialMoveX] = useState(0); + const [initialMoveY, setInitialMoveY] = useState(0); + const [xOffsetMove, setXOffsetMove] = useState(0); + const [yOffsetMove, setYOffsetMove] = useState(0); const [active, setActive] = useState(false); + const [zoomed, setZoomed] = useState(false); const base = baseRequest(); const directionX = useRef(0); + // const imgDom = useRef(null); + const currentDistance = useRef(0); // const getDistance = (e) => { // e.stopPropagation(); // const distance = ref.current.scrollLeft; @@ -86,7 +105,8 @@ const ImagesMaskContaint = forwardRef( // setCurrentIndex(defaultIndex); // test3(defaultIndex - 1, "left"); if (defaultIndex) { - test3(defaultIndex - 1, "left"); + // console.log("defaultIndex.current", defaultIndex); + test3(defaultIndex - 1, "left", true); } }, [defaultIndex]); useEffect(() => { @@ -97,43 +117,106 @@ const ImagesMaskContaint = forwardRef( } }, [currentIndex]); const test1 = (e) => { - setInitialX(e.touches[0].clientX - (!currentIndex ? 0 : xOffset)); - if (e.touches.length === 1) { + var touches = e.touches; + // console.log(currentIndex, e.target.children[0].offsetLeft); + setInitialMoveX(touches[0].clientX - e.target.children[0].offsetLeft); + setInitialMoveY(touches[0].clientY - e.target.children[0].offsetTop); + // console.log(touches[0].pageX- ref.current.getBoundingClientRect().left); + if (touches.length === 2) { + var touch1 = touches[0]; + var touch2 = touches[1]; + currentDistance.current = Math.hypot( + touch2.pageX - touch1.pageX, + touch2.pageY - touch1.pageY + ); + } + if (touches.length === 1 && !zoomed) { + setInitialX(touches[0].clientX - (!currentIndex ? 0 : xOffset)); // 单点触摸 setActive(true); } }; const test2 = (e) => { - if (active) { - let X = e.touches[0].clientX - initialX; - setDirection( - directionX.current > e.touches[0].clientX ? "left" : "right" - ); - ref.current.style.transform = "translateX(" + X + "px)"; - directionX.current = e.touches[0].clientX; - } - }; - const test3 = (index, currentDirection) => { - setActive(false); - let cxOffset = window.innerWidth; - if (currentDirection == "left") { - if (index < images.length - 1) { - setCurrentIndex(index + 1); - } else { - ref.current.style.transform = `translateX(${-cxOffset * index}px)`; - } + var touches = e.touches; + // if (touches.length == 2) { + // var touch1 = touches[0]; + // var touch2 = touches[1]; + // currentDistance.current = Math.hypot( + // touch2.pageX - touch1.pageX, + // touch2.pageY - touch1.pageY + // ); + // let scale = currentDistance.current / ref.current.startDistance; + // let matrix = new WebKitCSSMatrix( + // window.getComputedStyle(ref.current.children[0]).transform + // ); + // let currentScale = matrix.m11; + // // alert(currentDistance.current + "-" + ref.current.startDistance); + // let size = + // currentScale * scale < 0.5 + // ? 0.5 + // : currentScale * scale > 3 + // ? 3 + // : currentScale * scale; + // ref.current.children[0].style.transform = + // "matrix(" + size + ", 0, 0, " + size + ", 0, 0)"; + // } + if (zoomed) { + let currentX = touches[0].clientX - initialMoveX; + let currentY = touches[0].clientY - initialMoveY; + // console.log(currentX + xOffsetMove); + ref.current.children[currentIndex].style.left = `${ + currentX + xOffsetMove + }px`; + ref.current.children[currentIndex].style.top = `${ + currentY + yOffsetMove - 54 + }px`; } else { - if (index > 0) { - setCurrentIndex(index - 1); - } else { - ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + if (active) { + let X = touches[0].clientX - initialX; + + setDirection( + directionX.current > touches[0].clientX ? "left" : "right" + ); + ref.current.style.transform = "translateX(" + X + "px)"; + directionX.current = touches[0].clientX; } } - // setInitialX(currentX); - setInitialX(-cxOffset * (index + (currentDirection == "left" ? 1 : -1))); - if (currentDirection == "left" && index > images.length - 2) return; - setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1))); }; + const test3 = (index, currentDirection, isActive) => { + // const rect = ref.current.getBoundingClientRect(); + // console.log(ref.current.children[currentIndex].offsetTop); + setXOffsetMove( + ref.current.children[currentIndex].offsetLeft - + window.innerWidth * currentIndex + ); + setYOffsetMove(ref.current.children[currentIndex].offsetTop + 54); + + if (active || isActive) { + let cxOffset = window.innerWidth; + if (currentDirection == "left") { + if (index < images.length - 1) { + setCurrentIndex(index + 1); + } else { + ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + } + } else { + if (index > 0) { + setCurrentIndex(index - 1); + } else { + ref.current.style.transform = `translateX(${-cxOffset * index}px)`; + } + } + // setInitialX(currentX); + setInitialX( + -cxOffset * (index + (currentDirection == "left" ? 1 : -1)) + ); + if (currentDirection == "left" && index > images.length - 2) return; + setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1))); + } + }; + // }; + // }; + // }; function downloadImage(url) { let randomNum = ""; for (let i = 0; i < 10; i++) { @@ -149,6 +232,7 @@ const ImagesMaskContaint = forwardRef( a.click(); }); } + return (
{ setVisible(false), setImages([]), setCurrentIndex(null); - // root.unmount(); + root.unmount(); }} color="#000000d9" >
{images[currentIndex]?.type != "hid" && (
downloadImage(images[currentIndex]?.url)} - className="z-50 flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full absolute top-[12px] left-[12px]" + className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]" + style={{ width: "calc(100% - 24px)" }} > - +
+ {/*
downloadImage(images[currentIndex]?.url)} + className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full" + > + +
*/} +
+
+
{ + setZoomed(!zoomed); + setActive(false); + ref.current.children[currentIndex].style.transform = + "matrix(" + + (zoomed ? 1 : 3) + + ", 0, 0, " + + (zoomed ? 1 : 3) + + ", 0, 0)"; + ref.current.children[currentIndex].style.left = `0px`; + ref.current.children[currentIndex].style.top = `0px`; + }} + className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full" + > + +
+
)}
@@ -177,13 +290,13 @@ const ImagesMaskContaint = forwardRef( style={{ height: "calc(100vh - 174px)" }} onClick={() => { setVisible(false), setImages([]), setCurrentIndex(null); - // root.unmount(); + root.unmount(); }} >
{ + // setZoomed(!zoomed); + // ref.current.children[0].style.transform = + // "matrix(" + zoomed + // ? 1 + // : 3 + ", 0, 0, " + zoomed + // ? 1 + // : 3 + ", 0, 0)"; + // ref.current.style.left = `0px`; + // ref.current.style.top = `0px`; + // }} > {/* { - test3(currentIndex, "right"); + setActive(true); + setZoomed(false); + setInitialMoveX(0); + setInitialMoveY(0); + setXOffsetMove(0); + setYOffsetMove(0); + ref.current.children[currentIndex].style.transform = + "matrix(1, 0, 0, 1, 0, 0)"; + ref.current.children[currentIndex].style.left = `0px`; + ref.current.children[currentIndex].style.top = `0px`; + test3(currentIndex, "right", true); }} > @@ -263,7 +398,16 @@ const ImagesMaskContaint = forwardRef(
{ - test3(currentIndex, "left"); + setZoomed(false); + setInitialMoveX(0); + setInitialMoveY(0); + setXOffsetMove(0); + setYOffsetMove(0); + ref.current.children[currentIndex].style.transform = + "matrix(1, 0, 0, 1, 0, 0)"; + ref.current.children[currentIndex].style.left = `0px`; + ref.current.children[currentIndex].style.top = `0px`; + test3(currentIndex, "left", true); }} > diff --git a/components/PostItem/index.js b/components/PostItem/index.js index ad39710..8aee5dd 100644 --- a/components/PostItem/index.js +++ b/components/PostItem/index.js @@ -81,24 +81,30 @@ export default function PostItem({ /> )}
- router.push("/profile/" + data.mid)} - /> +
{ + router.push("/profile/" + data.mid); + }} + > + +
-
handleFollow(isFollow, data?.mid, setIsFollow)} - > +
{data.streamer_ext?.name} {type == "post" && ( - + handleFollow(isFollow, data?.mid, setIsFollow)} + className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium" + > {isFollow ? "已关注" : "关注"} )}