From 15f11ae4c91a64e71fadad48ec18e40e337a043d Mon Sep 17 00:00:00 2001
From: joshen <445497689@qq.com>
Date: Wed, 19 Jun 2024 17:44:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=A6=81=E7=94=A8=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VideoPlayer/index.vue        |  52 +++++---
 src/components/VideoPlayer/progress-bar.vue |  36 +++---
 src/views/course/ManageList.vue             |   2 +-
 src/views/study/coursenew.vue               | 125 +++++++++++++-------
 4 files changed, 137 insertions(+), 78 deletions(-)

diff --git a/src/components/VideoPlayer/index.vue b/src/components/VideoPlayer/index.vue
index e70d31b7..49443911 100644
--- a/src/components/VideoPlayer/index.vue
+++ b/src/components/VideoPlayer/index.vue
@@ -74,6 +74,7 @@
             :currentProgress="currentProgress"
             v-on:updateProgress="updateProgressByClickBar"
             v-on:getMouseDownStatus="getMouseDownStatusOfProgressBar"
+            :blobId="blobId"
             :isDrag="isDrag"
             width="100%"
             height="4px"
@@ -241,6 +242,11 @@ export default {
       type: String,
       default: null,
     },
+    // 视频链接对应的content Id
+    blobId: {
+      type: String,
+      default: null,
+    },
     // 主题色
     primaryColor: {
       type: String,
@@ -316,13 +322,14 @@ export default {
       if (this.isPlaying && !this.isMousedownProgress) {
         this.currentProgress = this.videoDom.currentTime / this.videoDom.duration;
       }
-      // 视频播放时本地记录视频实时播放时长
-      // console.log(this.src,this.currentProgress,'定时更新进度条');
-      var time = localStorage.getItem('videoProgressData')
-      var arr = time&&JSON.parse(time) || {}
-      if(arr[this.src] < this.currentProgress || !arr[this.src]){
-        arr[this.src] = this.currentProgress
-        localStorage.setItem('videoProgressData',JSON.stringify(arr))
+      // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
+      if(!this.isDrag){
+        var time = localStorage.getItem('videoProgressData')
+        var arr = time&&JSON.parse(time) || {}
+        if(arr[this.blobId] < this.currentProgress || !arr[this.blobId]){
+          arr[this.blobId] = parseFloat(this.currentProgress.toFixed(8))
+          if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr))
+        }
       }
 
       // 定时更新进度的文字显示
@@ -440,7 +447,16 @@ export default {
       // 禁止拖拽视频前进时，未观看视频不让前进播放
       if(!this.isDrag){
         var time = localStorage.getItem('videoProgressData')
-        if(time && parseFloat(time) * this.videoDom.duration<newCurrentTime){
+
+        var arr = time&&JSON.parse(time) || {}
+        console.log('arr[this.blobId]::22',arr[this.blobId],this.currentProgress)
+        if(arr[this.blobId] < this.currentProgress || !arr[this.blobId]){
+          arr[this.blobId] = parseFloat(this.currentProgress.toFixed(8))
+          
+          if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr))
+        }
+
+        if(time && arr[this.blobId]* this.videoDom.duration < this.newCurrentTime){
           return
         }
       }
@@ -464,11 +480,15 @@ export default {
     /* 点击进度条更新视频播放进度
      */
     updateProgressByClickBar(value) {
-      let duration = this.videoDom.duration;
-      this.currentProgress = value;
-      let new_current_time = Math.round(value * duration);
-      this.barrageTimelineStart = new_current_time;
-      this.videoDom.currentTime = new_current_time;
+      if(this.videoDom){
+
+        let duration = this.videoDom.duration;
+        this.currentProgress = value;
+        let new_current_time = Math.round(value * duration);
+        this.barrageTimelineStart = new_current_time;
+        this.videoDom.currentTime = new_current_time;
+        console.log('value 222::',value,duration,new_current_time)
+      }
     },
     /* 通过新的播放时间更新视频播放进度
      */
@@ -582,8 +602,10 @@ export default {
        this.videoDom.play();
     },
     onAudioTimeUpdate() {
-      const currentTime = this.$refs.video.currentTime;
-      this.$emit('onTimeUpdate', currentTime);
+      if(this.$refs.video){
+        const currentTime = this.$refs.video.currentTime;
+        this.$emit('onTimeUpdate', currentTime);
+      }
     },
   },
   watch: {
diff --git a/src/components/VideoPlayer/progress-bar.vue b/src/components/VideoPlayer/progress-bar.vue
index 70691463..dd616470 100644
--- a/src/components/VideoPlayer/progress-bar.vue
+++ b/src/components/VideoPlayer/progress-bar.vue
@@ -38,6 +38,9 @@ export default {
     isDrag:{
       type: Boolean,
       default: true,
+    },
+    blobId:{
+      type: String,
     }
   },
   data() {
@@ -68,20 +71,7 @@ export default {
   },
   methods: {
     down(e) {
-      // 是否禁止拖动
-      // if(this.isDrag) {
-      //   // 可拖动
-      //   this.$emit("getMouseDownStatus", true);
-      //   this.is_mousedown_progress = true;
-      //   // 获取完整进度条的clientX（dom左上角）
-      //   let init_clientX = this.dom_full.getBoundingClientRect().left;
-      //   // 计算调整后的当前进度条的长度
-      //   this.current_width_px = e.clientX - init_clientX;
-      //   // 设置当前的播放进度（同时作用于当前进度条的样式）
-      //   let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
-      //   this.$emit("updateProgress", current);
-      // }else{
-        // 禁止拖动
+        
         this.$emit("getMouseDownStatus", true);
         this.is_mousedown_progress = true;
         // 获取完整进度条的clientX（dom左上角）
@@ -90,13 +80,12 @@ export default {
         this.current_width_px = e.clientX - init_clientX;
         // 设置当前的播放进度（同时作用于当前进度条的样式）
         let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
-
         var time = localStorage.getItem('videoProgressData');
-        if(!this.isDrag && time && parseFloat(time) < current) return;
+        var arr = time&&JSON.parse(time) || {}
+        // 禁止拖动
+        if(!this.isDrag && time && arr[this.blobId] < current) return;
 
         this.$emit("updateProgress", current);
-      // }
-      
     },
     move(e) {
       if (this.is_mousedown_progress) {
@@ -104,7 +93,9 @@ export default {
         this.current_width_px = e.clientX - init_clientX;
         let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
         var time = localStorage.getItem('videoProgressData');
-        if(!this.isDrag && time && parseFloat(time) < current) return;
+        var arr = time&&JSON.parse(time) || {}
+        // 禁止拖动
+        if(!this.isDrag && time && arr[this.blobId] < current) return;
         this.$emit("updateProgress", current);
       }
     },
@@ -112,12 +103,15 @@ export default {
       if (this.is_mousedown_progress) {
         // 标记鼠标不处于按下的状态了
         this.is_mousedown_progress = false;
+        this.$emit("getMouseDownStatus", false);
         // 松开鼠标后，即调整进度条后，此时的进度（0-1）
         let current = this.current_width_px / this.dom_full.clientWidth;
         var time = localStorage.getItem('videoProgressData');
-        if(!this.isDrag && time && parseFloat(time) < current) return;
+        var arr = time&&JSON.parse(time) || {}
+        // 禁止拖动
+        if(!this.isDrag && time && arr[this.blobId] < current) return;
         this.$emit("updateProgress", current);
-        this.$emit("getMouseDownStatus", false);
+        
       }
     },
   },
diff --git a/src/views/course/ManageList.vue b/src/views/course/ManageList.vue
index 357435c7..5a068724 100644
--- a/src/views/course/ManageList.vue
+++ b/src/views/course/ManageList.vue
@@ -644,7 +644,7 @@ export default {
       this.params.sysType1 = this.sysTypeList[0];
       this.params.sysType2 = this.sysTypeList[1];
       this.params.sysType3 = this.sysTypeList[2];
-      if(this.$route.query.couresIds) this.params.couresIds = this.$route.query.couresIds.split(',');
+      if(this.$route.query.courseIds) this.params.courseIds = this.$route.query.courseIds.split(',');
       if(this.$route.query.isSystemAdmin) this.params.isSystemAdmin = this.$route.query.isSystemAdmin;
       apiCourse.pageList(this.params).then(rs=>{
           if(rs.status==200){
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
index c19b48be..610028ba 100644
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -27,7 +27,7 @@
               <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
             </div>
             <div v-if="resType == 10" style="position: relative;">
-              <videoPlayer ref="myVideoPlayer" id="myVideoPlayer" @progress="progress" :src="blobUrl" @onPlayerPlaying="onPlayerPlaying"
+              <videoPlayer ref="myVideoPlayer" id="myVideoPlayer" @progress="progress" :src="blobUrl" :blobId="blobId" @onPlayerPlaying="onPlayerPlaying"
                 :initTime="contentData.lastStudyTime" :notePlay="notePlay" @onPlayerPlay="onPlayerPlay"
                 :isDrag="curriculumData.isDrag" @onFullscreen="onFullscreen" @onPlayerPause="onPlayerPause"
                 @onPlayerEnded="onPlayerEnded" :isCrowd="isCrowd" @onTimeUpdate="handleAudioTimeUpdate"></videoPlayer>
@@ -384,6 +384,7 @@
         studyId: '', //当前学习的id
         initContentId: '', //初始化当前学习的内容节
         blobUrl: '', //播放的文件地址，新添加，采用blob方式
+        blobId: '', //播放的文件地址，对应的contents ID
         contentData: {
           studyItemId: '',
           status: 1
@@ -672,6 +673,8 @@
           //let url=process.env.VUE_APP_BASE_API+'/xboe/m/course/file/show?cf='+this.curriculumData.url;
           //let url=this.fileBaseUrl+this.curriculumData.url;
           this.createPlayUrl(r.contentRefId, this.curriculumData.url);
+
+          this.blobId = r.id
         } else if (r.contentType == 40) {
           // if (r.content != '' && r.content.indexOf('.pdf') == -1) {
           apiCourseFile.detail(r.contentRefId).then(cfrs => {
@@ -797,6 +800,19 @@
         if(!this.isCrowd){
           return
         }
+        // 视频设置禁用处理逻辑,如果用户已全部观看完该视频，则设置为能全部拖动的逻辑，把isDrag设置为true即可,同时删除本地存储的数据
+        if(r.progressVideo ===1){
+          var obj = JSON.parse(r.content)
+          obj.isDrag = true
+          r.content = JSON.stringify(obj)
+
+          var time = localStorage.getItem('videoProgressData')
+          var arr = time&&JSON.parse(time) || {}
+          delete arr[r.id];
+          localStorage.setItem('videoProgressData',JSON.stringify(arr))
+
+        }
+
         if (i != undefined && i!=-1 && index != undefined && r.status < 9) {
           if (this.courseInfo.orderStudy) {
             //判断上个是否学完
@@ -841,6 +857,9 @@
           }
         }
         this.changePlayRes(r,item);
+        console.log('r, i, index,item::',r, i, index,item)
+        this.videoIndex = i 
+        this.blobId = r.id
       },
       loadScorePraiseAndTrample() {
         //加载是否请过分
@@ -904,9 +923,9 @@
         this.interactRuning = true;
         let teacherId='';
         if(this.teachers.length>0){
-        	teacherId=this.teachers[0].teacherId;
+          teacherId=this.teachers[0].teacherId;
         }else{
-        	teacherId=this.courseInfo.sysCreateAid
+          teacherId=this.courseInfo.sysCreateAid
         }
         let postData = {
           objType: 1,
@@ -1120,16 +1139,39 @@
         } else {
           var markDiv = div.querySelector("#" + divId);
           if (markDiv) {
-      	     div.removeChild(markDiv);
+             div.removeChild(markDiv);
           }
         }
       },
+      // 视频播放结束时执行调用 studyVideoTime
+      EndedstudyVideoTime(){
+        let postData = {
+          itemId: this.contentData.studyItemId,
+          videoTime: this.contentData.lastStudyTime
+        }
+        console.log('this.curriculumData 111::',this.curriculumData,this.contentData.id)
+        if(!this.curriculumData.isDrag && this.contentData.progressVideo !=1){
+          var time = localStorage.getItem('videoProgressData')
+          var arr = time&&JSON.parse(time) || {}
+          if(arr[this.blobId]) {
+            postData.progressVideo = arr[this.blobId]
+            postData.contentId = this.contentList[this.videoIndex].id
+            postData.courseId = this.contentList[this.videoIndex].courseId
+          }  
+        }
+        apiStudy.studyVideoTime(postData).then(rs => {
+          if (rs.status != 200) {
+            console.log('记录播放时间错误');
+          }
+        });
+      },
       onPlayerPause() {
         //console.log("暂停");
         this.stopStudyTime();
       },
       onPlayerEnded() {
         this.playerBoxShow = true;
+        this.EndedstudyVideoTime()
         this.stopStudyTime();
         if(this.contentData.status < 9) {
           this.finishStudyItem();
@@ -1167,23 +1209,24 @@
           if (intTime > 10 && intTime != this.contentData.lastStudyTime && saveTime == 0 && this.contentData
             .studyItemId != '') {
             this.contentData.lastStudyTime = intTime;
-            let postData = {
-              itemId: this.contentData.studyItemId,
-              videoTime: intTime
-            };
-            var time = localStorage.getItem('videoProgressData')
-            var arr = time&&JSON.parse(time) || {}
-            if(arr[this.blobUrl]) {
-              postData.progressVideo = arr[this.blobUrl]
-              postData.contentId = this.contentList[this.videoIndex].id
-              postData.courseId = this.contentList[this.videoIndex].courseId
-            }
-            //console.log('记录播放时间')
-            apiStudy.studyVideoTime(postData).then(rs => {
-              if (rs.status != 200) {
-                console.log('记录播放时间错误');
-              }
-            });
+            this.EndedstudyVideoTime()
+            // let postData = {
+            //   itemId: this.contentData.studyItemId,
+            //   videoTime: intTime
+            // };
+            // var time = localStorage.getItem('videoProgressData')
+            // var arr = time&&JSON.parse(time) || {}
+            // if(arr[this.blobId] && !this.isDrag) {
+            //   postData.progressVideo = arr[this.blobId]
+            //   postData.contentId = this.contentList[this.videoIndex].id
+            //   postData.courseId = this.contentList[this.videoIndex].courseId
+            // }
+            // //console.log('记录播放时间')
+            // apiStudy.studyVideoTime(postData).then(rs => {
+            //   if (rs.status != 200) {
+            //     console.log('记录播放时间错误');
+            //   }
+            // });
           }
         }
       },
@@ -1215,23 +1258,24 @@
         if (intTime > 10 && intTime != this.contentData.lastStudyTime && saveTime == 0 && this.contentData
           .studyItemId) {
           this.contentData.lastStudyTime = intTime;
-          let postData = {
-            itemId: this.contentData.studyItemId,
-            videoTime: intTime
-          };
-          var time = localStorage.getItem('videoProgressData')
-          var arr = time&&JSON.parse(time) || {}
-          if(arr[this.blobUrl]) {
-            postData.progressVideo = arr[this.blobUrl]
-            postData.contentId = this.contentList[this.videoIndex].id
-            postData.courseId = this.contentList[this.videoIndex].courseId
-          }
-          //console.log('记录播放时间')
-          apiStudy.studyVideoTime(postData).then(rs => {
-            if (rs.status != 200) {
-              console.log('记录播放时间错误');
-            }
-          });
+          this.EndedstudyVideoTime()
+          // let postData = {
+          //   itemId: this.contentData.studyItemId,
+          //   videoTime: intTime
+          // };
+          // var time = localStorage.getItem('videoProgressData')
+          // var arr = time&&JSON.parse(time) || {}
+          // if(arr[this.blobId] && !this.isDrag) {
+          //   postData.progressVideo = arr[this.blobId]
+          //   postData.contentId = this.contentList[this.videoIndex].id
+          //   postData.courseId = this.contentList[this.videoIndex].courseId
+          // }
+          // //console.log('记录播放时间')
+          // apiStudy.studyVideoTime(postData).then(rs => {
+          //   if (rs.status != 200) {
+          //     console.log('记录播放时间错误');
+          //   }
+          // });
         }
       },
       audioPlay() {
@@ -1386,7 +1430,6 @@
             }
           });
         });
-
         if (this.courseInfo.type == 10) {
           ///console.log(this.contentList[0],'ccccc11111')
           this.showRes(this.contentList[0]);
@@ -1396,12 +1439,12 @@
             // this.showRes(this.contentList[0]);
             //console.log(this.catalogTree,'ccccc22222')
             this.showRes(this.catalogTree[0].children[0])
-            this.videoIndex = 0
           } else {
              //console.log(this.contentList[0],'ccccc3333')
             this.showRes(this.contentList[playIndex]);
-            this.videoIndex = playIndex
+            //this.videoIndex = playIndex
           }
+          this.videoIndex = playIndex
         }
       },
       saveScormStudy() {