feat:增加连续播放功能

src/modules/viewer/components/player/chapterPlayer.vue

@@ -9,6 +9,7 @@
           :video="chatperResources.video"
           @timeupdate="onTimeupdate"
           @ready="onReady"
+          @ended="onEnded"
           ref="videoPlayer"
         ></video-player>
       </div>
@@ -31,6 +32,7 @@
         {{ $t('viewerPlayer.showPPT') }}
       </em>
       <em :class="skipClass" @click="toggleSkip">{{ $t('viewerPlayer.skipTitle') }}</em>
+      <em :class="autoNextClass" @click="toggleAutoNext">{{ $t('viewerPlayer.autoNextTitle') }}</em>
     </div>
   </div>
 </template>
@@ -48,6 +50,7 @@ export default {
   name: 'ChapterPlayer',
   components: { videoPlayer, pptPlayer },
   props: {
+    data: { type: Object },
     // 当前章节
     chapter: { type: Object },
     // 是否是PPT播放跳转
@@ -58,10 +61,13 @@ export default {
   data() {
     // 是否跳过片头
     const isSkip = window.localStorage.getItem('isSkip') === 'true'
+    // 是否连续播放
+    const isAutoNext = window.localStorage.getItem('isAutoNext') === 'true'
     return {
       videoVisible: true,
       pptVisible: false,
       isSkip,
+      isAutoNext,
       skipTime: 6,
       chatperResources: null,
       throttled: null,
@@ -116,6 +122,27 @@ export default {
         'player-button-skip': !this.isSkip,
         'player-button-skip__active': this.isSkip
       }
+    },
+    autoNextClass() {
+      return {
+        'player-button': true,
+        'player-button-skip': !this.isAutoNext,
+        'player-button-skip__active': this.isAutoNext
+      }
+    },
+    // 扁平章节数据
+    flatChapters() {
+      const chapters = this.data.chapters || []
+      return chapters.reduce((result, item) => {
+        return result.concat(item.children)
+      }, [])
+    },
+    nextChapter() {
+      const index = this.flatChapters.findIndex(item => item.id === this.chapter.id)
+      if (index !== -1) {
+        return this.flatChapters[index + 1]
+      }
+      return null
     }
   },
   methods: {
@@ -129,6 +156,11 @@ export default {
       this.isSkip = !this.isSkip
       window.localStorage.setItem('isSkip', this.isSkip)
     },
+    // 连续播放
+    toggleAutoNext() {
+      this.isAutoNext = !this.isAutoNext
+      window.localStorage.setItem('isAutoNext', this.isAutoNext)
+    },
     // 关闭PPT
     onPPTClose() {
       this.pptVisible = false
@@ -150,6 +182,12 @@ export default {
         this.player.seek(this.progress.cpt)
       }
     },
+    // 播放结束
+    onEnded() {
+      if (this.isAutoNext && this.nextChapter) {
+        this.$router.push({ name: 'viewerCourseChapter', params: { id: this.nextChapter.id } })
+      }
+    },
     // 当前播放时间更新
     onTimeupdate(time) {
       time = Math.floor(time)

src/modules/viewer/components/player/videoPlayer.vue

@@ -62,6 +62,9 @@ export default {
               window.localStorage.setItem('videoRetry', 3)
             }
           })
+          player.on('ended', function (event) {
+            _this.$emit('ended', event)
+          })
           player.on('error', function (event) {
             _this.$emit('error', event)
             if (_this.videoRetry) {

src/modules/viewer/languages/en.js

@@ -16,6 +16,7 @@ export default {
     downloadPPT: 'Download PPT',
     showPPT: 'Show PPT synchronously',
     skipTitle: 'Always skip titles',
+    autoNextTitle: 'Continuous play',
     pptSyncPlay: 'PPT synchronized video playback',
     pptFullscreen: 'Zoom in PPT',
     pptPosition: 'Switch the video to the current PPT page',

src/modules/viewer/languages/zh-CN.js

@@ -16,6 +16,7 @@ export default {
     downloadPPT: '下载PPT',
     showPPT: '同步显示PPT',
     skipTitle: '始终跳过片头',
+    autoNextTitle: '连续播放',
     pptSyncPlay: 'PPT同步视频播放',
     pptFullscreen: '放大PPT',
     pptPosition: '切换视频到当前PPT页',