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

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

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  FlatList,
  findNodeHandle,
  UIManager,
  StatusBar,
  BackHandler,
  Button,
  DeviceEventEmitter
} from "react-native";
import Orientation from "react-native-orientation";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
import CourseTitle from "./CourseTitle";
import SharedDialog from "./SharedDialog";
import ScheduleFlatItem from "./ScheduleFlatItem";
import CusVideo from "./CusVideo";
import ScheduleUrl from '../services/schedule'


export default class SchedulePage extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      statusbar_hidden: false,
      video_show: false,
      x: 0.0,
      y: 0.0,
      videoImg_flex: 1,
      videoImage_width: 0,
      videoImage_height: 0,
      videoImage_x: 0.0,
      videoImage_y: 0.0,
      video_uri:
        "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4",
      title_height: "9%",
      video_frame_height: "32%",
      seat_height: "2%",
      flatlist_height: "60%",
      isFull: false,
      playing_key: 0,
      scheduleTitle: '',
      wareList: [],
      colorList: [
        '#FFBC3D',
        '#FB5B76',
        '#EC48E1',
        '#39D6B9',
        '#3397F0'
      ]
    };
  }

  render() {
    return (
      <View
        style={{
          flex: 1
        }}
      >
        <StatusBar
          // backgroundColor={"transparent"}
          barStyle={"dark-content"}
          backgroundColor={"white"}
          translucent={false}
          hidden={this.state.statusbar_hidden}
        />

        <View
          style={{
            flex: 1,
            backgroundColor: "#F3F3F3",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <View
            style={{
              height: this.state.title_height,
              backgroundColor: "white"
            }}
          >
            <CourseTitle
              width={this.getWindowWidth()}
              title={this.state.scheduleTitle}
              lefttype={1}
              righttype={1}
              textcolor={"#231F20"}
              backPress={() => this.goBack()}
              // backPress={() => alert("左侧按钮")}
              rightPress={this.showSharedDialog.bind(this)}
            />
          </View>
          <View
            style={{
              height: this.state.video_frame_height,
              width: "100%"
            }}
          >
            <Image
              source={{
                uri:
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg"
              }}
              style={{
                width: "100%",
                height: "100%"
              }}
              ref={c => {
                this.video_image = c;
              }}
            />
          </View>
          <View
            style={{
              height: this.state.seat_height
            }}
          />
          <View
            style={{
              height: this.state.flatlist_height,
              justifyContent: "center",
              alignItems: "center",
              width: "100%"
            }}
          >
            <FlatList
              ItemSeparatorComponent={() => (
                <View
                  style={{
                    height: 10
                  }}
                />
              )}
              ListFooterComponent={() => (
                <View
                  style={{
                    height: 30
                  }}
                />
              )}
              renderItem={({ item }) => {
                return this.loadFlatItem(item);
              }}
              keyExtractor={(item, index) => item.id.toString()}
              horizontal={false}
              data={this.state.wareList}
            />
          </View>
        </View>
        <CusVideo
          show={this.state.video_show}
          uri={this.state.video_uri}
          ref={view => (this.video = view)}
          needback={false}
          videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
          onError={this.onError.bind(this)}
          onEnd={this.onEnd.bind(this)}
          style={{
            left: this.state.x,
            top: this.state.y,
            width: this.state.video_width,
            height: this.state.video_height,
            overflow: "hidden",
            position: "absolute"
          }}
        />
        <SharedDialog ref={view => (this.shareddialog = view)} />
      </View>
    );
  }
  loadFlatItem(data) {
    return (
      <ScheduleFlatItem
        width={this.getWindowWidth() * 0.9}
        height={50}
        data={data}
        onPress={() => this.changeUrl(data)}
      />
    );
  }

  componentWillMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackAndroid);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackAndroid);
  }
  componentDidMount() {
    let colorTemp = '';
    let colorIndexTemp = 0;
    const colorList = this.state.colorList;
    ScheduleUrl.getSchedule('KINDERGARTEN').success(res => {
      res.data.wareList.forEach((item, index) => {
        if (index === 0) {
          colorTemp = item.subTitle;
        }
        if (item.subTitle === colorTemp) {
          item.subColor = colorList[colorIndexTemp];
        } else {
          colorIndexTemp++;
          if (colorIndexTemp > colorList.length - 1) {
            colorIndexTemp = 0
          }
          colorTemp = item.subTitle;
          item.subColor = colorList[colorIndexTemp];
        }
      })
      this.setState({
        scheduleTitle: res.data.category.title,
        wareList: res.data.wareList
      })
    })
  }
  showSharedDialog() {
    this.video.pause();
    this.shareddialog.setModalVisible(true);
  }
  onBackAndroid = () => {
    if (this.state.isFull) {
      return true;
    } else {
    }
  };
  onError() {
    alert("播放器异常");
    this.setState({
      video_show: false
    });
  }
  onEnd() {
    alert("播放结束");
    this.setState({
      video_show: false
    });
    this.video.refreshVideo();
  }
  fullScreenPlayer() {
    if (!this.state.isFull) {
      Orientation.lockToLandscape();
      this.setState({
        video_frame_height: "100%",
        statusbar_hidden: true,
        isFull: true,
        x: 0,
        y: 0,
        video_width: "100%",
        video_height: "100%"
      });
    } else {
      Orientation.lockToPortrait();
      this.setState({
        video_frame_height: "32%",
        x: this.state.videoImage_x,
        y: this.state.videoImage_y,
        video_width: this.state.videoImage_width,
        video_height: this.state.videoImage_height,
        statusbar_hidden: false,
        isFull: false
      });
    }
  }
  changeUrl(data) {
    //切换视频并且播放
    // alert(url);
    // if (this.state.playing_key == data.key) {
    //   return;
    // }
    const handle = findNodeHandle(this.video_image);
    setTimeout(() => {
      UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
        this.setState({
          x: pageX,
          y: pageY,
          video_width: width,
          video_height: height,
          videoImage_width: width,
          videoImage_height: height,
          videoImage_x: pageX,
          videoImage_y: pageY,
          video_show: true,
          video_uri: data.playUrl,
          playing_key: data.key
        });
      });
    }, 0);

    this.video.start();
  }
}