播放记录

package.json

@@ -71,6 +71,7 @@
     "resolve": "1.10.0",
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.0.0",
+    "socket.io": "^2.2.0",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.2",
     "url-loader": "1.1.2",

public/api.js

@@ -2,5 +2,6 @@ var API = {
     'home': 'http://fast-test.julyedu.com',
     'search-api': 'https://search.julyedu.com',
     'passport-api': 'http://passport-test.julyedu.com',
-    'base-api': 'http://api-test.julyedu.com'
+    'base-api': 'http://api-test.julyedu.com',
+    'record': 'record.julyedu.com:8001'
 }

src/components/video/index.js

@@ -13,7 +13,7 @@ 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'
 
 let alert = Modal.alert
 
@@ -58,7 +58,9 @@ class Video extends Component {
 
     video   //video element
     player  //video player instance
+
     courseID
+
     ws  //websocket instance
     timer
     token
@@ -68,6 +70,9 @@ class Video extends Component {
     currentPlaybackRate = 1
     reconnect = true
 
+    recordSocket
+    recordTimer
+
 
     state = {
         title: '',
@@ -94,19 +99,52 @@ class Video extends Component {
         this.token = jsCookie.get('token')
         this.getVideoList()
         this.getDatumCatalog()
+        this.setupRecord()
+    }
+
+
+    setupRecord = () => {
+        this.recordSocket = io(API.record)
+        this.recordSocket.on('seek', time => {
+            this.player.currentTime(time)
+        })
 
+        this.recordTimer = setInterval(() => {
+            this.sendRecord()
+        }, 5000)
+    }
+
+    sendRecord = () => {
+        if (this.recordSocket) {
+            this.recordSocket.emit('addRecord', this.recordUserInfo())
+        }
+    }
+
+    recordUserInfo = () => {
+        let {uid} = this.props.user.data
+        return {
+            uid,
+            course_id: this.courseID,
+            video_id: this.state.videoList[this.state.activeIndex].id,
+            video_time: parseInt(this.player.currentTime()),
+            plat: 5
+        }
     }
 
     setupWS = () => {
         this.ws = new WebSocket('ws://process-test.julyedu.com:9502');
         this.ws.addEventListener('error', () => {
             this.ws = null
-            // this.setupWS();
+            /*setTimeout(() => {
+                this.setupWS();
+            }, 1000)*/
         })
         this.ws.addEventListener('close', () => {
-            if(this.reconnect){
+            if (this.reconnect) {
                 this.ws = null
-                // this.setupWS()
+                /*setTimeout(() => {
+                    this.setupWS();
+                }, 1000)*/
             }
             clearInterval(this.timer)
         })
@@ -184,9 +222,14 @@ class Video extends Component {
             textTrackDisplay: false,
             posterImage: false,
             errorDisplay: false,
-            playbackRates: ['0.75', '1', '1.5', '2']
+            playbackRates: ['0.75', '1', '1.5', '2'],
+            controlBar: {
+                pictureInPictureToggle: false
+            }
+        })
+        this.player.on('ready', () => {
+            this.recordSocket.emit('load', this.recordUserInfo())
         })
-
         this.player.on('ratechange', () => {
             this.currentPlaybackRate = this.player.playbackRate()
             this.sendWatchTime(this.watchSec, this.previousPlaybackRate)
@@ -198,15 +241,31 @@ class Video extends Component {
             this.getShareProgressInfo()
             clearInterval(this.timer)
         })
+        this.player.on('seeked', () => {
+            this.sendRecord()
+        })
+    }
+
+    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
+        })
+            .then(res => {
+                console.log(res);
+            })
     }
 
     componentWillUnmount() {
-        if (this.player) {
+        this.player && this.player.dispose()
 
-            this.player.dispose()
-        }
         clearInterval(this.timer)
+        this.ws && this.ws.close()
         this.ws = null
+
+        clearInterval(this.recordTimer)
+        this.recordSocket && this.recordSocket.close()
+        this.recordSocket = null
     }
 
     selectVideo = index => {
@@ -214,9 +273,15 @@ class Video extends Component {
             if (index === this.state.activeIndex) {
                 return
             }
-            this.setPlayerSrc(this.state.videoList[index]['play_url'])
-            this.playVideo()
-
+            this.setState({
+                    activeIndex: index
+                },
+                () => {
+                    this.setPlayerSrc(this.state.videoList[index]['play_url'])
+                    this.sendLastRecord()
+                    this.playVideo()
+                }
+            )
             clearInterval(this.timer)
             if (this.ws) {
                 this.countSchedule()
@@ -254,6 +319,13 @@ class Video extends Component {
                             if (this.lessonAvailable()) {
                                 if (this.hasAuth(this.state.activeIndex)) {
                                     Promise.resolve().then(() => {
+
+                                        let {videoList, course} = this.state
+                                        let videoIndex = videoList.findIndex(item => item.id == course.last_video_id)
+                                        this.setState({
+                                            activeIndex: videoIndex < 0 ? 0 : videoIndex
+                                        })
+
                                         this.initializePlayer()
                                         this.playWithAuth()
                                     })
@@ -332,6 +404,7 @@ class Video extends Component {
     hasAuth = () => {
         const {course, videoList, activeIndex} = this.state
         let lesson = videoList[activeIndex]
+        console.log(activeIndex);
         if (!lesson['is_free']) {
             if (course['is_audition']) {
                 this.setState({