video

src/.eslintignore

+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);