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,
  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 ScheduleFlatItem from "./ScheduleFlatItem";
import CusVideo from "./CusVideo";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
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: "6%",
      video_frame_height: "32%",
      seat_height: "2%",
      flatlist_height: "60%",
      isFull: false,
      playing_key: 0
    };
  }

  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="第12周 爱上幼儿园"
              lefttype={1}
              righttype={1}
              textcolor={"#231F20"}
              backPress={() => this.goBack()}
              // backPress={() => alert("左侧按钮")}
              rightPress={() => alert("右侧按钮")}
            />
          </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.key.toString()}
              horizontal={false}
              data={[
                {
                  key: 1,
                  typecolor: "#74E0FF",
                  typename: "习惯养成",
                  videoname: "碗里不剩一粒米",
                  videourl: "碗里不剩一粒米xxxx"
                },
                {
                  key: 2,
                  typecolor: "#FB5B76",
                  typename: "品格礼仪",
                  videoname: "我有很多朋友",
                  videourl: "我有很多朋友xxxx"
                },
                {
                  key: 3,
                  typecolor: "#EC48E1",
                  typename: "自我保护",
                  videoname: "小猫喵喵叫",
                  videourl: "小猫喵喵叫xxxx"
                },
                {
                  key: 4,
                  typecolor: "#39D6B9",
                  typename: "亲子游戏",
                  videoname: "安静的睡前游戏-全家人都睡了",
                  videourl: "安静的睡前游戏xxxx"
                },
                {
                  key: 5,
                  typecolor: "#3397F0",
                  typename: "欢乐音乐",
                  videoname: "小鸡捉虫子",
                  videourl: "小鸡捉虫子xxxx"
                },
                {
                  key: 11,
                  typecolor: "#74E0FF",
                  typename: "习惯养成",
                  videoname: "碗里不剩一粒米",
                  videourl: "碗里不剩一粒米xxxx"
                },
                {
                  key: 12,
                  typecolor: "#FB5B76",
                  typename: "品格礼仪",
                  videoname: "我有很多朋友",
                  videourl: "我有很多朋友xxxx"
                },
                {
                  key: 13,
                  typecolor: "#EC48E1",
                  typename: "自我保护",
                  videoname: "小猫喵喵叫",
                  videourl: "小猫喵喵叫xxxx"
                },
                {
                  key: 14,
                  typecolor: "#39D6B9",
                  typename: "亲子游戏",
                  videoname: "安静的睡前游戏-全家人都睡了",
                  videourl:
                    "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
                },
                {
                  key: 15,
                  typecolor: "#3397F0",
                  typename: "欢乐音乐",
                  videoname: "小鸡捉虫子",
                  videourl: "http://chimee.org/vod/1.mp4"
                }
              ]}
            />
          </View>
        </View>
        <CusVideo
          show={this.state.video_show}
          uri={this.state.video_uri}
          ref={view => (this.video = view)}
          needback={false}
          videoback={() => alert("videoback")}
          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"
          }}
        />
      </View>
    );
  }
  loadFlatItem(data) {
    return (
      <ScheduleFlatItem
        width={this.getWindowWidth() * 0.9}
        height={50}
        data={data}
        onPress={() => this.changeUrl(data)}
      />
    );
  }
  onError() {
    alert("播放器异常");
  }
  onEnd() {
    alert("播放结束");
    this.video.refreshVideo();
  }
  fullScreenPlayer() {
    if (!this.state.isFull) {
      Orientation.lockToLandscape();
      this.setState({
        // title_height: "0%",
        video_frame_height: "100%",
        // seat_height: "0%",
        // flatlist_height: "0%",
        statusbar_hidden: true,
        isFull: true,
        x: 0,
        y: 0,
        video_width: "100%",
        video_height: "100%"
      });
    } else {
      Orientation.lockToPortrait();
      this.setState({
        // title_height: "6%",
        video_frame_height: "32%",
        // seat_height: "2%",
        // flatlist_height: "60%",
        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.videourl,
          playing_key: data.key
        });
      });
    }, 0);

    this.video.start();
  }
}