Skip to content

M
mr-julyedu
Commit 873ae3df by zhanghaozhe
Options

video

parent 02660017
Showing with 253 additions and 37 deletions
src/components/video/datum-catalog/index.js
......@@ -16,12 +16,13 @@ class DatumCatalog extends Component {
}
render() {
const {datum} = this.props
return (
<div className='datum-catalog'>
<p className='prompt'>课程资料请到PC端播放页下载</p>
<Accordion>
{
this.props.datum.map((item, index) => {
datum && datum.length && datum.map((item, index) => {
return (
<Accordion.Panel header={item.dir_name} key={index}>
{
......
src/components/video/index.js
import React, { Component } from 'react';
import HeaderBar from '@/common/HeaderBar'
import './video.scss'
import { NavLink, Route } from 'react-router-dom';
import { http, api } from '@/utils'
import { NavLink, Route, Redirect, Switch } from 'react-router-dom';
import { http, api, getParam } from '@/utils'
import Recommendation from './recommendation'
import VideoCatalog from './video-catalog'
import DatumCatalog from './datum-catalog'
import { Toast } from 'antd-mobile';
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
// import 'video.scss'
import { Modal } from "antd-mobile";
let alert = Modal.alert
class Video extends Component {
video;
video
player
courseID
state = {
title: '视频',
courseId: 140,
courseId: null,
video_catalog: [],
datum: []
datum: [],
currentVideoSrc: '',
activeIndex: 0,
isAuth: true,
course: null,
salePrice: null
}
componentDidMount() {
this.courseID = getParam('id')
this.setState({
courseId: this.courseID
})
this.getVideoCatalog()
this.getDatumCatalog()
}
initializePlayer = () => {
window.HELP_IMPROVE_VIDEOJS = false;
videojs(this.video, {
this.player = videojs(this.video, {
controls: true,
autoplay: true,
preload: 'auto',
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
}, function () {
this.log.debug()
errorDisplay: false
})
this.player.enableTouchActivity()
}
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
handleClick = index => {
if (this.hasAuth()) {
this.setPlayerSrc(this.state.video_catalog[index]['play_url'])
this.playVideo()
}
this.setState({
activeIndex: index
})
this.getVideoCatalog()
this.getDatumCatalog()
}
getVideoCatalog = () => {
http.get(`${api.home}/m/course/play/40`)
http.get(`${api.home}/m/course/play/${this.courseID}`)
.then(res => {
const data = res.data
if (data.code === 200) {
this.setState({
video_catalog: data.data.lessons
})
this.setState(
state => ({
video_catalog: data.data['lessons'],
currentVideoSrc: data.data['lessons'][state.activeIndex]['play_url'],
course: data.data.course,
courseId: data.data.course['course_id']
}),
() => {
if (this.lessonAvailable()) {
if (this.hasAuth(this.state.activeIndex)) {
this.initializePlayer()
this.playWithAuth()
} else {
this.getCoursePrice();
}
} else {
alert('暂无视频', '', [{
text: 'OK',
onPress: () => {
this.props.history.push('/')
}
}])
}
}
)
} else {
Toast.info(data.msg)
}
})
}
setPlayerSrc = src => {
this.player.src({
src,
type: 'application/x-mpegURL'
})
}
playVideo = () => {
this.player.play()
}
getDatumCatalog() {
http.get(`${api.home}/m/course/data/40`)
http.get(`${api.home}/m/course/data/${this.courseID}`)
.then(res => {
const data = res.data
if (data.code === 200) {
......@@ -76,16 +141,84 @@ class Video extends Component {
})
}
lessonAvailable = () => {
const {video_catalog, activeIndex} = this.state
return video_catalog[activeIndex]['video_size'] !== 0
}
getCoursePrice = () => {
http.get(`${api.home}/sys/course/price/${this.state.courseId}`)
.then(res => {
const {data} = res
if (data.code === 200) {
this.setState({
salePrice: data.data['sale_price']
})
}
})
}
playWithAuth = () => {
const {video_catalog, activeIndex} = this.state
if (this.hasAuth()) {
this.setPlayerSrc(video_catalog[activeIndex]['play_url'])
}
}
hasAuth = (index) => {
const {course, video_catalog, activeIndex} = this.state
let lesson = video_catalog[activeIndex]
if (!lesson['is_free']) {
if (course['is_audition']) {
this.setState({
isAuth: true
})
return true
} else {
if (lesson['video_auth']) {
this.setState({
isAuth: true
})
return true
}
this.setState({
isAuth: false
})
return false
}
}
this.setState({
isAuth: true
})
return true
}
render() {
let {match} = this.props
const {video_catalog, activeIndex, isAuth, salePrice} = this.state
return (
<div className='play'>
<HeaderBar title={this.state.title}/>
<div className="video">
<video className={'video-js'} ref={el => this.video = el}>
<source src='/v2/ts/40/191/175d6e5a.m3u8' type='application/x-mpegURL'/>
<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 className='tab'>
<div>
......@@ -101,15 +234,23 @@ class Video extends Component {
>资料</NavLink>
</div>
</div>
{/*<Route path={`${match.path}/video`} render={props => {
return <VideoCatalog videoCatalog={this.state.video_catalog} {...props}/>
}}/>
<Route path={`${match.path}/datum`} render={props => {
return <DatumCatalog {...props} datum={this.state.datum}/>
}}/>
<Switch>
<Redirect exact from={'/play'} to={'/play/video'}/>
<Route path={`${match.path}/video`} render={props => {
return <VideoCatalog
activeIndex={this.state.activeIndex}
handleClick={this.handleClick}
videoCatalog={this.state.video_catalog}
{...props}/>
}}/>
<Route path={`${match.path}/datum`} render={props => {
return <DatumCatalog {...props} datum={this.state.datum}/>
}}/>
</Switch>
<Route render={props => {
return <Recommendation {...props} courseId={this.state.courseId}/>
}}/>*/}
return this.state.courseId ? <Recommendation {...props} courseId={this.state.courseId}/>
: null
}}/>
</div>
);
}
......
src/components/video/recommendation/index.js
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import './recommendation.scss'
import { http, api } from '@/utils'
import { Toast } from "antd-mobile";
......@@ -17,12 +17,14 @@ const Bottom = ({item}) => {
class Recommendation extends Component {
class Recommendation extends PureComponent {
state = {
num: 10,
list: []
list: [],
courseId: null
}
componentDidMount() {
http.get(`${api.home}/m/play/recommend_course/${this.props.courseId}?num=${this.state.num}`)
.then(res => {
......@@ -39,6 +41,7 @@ class Recommendation extends Component {
})
}
handleClick = id => {
console.log(id)
}
......
src/components/video/video-catalog/index.js
......@@ -5,14 +5,21 @@ import classnames from 'classnames'
class VideoCatalog extends Component {
handleClick = (i) => {
this.props.handleClick(i)
}
render() {
return (
<div className='video-catalog'>
<ul>
{
this.props.videoCatalog.map(item => {
this.props.videoCatalog.map((item, index) => {
return (
<li key={item.id}>
<li key={item.id}
className={classnames({active: this.props.activeIndex === index})}
onClick={this.handleClick.bind(this, index)}
>
<span className="title">{item.name}</span>
<span className='duration'>{item.duration}</span>
<i className={classnames(`iconfont`,
......
src/components/video/video.scss
......@@ -5,6 +5,66 @@ $tabHeight: 44px;
width: 100%;
height: 215px;
background-color: $black;
position: relative;
.video-js {
width: 100%;
height: 100%;
.vjs-big-play-button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.purchase-box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.hint {
font-size: $font_14;
color: $white;
margin-bottom: 20px;
}
@mixin button{
display: block;
-webkit-appearance: none;
outline: none;
border: none;
background-color: transparent;
border-radius: 5px;
line-height: 30px;
font-size: 13px;
padding: 0 9px;
}
.btns {
width: 100%;
padding: 0 60px;
display: flex;
justify-content: space-around;
}
.purchase-class{
@include button;
background-color: $white;
color: $color_FF4000;
}
.purchase-episode{
@include button;
background-color: $bg_FF4000;
color: $white;
}
}
video {
width: 100%;
......@@ -35,7 +95,10 @@ $tabHeight: 44px;
.active {
color: $active;
border-bottom: 1px solid $active;
.iconiconfront-74 {
color: $color_555;
}
}
}
\ No newline at end of file
src/utils/proxy-config.js
......@@ -14,7 +14,7 @@ const config = {
v2: {
development: '/v2',
test: 'https://v2.julyedu.com',
production: 'https://search.julyedu.com',
production: 'https://v2.julyedu.com',
proxy: {
secure: false,
}
......
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