Merge branch 'master' of http://gogs.efunbox.cn/Rorschach/efunbox-mobile-8

pages/components/CusVideo.js

@@ -27,7 +27,7 @@ export default class CusVideo extends React.Component {
     resizeMode: "stretch",
     duration: 0.0,
     currentTime: 0.0,
-    paused: true,
+    paused: false,
     wheel: false
   };
 
@@ -39,7 +39,12 @@ export default class CusVideo extends React.Component {
           source={{
             uri: this.props.uri
           }}
+          ref={ref => {
+            this.player = ref;
+          }}
+          // poster={this.props.poster}
           resizeMode={this.state.resizeMode}
+          // posterResizeMode={this.state.resizeMode}
           rate={this.state.rate} //播放速率
           paused={this.state.paused} //暂停
           volume={this.state.volume} //调节音量
@@ -52,6 +57,9 @@ export default class CusVideo extends React.Component {
           onAudioBecomingNoisy={this.onAudioBecomingNoisy} //音频变得嘈杂时的回调 - 应暂停视频
           onAudioFocusChanged={this.onAudioFocusChanged} //音频焦点丢失时的回调 - 如果焦点丢失则暂停
           repeat={this.state.wheel} //确定在到达结尾时是否重复播放视频。
+          onError={this.onError} // 当视频不能加载，或出错后的回调函数
+          playInBackground={false} // 当app转到后台运行的时候，播放是否暂停
+          playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
         />
         <View style={[styles.player_controller]}>
           <View
@@ -106,13 +114,22 @@ export default class CusVideo extends React.Component {
               {formatTime(this.state.duration)}
             </Text>
           </View>
+          <TouchableOpacity
+            style={{ flex: 1 }}
+            onPress={() => this.presentFullscreenPlayer()}
+          >
+            <View style={{ flex: 1 }}>
+              {/* //放大按钮 */}
+              <Image style={[styles.player_pause_icon]} />
+            </View>
+          </TouchableOpacity>
         </View>
       </View>
     );
   }
 
   loadStart() {
-    // alert("准备加载视频");
+    // alert("loadStart");
   }
   onLoad = data => {
     //获取的是秒数
@@ -123,6 +140,13 @@ export default class CusVideo extends React.Component {
       currentTime: data.currentTime
     });
   };
