M端学习进度2.0初次实现

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) {
-            // 返现课程
+            ctype = 2;
+        }
+        // 计算进度 根据ctype判断 课程类型 0-视频 1-直播 2-AI特训营
         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: 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(