/**
* Created by Sean on 2018/5/9.
*/
import {
View,
Text,
StyleSheet,
TouchableOpacity,
ScrollView,
SectionList,
FlatList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import Video from 'react-native-video'
import CAVideoRecommend from './CAVideoRecommend';
import CAVideoAnswerPage from './CAVideoAnswerPage';
import CAVideoDiscussPage from './CAVideoDiscussPage';
import CAVideoTranslationPage from './CAVideoTranslationPage';
export default class CAVideoDetailView extends React.Component {
constructor(props) {
super(props)
this.state = {
currentPage: 0,
showMp: true,
rate: true,//播放数据
showBtn: true,//进入 显示播放 按钮
endBoolPlay: true,
paused:false,//是否重新播放
}
}
clickTagButtonActon(index) {
let x = index * ScreenDimensions.width
this.setState({currentPage: index})
this._scrollView.scrollTo({x: x, y: 0, animated: true})
}
render() {
return(
How (and why) Russia hacker the US election
{
this.clickTagButtonActon(0)
}}
activeOpacity={1}
style={[styles.TagButtonView, {
borderBottomColor: this.state.currentPage === 0 ? '#fc2f1f' : '#efeff4',
borderBottomWidth: this.state.currentPage === 0 ? 3 : 1,
}]}>
{'推荐'}
{
this.clickTagButtonActon(1)
}}
activeOpacity={1}
style={[styles.TagButtonView, {
borderBottomColor: this.state.currentPage === 1 ? '#fc2f1f' : '#efeff4',
borderBottomWidth: this.state.currentPage === 1 ? 3 : 1,
}]}>
{'答题'}
{
this.clickTagButtonActon(2)
}}
activeOpacity={1}
style={[styles.TagButtonView, {
borderBottomColor: this.state.currentPage === 2 ? '#fc2f1f' : '#efeff4',
borderBottomWidth: this.state.currentPage === 2 ? 3 : 1,
}]}>
{'讨论'}
{
this.clickTagButtonActon(3)
}}
activeOpacity={1}
style={[styles.TagButtonView, {
borderBottomColor: this.state.currentPage === 3 ? '#fc2f1f' : '#efeff4',
borderBottomWidth: this.state.currentPage === 3 ? 3 : 1,
}]}>
{'译文'}
{
this._scrollView = o
}} onMomentumScrollEnd={(e) => {
this.onAnimationEnd(e)
}} horizontal={true} pagingEnabled={true} style={styles.ScrollView}>
);
}
onAnimationEnd(e){
const offSetX = e.nativeEvent.contentOffset.x
const currentPage = offSetX / (ScreenDimensions.width)
this.setState({currentPage: currentPage})
}
}
class CAVideoContainer extends Component {
constructor(props) {
super(props);
this.state = {
currentPage: 0,
showMp: true,
rate: false,//播放数据
showBtn: true,//进入 显示播放 按钮
endBoolPlay: true,
paused:false,//是否重新播放
}
}
componentWillReceiveProps(nextProps) {
this.setState({
rate: 1
})
}
render() {
return(
);
}
loadStart() {
//需要 添加背景图片
console.log("loadStart=======")
}
onProgress(time) {
}
onEnd() {
this.setState({
endBoolPlay: false,
paused:true
})
}
onError() {
console.log("onError=======")
}
onAudioBecomingNoisy() {
}
onAudioFocusChanged() {
}
onLoad() {
console.log("当视频加载完毕时的回调函数")
this.setState({
showMp: false
})
}
videoError() {
}
onPressInput() {
this.refs.chatInputBar.openInputBar();
}
_onSendMsg(text) {
}
onBuffer() {
}
onPressPlay() {
//暂停 播放
let rate = this.state.rate;
let showBtn = this.state.showBtn;
this.setState({
rate: !rate,
showBtn: false
})
}
}
const styles = StyleSheet.create({
View: {
flex: 1,
backgroundColor: 'white'
},
videoContainer: {
width: ScreenDimensions.width,
height: ScreenDimensions.width * (203 / 360),
},
videoTitle: {
fontSize: 18,
fontWeight: 'bold',
color: "#000000",
marginHorizontal: 12
},
TagButtonBgView: {
width: ScreenDimensions.width,
height: 45,
marginTop: 8,
borderBottomColor: '#efeff4',
borderBottomWidth: 0.5,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
},
TagButtonView: {
height: 45,
justifyContent: 'center',
alignItems: 'center',
borderBottomColor: 'white',
},
TagButtonTitle: {
fontSize: 16,
marginRight: 36,
color: "#666666"
}
});