diff --git a/App.jsx b/App.jsx index 65cc61b..ec04a57 100644 --- a/App.jsx +++ b/App.jsx @@ -62,6 +62,7 @@ import { generateSignature } from "./utils/crypto"; import * as Clipboard from "expo-clipboard"; import PrivatyModal from "./components/PrivatyModal"; import * as Sentry from "@sentry/react-native"; +import { ImageViewerProvider } from "./context/ImageViewProvider"; const RootStack = createNativeStackNavigator(); @@ -300,513 +301,523 @@ const App = () => { - - {state.isSignin ? ( - <> - - ({ - headerLeft: () => ( - navigation.goBack()}> - + + {state.isSignin ? ( + <> + + ({ + headerLeft: () => ( + navigation.goBack()} + > + + + ), + headerRight: () => ( + - - ), - headerRight: () => ( - - ), - headerTransparent: true, - title: "", - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - headerTransparent: true, - title: "", - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "待添加微信", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - headerTransparent: true, - title: "我的钱包", - headerTitleStyle: { color: "white" }, - })} - /> - - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "关系", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "已解锁微信", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "编辑主页", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "编辑平台", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "动态", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "发布动态", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "图文动态（空间内）", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "视频动态（空间内）", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()}> - + ({ + headerLeft: () => ( + navigation.goBack()} /> - - ), - headerTransparent: true, - title: "", - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()}> - + ({ + headerLeft: () => ( + navigation.goBack()} /> - - ), - headerTransparent: true, - title: "", - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()}> - + ({ + headerLeft: () => ( + navigation.goBack()} /> - - ), - headerTransparent: true, - title: "", - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - headerRight: () => ( - - navigation.navigate("WebWithHeader", { - title: "平台准则", - uri: `${process.env.EXPO_PUBLIC_WEB_URL}/doc/platformguidelines`, - }) - } - > - - 平台准则 - - - ), - title: "开通空间", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "分享空间", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "重新编辑", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "审核未通过", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "编辑资料", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - title: "照片墙", - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - - ) : ( - <> - - - - ({ - headerLeft: () => ( - navigation.goBack()} - /> - ), - headerTitleStyle: { color: "white" }, - headerStyle: { backgroundColor: "#07050A" }, - })} - /> - - )} - - - { - setIsPrivatyModalOpen(false); - setChecked(true); - }} - /> + ), + title: "", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + headerTransparent: true, + title: "我的钱包", + headerTitleStyle: { color: "white" }, + })} + /> + + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "关系", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "已解锁微信", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "编辑主页", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "编辑平台", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "动态", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "发布动态", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "图文动态（空间内）", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "视频动态（空间内）", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + > + + + ), + headerTransparent: true, + title: "", + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + > + + + ), + headerTransparent: true, + title: "", + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + > + + + ), + headerTransparent: true, + title: "", + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + headerRight: () => ( + + navigation.navigate("WebWithHeader", { + title: "平台准则", + uri: `${process.env.EXPO_PUBLIC_WEB_URL}/doc/platformguidelines`, + }) + } + > + + 平台准则 + + + ), + title: "开通空间", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "分享空间", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "重新编辑", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "审核未通过", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "编辑资料", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + title: "照片墙", + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + + ) : ( + <> + + + + ({ + headerLeft: () => ( + navigation.goBack()} + /> + ), + headerTitleStyle: { color: "white" }, + headerStyle: { backgroundColor: "#07050A" }, + })} + /> + + )} + + + { + setIsPrivatyModalOpen(false); + setChecked(true); + }} + /> + diff --git a/components/ImageViewer/index.jsx b/components/ImageViewer/index.jsx index fd1d4ec..1035908 100644 --- a/components/ImageViewer/index.jsx +++ b/components/ImageViewer/index.jsx @@ -16,23 +16,37 @@ import Toast from "react-native-toast-message"; import { get } from "../../utils/storeInfo"; import { useNavigation } from "@react-navigation/native"; import MyModal from "../MyModal"; +import { Image } from "expo-image"; +import { LinearProgress, Button } from "@rneui/themed"; +import { LinearGradient } from "expo-linear-gradient"; -//isVisible boolean -//setIsVisible function //imageUrls [{ url: string }] //index int -export default function ImageViewer({ - isVisible, - setIsVisible, +export function ImageViewer({ + isShow, + onClose, imageUrls, index, + lockedStartIndex, + unlockUrl, + onChange, }) { const tailwind = useTailwind(); const insets = useSafeAreaInsets(); const navigation = useNavigation(); + const [isVisible, setIsVisible] = useState(false); + useEffect(() => { + setIsVisible(isShow); + }, [isShow]); + + const closeImageViewer = () => { + setIsVisible(false); + onClose && onClose(); + }; + const checkRole = useCallback(async () => { const account = await get("account"); const role = account.role; @@ -73,7 +87,7 @@ export default function ImageViewer({ saveToLocal(); return; } - setIsVisible(false); + closeImageViewer(); navigation.navigate("WebWithoutHeader", { uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip", }); @@ -130,10 +144,50 @@ export default function ImageViewer({ setIsVisible(false)} - onSwipeDown={() => setIsVisible(false)} + onClick={closeImageViewer} + onSwipeDown={closeImageViewer} + onChange={(index) => onChange(index)} enableSwipeDown backgroundColor="#07050A" + renderImage={(props) => { + if (index >= lockedStartIndex) { + return ( + + + + + + + ); + } + return ; + }} renderFooter={ Platform.OS === "android" ? (index) => ( @@ -178,7 +232,7 @@ export default function ImageViewer({ }} confirm={() => { setIsVipModalVisible(false); - setIsVisible(false); + closeImageViewer(); navigation.navigate("WebWithoutHeader", { uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip", }); diff --git a/components/Post/index.jsx b/components/Post/index.jsx index 8b8f38f..4832b3e 100644 --- a/components/Post/index.jsx +++ b/components/Post/index.jsx @@ -10,7 +10,6 @@ import { import React, { useEffect, useState, useCallback } from "react"; import { useTailwind } from "tailwind-rn"; import { Image } from "expo-image"; -import ImageViewer from "../ImageViewer"; import VideoModal from "../VideoModal"; import { useNavigation } from "@react-navigation/native"; import { follow, unfollow, block } from "../../utils/relation"; @@ -18,6 +17,7 @@ import baseRequest from "../../utils/baseRequest"; import { generateSignature } from "../../utils/crypto"; import Toast from "react-native-toast-message"; import { get } from "../../utils/storeInfo"; +import { useImageViewer } from "../../context/ImageViewProvider"; const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; @@ -303,10 +303,10 @@ export default function Post({ isBlur, data }) { function ImageDisplay({ blur, media }) { const navigation = useNavigation(); const tailwind = useTailwind(); - const [isModalVisible, setIsModalVisible] = useState(false); - const [imageIndex, setImageIndex] = useState(); const images = media.map((item) => ({ url: item.urls[0] })); + const { showImageViewer } = useImageViewer(); + if (images.length === 0) return null; return ( @@ -323,8 +323,10 @@ function ImageDisplay({ blur, media }) { uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip", }) : () => { - setIsModalVisible(true); - setImageIndex(index); + showImageViewer({ + imageUrls: images, + index: index, + }); } } style={{ aspectRatio: 1, ...tailwind("basis-1/3 p-0.5") }} @@ -350,8 +352,10 @@ function ImageDisplay({ blur, media }) { uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip", }) : () => { - setIsModalVisible(true); - setImageIndex(0); + showImageViewer({ + imageUrls: images, + index: 0, + }); } } style={{ @@ -373,12 +377,6 @@ function ImageDisplay({ blur, media }) { /> )} - ); } diff --git a/components/SpacePost/index.jsx b/components/SpacePost/index.jsx index 82937ce..47aa5a6 100644 --- a/components/SpacePost/index.jsx +++ b/components/SpacePost/index.jsx @@ -10,7 +10,6 @@ import { import React, { useEffect, useState } from "react"; import { useTailwind } from "tailwind-rn"; import { Image } from "expo-image"; -import ImageViewer from "../ImageViewer"; import VideoModal from "../VideoModal"; import { useNavigation } from "@react-navigation/native"; import formatTimestamp from "../../utils/formatTimestamp"; @@ -22,6 +21,7 @@ import { get } from "../../utils/storeInfo"; import { Icon } from "@rneui/themed"; import ParsedText from "react-native-parsed-text"; import * as Linking from "expo-linking"; +import { useImageViewer } from "../../context/ImageViewProvider"; //todo:完善视频逻辑；完善图片模糊逻辑 const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; @@ -200,6 +200,7 @@ export default function SpacePost({ data }) { {data.media_component.video_ids?.length === 0 || data.media_component.video_ids === null ? ( { - setShowVideo(true); - }} + onPress={ + data.is_zone_moment_unlocked === 1 + ? () => { + setShowVideo(true); + } + : () => + navigation.navigate("WebWithoutHeader", { + uri: + process.env.EXPO_PUBLIC_WEB_URL + + "/zone/pay/" + + data?.zid + + "/h5_zone_moment/" + + data?.id, + }) + } > { return { url: item.urls[0] }; }); @@ -470,8 +481,17 @@ function ImageDisplay({ isUnlocked, visibleRange, mediaAmount, media }) { activeOpacity={1} key={index} onPress={() => { - setIsModalVisible(true); - setImageIndex(index); + showImageViewer({ + imageUrls: images, + index: index, + lockedStartIndex: visibleRange, + unlockUrl: + process.env.EXPO_PUBLIC_WEB_URL + + "/zone/pay/" + + data?.zid + + "/h5_zone_moment/" + + data?.id, + }); }} style={ displayMedia.length > 1 @@ -546,12 +566,6 @@ function ImageDisplay({ isUnlocked, visibleRange, mediaAmount, media }) { ); })} - ); } diff --git a/context/ImageViewProvider.jsx b/context/ImageViewProvider.jsx new file mode 100644 index 0000000..0c87318 --- /dev/null +++ b/context/ImageViewProvider.jsx @@ -0,0 +1,37 @@ +import React, { useState, createContext, useContext } from "react"; +import { ImageViewer } from "../components/ImageViewer"; + +const ImageViewerContext = createContext(); + +export const ImageViewerProvider = ({ children }) => { + const [imageViewerProps, setImageViewerProps] = useState(null); + + const showImageViewer = (props) => { + setImageViewerProps({ ...props, isShow: true }); + }; + + const closeImageViewer = () => { + setImageViewerProps(null); + }; + + const changeImageViewerIndex = (index) => { + setImageViewerProps((prev) => { + return { ...prev, index: index }; + }); + }; + + return ( + + {children} + {imageViewerProps && ( + + )} + + ); +}; + +export const useImageViewer = () => useContext(ImageViewerContext); diff --git a/screeens/SpaceIntroduce/index.jsx b/screeens/SpaceIntroduce/index.jsx index 779cad2..761778a 100644 --- a/screeens/SpaceIntroduce/index.jsx +++ b/screeens/SpaceIntroduce/index.jsx @@ -19,7 +19,7 @@ import VideoModal from "../../components/VideoModal"; import SpaceIntroduceSkeleton from "./skeleton"; import { usePreventScreenCapture } from "expo-screen-capture"; import { useFocusEffect } from "@react-navigation/native"; -import ImageViewer from "../../components/ImageViewer"; +import { useImageViewer } from "../../context/ImageViewProvider"; export default function SpaceIntroduce({ navigation, route }) { usePreventScreenCapture(); @@ -27,6 +27,8 @@ export default function SpaceIntroduce({ navigation, route }) { const insets = useSafeAreaInsets(); const headerHeight = useHeaderHeight(); + const { showImageViewer } = useImageViewer(); + const [data, setData] = useState({}); const [isLoading, setIsloading] = useState(true); const getData = async () => { @@ -79,10 +81,6 @@ export default function SpaceIntroduce({ navigation, route }) { }, []) ); - //控制图片modal可见性 - const [imagesVisible, setImagesVisible] = useState(false); - //控制图片modal中打开的图片索引 - const [imageIndex, setImageIndex] = useState(""); const images = data?.streamer_ext?.album?.images?.map((image, index) => { if (index > 4) return; return image?.urls[0]; @@ -277,8 +275,10 @@ export default function SpaceIntroduce({ navigation, route }) { { - setImageIndex(index); - setImagesVisible(true); + showImageViewer({ + imageUrls: imagesForImageViewer, + index: index, + }); }} key={index} style={tailwind("basis-1/3 p-0.5")} @@ -384,13 +384,6 @@ export default function SpaceIntroduce({ navigation, route }) { setVisible={setShowVideo} url={data?.streamer_ext?.shorts?.videos[0]?.urls[0]} /> - {/* 展示图片的modal */} - ); } diff --git a/screeens/SpaceSetting/AgencySetting/index.jsx b/screeens/SpaceSetting/AgencySetting/index.jsx index 70c5614..c883846 100644 --- a/screeens/SpaceSetting/AgencySetting/index.jsx +++ b/screeens/SpaceSetting/AgencySetting/index.jsx @@ -328,7 +328,7 @@ export default function AgencySetting({ navigation, route }) { ID：{data.third_partner_account.user_id} - 分成比例：{data.sharing_ratio * 100}% + 分成比例：{(data.sharing_ratio * 100).toFixed()}% )} diff --git a/screeens/SpaceSetting/CollaboratorSetting/index.jsx b/screeens/SpaceSetting/CollaboratorSetting/index.jsx index a2c5097..6d7c17a 100644 --- a/screeens/SpaceSetting/CollaboratorSetting/index.jsx +++ b/screeens/SpaceSetting/CollaboratorSetting/index.jsx @@ -313,7 +313,7 @@ export default function CollaboratorSetting({ navigation, route }) { - {item?.sharing_ratio * 100}% + {(item?.sharing_ratio * 100).toFixed()}% @@ -374,7 +374,7 @@ export default function CollaboratorSetting({ navigation, route }) { ID：{selfData[0]?.collaborator_account?.user_id} - 分成比例：{selfData[0]?.sharing_ratio * 100}% + 分成比例：{(selfData[0]?.sharing_ratio * 100).toFixed()}% @@ -411,7 +411,7 @@ export default function CollaboratorSetting({ navigation, route }) { 总分成比例 - {data?.zone_third_partner?.sharing_ratio * 100}% + {(data?.zone_third_partner?.sharing_ratio * 100).toFixed()}% 修改比例请联系平台客服 diff --git a/screeens/StreamerProfile/index.jsx b/screeens/StreamerProfile/index.jsx index 90a1884..53cb4e8 100644 --- a/screeens/StreamerProfile/index.jsx +++ b/screeens/StreamerProfile/index.jsx @@ -14,7 +14,6 @@ import React, { useState, useEffect } from "react"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useTailwind } from "tailwind-rn"; import { Image } from "expo-image"; -import ImageViewer from "../../components/ImageViewer"; import Swiper from "react-native-swiper"; import { Divider, Icon } from "@rneui/themed"; import VideoModal from "../../components/VideoModal"; @@ -30,6 +29,7 @@ import { get } from "../../utils/storeInfo"; import StreamerProfileSkeleton from "./skeleton"; import { generateSignature } from "../../utils/crypto"; import Svg, { Path } from "react-native-svg"; +import { useImageViewer } from "../../context/ImageViewProvider"; const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; @@ -257,10 +257,9 @@ export default function StreamerProfile({ navigation, route }) { const MySwiper = () => { //控制视频modal可见性 const [videoVisible, setVideoVisible] = useState(false); - //控制图片modal可见性 - const [imagesVisible, setImagesVisible] = useState(false); - //控制图片modal中打开的图片索引 - const [imageIndex, setImageIndex] = useState(""); + + const { showImageViewer } = useImageViewer(); + const images = data?.album?.images?.map((image) => image?.urls[0]); const imagesForImageViewer = images?.map((url) => ({ url })); return ( @@ -312,8 +311,10 @@ export default function StreamerProfile({ navigation, route }) { ) : ( { - setImageIndex(index - 1); - setImagesVisible(true); + showImageViewer({ + imageUrls: imagesForImageViewer, + index: index - 1, + }); }} > - {/* 展示图片的modal */} - ); };