+
+  onError() {
+    alert("播放器异常");
+  }
+  onEnd() {
+    alert("播放结束");
+  }
   play() {
     if (this.state.paused) {
       this.start();
@@ -142,6 +166,11 @@ export default class CusVideo extends React.Component {
     // ToastExample.message(params);
     ToastExample.show(params, ToastExample.SHORT);
   }
+  presentFullscreenPlayer() {
+    // alert("点击调用全屏");
+    this.props.videofullScreenPlayer();
+    // this.player.presentFullscreenPlayer();
+  }
 
   refreshVideo() {
     this.setState({
@@ -158,8 +187,7 @@ const styles = StyleSheet.create({
     width: "100%",
     height: 50,
     alignItems: "center",
-    bottom: 0,
-    backgroundColor: "powderblue"
+    bottom: 0
   },
   player_pause_icon: {
     width: "100%",
@@ -170,8 +198,8 @@ const styles = StyleSheet.create({
     backgroundColor: "blue"
   },
   player_time: {
-    backgroundColor: "red",
-    fontSize: 30,
+    fontSize: 18,
+    color: "white",
     alignItems: "center",
     justifyContent: "center",
     textAlignVertical: "center",

pages/components/PersonalInfo.js

@@ -30,16 +30,19 @@ import PersonalInfoDialog from "./PersonalInfoDialog";
 type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
-    modalVisible: false
+    nickName: "初始昵称",
+    schoolName: "未设置"
   };
-
-  setModalVisible(visible) {
-    this.setState({ modalVisible: visible });
+  updateState(data) {
+    this.setState(data);
   }
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <PersonalInfoDialog ref={view => (this.dialog = view)} />
+        <PersonalInfoDialog
+          ref={view => (this.dialog = view)}
+          updateParentState={this.updateState.bind(this)}
+        />
         <StatusBar
           backgroundColor={"transparent"}
           barStyle={"dark-content"}
@@ -70,7 +73,7 @@ export default class PersonalInfo extends BasePage {
                 backPress={() => this.goBack()}
                 lefttype={2}
                 textcolor={"white"}
-                backPress={() => alert("点击左侧")}
+                backPress={() => this.goBack()}
               />
             </View>
 
@@ -252,7 +255,7 @@ export default class PersonalInfo extends BasePage {
             {this.choseheadericon(1)}
           </View>
 
-          <Text style={styles.item_text}>昵称</Text>
+          <Text style={styles.item_text}>{this.state.nickName}</Text>
           <View
             style={{
               flex: 2,
@@ -335,7 +338,7 @@ export default class PersonalInfo extends BasePage {
             {this.choseheadericon(4)}
           </View>
 
-          <Text style={styles.item_text}>我的学校</Text>
+          <Text style={styles.item_text}>{this.state.schoolName}</Text>
           <View
             style={{
               flex: 2,
@@ -436,7 +439,8 @@ export default class PersonalInfo extends BasePage {
         alert("点击头像");
         break;
       case 1:
-        this.modalDialog();
+        this.dialog.setInfo("修改昵称", "昵称");
+        this.dialog.setModalVisible(true, 1);
         break;
       case 2:
         alert("生日");
@@ -445,7 +449,8 @@ export default class PersonalInfo extends BasePage {
         alert("所在地区");
         break;
       case 4:
-        alert("我的学校");
+        this.dialog.setInfo("我的学校", "学校名称");
+        this.dialog.setModalVisible(true, 2);
         break;
       case 5:
         alert("我的年级");
@@ -456,10 +461,6 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
-
-  modalDialog() {
-    this.dialog.setModalVisible(true);
-  }
 }
 
 const styles = StyleSheet.create({

pages/components/PersonalInfoDialog.js

@@ -26,12 +26,62 @@ import {
 type Props = {};
 export default class PersonalInfoDialog extends Component<Props> {
   state = {
-    modalVisible: false
+    modalVisible: false,
+    title: "title",
+    placeholder: "",
+    touchcolor: "white",
+    touchtextcolor: "#58A8FA",
+    touch_cancel_color: "white",
+    touch_cancel_textcolor: "#58A8FA",
+    input_text: "",
+    updateType: 0 //1修改昵称,2修改学校名称
   };
 
-  setModalVisible(visible) {
-    this.setState({ modalVisible: visible });
+  setModalVisible(visible, type) {
+    this.setState({ modalVisible: visible, updateType: type });
   }
+  setInfo(mytitle, holder) {
+    this.setState({
+      title: mytitle,
+      placeholder: holder
+    });
+  }
+
+  touchDown() {
+    this.setState({
+      touchcolor: "#58A8FA",
+      touchtextcolor: "white"
+    });
+  }
+  touchUp() {
+    this.setState({
+      touchcolor: "white",
+      touchtextcolor: "#58A8FA"
+    });
+  }
+  touchCancelDown() {
+    this.setState({
+      touch_cancel_color: "#58A8FA",
+      touch_cancel_textcolor: "white"
+    });
+  }
+  touchCancelUp() {
+    this.setState({
+      touch_cancel_color: "white",
+      touch_cancel_textcolor: "#58A8FA"
+    });
+  }
+  setParentState() {
+    let data;
+    if (this.state.updateType == 1) {
+      data = { nickName: this.state.input_text };
+    } else if (this.state.updateType == 2) {
+      data = { schoolName: this.state.input_text };
+    }
+    this.props.updateParentState(data);
+    this.setModalVisible(false);
+  }
+
   render() {
     return (
       <Modal
@@ -76,8 +126,15 @@ export default class PersonalInfoDialog extends Component<Props> {
                   justifyContent: "center"
                 }}
               >
-                <Text style={{ flex: 1, textAlignVertical: "center" }}>
-                  修改昵称
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlignVertical: "center",
+                    fontSize: 25,
+                    color: "black"
+                  }}
+                >
+                  {this.state.title}
                 </Text>
               </View>
               <View
@@ -88,19 +145,90 @@ export default class PersonalInfoDialog extends Component<Props> {
                 }}
               >
                 <TextInput
-                  placeholder="昵称"
+                  placeholder={this.state.placeholder}
                   editable={true} //是否可编辑
                   style={{
                     width: "90%",
                     height: "90%",
                     borderColor: "black",
                     borderWidth: 0,
-                    marginLeft: 5
+                    marginLeft: 5,
+                    fontSize: 20
+                  }}
+                  onChangeText={text => this.setState({ input_text: text })}
+                />
+              </View>
+              <View
+                style={{
+                  flex: 0.8,
+                  flexDirection: "row",
+                  alignItems: "center"
+                }}
+              >
+                <View
+                  style={{
+                    flex: 4
                   }}
-                  //    onChangeText={this._onChangeText} //输入框改变触发的函数
                 />
+                <View
+                  style={{
+                    flex: 2,
+                    backgroundColor: this.state.touchcolor,
+                    height: "100%",
+                    borderRadius: 30
+                  }}
+                >
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPressIn={() => this.touchDown()}
+                    onPressOut={() => this.touchUp()}
+                    onPress={() => {
+                      this.setParentState();
+                    }}
+                  >
+                    <Text
+                      style={{
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 25,
+                        borderRadius: 30,
+                        color: this.state.touchtextcolor
+                      }}
+                    >
+                      确定
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+                <View style={{ flex: 0.5 }} />
+                <View
+                  style={{
+                    flex: 2,
+                    backgroundColor: this.state.touch_cancel_color,
+                    height: "100%",
+                    borderRadius: 30
+                  }}
+                >
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPressIn={() => this.touchCancelDown()}
+                    onPressOut={() => this.touchCancelUp()}
+                    onPress={() => this.setModalVisible(false)}
+                  >
+                    <Text
+                      style={{
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 25,
+                        color: this.state.touch_cancel_textcolor
+                      }}
+                    >
+                      取消
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+                <View style={{ flex: 0.5 }} />
               </View>
-              <View style={{ flex: 1, backgroundColor: "blue" }} />
+              <View style={{ flex: 0.2 }} />
             </View>
           </View>
         </View>

pages/components/SchedulePage.js

@@ -44,7 +44,7 @@ export default class SchedulePage extends BasePage {
       video_width: "0%",
       video_height: "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"
+        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
     };
   }
 
@@ -70,7 +70,12 @@ export default class SchedulePage extends BasePage {
             alignItems: "center"
           }}
         >
-          <View style={{ flex: 50, backgroundColor: "white" }}>
+          <View
+            style={{
+              flex: 50,
+              backgroundColor: "white"
+            }}
+          >
             <CourseTitle
               width={this.getWindowWidth()}
               title="第12周 爱上幼儿园"
@@ -102,6 +107,7 @@ export default class SchedulePage extends BasePage {
             <CusVideo
               uri={this.state.video_uri}
               ref={view => (this.video = view)}
+              videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
               style={{
                 flex: this.state.video_flex,
                 width: this.state.video_width,
@@ -217,12 +223,19 @@ export default class SchedulePage extends BasePage {
         width={this.getWindowWidth() * 0.9}
         height={50}
         data={data}
-        onPress={() => this.aa(data.videourl)}
+        onPress={() => this.changeUrl(data.videourl)}
       />
     );
   }
-
-  aa(url) {
+  fullScreenPlayer() {
+    alert("宽" + this.getWindowWidth());
+    alert("高：" + this.getWindowHeight());
+    this.setState({
+      video_width: this.getWindowHeight(),
+      video_height: 1111
+    });
+  }
+  changeUrl(url) {
     //切换视频并且播放
     alert(url);
     this.setState({