campus_react_local/App/views/play/Video/CAVideoDetailView.js

/**
 * 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(
            <View style={styles.View}>
                <CAVideoContainer style={styles.videoContainer} />
                <Text style={styles.videoTitle}>How (and why) Russia hacker the US election</Text>
                <View style={styles.TagButtonBgView}>
                    <TouchableOpacity onPress={() => {
                            this.clickTagButtonActon(0)
                        }}
                        activeOpacity={1} 
                        style={[styles.TagButtonView, {
                            borderBottomColor: this.state.currentPage === 0 ? '#fc2f1f' : '#efeff4',
                            borderBottomWidth: this.state.currentPage === 0 ? 3 : 1,
                        }]}>
                            <Text style={[styles.TagButtonTitle, {marginLeft: 23}]}>{'推荐'}</Text>
					</TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                            this.clickTagButtonActon(1)
                        }}
                        activeOpacity={1} 
                        style={[styles.TagButtonView, {
                            borderBottomColor: this.state.currentPage === 1 ? '#fc2f1f' : '#efeff4',
                            borderBottomWidth: this.state.currentPage === 1 ? 3 : 1,
                        }]}>
                            <Text style={[styles.TagButtonTitle, {marginLeft: 23}]}>{'答题'}</Text>
					</TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                            this.clickTagButtonActon(2)
                        }} 
                        activeOpacity={1}
                        style={[styles.TagButtonView, {
                            borderBottomColor: this.state.currentPage === 2 ? '#fc2f1f' : '#efeff4',
                            borderBottomWidth: this.state.currentPage === 2 ? 3 : 1,
                        }]}>
                            <Text style={[styles.TagButtonTitle, {marginLeft: 23}]}>{'讨论'}</Text>
					</TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                            this.clickTagButtonActon(3)
                        }} 
                        activeOpacity={1}
                        style={[styles.TagButtonView, {
                            borderBottomColor: this.state.currentPage === 3 ? '#fc2f1f' : '#efeff4',
                            borderBottomWidth: this.state.currentPage === 3 ? 3 : 1,
                        }]}>
                            <Text style={[styles.TagButtonTitle, {marginLeft: 23}]}>{'译文'}</Text>
					</TouchableOpacity>
                </View>
                <ScrollView ref = {(o) => {
					this._scrollView = o
				}} onMomentumScrollEnd={(e) => {
					this.onAnimationEnd(e)
				}} horizontal={true} pagingEnabled={true} style={styles.ScrollView}>
                    <CAVideoRecommend />
                    <CAVideoAnswerPage />
                    <CAVideoDiscussPage />
                    <CAVideoTranslationPage />
				</ScrollView>
            </View>
        );
    }

	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(
            <View style={[this.props.style, {backgroundColor: 'blue'}]}>
                <Video 
                    ref={(ref) => {
                            this.video = ref
                    }}
                    source={require('../../../resources/MP4/2.mp4')}
                    style={styles.videoContainer}
                    rate={this.state.rate ? 1 : 0}                          // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
                    paused={this.state.paused}
                    volume={1}                   // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
                    muted={true}                  // true代表静音，默认为false.
                    resizeMode='cover'       // 视频的自适应伸缩铺放行为，
                    onLoad={this.onLoad.bind(this)}                       // 当视频加载完毕时的回调函数
                    onLoadStart={this.loadStart.bind(this)}            // 当视频开始加载时的回调函数
                    onProgress={this.onProgress.bind(this)}   //  进度控制，每250ms调用一次，以获取视频播放的进度
                    onEnd={this.onEnd.bind(this)}             // 当视频播放完毕后的回调函数
                    onError={this.videoError.bind(this)}    // 当视频不能加载，或出错后的回调函数
                    onAudioBecomingNoisy={this.onAudioBecomingNoisy.bind(this)}
                    onAudioFocusChanged={this.onAudioFocusChanged.bind(this)}
                    repeat={true}                            // 是否重复播放
                    onBuffer={this.onBuffer}                         // 是否重复播放
                />
            </View>
        );
    }

    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"
    }
});