import { useVideoPlayer, VideoView } from 'expo-video';
import {
    Pressable,
    StyleProp,
    ViewStyle
} from 'react-native';

const VideoPlayer = ({
    videoUrl,
    style,
    onPress
}: {
    videoUrl: string;
    style?: StyleProp<ViewStyle>;
    onPress?: () => void;
}) => {
    const player = useVideoPlayer(videoUrl, (player) => {
        player.loop = true;
        player.play();
    });

    return (
        <Pressable
            style={[{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
            }, style]}
            onPress={onPress}
        >
            <VideoView
                style={{
                    width: '100%',
                    height: '100%',
                    backgroundColor: '#000',  // 添加背景色
                }}
                player={player}
                allowsFullscreen
                allowsPictureInPicture
            />
        </Pressable>
    );
};

export default VideoPlayer