From d7dcb4554ec36dab9c6ab434caf82a45f67cc85e Mon Sep 17 00:00:00 2001 From: al Date: Fri, 16 Aug 2024 13:29:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AD=98=E5=9C=A8=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/profile/[mid]/page.js | 260 +++++++++++------- .../person_space_introduce/[mid]/page.js | 150 +++++----- components/ImagesMask/index.jsx | 253 +++++++++++++---- components/PostItem/index.js | 34 ++- 4 files changed, 464 insertions(+), 233 deletions(-) diff --git a/app/profile/[mid]/page.js b/app/profile/[mid]/page.js index da7ed4d..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,20 +48,20 @@ export default function PersonSpace() { }, []); 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); - - - 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( @@ -67,49 +69,49 @@ export default function PersonSpace() { // 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" - }`; - 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) => { - 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); @@ -244,7 +246,9 @@ export default function PersonSpace() { } else { showPhotos( topPhotos.filter((it) => it.type == "img"), - topPhotos.filter((it) => it.type == "img").indexOf(photo) + topPhotos + .filter((it) => it.type == "img") + .indexOf(photo) ); } }} @@ -264,7 +268,10 @@ export default function PersonSpace() { className="" width={98} height={98} - src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/play.png"} + src={ + process.env.NEXT_PUBLIC_WEB_ASSETS_URL + + "/icons/play.png" + } /> )} @@ -282,7 +289,12 @@ export default function PersonSpace() { {streamerInfo?.streamer_ext?.name}

- +