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

pages/components/CusVideo.js

@@ -0,0 +1,182 @@
+import React, { Component } from "react";
+import {
+  Platform,
+  Text,
+  View,
+  ImageBackground,
+  Button,
+  Image,
+  TouchableOpacity,
+  StyleSheet
+} from "react-native";
+import { createStackNavigator, createAppContainer } from "react-navigation";
+import Video from "react-native-video";
+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 CusVideo extends React.Component {
+  state = {
+    rate: 1,
+    volume: 1,
+    muted: false,
+    resizeMode: "stretch",
+    duration: 0.0,
+    currentTime: 0.0,
+    paused: true,
+    wheel: false
+  };
+
+  render() {
+    return (
+      <View style={this.props.style}>
+        <Video
+          style={{ flex: 1 }}
+          source={{
+            uri: this.props.uri
+          }}
+          resizeMode={this.state.resizeMode}
+          rate={this.state.rate} //播放速率
+          paused={this.state.paused} //暂停
+          volume={this.state.volume} //调节音量
+          muted={this.state.muted} //控制音频是否静音
+          resizeMode={this.state.resizeMode} //缩放模式
+          onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
+          onLoad={this.onLoad} //加载媒体并准备播放时调用的回调函数。
+          onProgress={this.onProgress} //视频播放过程中每个间隔进度单位调用的回调函数
+          onEnd={this.onEnd} //视频播放结束时的回调函数
+          onAudioBecomingNoisy={this.onAudioBecomingNoisy} //音频变得嘈杂时的回调 - 应暂停视频
+          onAudioFocusChanged={this.onAudioFocusChanged} //音频焦点丢失时的回调 - 如果焦点丢失则暂停
+          repeat={this.state.wheel} //确定在到达结尾时是否重复播放视频。
+        />
+        <View style={[styles.player_controller]}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: "center"
+            }}
+          >
+            {/* 暂停播放按钮 */}
+            <TouchableOpacity
+              //点击事件放在这个组件里才管用
+              style={{
+                justifyContent: "center",
+                width: "100%",
+                height: "100%"
+              }}
+              onPress={() => this.play()}
+            >
+              <Image
+                style={[styles.player_pause_icon]}
+                //source={require("../imgs/player_image_state_pause.png")}
+              />
+            </TouchableOpacity>
+          </View>
+          <View style={{ flex: 3 }}>
+            {/* //左侧当前播放时长 */}
+            <Text style={[styles.player_time]}>
+              {formatTime(this.state.currentTime)}
+            </Text>
+          </View>
+          <View style={{ flex: 7, backgroundColor: "yellow" }}>
+            {/* //中间进度条 */}
+            {/* <SeekBar
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%"
+                }}
+                max={this.state.duration}
+                progress={this.state.currentTime}
+              /> */}
+          </View>
+          <View style={{ flex: 3 }}>
+            {/* //右侧总时长 */}
+            <Text style={[styles.player_time]}>
+              {formatTime(this.state.duration)}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  loadStart() {
+    // alert("准备加载视频");
+  }
+  onLoad = data => {
+    //获取的是秒数
+    this.setState({ duration: data.duration });
+  };
+  onProgress = data => {
+    this.setState({
+      currentTime: data.currentTime
+    });
+  };
+  play() {
+    this.setState({ paused: !this.state.paused });
+    // if (this.state.paused) {
+    //   this.player_icon_index = 1;
+    // } else {
+    //   this.player_icon_index = 0;
+    // }
+  }
+  showToast(params) {
+    // ToastExample.message(params);
+    ToastExample.show(params, ToastExample.SHORT);
+  }
+}
+
+const styles = StyleSheet.create({
+  player_controller: {
+    flexDirection: "row",
+    position: "absolute",
+    width: "100%",
+    height: 50,
+    alignItems: "center",
+    bottom: 0,
+    backgroundColor: "powderblue"
+  },
+  player_pause_icon: {
+    width: "100%",
+    resizeMode: "center",
+    height: "80%",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "red"
+  },
+  player_time: {
+    backgroundColor: "red",
+    fontSize: 30,
+    alignItems: "center",
+    justifyContent: "center",
+    textAlignVertical: "center",
+    textAlign: "center"
+  }
+});
+
+/**
+ * 将秒转换为 分:秒
+ * s int 秒数
+ */
+function formatTime(s) {
+  //计算分钟
+  //算法：将秒数除以60，然后下舍入，既得到分钟数
+  var h;
+  h = Math.floor(s / 60);
+  //计算秒
+  //算法：取得秒%60的余数，既得到秒数
+  s = Math.round(s % 60);
+  //将变量转换为字符串
+  h += "";
+  s += "";
+  //如果只有一位数，前面增加一个0
+  h = h.length == 1 ? "0" + h : h;
+  s = s.length == 1 ? "0" + s : s;
+  return h + ":" + s;
+}

pages/components/ScheduleFlatItem.js

