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

/**
 * Created by zack on 2018/4/19.
 */
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight,
    ImageBackground
} from 'react-native'
import React, { PureComponent } 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 CusProgressBar from '../../../utils/CusProgressBar'


//ScreenDimensions.clientHeight 
export default class ShortVideoProgressView extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            leftText: "",
            rightText: ""
        }
    }

    componentDidMount() {

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



    render() {
        let fullIcon = require('../../../resources/images/TabBar/Community/ShortVideo/suo.png');


        return (
           <View style={{flex:1}}>
                <View style={styles.playInStyles}>
                <View style={styles.leftPlayInStyle}>
                     <Text style={styles.leftTextStyle}> {this.state.leftText}</Text>
                </View>
                <CusProgressBar ref={(ref) => {
                    this.progressBar = ref
                }} style={styles.progresStyle} />
                <View style={styles.rightPlayInStyle}>
                    <Text style={styles.totalTimer}>{"3:00"}</Text>
                </View>
                <TouchableHighlight
                    underlayColor={"rgba(255,255,255,0)"}
                    onPress={this.onPressFullScreen.bind(this)}>
                    <View style={styles.rightBtn}>
                        <Image source={fullIcon} style={styles.fullStyle} />
                    </View>
                </TouchableHighlight>


            </View>
         </View>
        )
    }
    onPressFullScreen(){
        //全屏
        this.props.fullScreen()
    }
    setProgressValue(value,timestamp){
        this.progressBar.progress=value;
        let time = this.timestampToTime(timestamp)
        this.setState({
            leftText:time
        })
    }
    timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes()<10?"0"+date.getMinutes()+ ':':date.getMinutes() + ':';
        s = date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
        return m+s;
    }

}
const styles = StyleSheet.create({

    playInStyles: {
        width: ScreenDimensions.width,
        height: 25,
        flexDirection: "row",
        alignItems:"center",
        marginTop:30,
    },
    leftPlayInStyle: {
        marginLeft: 5,
        marginRight: 5,
        flex: 1,
        justifyContent:"center",
        alignItems:"center"
    },
    progresStyle: {
        height: 5,
        flex: 6
    },
    rightPlayInStyle: {
        flex: 1,
        justifyContent:"center",
        alignItems:"center"
    },
    rightBtn: {
        flex: 1,
        justifyContent:"center",
        alignItems: "center",
        marginHorizontal:15,
    },
    fullStyle:{
       width:27/2,
       height:27/2
    },
    totalTimer:{
        fontSize:12,
        color:"#ffffff"
    },
    leftTextStyle:{
        fontSize:12,
        color:"#ffffff"
    }

})