Skip to content

M
mr-julyedu
Commit f69ac2b7 by wangshuo
Options

M端学习进度2.0初次实现

parent 46d4d994
Showing with 54 additions and 50 deletions
src/components/video/index.js
......@@ -75,13 +75,16 @@ class Video extends Component {
previousPlaybackRate = 1
currentPlaybackRate = 1
reconnect = true
timeEnough = false
// timeEnough = false
recordSocket
recordTimer
isCurrentVideoFirstPlay = true
WATCHTIME = "watch_time"
COUNTSCHEDULE = "count_schedule"
RECENTLEARN = "recent_learn"
state = {
title: '',
......@@ -371,6 +374,7 @@ class Video extends Component {
}
}
// 9502 初始化 监听事件
setupWS = () => {
this.ws = new WebSocket(API["process-api"]);
this.ws.addEventListener('error', () => {
......@@ -388,7 +392,12 @@ class Video extends Component {
this.ws.addEventListener('message', e => {
const data = JSON.parse(e.data);
data.code == 4040 && (this.reconnect = false);
data.code == 5001 && (this.timeEnough = true);
if(data.code === 0) {
console.log("上次的学习记录" + JSON.stringify(data));
if(data.data && data.data.position) {
this.player.currentTime(data.data.position);
}
}
})
}
......@@ -418,63 +427,53 @@ class Video extends Component {
})
}
//告诉服务端计算进度 普通课程不发送
//告诉服务端计算进度
countSchedule = () => {
const {videoList, activeIndex, vCourseId, course = {}} = this.state
if (Number(course.course_id) === 0 || course.course_id === '') {
console.log('免费课程 拦截');
return;
}
// 时间足够不发送
if(this.timeEnough) {
console.log('5001 时间足够');
return;
}
let ctype = 0;
if (course.is_aist) {
// 返现课程
this.sendMessage({
mtype: 'count_schedule',
uid: this.props.user.data.uid,
token: this.token,
platform: 5
})
} else {
// 普通课程
this.sendMessage({
mtype: 'c_count_schedule',
uid: this.props.user.data.uid,
token: this.token,
platform: 5,
video_id: videoList[activeIndex]['id'],
course_id: this.state.courseId,
v_course_id: vCourseId,
})
ctype = 2;
}
// 计算进度 根据ctype判断 课程类型 0-视频 1-直播 2-AI特训营
this.sendMessage({
mtype: 'count_schedule',
uid: this.props.user.data.uid,
token: this.token,
platform: 5,
video_id: videoList[activeIndex]['id'],
course_id: this.state.courseId,
v_course_id: vCourseId,
ctype: ctype,
})
}
// 发送时间消息
sendWatchTime = (sec, rate) => {
const {videoList, activeIndex, vCourseId, course = {}} = this.state
// 免费课程不发送
if (Number(course.course_id) === 0 || course.course_id === '') {
console.log('免费课程 拦截');
return;
}
// if (Number(course.course_id) === 0 || course.course_id === '') {
// console.log('免费课程 拦截');
// return;
// }
// 时间为0 不发送消息
if (Number(sec) === 0) {
return;
}
// 时间足够不发送
if(this.timeEnough) {
console.log('5001 时间足够');
return;
}
let info_type = 'c_watch_time';
let ctype = 0;
if (course.is_aist) {
info_type = 'watch_time';
ctype = 2;
}
// 时间足够不发送
// if(this.timeEnough) {
// console.log('5001 时间足够');
// return;
// }
this.sendMessage({
mtype: info_type,
mtype: 'watch_time',
rate,
time: sec,
video_id: videoList[activeIndex]['id'],
......@@ -482,7 +481,9 @@ class Video extends Component {
v_course_id: vCourseId,
uid: this.props.user.data.uid,
token: this.token,
platform: 5
platform: 5,
position: this.player.currentTime(),
ctype: ctype,
})
}
......@@ -524,10 +525,14 @@ class Video extends Component {
this.recordSocket.emit('load', this.recordUserInfo())
})
this.player.on('play', () => {
const {videoList, activeIndex, vCourseId, course = {}} = this.state
// 当视频播放时 看是否是第一次播放（初次进入页面 刷新页面 切换视频 都是第一次播放 需要获取上次的播放时间）
if(this.isCurrentVideoFirstPlay) {
// 当某些原因导致视频暂停时（用户暂停 网络不好等） 再播放时不需要发送
this.isCurrentVideoFirstPlay = false;
// 发送消息 recent_learn
this.ws.send(JSON.stringify({
mtype: 'recent_learn',
mtype: this.RECENTLEARN,
uid: this.props.user.data.uid,
token: this.token,
platform: 5,
......@@ -535,8 +540,6 @@ class Video extends Component {
course_id: this.state.courseId,
v_course_id: vCourseId,
}))
// 当某些原因导致视频暂停时（用户暂停 网络不好等） 再播放时不需要发送
this.isCurrentVideoFirstPlay = false;
}
})
this.player.on('ratechange', () => {
......@@ -548,7 +551,7 @@ class Video extends Component {
this.player.on('ended', () => {
console.log('ended');
this.sendWatchTime(this.watchSec, this.currentPlaybackRate)
this.countSchedule(); // 计算进度
this.countSchedule(); // 计算进度 -- 播放完毕
// 返现课程才出现打卡记录
if(this.state.course.is_aist) {
this.getShareProgressInfo()
......@@ -584,9 +587,10 @@ class Video extends Component {
if (index === this.state.activeIndex) {
return
}
console.log('selectVideo 先发送时间 在发送进度 在重置定时器');
console.log('selectVideo 先发送时间 再发送进度 在重置定时器');
this.isCurrentVideoFirstPlay = true; // 切换视频则重置这个变量 因为新视频肯定是首次播放
this.sendWatchTime(this.watchSec, this.currentPlaybackRate)
this.countSchedule(); // 计算进度
this.countSchedule(); // 计算进度 -- 选择新视频（可能是M端特有的）
this.setupTimer();
this.setState(
......@@ -641,18 +645,18 @@ class Video extends Component {
playSetup = () => {
// is_aist,是否AI特训营
const {course = {}} = this.state;
if (Number(course.course_id) === 0 || course.course_id === '') {
console.log('免费课程 拦截');
}else{
// if (Number(course.course_id) === 0 || course.course_id === '') {
// console.log('免费课程 拦截');
// }else{
let _this = this;
this.setupWS();
this.setupTimer();
let scheduleTime = setTimeout(function () {
clearTimeout(scheduleTime);
scheduleTime = null;
_this.countSchedule();
_this.countSchedule(); // 刚进入页面的时候 就计算进度 先获取视频列表getVideoList 获取列表后 播放选择的视频 然后计算进度
}, 1000);
}
// }
let index = this.getLastVideoIndex(course.last_video_id);
index = index >= 0 ? index : 0;
this.setState(
......
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