|
@@ -30,7 +30,9 @@ export default class CusVideo extends React.Component {
|
|
|
currentTime: 0.0,
|
|
|
paused: false,
|
|
|
wheel: false,
|
|
|
- player_status_icon: require("../images/video/start.png")
|
|
|
+ player_status_icon: require("../images/video/start.png"),
|
|
|
+ isFull: false,
|
|
|
+ needback: this.props.needback
|
|
|
};
|
|
|
|
|
|
render() {
|
|
@@ -64,6 +66,42 @@ export default class CusVideo extends React.Component {
|
|
|
playInBackground={false}
|
|
|
playWhenInactive={true}
|
|
|
/>
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: "row",
|
|
|
+ position: "absolute",
|
|
|
+ width: "100%",
|
|
|
+ height: 50,
|
|
|
+ alignItems: "center",
|
|
|
+ justifyContent: "center"
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flex: 1,
|
|
|
+ alignItems: "center"
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <VideoBack
|
|
|
+ needback={this.state.needback}
|
|
|
+ videoback={this.videoBackClick.bind(this)}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={{ flex: 2 }} />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flex: 9,
|
|
|
+ overflow: "hidden"
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View style={{ flex: 2 }} />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flex: 1,
|
|
|
+ alignItems: "center"
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
<View style={[styles.player_controller]}>
|
|
|
<View
|
|
|
style={{
|
|
@@ -193,12 +231,19 @@ export default class CusVideo extends React.Component {
|
|
|
this.player.seek(progress);
|
|
|
}
|
|
|
presentFullscreenPlayer() {
|
|
|
-
|
|
|
+ if (this.state.isFull) {
|
|
|
+ this.setState({
|
|
|
+ isFull: false,
|
|
|
+ needback: this.props.needback
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ isFull: true,
|
|
|
+ needback: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
this.props.videofullScreenPlayer();
|
|
|
- console.log("currentTime:" + this.state.currentTime);
|
|
|
- setTimeout(() => {
|
|
|
- this.seekbar.setProgress(this.state.currentTime);
|
|
|
- }, 10);
|
|
|
}
|
|
|
touch_up_callback(progress) {
|
|
|
|
|
@@ -214,6 +259,17 @@ export default class CusVideo extends React.Component {
|
|
|
currentTime: 0
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ videoBackClick() {
|
|
|
+
|
|
|
+
|
|
|
+ if (this.state.isFull) {
|
|
|
+
|
|
|
+ this.presentFullscreenPlayer();
|
|
|
+ } else {
|
|
|
+ this.props.videoback();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
@@ -271,3 +327,27 @@ function formatTime(s) {
|
|
|
s = s.length == 1 ? "0" + s : s;
|
|
|
return h + ":" + s;
|
|
|
}
|
|
|
+class VideoBack extends Component {
|
|
|
+ render() {
|
|
|
+ if (this.props.needback) {
|
|
|
+ return (
|
|
|
+ <TouchableOpacity
|
|
|
+
|
|
|
+ style={{
|
|
|
+ justifyContent: "center",
|
|
|
+ width: "100%",
|
|
|
+ height: "100%"
|
|
|
+ }}
|
|
|
+ onPress={() => this.props.videoback()}
|
|
|
+ >
|
|
|
+ <Image
|
|
|
+ style={[styles.player_pause_icon]}
|
|
|
+ source={require("../images/video/back.png")}
|
|
|
+ />
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|