efunbox-mobile-8/pages/components/VideoExplain.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  StatusBar,
  BackHandler,
  FlatList,
  TouchableOpacity 
} from "react-native";
import Orientation from "react-native-orientation";
import CusVideo from "./CusVideo";
// 获取屏幕宽高
import { Dimensions } from 'react-native'
const { height, width } =  Dimensions.get('window');
import courseDetails from '../services/courseDetails'

export default class VideoExplain extends Component {
  state = {
    isFull: false,
    video_height: 210,
    statusbar_hidden: false,
    videoStyle: {
      width: "100%"
    },
    collectImage: require('../images/courseDetails/collect.png'),
    isCollect: true,
    numberLine: 2
  };
  componentWillReceiveProps(nextProps) {
    console.log(nextProps.dataList.id)
    const targetCode = nextProps.dataList.id;
    courseDetails.getisFavorites({
      targetCode,
    }).then(res => {
      console.log('--------', res)
      if (res.code == 200 && res.data) {
        this.setState({
          collectImage: require('../images/courseDetails/have_collect.png'),
          isCollect: false
        })
      }else {
        this.setState({
          collectImage: require('../images/courseDetails/collect.png'),
          isCollect: true
        })
      }
    }).catch(error => console.log(error))
  }

  render() {
    return (
      <View style={this.state.videoStyle}>
        <StatusBar
          // backgroundColor={"transparent"}
          barStyle={"dark-content"}
          backgroundColor={"white"}
          translucent={false}
          hidden={this.state.statusbar_hidden}
        />
        {/* <View style={{ width: "100%", height: 210 }} /> */}
        <CusVideo
          show={true} //是否显示
          uri={this.props.uri} //播放路径
          ref={view => (this.video = view)} //设置ID
          needback={true}
          videoback={this.back.bind(this)}
          videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
          onError={this.onError.bind(this)}
          onEnd={this.onEnd.bind(this)}
          style={{
            width: "100%",
            height: this.state.video_height
          }}
        />
        <View style={styles.videoExplain}>
          <View style={styles.title}>
            <Text style={styles.font}>{this.props.dataList.title}</Text>
            <View style={styles.icon}>
              <TouchableOpacity onPress={this.collection.bind(this)}>
                <Image source={this.state.collectImage} style={styles.iconSize} />
              </TouchableOpacity>
              <TouchableOpacity onPress={this.share}>
                <Image source={require('../images/courseDetails/share.png')} style={styles.iconSize} />
              </TouchableOpacity>
            </View>
          </View>
          <View style={[styles.title, styles.tops]}>
            <Text style={styles.font}>课程介绍：</Text>
            <Text style={styles.clor} onPress={() => this.open()}>更多 ></Text>
          </View>
          <Text style={[ styles.clor, styles.introduce]} numberOfLines={this.state.numberLine}>{this.props.dataList.description}</Text>
        </View>
      </View>
    );
  }
  // 全屏播放
  fullScreenPlayer() {
    if (!this.state.isFull) {
      Orientation.lockToLandscape();
      this.setState({
        statusbar_hidden: true,
        isFull: true,
        video_height: "100%",
        videoStyle: {
          width: "100%",
          height: width
        }
      });
    } else {
      Orientation.lockToPortrait();
      this.setState({
        statusbar_hidden: false,
        isFull: false,
        video_height: 210,
        videoStyle: {
          width: "100%"
        }
      });
    }
    this.props.full(this.state.isFull);
  }
  // 播放器异常
  onError() {
    alert("播放器异常");
  }
  // 播放结束
  onEnd() {
    alert("播放结束");
    this.video.refreshVideo();
  }
  back(){
    this.props.videoback();
  }
  start(){
    this.video.start();
  }
  componentWillMount() {
    this.backlistener=BackHandler.addEventListener(
      "hardwareBackPress",
      this.onBackAndroid
    );
  }
  componentWillUnmount() {
    console.log("componentWillUnmount")
    if( this.backlistener){
      BackHandler.removeEventListener(
        "hardwareBackPress",
        this.onBackAndroid
      );
    }
 
  }
  // 播放器返回
  onBackAndroid=() => {
    if (this.state.isFull) {
      return true;
    } else {
      alert("返回。。。");
    }
  }
  // 收藏
  collection() {
    if (this.state.isCollect) {
      this.setState({
        collectImage: require('../images/courseDetails/have_collect.png'),
        isCollect: false
      })
    }else {
      this.setState({
        collectImage: require('../images/courseDetails/collect.png'),
        isCollect: true
      })
    }
    const targetCode = this.props.dataList.id;
    const templateCode = this.props.dataList.templateCode;
    const title = this.props.dataList.title;
    courseDetails.setFavorites({
      targetCode,
      templateCode,
      title,
      "iconImg": ""
    }).then(res => {
      console.log(res)
    }).catch(error => console.log(error))
  }
  // 分享
  share() {
    alert('点击分享')
  }
  // 点击更多展开说明
  open() {
    this.setState({
      numberLine: 10
    })
  }
}

const styles = StyleSheet.create({
  videoExplain: {
    width: "100%",
    backgroundColor: "white",
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 13,
    paddingBottom: 13
  },
  title: {
    width: "100%",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  font: {
    fontSize: 18,
    color: "black",
    fontWeight: "bold"
  },
  clor: {
    fontSize: 14,
    color: "black"
  },
  icon: {
    display: "flex",
    flexDirection: "row"
  },
  iconSize: {
    width: 20,
    height: 20,
    marginLeft: 10
  },
  tops: {
    marginTop: 18
  },
  introduce: {
    marginTop: 5
  }
});