77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { Dimensions, View } from 'react-native';
|
|
// Reduxs
|
|
import { connect } from 'react-redux';
|
|
// FileSytem
|
|
import * as FileSystem from 'expo-file-system';
|
|
// Video
|
|
import { ResizeMode } from 'expo-av';
|
|
import VideoPlayer from 'expo-video-player';
|
|
// Sentry
|
|
import * as Sentry from '@sentry/react-native';
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
mainColor: state.app.mainColor,
|
|
};
|
|
}
|
|
|
|
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 on portrait
|
|
if (height > width) {
|
|
const tmpHeight = height;
|
|
height = width - 150;
|
|
width = tmpHeight + 100;
|
|
} else {
|
|
height = height - 100;
|
|
}
|
|
const videoUri = `${FileSystem.documentDirectory}${uuid}.mp4`;
|
|
console.debug({
|
|
shouldPlay: true,
|
|
resizeMode: ResizeMode.CONTAIN,
|
|
source: {
|
|
uri: videoUri,
|
|
},
|
|
});
|
|
try {
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: 'black' }}>
|
|
<VideoPlayer
|
|
defaultControlsVisible={true}
|
|
fullscreen={{
|
|
visible: false,
|
|
}}
|
|
slider={{
|
|
minimumTrackTintColor: this.props.mainColor,
|
|
thumbTintColor: this.props.mainColor,
|
|
}}
|
|
style={{
|
|
height: height,
|
|
width: width,
|
|
}}
|
|
videoProps={{
|
|
shouldPlay: true,
|
|
resizeMode: ResizeMode.CONTAIN,
|
|
source: {
|
|
uri: videoUri,
|
|
},
|
|
}}
|
|
errorCallback={e => {
|
|
console.error(e);
|
|
Sentry.captureException(e);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(VideoScreen);
|