import React from 'react';
import { View, Dimensions } from 'react-native';
// FileSytem
import * as FileSystem from 'expo-file-system';
// Video
import { ResizeMode } from 'expo-av';
import VideoPlayer from 'expo-video-player';

class VideoScreen extends React.Component {
    render() {
        const { uuid } = this.props.route.params;
        let width = Dimensions.get("window").width;
        let height = Dimensions.get("window").height;

        // if portrait
        if (height > width) {
            let tmpHeight = height;
            height = width - 150;
            width = tmpHeight + 100;
        } else {
            height = height - 100;
        }
        return (
            <View style={{ flex: 1, backgroundColor: 'black' }}>
                <VideoPlayer
                    defaultControlsVisible={true}
                    fullscreen={{
                        visible: false
                    }}
                    slider={{
                        minimumTrackTintColor: '#ea4f52',
                        thumbTintColor: '#ea4f52',
                    }}
                    style={{
                        height: height,
                        width: width
                    }}
                    videoProps={{
                        shouldPlay: true,
                        resizeMode: ResizeMode.CONTAIN,
                        source: {
                            uri: FileSystem.documentDirectory + uuid + '.mp4',
                        },
                    }}
                />
            </View>
        );
    }
}

export default VideoScreen;