Merge branch 'pingcode-20240615' into dev0515

2025-12-08 10:26:43 +08:00 · 2024-06-19 17:46:09 +08:00
parent 9efcb4660b 15f11ae4c9
commit fcc452240b
4 changed files with 137 additions and 78 deletions
--- 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: {
--- 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);
+        
      }
    },
  },
--- 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){
--- 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() {