播放样式 选择视频

src/App.js

@@ -41,8 +41,6 @@ class App extends Component {
         //平台信息
         cookie.set('plat', '5', {domain: '.julyedu.com'})
 
-        console.log(this.props.location);
-
         this.props.startFetchUser()
         http.get(`${API.home}/m/user_info`).then(res => {
             this.props.setCurrentUser(this.transformUser(res))

src/components/detail/index.js

@@ -283,7 +283,6 @@ class Detail extends Component {
     }
     // 点击子组件单集购买按钮
     toSingleset = (item) => {
-        console.log(this.props);
         const {user} = this.props
         const uid = user && user.data && user.data.uid
         if (!uid) {
@@ -415,7 +414,6 @@ class Detail extends Component {
 
     render() {
         const { course: { course_info={} }, barInfo, singleBox, singleType } = this.state;
-        console.log(course_info);
         let courseInfo = '',
             service = '',
             number = 0,

src/components/detail/single/index.js

@@ -104,6 +104,7 @@ class Single extends Component {
                 http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
                     if (res.data.errno === 0) {
                         const data = res.data.data;
+
                         function onBridgeReady() {
                             WeixinJSBridge.invoke(
                                 'getBrandWCPayRequest', {
@@ -163,6 +164,7 @@ class Single extends Component {
                                 }
                             )
                         }
+
                         if (typeof WeixinJSBridge == "undefined") {
                             if (document.addEventListener) {
                                 document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
@@ -184,9 +186,9 @@ class Single extends Component {
     // 支付完成之后获取状态
     payCallback = () => {
         const _this = this;
-        if(!getParam('oid')) {
+        if (!getParam('oid')) {
             return;
-        }else{
+        } else {
             _this.intervalPayStatus = setInterval(function () {
                 http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
                     if (res.data.errno === 401) {
@@ -301,7 +303,7 @@ class Single extends Component {
     }
 
     render() {
-        const { showSingleBox } = this.state;
+        const {showSingleBox} = this.state;
         if (this.state.endTime) {
             let date = this.state.endTime * 1000
             let now = Date.now()
@@ -317,53 +319,46 @@ class Single extends Component {
                 })
             }, 1000)
         }
-        const { singleType } = this.props;
-        console.log(this.state.singleBox);
+        const {singleType} = this.props;
         return (
+            singleType === 1 &&
             <div>
-                
-                 
-                    <div className='popup-box'>
-                        {
-                            singleType === 1 &&
-                            <div className='content singleset-payment'>
-                                <div className='price-box'>
-                                    <span>实付款：</span>
-                                    <p>{this.props.data.class_price}元</p>
-                                </div>
-                                <div className='course-info'>
-                                    <p className='text-overflow-1'><span>课程：</span>
-                                        {this.props.title}
-                                    </p>
-                                    <p className='text-overflow-1'><span>课时：</span>
-                                        {this.props.data.name}
-                                    </p>
-                                </div>
-                                <div className='payment-type'>
-                                    <label>支付方式：</label>
-                                    {
-                                        !browser.isWeixin &&
-                                        <p onClick={this.check.bind(this, '1')}>
-                                            <i className='iconfont iconalipay'></i>
-                                            <span>支付宝</span>
-                                            <i className={`iconfont icondanseshixintubiao-5 redio ${this.state.payType === '1' ? 'redioed' : ''}`}></i>
-                                        </p>
-                                    }
+                <div className='popup-box'>
+                    <div className='content singleset-payment'>
+                        <div className='price-box'>
+                            <span>实付款：</span>
+                            <p>{this.props.data.class_price}元</p>
+                        </div>
+                        <div className='course-info'>
+                            <p className='text-overflow-1'><span>课程：</span>
+                                {this.props.title}
+                            </p>
+                            <p className='text-overflow-1'><span>课时：</span>
+                                {this.props.data.name}
+                            </p>
+                        </div>
+                        <div className='payment-type'>
+                            <label>支付方式：</label>
+                            {
+                                !browser.isWeixin &&
+                                <p onClick={this.check.bind(this, '1')}>
+                                    <i className='iconfont iconalipay'></i>
+                                    <span>支付宝</span>
+                                    <i className={`iconfont icondanseshixintubiao-5 redio ${this.state.payType === '1' ? 'redioed' : ''}`}></i>
+                                </p>
+                            }
 
-                                    <p onClick={this.check.bind(this, '0')}>
-                                        <i className='iconfont iconweixinzhifu buy'></i>
-                                        <span>微信支付</span>
-                                        <i className={`iconfont icondanseshixintubiao-5 redio ${this.state.payType === '0' ? 'redioed' : ''}`}></i>
-                                    </p>
-                                </div>
-                                <div className='btn btn-18B4ED' onClick={this.toBuy}>确认购买</div>
-                            </div>
-                        }
-                    
-                
-                        <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
+                            <p onClick={this.check.bind(this, '0')}>
+                                <i className='iconfont iconweixinzhifu buy'></i>
+                                <span>微信支付</span>
+                                <i className={`iconfont icondanseshixintubiao-5 redio ${this.state.payType === '0' ? 'redioed' : ''}`}></i>
+                            </p>
+                        </div>
+                        <div className='btn btn-18B4ED' onClick={this.toBuy}>确认购买</div>
                     </div>
-                
+                    <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
+                </div>
+
             </div>
 
         );

src/components/video/CustomPlayButton/index.js

+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component')
+const Button = videojs.getComponent('Button')
+
+class CustomPlayButtonCover extends Component {
+    createEl() {
+        return super.createEl('div', {
+            className: 'vjs-custom-play-button-cover'
+        })
+    }
+
+    dispose() {
+        this.el_ && (this.el_ = null)
+    }
+}
+
+class CustomPlayButton extends Button {
+    constructor(player, options) {
+        super(player, options)
+        this.on('tap', this.tap)
+    }
+
+    createEl() {
+        return super.createEl('button', {
+            className: 'vjs-custom-play-button'
+        }, {
+            type: 'button'
+        })
+    }
+
+    tap() {
+        this.player_.play()
+    }
+
+    dispose() {
+        if (this.el_) {
+            this.off('tap', this.tap)
+            this.el_ = null
+        }
+    }
+}
+
+
+Component.registerComponent('CustomPlayButton', CustomPlayButton)
+
+CustomPlayButtonCover.prototype.options_ = {
+    children: [
+        'CustomPlayButton'
+    ]
+}
+
+Component.registerComponent('CustomPlayButtonCover', CustomPlayButtonCover)
\ No newline at end of file

src/components/video/index.js

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import HeaderBar from '@/common/HeaderBar'
 import './video.scss'
-import {NavLink, Route, Redirect, Switch, Link} from 'react-router-dom'
-import {http, getParam} from '@/utils'
+import { NavLink, Route, Redirect, Switch, Link } from 'react-router-dom'
+import { http, getParam } from '@/utils'
 import Recommendation from './recommendation'
 import VideoCatalog from './video-catalog'
 import DatumCatalog from './datum-catalog'
-import {Toast} from 'antd-mobile'
+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'
-import {connect} from "react-redux"
+import { Modal } from "antd-mobile"
+import { Loading } from '@/common'
+import { connect } from "react-redux"
 import jsCookie from 'js-cookie'
 import io from 'socket.io-client'
 import Single from "@/components/detail/single";
+import './CustomPlayButton'
 
 let alert = Modal.alert
 
@@ -58,7 +59,6 @@ function ProgressShareModal(props) {
     )
 }
 
-
 class Video extends Component {
 
     video   //video element
@@ -262,7 +262,7 @@ class Video extends Component {
         this.player = videojs(this.video, {
             controls: true,
             preload: 'auto',
-            bigPlayButton: true,
+            bigPlayButton: false,
             textTrackDisplay: false,
             posterImage: false,
             errorDisplay: false,
@@ -271,6 +271,7 @@ class Video extends Component {
                 pictureInPictureToggle: false
             }
         })
+        this.player.addChild('CustomPlayButtonCover')
         this.player.on('ready', () => {
             this.recordSocket.emit('load', this.recordUserInfo())
         })
@@ -310,7 +311,6 @@ class Video extends Component {
     }
 
     selectVideo = index => {
-
         if (index === this.state.activeIndex) {
             return
         }
@@ -321,7 +321,7 @@ class Video extends Component {
                 activeIndex: index
             },
             () => {
-                if (this.hasAuth()) {
+                if (this.hasAuth(this.state.activeIndex)) {
                     this.setPlayerSrc(this.state.videoList[index]['play_url'])
                     this.sendLastRecord()
                     this.playVideo()
@@ -332,6 +332,9 @@ class Video extends Component {
         )
     }
 
+    getLastVideoIndex = lastIndex => {
+        return this.state.videoList.findIndex(item => item.id == lastIndex)
+    }
 
     getVideoList = () => {
         let url = ''
@@ -356,29 +359,7 @@ class Video extends Component {
                             title: data.data.course['course_title'],
                             isLoading: false
                         }),
-                        () => {
-                            if (this.state.course.is_aist) {
-                                this.setupWS()
-                                this.setupTimer()
-                            }
-                            if (this.lessonAvailable()) {
-                                if (this.hasAuth()) {
-                                    Promise.resolve().then(() => {
-                                        this.initializePlayer()
-                                        this.playWithAuth()
-                                    })
-                                } else {
-                                    this.getCoursePrice();
-                                }
-                            } else {
-                                alert('暂无视频', '', [{
-                                    text: 'OK',
-                                    onPress: () => {
-                                        this.props.history.push('/')
-                                    }
-                                }])
-                            }
-                        }
+                        this.playSetup
                     )
                 } else {
                     Toast.info(data.msg)
@@ -386,6 +367,37 @@ class Video extends Component {
             })
     }
 
+    playSetup = () => {
+        if (this.state.course.is_aist) {
+            this.setupWS()
+            this.setupTimer()
+        }
+        let index = this.getLastVideoIndex(this.state.course.last_video_id)
+        index = index >= 0 ? index : 0
+        this.setState({
+            activeIndex: index
+        }, () => {
+            if (this.lessonAvailable(index)) {
+                if (this.hasAuth(index)) {
+                    Promise.resolve().then(() => {
+                        this.initializePlayer()
+                        this.playWithAuth()
+                    })
+                } else {
+                    this.getCoursePrice();
+                }
+            } else {
+                alert('暂无视频', '', [{
+                    text: 'OK',
+                    onPress: () => {
+                        this.props.history.push('/')
+                    }
+                }])
+            }
+        })
+
+    }
+
     setPlayerSrc = src => {
         if (!this.player) {
             this.initializePlayer()
@@ -417,13 +429,8 @@ class Video extends Component {
             })
     }
 
-    lessonAvailable = () => {
-        let {videoList, course} = this.state
-        let videoIndex = videoList.findIndex(item => item.id == course.last_video_id)
-        this.setState({
-            activeIndex: videoIndex
-        })
-        return videoList[videoIndex]['video_size'] !== 0
+    lessonAvailable = index => {
+        return this.state.videoList[index]['video_size'] !== 0
     }
 
     getCoursePrice = () => {
@@ -441,19 +448,15 @@ class Video extends Component {
     playWithAuth = () => {
         const {videoList, activeIndex} = this.state
 
-        if (this.hasAuth()) {
+        if (this.hasAuth(activeIndex)) {
             this.setPlayerSrc(videoList[activeIndex]['play_url'])
         }
     }
 
-    hasAuth = () => {
-        const {course, videoList} = this.state
+    hasAuth = index => {
+        const {videoList} = this.state
 
-        let videoIndex = videoList.findIndex(item => item.id == course.last_video_id)
-        this.setState({
-            activeIndex: videoIndex
-        })
-        let lesson = videoList[videoIndex]
+        let lesson = videoList[index]
 
         if (lesson['video_auth']) {
             this.setState({

src/components/video/video-catalog/video-catalog.scss

@@ -9,12 +9,9 @@
 
 
         &.active {
-            .title, .duration {
-                color: $active;
-            }
-
             .video-title {
                 background-color: #F5FBFF;
+                color: $active;
             }
             .exercise{
                 border-top: 1px solid #E7EAF1;
@@ -73,4 +70,8 @@
         float: right;
     }
 
+
+    .iconplay_hovericon{
+        color: $active;
+    }
 }
\ No newline at end of file