campus_react_local/App/views/community/ShortVideo/ShortVideoCellView.js

/**
 * Created by zack on 2018/4/19.
 */
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight,
    ImageBackground
} from 'react-native'
import React, { Component } from 'react'
import ScreenDimensions from '../../../utils/ScreenDimensions'
import ScreenDimensionsClientHeight from '../../../utils/ScreenDimensions'
import NavigationBarHeight from '../../../utils/NavigationBarHeight'
import TabBarHeight from '../../../utils/TabBarHeight'
import RefreshInfiniteListView from '../../../utils/RefreshInfiniteListView'
import Video from 'react-native-video'
import ShortVideoProgressView from "./ShortVideoProgressView"
import ShortVideoEndView from "./ShortVideoEndView"

//ScreenDimensions.clientHeight 
export default class VideoDetailsCellViewContorller extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showMp: true,
            rate: false,//播放数据
            showBtn: true,//进入 显示播放 按钮
            endBoolPlay: true,
            paused:false,//是否重新播放
        }
    }

    componentDidMount() {
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.selectedPages != this.props.selectedPages) {
            this.setState({
                rate: nextProps.selectedPages
            })
        }
    }



    render() {
        let playIcon = require('../../../resources/images/TabBar/Community/ShortVideo/play.png');
        let bottomBackground = require('../../../resources/images/TabBar/Community/ShortVideo/bg_01.png');
        let likeIcon = require('../../../resources/images/TabBar/Community/ShortVideo/like.png');
        let messIcon = require('../../../resources/images/TabBar/Community/ShortVideo/mess.png');
        let moreIcon = require('../../../resources/images/TabBar/Community/ShortVideo/more.png');

        let userIcon = require('../../../resources/images/TabBar/Community/ShortVideo/user1.png');
        let followIcon = require('../../../resources/images/TabBar/Community/ShortVideo/follow.png');

        let suspendedIcon = require('../../../resources/images/TabBar/Community/ShortVideo/suspend.png');




        return (
            <View
                style={styles.View}>


                <Video ref={(ref) => {
                    this.video = ref
                }}
                    source={require('../../../resources/MP4/2.mp4')}
                    style={styles.fullScreen}
                    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}
                />
                {/* {this.state.showMp ? <View style={styles.fullScreen}>
                    <Image source={require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/bg.png')} style={styles.loadingStyle} />
                </View> : undefined} */}


                {this.state.endBoolPlay ? <View style={styles.aboveStyle}>
                    <TouchableHighlight
                        underlayColor={"rgba(255,255,255,0)"}
                        onPress={this.onPressPlay.bind(this)}>
                        <View style={styles.topVideo}>
                            {this.state.showBtn ? <Image source={playIcon} style={styles.playStyle} /> : undefined}
                            {/* {!this.state.rate&&!this.state.showBtn   这个状态代表播放中 反之暂停中} */}
                            {!this.state.rate && !this.state.showBtn ? <Image source={suspendedIcon} style={styles.suspendedStyle} /> : undefined}
                        </View>
                    </TouchableHighlight>

                    <View style={styles.userViewStyle}>
                        <ImageBackground source={bottomBackground} style={styles.bottomStyle}>
                            {this.state.rate ?
                                <ShortVideoProgressView ref={(r) => {
                                    this.progressView = r
                                }} totalText={"03:00"} fullScreen={this.callfullScreen.bind(this)} />

                                :
                                <View style={styles.playBeforeStyle}>
                                    <View style={styles.bottomLeftStyle}>
                                        <View style={styles.headImage}>
                                            <View style={styles.headStyle}>
                                                <Image source={userIcon} style={styles.userIcon} />
                                            </View>
                                            <Image source={followIcon} style={styles.followStyle} />
                                        </View>
                                        <Text style={styles.nameStyle}>{"hhaha"}</Text>
                                    </View>
                                    <View style={styles.bottomRightStyle}>
                                        <View style={styles.textView}>
                                            <Text style={styles.numberStyle}>{"01:44"}</Text>
                                        </View>
                                    </View>
                                </View>

                            }
                        </ImageBackground>
                    </View>
                </View> :

                    <ShortVideoEndView replay={this.replay.bind(this)} />
                }
                <View style={styles.toolStyle}>
                    <View style={styles.leftToolStyle}>
                        <Text numberOfLines={10} style={styles.toolTextStyle}>{"钟记住100个单侧"}</Text>
                    </View>
                    <View style={styles.rightToolStyle}>
                        <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPresslike.bind(this)}>
                            <View style={styles.childrenView}>
                                <Image source={likeIcon} style={styles.likeIcon} />
                                <Text style={styles.textStyle}>688</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressForMess.bind(this)}>
                            <View style={styles.childrenView}>
                                <Image source={messIcon} style={styles.messIcon} />
                                <Text style={styles.textStyle}>688</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressShare.bind(this)}>
                            <View style={styles.childrenView}>
                                <Image source={moreIcon} style={styles.moreIcon} />
                            </View>
                        </TouchableHighlight>
                    </View>
                </View>

            </View>
        );
    }
    //-------------------
    onPresslike() {
        //点赞
    }
    onPressForMess() {
        //评论
    }
    onPressShare() {
        //分享
    }
    callfullScreen() {
        //全屏
        this.video.presentFullscreenPlayer()
    }





    loadStart() {
        //需要 添加背景图片
        console.log("loadStart=======")
    }
    onProgress(time) {

        if (!this.state.paused&&this.state.rate) {
            let progressValue = time.currentTime / time.seekableDuration
            this.progressView.setProgressValue(progressValue, time.currentTime)
        }
      

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


    //播放完成 分享按钮事件
    onPressChat() {

    }
    onPressChatFirend() {

    }
    onPressQQ() {

    }
    onPressSina() {

    }
    replay() {
        this.setState({
            paused: false,
            endBoolPlay: true,
        })
    }

}
const styles = StyleSheet.create({

    View: {
        width: ScreenDimensions.width,
        height: ScreenDimensions.height,

    },
    fullScreen: {
        width: ScreenDimensions.width,
        height: 195,

    },
    loadingStyle: {
        position: 'absolute',
        top: -ScreenDimensions.height,
        left: 0,
        bottom: 0,
        right: 0,
    },
    aboveStyle: {
        marginTop: -195,
        //  backgroundColor:"yellow"
    },
    topVideo: {
        width: ScreenDimensions.width,
        height: 100,
        // opacity: 0,
        // justifyContent: "center",
        paddingTop: 50,
        alignItems: "center"
    },
    playStyle: {
        width: 40,
        height: 40
    },
    suspendedStyle: {
        width: 30,
        height: 30,
    },
    userViewStyle: {
        width: ScreenDimensions.width,
        height: 195 - 150 + 50,
        justifyContent: "space-between"
    },


    // 播放中 与 播放时 的 style
    bottomStyle: {
        // justifyContent: "space-between",
        flexDirection: "row",
        marginBottom: 10,
        height: 95,
        paddingTop: 30,

    },
    bottomLeftStyle: {
        // flex: 1,
        alignItems: "center",
        flexDirection: "row",
    },
    nameStyle: {
        fontSize: 14,
        color: "#ffffff",
        marginLeft: 15
    },
    headImage: {
        flexDirection: "row"
    },
    userIcon: {
        width: 40,
        height: 40,
    },
    headStyle: {
        width: 42,
        height: 42,
        borderRadius: 42,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#ffffff",
        marginLeft: 11,
    },
    followStyle: {
        width: 12,
        height: 12,
        marginTop: 30,
        marginLeft: -15
    },
    bottomRightStyle: {
        // flex: 1,
        alignItems: "flex-end",
        justifyContent: "center"
    },
    textView: {
        backgroundColor: "gray",
        borderRadius: 10,
        width: 60,
        height: 20,
        justifyContent: "center",
        alignItems: "center",
        marginRight: 12
    },
    toolStyle: {
        width: ScreenDimensions.width,
        height: 58,
        backgroundColor: "#ffffff",
        flexDirection: "row"

    },
    leftToolStyle: {
        flex: 1,
        paddingTop: 16,
        // justifyContent:"center",
        alignItems: "center"
    },
    rightToolStyle: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        // paddingTop: 16,
        justifyContent: "flex-end"
    },
    toolTextStyle: {
        fontSize: 18,
        color: "#000000",
        marginHorizontal: 12
    },
    likeIcon: {
        width: 38 / 2,
        height: 35 / 2
    },
    textStyle: {
        marginHorizontal: 10
    },
    messIcon: {
        width: 38 / 2,
        height: 38 / 2
    },
    moreIcon: {
        width: 31 / 2,
        height: 6 / 2,
        marginRight: 12
    },
    childrenView: {
        alignItems: "center",
        flexDirection: "row"
    },
    playBeforeStyle: {
        justifyContent: "space-between",
        flexDirection: "row",
        width: ScreenDimensions.width,

    },




})