import {
View,
Text,
Image as NativeImage,
TouchableOpacity,
useWindowDimensions,
Animated,
Easing,
Modal,
} from "react-native";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";
import { Image } from "expo-image";
import { useHeaderHeight } from "@react-navigation/elements";
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
import BottomSheet, { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import AllSpacePosts from "./AllSpacePosts";
import IronFanSpacePosts from "./IronFanSpacePosts";
import SuperFanSpacePosts from "./SuperFanSpacePosts";
import GetWechatModal from "../../components/GetWechatModal";
import SubmitWechatModal from "../../components/SubmitWechatModal";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import CreatePostModal from "../../components/CreatePostModal";
import { LinearProgress, Button } from "@rneui/themed";
import { LinearGradient } from "expo-linear-gradient";
import { usePreventScreenCapture } from "expo-screen-capture";
import { Svg, Path } from "react-native-svg";
import MyModal from "../../components/MyModal";
export default function StreamerSpace({ navigation, route }) {
usePreventScreenCapture();
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
const headerHeight = useHeaderHeight();
//创建动态Modal是否展示
const [isCreatePostModalVisible, setIsCreatePostModalVisible] =
useState(false);
//退款中Modal是否展示
const [isRefundingModalVisible, setIsRefundingModalVisible] = useState(false);
//获取空间数据并将该空间标为已读
const [data, setData] = useState({});
const getData = async () => {
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
try {
const base = await baseRequest();
const signature = await generateSignature({
mid: route.params.mid,
...base,
});
const _response = await fetch(
`${apiUrl}/api/zone/list_by_mid?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mid: route.params.mid,
...base,
}),
}
);
const _data = await _response.json();
if (_data.ret === -1) {
Toast.show({
type: "error",
text1: _data.msg,
topOffset: 60,
});
return;
}
if (_data.data.list[0].visitor_role === 4) {
navigation.replace("SpaceIntroduce", { mid: route.params.mid });
return;
}
setData({
..._data.data.list[0],
refund_enable: _data.data.refund_enable,
refund_status: _data.data.refund_status,
});
if (_data.data.refund_status === 1) {
setIsRefundingModalVisible(true);
}
const signature2 = await generateSignature({
zid: _data.data.list[0].id,
...base,
});
const _response2 = await fetch(
`${apiUrl}/api/zone_session/upsert?signature=${signature2}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
zid: _data.data.list[0].id,
...base,
}),
}
);
const _data2 = await _response2.json();
if (_data2.ret === -1) {
Toast.show({
type: "error",
text1: _data2.msg,
topOffset: 60,
});
return;
}
} catch (error) {
console.error(error);
}
};
useEffect(() => {
getData();
}, []);
//设置header右侧按钮功能
useEffect(() => {
navigation.setOptions({
headerRight: () => (
navigation.navigate("SpaceSetting", { data: data })}
>
),
});
}, [data]);
//点击查看微信按钮
const [isAddWechatModalVisible, setIsAddWechatModalVisible] = useState(false);
//tab组件相关
const layout = useWindowDimensions();
const [index, setIndex] = useState(0);
const [routes, setRoutes] = useState([
{ key: "all", title: "全部" },
{ key: "ironFan", title: "铁粉专享" },
{ key: "superFan", title: "超粉专享" },
]);
//当主播没开通超粉功能时不展示超粉专享tab
useEffect(() => {
if (data?.is_superfanship_enabled === 0)
setRoutes([
{ key: "all", title: "全部" },
{ key: "ironFan", title: "铁粉专享" },
]);
}, [data]);
const renderScene = useCallback(
SceneMap({
all: () => ,
ironFan: () => ,
superFan: () => ,
}),
[data]
);
const renderIndicator = useCallback((props) => {
const { position, navigationState, getTabWidth } = props;
const inputRange = [0, 1];
const translateX = position.interpolate({
inputRange: inputRange,
outputRange: inputRange.map((x) => {
return x * getTabWidth(navigationState.index);
}),
});
return (
);
}, []);
const renderTabBar = useCallback(
(props) => (
),
[]
);
//bottom sheet组件相关
const snapPoints = useMemo(() => ["73%", "100%"], []);
//成为铁粉Modal组件
const [isIronFanModalVisible, setIsIronFanModalVisible] = useState(false);
const ironFanProgress = useMemo(
() => Math.floor((data?.expenditure / data?.ironfanship_price) * 100),
[data]
);
const BecomeIronFanModal = useCallback(
() => (
setIsIronFanModalVisible(false)}
>
当前铁粉解锁进度：
{`${ironFanProgress}%`}
{`${
data?.expenditure / 100
} / ${data?.ironfanship_price / 100}`}
空间内累计消费达到¥{data?.ironfanship_price / 100}即可成为
铁粉
，可查看所有铁粉专享内容哦，快来成为我的铁粉吧～
),
[isIronFanModalVisible]
);
//刷新动画
const [rotateValue] = useState(new Animated.Value(0));
const startRotation = () => {
getData();
Animated.timing(rotateValue, {
toValue: 1,
duration: 500,
easing: Easing.linear,
useNativeDriver: true,
}).start(() => {
rotateValue.setValue(0);
});
};
const spin = rotateValue.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
return (
{data?.streamer_ext?.name}
{data?.streamer_ext?.user_id}
{data?.zone_moment_count}
navigation.navigate("ShareSpace", { data: data })
}
style={tailwind(
"flex items-center justify-center ml-auto h-8 px-4 bg-[#FF669E] rounded-full"
)}
>
分享
setIsAddWechatModalVisible(true)}
style={tailwind("flex flex-col items-center")}
>
查看微信
setIsIronFanModalVisible(true)}
style={tailwind("flex flex-col items-center")}
>
{data?.is_ironfanship_unlocked === 1
? "已是铁粉"
: "成为铁粉"}
{`${parseInt(data?.expenditure / 100, 10)}/${parseInt(
data?.ironfanship_price / 100,
10
)}`}
{data?.is_superfanship_enabled === 1 && (
setIndex(2)
: () =>
navigation.navigate("WebWithoutHeader", {
uri:
process.env.EXPO_PUBLIC_WEB_URL +
"/zone/pay/" +
data?.id +
"/h5_zone_superfanship/0",
})
}
style={tailwind("flex flex-col items-center")}
>
{data?.is_superfanship_unlocked === 1
? "尊贵超粉"
: "成为超粉"}
)}
navigation.navigate("MessageDetail", {
mid: 1,
})
}
style={tailwind("flex flex-col items-center")}
>
举报
{data?.visitor_role === 3 && (
navigation.navigate("VisibleToOneselfSpacePosts")
}
style={tailwind("flex flex-col items-center")}
>
审核未通过
)}
{data?.visitor_role === 3 ? (
setIsCreatePostModalVisible(!isCreatePostModalVisible)
}
style={{
...tailwind("absolute"),
bottom: insets.bottom + 20,
right: 16,
}}
>
) : (
setIsAddWechatModalVisible(true)}
style={tailwind("flex flex-col items-center")}
>
查看微信
{data?.is_superfanship_enabled === 1 && (
setIndex(2)
: () =>
navigation.navigate("WebWithoutHeader", {
uri:
process.env.EXPO_PUBLIC_WEB_URL +
"/zone/pay/" +
data?.id +
"/h5_zone_superfanship/0",
})
}
style={tailwind("flex flex-col items-center")}
>
{data?.is_superfanship_unlocked === 1
? "尊贵超粉"
: "成为超粉"}
)}
setIsIronFanModalVisible(true)}
style={tailwind("flex flex-col items-center")}
>
成为铁粉
{`${parseInt(data?.expenditure / 100, 10)}/${parseInt(
data?.ironfanship_price / 100,
10
)}`}
)}
{/* 点击成为铁粉Modal */}
{/* 创建帖子Modal */}
{/* 查看微信Modal */}
{data?.streamer_ext?.wechat_lock_type === 0 ? (
) : (
)}
{/* 退款中禁止查看Modal */}
{
setIsRefundingModalVisible(false);
setTimeout(() => navigation.replace("HomeTab"), 500);
}}
confirm={() => {
setIsRefundingModalVisible(false);
setTimeout(() => navigation.replace("HomeTab"), 500);
}}
/>
{/* 刷新按钮 */}
);
}