Skip to content

M
mr-julyedu
Commit 783627e3 by zhanghaozhe
Options

video

parent 5fb385f7
Showing with 82 additions and 52 deletions
src/.eslintignore 0 → 100644
src/
\ No newline at end of file
src/components/video/index.js
......@@ -17,7 +17,6 @@ import Single from "src/components/detail/single";
import SingleSuccess from "../detail/single/singleSuccess";
import './CustomPlayButton'
let alert = Modal.alert
function ProgressShareModal(props) {
......@@ -64,6 +63,8 @@ class Video extends Component {
video //video element
player //video player instance
currentVideoTimer
currentVideoExpireTime
courseID
......@@ -75,8 +76,6 @@ class Video extends Component {
previousPlaybackRate = 1
currentPlaybackRate = 1
reconnect = true
// timeEnough = false
recordSocket
recordTimer
......@@ -89,7 +88,6 @@ class Video extends Component {
courseId: null,
videoList: [],
datum: [],
currentVideoSrc: '',
activeIndex: 0,
isAuth: true,
course: {}, // course.course_id 为 0 或 '' 时 为免费课程
......@@ -107,7 +105,8 @@ class Video extends Component {
showLimitFreePopup: false,
limitFreePopup: {},
isShowNeverShowPopupOption: false, //限时免费课程 播放结束后是否显示"不再显示此弹框"选项
limitFreePopupVideos: JSON.parse(localStorage.getItem('limit-free-popup-videos'))
limitFreePopupVideos: JSON.parse(localStorage.getItem('limit-free-popup-videos')),
currentVideoExpireTime: '',
}
......@@ -123,9 +122,9 @@ class Video extends Component {
return
}
this.setState({
courseId: this.courseID
courseId: this.courseID,
})
const {location, location: {state = {}}} = this.props;
const {location: {state = {}}} = this.props;
if (state.oid) {
this.check(state.oid);
}
......@@ -157,7 +156,7 @@ class Video extends Component {
this.setState({
singleBox: true,
singleType: 1,
singMess: item
singMess: item,
})
window.localStorage.setItem('singMess', JSON.stringify(item))
}
......@@ -174,7 +173,7 @@ class Video extends Component {
return;
} else {
this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess'))
singMess: JSON.parse(window.localStorage.getItem('singMess')),
})
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
......@@ -223,7 +222,7 @@ class Video extends Component {
return
} else {
this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess'))
singMess: JSON.parse(window.localStorage.getItem('singMess')),
})
// this.props.weixinPay(weixin_code)
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
......@@ -238,7 +237,7 @@ class Video extends Component {
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式：
"paySign": data.paySign //微信签名
"paySign": data.paySign, //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
......@@ -282,7 +281,7 @@ class Video extends Component {
} else {
alert('支付失败')
}
}
},
)
}
......@@ -306,7 +305,7 @@ class Video extends Component {
// 判断支付是否成功
check = (oid) => {
this.setState({
singMess: JSON.parse(window.localStorage.getItem('singMess'))
singMess: JSON.parse(window.localStorage.getItem('singMess')),
})
http.get(`${API['base-api']}/class_order_status/${oid}`).then((res) => {
if (Number(res.data.data.errno) === 200) {
......@@ -378,7 +377,7 @@ class Video extends Component {
let reconnect = setTimeout(function () {
clearTimeout(reconnect);
reconnect = null;
_this.ws = new WebSocket(PROCESS_URL);
_this.ws = new WebSocket(API["process-api"]);
}, 500);
}
}
......@@ -482,11 +481,17 @@ class Video extends Component {
errorDisplay: false,
playbackRates: ['0.75', '1', '1.5', '2'],
controlBar: {
pictureInPictureToggle: false
}
pictureInPictureToggle: false,
},
})
this.player.addChild('CustomPlayButtonCover')
this.player.on('play', () => {
let videoTime = window.sessionStorage.getItem('videoTimeBeforeReload')
if (videoTime) {
this.player.currentTime(videoTime)
window.sessionStorage.removeItem('videoTimeBeforeReload')
}
const {videoList, activeIndex, vCourseId, course = {}} = this.state
// 当视频播放时 看是否是第一次播放（初次进入页面 刷新页面 切换视频 都是第一次播放 需要获取上次的播放时间）
if (this.isCurrentVideoFirstPlay) {
......@@ -526,16 +531,26 @@ class Video extends Component {
this.timer = null;
if (this.state.limitFreePopup.is_free) {
this.setState({
showLimitFreePopup: true
showLimitFreePopup: true,
})
}
})
this.player.on('waiting', () => {
clearTimeout(this.currentVideoTimer)
this.currentVideoTimer = setTimeout(() => {
if (this.currentVideoExpireTime < new Date().getTime()) {
window.sessionStorage.setItem('videoTimeBeforeReload', this.player.currentTime())
this.getVideoSrc()
}
}, 3000)
})
}
sendLastRecord = () => {
http.post(`${API.home}/m/course/record_last_video`, {
v_course_id: this.state.course['v_course_id'],
video_id: this.state.videoList[this.state.activeIndex].id
video_id: this.state.videoList[this.state.activeIndex].id,
})
}
......@@ -552,6 +567,23 @@ class Video extends Component {
this.recordSocket = null
}
//请求签名视频地址
getVideoSrc = () => {
const {videoList, activeIndex} = this.state
let lesson = videoList[activeIndex]
http.get(`${API.home}/web/check_video/${lesson.id}/${lesson.v_course_id}`)
.then(res => {
const {data, code, msg} = res.data
let url = new URL(data.url).searchParams
if (code === 200) {
this.currentVideoExpireTime = url.has('Expires') && (Number(url.get('Expires')) * 1000)
this.setPlayerSrc(data.url)
} else {
Toast.info(msg)
}
})
}
// 选择新的视频
selectVideo = index => {
if (index === this.state.activeIndex) {
......@@ -564,18 +596,18 @@ class Video extends Component {
this.setState(
{
activeIndex: index
activeIndex: index,
},
() => {
if (this.hasAuth(this.state.activeIndex)) {
this.setPlayerSrc(this.state.videoList[index]['play_url'])
this.getVideoSrc()
this.sendLastRecord()
this.playVideo()
} else {
this.getCoursePrice();
}
}
},
);
}
......@@ -588,7 +620,7 @@ class Video extends Component {
if (getParam('video_id')) {
url = `${API.home}/m/course/play/${this.courseID + '?video_id=' + getParam('video_id')}`
http.post(`${API['base-api']}/sys/get_class_audition`, {
video_id: getParam('video_id')
video_id: getParam('video_id'),
})
} else {
url = `${API.home}/m/course/play/${this.courseID}`
......@@ -599,28 +631,25 @@ class Video extends Component {
this.setState(
state => ({
videoList: data['lessons'],
currentVideoSrc: data['lessons'][state.activeIndex]['play_url'],
course: data.course,
courseId: data.course['course_id'],
vCourseId: data.course['v_course_id'],
title: data.course['course_title'],
isLoading: false
isLoading: false,
}),
this.playSetup
this.playSetup,
)
data.course.course_id && this.getLimitFreePopup(data.course.course_id)
} else {
Toast.info(data.msg)
}
}
},
)
}
playSetup = () => {
// is_aist,是否AI特训营
const {course = {}} = this.state;
// if (Number(course.course_id) === 0 || course.course_id === '') {
// }else{
let _this = this;
this.setupWS();
this.setupTimer();
......@@ -629,12 +658,11 @@ class Video extends Component {
scheduleTime = null;
_this.countSchedule(); // 刚进入页面的时候 就计算进度 先获取视频列表getVideoList 获取列表后 播放选择的视频 然后计算进度
}, 1000);
// }
let index = this.getLastVideoIndex(course.last_video_id);
index = index >= 0 ? index : 0;
this.setState(
{
activeIndex: index
activeIndex: index,
},
() => {
if (this.lessonAvailable(index)) {
......@@ -651,10 +679,10 @@ class Video extends Component {
text: 'OK',
onPress: () => {
this.props.history.push('/')
}
},
}])
}
}
},
);
}
......@@ -665,8 +693,9 @@ class Video extends Component {
}
this.player.src({
src,
type: 'application/x-mpegURL'
type: 'application/x-mpegURL',
})
this.player.play()
}
playVideo = () => {
......@@ -684,7 +713,7 @@ class Video extends Component {
if (data.code === 200) {
this.setState({
datum: data.data
datum: data.data,
})
} else {
......@@ -704,17 +733,16 @@ class Video extends Component {
const {data} = res
if (data.code === 200) {
this.setState({
salePrice: data.data['sale_price']
salePrice: data.data['sale_price'],
})
}
})
}
playWithAuth = () => {
const {videoList, activeIndex} = this.state
const {activeIndex} = this.state
if (this.hasAuth(activeIndex)) {
this.setPlayerSrc(videoList[activeIndex]['play_url'])
this.getVideoSrc()
}
}
......@@ -725,12 +753,12 @@ class Video extends Component {
if (lesson['video_auth']) {
this.setState({
isAuth: true
isAuth: true,
})
return true
} else {
this.setState({
isAuth: false
isAuth: false,
})
return false
......@@ -739,7 +767,7 @@ class Video extends Component {
getLimitFreePopup = id => {
http.post(`${API.home}/sys/popup`, {
course_id: id
course_id: id,
})
.then(res => {
const {code, msg, data} = res.data
......@@ -748,7 +776,7 @@ class Video extends Component {
const {courseId, limitFreePopupVideos} = this.state
this.setState({
limitFreePopup: data,
isShowNeverShowPopupOption: limitFreePopupVideos ? limitFreePopupVideos.includes(courseId) : false
isShowNeverShowPopupOption: limitFreePopupVideos ? limitFreePopupVideos.includes(courseId) : false,
})
} else {
......@@ -761,13 +789,13 @@ class Video extends Component {
return
}
http.post(`${API.home}/sys/checklist`, {
course_id: this.state.course.course_id
course_id: this.state.course.course_id,
})
.then(res => {
const {code, msg} = res.data
if (code === 200) {
this.setState({
limitFreePopup: {...this.state.limitFreePopup, is_free: 0}
limitFreePopup: {...this.state.limitFreePopup, is_free: 0},
})
} else {
......@@ -789,7 +817,7 @@ class Video extends Component {
singleType,
showLimitFreePopup,
limitFreePopup,
isShowNeverShowPopupOption
isShowNeverShowPopupOption,
} = this.state;
let toHref = '';
if (location.state && location.state.to && location.state.to === 'detail') {
......@@ -801,8 +829,8 @@ class Video extends Component {
toHref ? history.push(
toHref,
{
to: 'classify'
}
to: 'classify',
},
) : history.go(-1)
}}/>
<Loading isLoading={this.state.isLoading}>
......@@ -895,7 +923,7 @@ class Video extends Component {
<Switch>
<Redirect exact from={'/play'} to={{
pathname: '/play/video',
search: location.search
search: location.search,
}}/>
<Route
path={`${match.path}/video`}
......@@ -945,7 +973,7 @@ class Video extends Component {
</span>
<input type="checkbox" id={'no-prompt'} onChange={(e) => {
this.setState({
limitFreeNoPromptChecked: e.target.checked
limitFreeNoPromptChecked: e.target.checked,
})
}}/>
<span>本课程不再提示</span>
......@@ -956,11 +984,11 @@ class Video extends Component {
<i className={'close-btn iconfont iconiconfront-2'} onClick={() => {
this.setState({
showLimitFreePopup: false,
isShowNeverShowPopupOption: true
isShowNeverShowPopupOption: true,
})
const {courseId, limitFreePopupVideos} = this.state
localStorage.setItem('limit-free-popup-videos', JSON.stringify(
limitFreePopupVideos ? [...limitFreePopupVideos, courseId] : [courseId]
limitFreePopupVideos ? [...limitFreePopupVideos, courseId] : [courseId],
))
this.checkNeverShowLimitFreePopup()
}}/>
......@@ -975,5 +1003,5 @@ class Video extends Component {
export default connect(
state => ({user: state.user}),
null
null,
)(Video);
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