/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
FlatList,
TouchableHighlight,
ActivityIndicator,
SafeAreaView,
Image,
Modal,
Dimensions
} from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import { Container, Content, Header, Body, Title } from "native-base";
import Video from "react-native-video";
import Orientation from "react-native-orientation";
import VideoActions from "../Redux/VideoRedux";
import { connect } from "react-redux";
// Styles
import styles from "./Styles/VideoListScreenStyles";
class LaunchScreen extends Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
isLoading: false,
isLoadingMore: false,
loading: true,
dataSource: [],
video_url: "",
data: [],
status: false,
muted: false,
paused: true,
repeat: false,
videos: []
};
}
apiParsing() {
const axios = require("axios");
axios
.get("https://private-c31a5-task27.apiary-mock.com/videos")
.then(response => {
// handle success
this.setState({
isLoading: false,
dataSource: response.data.videos,
data: response.data.videos
});
console.log(response.data.videos);
})
.catch(error => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
}
fetchMore = () => {
const data = this.state.data.concat(this.state.dataSource);
this.setState({
isLoading: false,
data: data
});
};
componentDidMount() {
// this.apiParsing();
// Orientation.unlockAllOrientations();
this.props.getVideos();
Orientation.addOrientationListener(this._orientationDidChange);
}
static getDerivedStateFromProps(props, state) {
props.videos ? { videos: props.videos } : null;
return null;
}
_orientationDidChange = orientation => {
if (orientation === "LANDSCAPE") {
console.log("Landscape Mode On");
} else {
}
};
// componentWillUnmount() {
// Orientation.getOrientation((err, orientation) => {
// console.log(`Current Device Orientation: ${orientation}`);
// });
// Orientation.removeOrientationListener(this._orientationDidChange);
// }
handlePlayAndPause = item => {
this.setState(prevState => ({
paused: !prevState.paused,
video_url: item.video_url
}));
};
handleVolume = () => {
this.setState(prevState => ({
muted: !prevState.muted
}));
};
handleRepeat = () => {
this.setState(prevState => ({
repeat: !prevState.repeat
}));
};
handleFullScreenToPortrait = () => {
Orientation.lockToPortrait();
this.setState({
video_url: "",
paused: true
});
};
handleFullScreenToLandscape = () => {
this.player.presentFullscreenPlayer();
Orientation.lockToLandscape();
};
onEndVideo = () => {
this.player.dismissFullscreenPlayer();
Orientation.lockToPortrait();
this.setState({
video_url: "",
paused: true
});
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
this.state.isLoadingMore && (
<View
style={{
paddingVertical: 10,
// borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large" />
</View>
)
);
};
renderItem(item) {
console.log("Image URL", item.thumbnail_url);
return (
<View style={styles.faltList}>
<View style={styles.image}>
<Image
style={styles.image}
source={{
uri: item.thumbnail_url
}}
resizeMode="cover"
/>
<View style={styles.controlBar}>
<MaterialIcons
name={this.state.paused ? "play-arrow" : "pause"}
size={45}
color="white"
onPress={() => this.handlePlayAndPause(item)}
/>
</View>
</View>
<Text style={styles.welcome}> {item.title} </Text>
</View>
);
}
render() {
console.log("Image URL", this.props.videos);
if (this.state.isLoading) {
return (
<View style={styles.activityIndicator}>
<ActivityIndicator />
</View>
);
}
return (
<Container>
<Header>
<Body>
<Title> Videos </Title>
</Body>
</Header>
<View style={styles.container}>
<SafeAreaView>
{this.state.video_url ? (
<Video
source={{
uri: this.state.video_url
}}
ref={ref => {
this.player = ref;
}}
onEnd={this.onEndVideo}
onLoadStart={this.handleFullScreenToLandscape}
// style={styles.videoContainer}
paused={this.state.paused}
muted={this.state.muted}
repeat={this.state.repeat}
onFullscreenPlayerDidDismiss={() =>
this.handleFullScreenToPortrait()
}
/>
) : null}
<FlatList
data={this.props.videos}
renderItem={({ item }) => this.renderItem(item)}
keyExtractor={(item, index) => index.toString()}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
ListFooterComponent={this.renderFooter}
onEndReached={() =>
this.setState({ isLoadingMore: true }, () => this.fetchMore())
}
onEndReachedThreshold={0.01}
/>
</SafeAreaView>
</View>
</Container>
);
}
}
const mapStateToProps = state => ({
videos: state.videos.videos
});
const mapDispatchToProps = dispatch => ({
getVideos: () => dispatch(VideoActions.videoRequest())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(LaunchScreen);