@@ -26,78 +26,80 @@ var height = Dimensions.get("window").height;
 export default class ScheduleFlatItem extends Component<Props> {
   render() {
     return (
-      <View
-        style={{
-          backgroundColor: "white",
-          width: this.props.width,
-          height: this.props.height,
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: 30
-        }}
-      >
+      <TouchableOpacity activeOpacity={1} onPress={this.props.onPress}>
         <View
           style={{
-            width: "95%",
-            height: "80%",
-            flexDirection: "row",
+            backgroundColor: "white",
+            width: this.props.width,
+            height: this.props.height,
             alignItems: "center",
-            justifyContent: "center"
+            justifyContent: "center",
+            borderRadius: 30
           }}
         >
           <View
             style={{
-              flex: 2.5,
-              backgroundColor: this.props.data.typecolor,
               width: "95%",
-              height: "70%",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRadius: 20
-            }}
-          >
-            <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
-          </View>
-          <View style={{ flex: 0.5 }} />
-          <View
-            style={{
-              flex: 10,
-              width: "100%",
-              justifyContent: "center",
-              height: "100%"
-            }}
-          >
-            <Text style={{ textAlign: "left" }}>
-              {this.props.data.videoname}
-            </Text>
-          </View>
-          <View
-            style={{
-              flex: 1,
-              width: "100%",
               height: "80%",
+              flexDirection: "row",
               alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "blue"
+              justifyContent: "center"
             }}
           >
-            <Image style={{ width: 20, height: 20, backgroundColor: "blue" }} />
+            <View
+              style={{
+                flex: 2.5,
+                backgroundColor: this.props.data.typecolor,
+                width: "95%",
+                height: "70%",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: 20
+              }}
+            >
+              <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
+            </View>
+            <View style={{ flex: 0.5 }} />
+            <View
+              style={{
+                flex: 10,
+                width: "100%",
+                justifyContent: "center",
+                height: "100%"
+              }}
+            >
+              <Text style={{ textAlign: "left" }}>
+                {this.props.data.videoname}
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 1,
+                width: "100%",
+                height: "80%",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "blue"
+              }}
+            >
+              <Image
+                style={{ width: 20, height: 20, backgroundColor: "blue" }}
+              />
+            </View>
+            <View style={{ flex: 0.1 }} />
           </View>
-          <View style={{ flex: 0.1 }} />
         </View>
-      </View>
+      </TouchableOpacity>
     );
   }
 }
 /**
 
       使用方法
-    <CourseTitle
-          width={150}
-          height={50}
-          title="学前"
-          backPress={() => this.goBack()}
-          sharedpress={() => alert("点击分享")}
-        />
+      <ScheduleFlatItem
+        width={this.getWindowWidth() * 0.95}
+        height={60}
+        data={data}
+      />
 
  */

pages/components/SchedulePage.js

@@ -23,6 +23,7 @@ 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:
@@ -32,6 +33,20 @@ const instructions = Platform.select({
 
 type Props = {};
 export default class SchedulePage extends BasePage {
+  constructor(props) {
+    super(props);
+    this.state = {
+      videoImg_flex: 1,
+      videoImg_width: "100%",
+      videoImg_height: "100%",
+      video_flex: 0,
+      video_width: "0%",
+      video_height: "0%",
+      video_uri:
+        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+    };
+  }
+
   render() {
     return (
       <View
@@ -46,17 +61,15 @@ export default class SchedulePage extends BasePage {
           <CourseTitle
             width={this.getWindowWidth()}
             title="第12周 爱上幼儿园"
-            // backPress={() => this.goBack()}
-            backPress={() => alert("点击返回")}
+            backPress={() => this.goBack()}
+            // backPress={() => alert("点击返回")}
             sharedpress={() => alert("点击分享")}
           />
         </View>
         <View
           style={{
             flex: 281,
-            width: "100%",
-            justifyContent: "center",
-            alignItems: "center"
+            width: "100%"
           }}
         >
           <Image
@@ -65,9 +78,18 @@ export default class SchedulePage extends BasePage {
                 "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={{
-              flex: 1,
-              width: "100%",
-              height: "100%"
+              flex: this.state.videoImg_flex,
+              width: this.state.videoImg_width,
+              height: this.state.videoImg_height
+            }}
+          />
+          <CusVideo
+            //无法切换视频
+            uri={this.state.video_uri}
+            style={{
+              flex: this.state.video_flex,
+              width: this.state.video_width,
+              height: this.state.video_height
             }}
           />
         </View>
@@ -99,35 +121,71 @@ export default class SchedulePage extends BasePage {
                 typecolor: "#74E0FF",
                 typename: "习惯养成",
                 videoname: "碗里不剩一粒米",
-                videourl: "xxxx"
+                videourl: "碗里不剩一粒米xxxx"
               },
               {
                 key: 2,
                 typecolor: "#FB5B76",
                 typename: "品格礼仪",
                 videoname: "我有很多朋友",
-                videourl: "xxxx"
+                videourl: "我有很多朋友xxxx"
               },
               {
                 key: 3,
                 typecolor: "#EC48E1",
                 typename: "自我保护",
                 videoname: "小猫喵喵叫",
-                videourl: "xxxx"
+                videourl: "小猫喵喵叫xxxx"
               },
               {
                 key: 4,
                 typecolor: "#39D6B9",
                 typename: "亲子游戏",
                 videoname: "安静的睡前游戏-全家人都睡了",
-                videourl: "xxxx"
+                videourl: "安静的睡前游戏xxxx"
               },
               {
                 key: 5,
                 typecolor: "#3397F0",
                 typename: "欢乐音乐",
                 videoname: "小鸡捉虫子",
-                videourl: "xxxx"
+                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: "安静的睡前游戏xxxx"
+              },
+              {
+                key: 15,
+                typecolor: "#3397F0",
+                typename: "欢乐音乐",
+                videoname: "小鸡捉虫子",
+                videourl:
+                  "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
               }
             ]}
           />
@@ -141,7 +199,21 @@ export default class SchedulePage extends BasePage {
         width={this.getWindowWidth() * 0.95}
         height={60}
         data={data}
+        onPress={() => this.aa(data.videourl)}
       />
     );
   }
+
+  aa(url) {
+    alert(url);
+    this.setState({
+      videoImg_flex: 0,
+      videoImg_width: "0%",
+      videoImg_height: "0%",
+      video_flex: 1,
+      video_width: "100%",
+      video_height: "100%",
+      video_uri: url
+    });
+  }
 }