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)) {
-                                    this.initializePlayer()
-                                    this.playWithAuth()
+                                    Promise.resolve().then(() => {
+                                        this.initializePlayer()
+                                        this.playWithAuth()
+                                    })
                                 } else {
                                     this.getCoursePrice();
                                 }
@@ -205,38 +214,40 @@ class Video extends Component {
         return (
             <div className='play'>
                 <HeaderBar title={this.state.title} arrow={true}/>
-                <div className="video">
-                    <video className={'video-js'} ref={el => this.video = el}>
-                        <source src={'/'} type='application/x-mpegURL'/>
-                    </video>
-                    {
-                        !isAuth && (
-                            <div className="purchase-box">
-                                <div className='hint'>您尚未购买该课时，请购买后学习。</div>
-                                <div className='btns'>
-                                    <button type='button' className='purchase-class'>¥{salePrice} 购买课程</button>
-                                    <button type='button'
-                                            className='purchase-episode'>¥{video_catalog.length && video_catalog[activeIndex]['class_price']} 购买单集
-                                    </button>
+                <Loading isLoading={this.state.isLoading}>
+                    <div className="video">
+                        <video className={'video-js'} ref={el => this.video = el}>
+                            <source src={'/'} type='application/x-mpegURL'/>
+                        </video>
+                        {
+                            !isAuth && (
+                                <div className="purchase-box">
+                                    <div className='hint'>您尚未购买该课时，请购买后学习。</div>
+                                    <div className='btns'>
+                                        <button type='button' className='purchase-class'>¥{salePrice} 购买课程</button>
+                                        <button type='button'
+                                                className='purchase-episode'>¥{video_catalog.length && video_catalog[activeIndex]['class_price']} 购买单集
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                        )
-                    }
-                </div>
-                <div className='tab'>
-                    <div>
-                        <NavLink to={`${match.url}/video`}
-                                 replace
-                                 activeClassName='active'
-                        >视频</NavLink>
+                            )
+                        }
                     </div>
-                    <div>
-                        <NavLink to={`${match.url}/datum`}
-                                 replace
-                                 activeClassName='active'
-                        >资料</NavLink>
+                    <div className='tab'>
+                        <div>
+                            <NavLink to={`${match.url}/video`}
+                                     replace
+                                     activeClassName='active'
+                            >视频</NavLink>
+                        </div>
+                        <div>
+                            <NavLink to={`${match.url}/datum`}
+                                     replace
+                                     activeClassName='active'
+                            >资料</NavLink>
+                        </div>
                     </div>
-                </div>
+                </Loading>
                 <Switch>
                     <Redirect exact from={'/play'} to={{
                         pathname: '/play/video',