video

src/common/index.js

@@ -6,5 +6,6 @@ export { default as HeaderBar } from './HeaderBar'
 export { default as CallApp } from './CallApp'
 export { default as Captcha } from './Captcha'
 export { default as ClearableInput } from "./ClearableInput";
+export { default as Loading } from './Loading'
 
 

src/components/video/index.js

@@ -10,6 +10,7 @@ import { Toast } from 'antd-mobile';
 import videojs from 'video.js'
 import 'video.js/dist/video-js.min.css'
 import { Modal } from "antd-mobile";
+import { Loading } from '@/common'
 
 let alert = Modal.alert
 
@@ -31,7 +32,8 @@ class Video extends Component {
         isAuth: true,
         course: null,
         salePrice: null,
-        vCourseId: null
+        vCourseId: null,
+        isLoading: true
     }
 
 
@@ -58,6 +60,10 @@ class Video extends Component {
 
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        console.log(this.video);
+    }
+
 
     componentWillUnmount() {
         if (this.player) {
@@ -90,13 +96,16 @@ class Video extends Component {
                             course: data.data.course,
                             courseId: data.data.course['course_id'],
                             vCourseId: data.data.course['v_course_id'],
-                            title: data.data.course['course_title']
+                            title: data.data.course['course_title'],
+                            isLoading: false
                         }),
                         () => {
                             if (this.lessonAvailable()) {
                                 if (this.hasAuth(this.state.activeIndex)) {
+                                    Promise.resolve().then(() => {
                                         this.initializePlayer()
                                         this.playWithAuth()
+                                    })
                                 } else {
                                     this.getCoursePrice();
                                 }
@@ -205,6 +214,7 @@ class Video extends Component {
         return (
             <div className='play'>
                 <HeaderBar title={this.state.title} arrow={true}/>
+                <Loading isLoading={this.state.isLoading}>
                     <div className="video">
                         <video className={'video-js'} ref={el => this.video = el}>
                             <source src={'/'} type='application/x-mpegURL'/>
@@ -237,6 +247,7 @@ class Video extends Component {
                             >资料</NavLink>
                         </div>
                     </div>
+                </Loading>
                 <Switch>
                     <Redirect exact from={'/play'} to={{
                         pathname: '/play/video',