158 lines
4.9 KiB
TypeScript
158 lines
4.9 KiB
TypeScript
import { ContentPart } from "@/types/ask";
|
|
import { Image, Modal, StyleSheet, TouchableOpacity, View } from "react-native";
|
|
import VideoPlayer from "./VideoPlayer";
|
|
|
|
interface SingleContentModelProps {
|
|
modalVisible: { visible: boolean, data: ContentPart };
|
|
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
|
|
}
|
|
const SingleContentModel = ({ modalVisible, setModalVisible }: SingleContentModelProps) => {
|
|
const isVideo = (data: ContentPart) => {
|
|
return data.type === 'video';
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
animationType="fade"
|
|
transparent={true}
|
|
visible={modalVisible.visible}
|
|
onRequestClose={() => {
|
|
setModalVisible({ visible: false, data: {} as ContentPart });
|
|
}}>
|
|
<View style={styles.centeredView}>
|
|
<TouchableOpacity
|
|
style={styles.background}
|
|
onPress={() => {
|
|
setModalVisible({ visible: false, data: {} as ContentPart })
|
|
}}
|
|
/>
|
|
<TouchableOpacity style={styles.modalView} onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}>
|
|
{isVideo(modalVisible.data) ? (
|
|
// 视频播放器
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
style={{
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
maxHeight: "60%",
|
|
}}
|
|
onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}
|
|
>
|
|
<VideoPlayer
|
|
videoUrl={modalVisible.data.url || ""}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
alignSelf: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}
|
|
/>
|
|
</TouchableOpacity>
|
|
) : (
|
|
// 图片预览
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}
|
|
style={styles.imageContainer}
|
|
>
|
|
<Image
|
|
source={{ uri: modalVisible.data.url }}
|
|
style={styles.fullWidthImage}
|
|
resizeMode="contain"
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
imageGridContainer: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'nowrap',
|
|
width: '100%',
|
|
marginTop: 8,
|
|
},
|
|
video: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
imageContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
maxHeight: '60%',
|
|
},
|
|
fullWidthImage: {
|
|
width: '100%',
|
|
height: "54%",
|
|
marginBottom: 8,
|
|
},
|
|
gridImage: {
|
|
aspectRatio: 1,
|
|
marginBottom: 8,
|
|
},
|
|
background: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', // 添加半透明黑色背景
|
|
},
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
modalView: {
|
|
borderRadius: 20,
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
width: "100%",
|
|
justifyContent: 'center',
|
|
alignSelf: 'center',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
userAvatar: {
|
|
width: 30,
|
|
height: 30,
|
|
borderRadius: 15,
|
|
},
|
|
messageList: {
|
|
padding: 16,
|
|
},
|
|
messageBubble: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
fontWeight: "600"
|
|
},
|
|
userBubble: {
|
|
alignSelf: 'flex-end',
|
|
backgroundColor: '#FFB645',
|
|
marginLeft: '20%',
|
|
},
|
|
aiBubble: {
|
|
alignSelf: 'flex-start',
|
|
backgroundColor: '#fff',
|
|
marginRight: '20%',
|
|
borderWidth: 1,
|
|
borderColor: '#e5e5ea',
|
|
},
|
|
userText: {
|
|
color: '#4C320C',
|
|
fontSize: 16,
|
|
},
|
|
aiText: {
|
|
color: '#000',
|
|
fontSize: 16,
|
|
},
|
|
});
|
|
|
|
export default SingleContentModel |