Skip to content

M
mr-julyedu
Commit b02c4e5a by zhanghaozhe
Options

播放样式 选择视频

parent d0b782ad
Showing with 134 additions and 57 deletions
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,15 +319,11 @@ 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>
......@@ -358,9 +356,6 @@ class Single extends Component {
</div>
<div className='btn btn-18B4ED' onClick={this.toBuy}>确认购买</div>
</div>
}
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
......
src/components/video/CustomPlayButton/index.js 0 → 100644
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,13 +359,26 @@ class Video extends Component {
title: data.data.course['course_title'],
isLoading: false
}),
() => {
this.playSetup
)
} else {
Toast.info(data.msg)
}
})
}
playSetup = () => {
if (this.state.course.is_aist) {
this.setupWS()
this.setupTimer()
}
if (this.lessonAvailable()) {
if (this.hasAuth()) {
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()
......@@ -378,12 +394,8 @@ class Video extends Component {
}
}])
}
}
)
} else {
Toast.info(data.msg)
}
})
}
setPlayerSrc = src => {
......@@ -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
src/components/video/video.scss
......@@ -11,12 +11,39 @@ $tabHeight: 44px;
width: 100%;
height: 100%;
.vjs-big-play-button {
.vjs-custom-play-button-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
.vjs-custom-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #09f;
border: none;
width: 27px;
height: 27px;
background: url("./images/play.png") no-repeat;
background-size: contain;
}
}
&.vjs-has-started{
.vjs-custom-play-button-cover{
bottom: 2.9em;
}
}
&.vjs-playing {
.vjs-custom-play-button-cover {
display: none;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment