/**
* 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:
"http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8",
title_height: "6%",
video_frame_height: "32%",
seat_height: "2%",
flatlist_height: "60%",
isFull: false
};
}
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={"red"}
// 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://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
}
]}
/>
</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)}
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.videourl)}
/>
);
}
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(url) {
//切换视频并且播放
// alert(url);
const handle = findNodeHandle(this.video_image);
setTimeout(() => {
UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
console.warn(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: url
});
});
}, 0);
this.video.refreshVideo();
this.video.start();
}
}