chore: update

src/modules/course/components/CoursePlayerChapter.vue

@@ -7,6 +7,7 @@ import type { CourseChapterType } from '../types'
 interface Props {
   chapterList: CourseChapterType[]
   pptList: PptType[]
+  pptIndex: number
 }
 const props = defineProps<Props>()
 
@@ -58,7 +59,12 @@ function formatDuration(duration: number | undefined) {
       </el-tab-pane>
       <el-tab-pane label="讲义" name="ppt" v-if="pptList && pptList.length">
         <ul class="lecture-list">
-          <li v-for="item in pptList" :key="item.url" @click="$emit('clickPPT', item)">
+          <li
+            v-for="(item, index) in pptList"
+            :class="{ 'is-active': index === pptIndex }"
+            :key="item.url"
+            @click="$emit('clickPPT', item)"
+          >
             <img :src="`${item.url}?x-oss-process=image/resize,m_fill,h_128,w_218`" loading="lazy" />
             <span>{{ formatDuration(item.point) }}</span>
           </li>
@@ -142,6 +148,7 @@ function formatDuration(duration: number | undefined) {
       }
     }
     img {
+      display: block;
       width: 100%;
     }
     span {

src/modules/course/components/CoursePlayerPPT.vue

 <template>
   <div class="ppt-player">
-    <template v-if="ppts.length">
+    <template v-if="pptList.length">
       <div class="ppt-player-preview">
         <img :src="pptUrl" v-if="pptUrl" />
       </div>
@@ -9,14 +9,14 @@
           <template v-if="currentIndex >= 0">
             <i class="el-icon-arrow-left" @click="prev"></i>
           </template>
-          <template v-if="currentIndex + 1 < ppts.length">
+          <template v-if="currentIndex + 1 < pptList.length">
             <i class="el-icon-arrow-right" @click="next"></i>
           </template>
         </div>
         <div class="ppt-player-controls__pages">
           <span class="is-active">{{ currentIndex + 1 }}</span>
           /
-          <span>{{ ppts.length }}</span
+          <span>{{ pptList.length }}</span
           >页
         </div>
         <div class="ppt-player-controls__tools">
@@ -38,13 +38,15 @@
   </div>
 </template>
 
+<script setup>
+defineProps({
+  pptList: { type: Array },
+  index: { type: Number, default: 0 }
+})
+</script>
 <script>
 export default {
   name: 'ppt-player',
-  props: {
-    ppts: { type: Array },
-    index: { type: Number, default: 0 }
-  },
   data() {
     return {
       currentIndex: this.index,
@@ -63,7 +65,7 @@ export default {
   },
   computed: {
     pptUrl() {
-      return this.ppts[this.currentIndex] ? this.ppts[this.currentIndex].ppt_url : ''
+      return this.pptList[this.currentIndex] ? this.pptList[this.currentIndex].ppt_url : ''
     }
   },
   methods: {
@@ -71,22 +73,22 @@ export default {
       this.currentIndex = index
     },
     getIndex(index) {
-      return Math.min(this.ppts.length - 1, Math.max(0, index))
+      return Math.min(this.pptList.length - 1, Math.max(0, index))
     },
     prev() {
       this.currentIndex = this.getIndex(this.currentIndex - 1)
       this.isSync = false
     },
-    next(e) {
+    next() {
       this.currentIndex = this.getIndex(this.currentIndex + 1)
       this.isSync = false
     },
-    onToggleSync(e) {
+    onToggleSync() {
       this.isSync = !this.isSync
     },
-    setVideoTime(e) {
+    setVideoTime() {
       this.isSync = true
-      this.$emit('videoSyncTime', this.ppts[this.currentIndex].ppt_point)
+      this.$emit('videoSyncTime', this.pptList[this.currentIndex].ppt_point)
     },
     // 全屏
     fullscreen() {

src/modules/course/components/CoursePlayerVideo.vue

@@ -15,6 +15,7 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{
   (e: 'updateResource', resource: CourseResourceType | undefined): void
+  (e: 'timeupdate', time: number): void
 }>()
 
 const options = $ref<VideoJsPlayerOptions>()
@@ -198,6 +199,7 @@ function onLoadedData() {
 function onTimeUpdate() {
   const time = Math.floor(videoJsPlayer?.currentTime() ?? 0)
   if (!time || videoJsPlayer?.paused()) return
+  emit('timeupdate', time)
   console.log('onTimeUpdate', time)
   // 更新观看累计时长
   if (time !== progress.current_playing_time) {

src/modules/course/views/CoursePlayer.vue

@@ -62,6 +62,11 @@ const pptList = $computed(() => {
 function onUpdateResource(resource: CourseResourceType | undefined) {
   currentVideoResource = resource
 }
+let pptIndex = $ref<number>(0)
+function onTimeUpdate(time: number) {
+  const index = pptList.findIndex(item => item.point > time)
+  pptIndex = index !== -1 ? index - 1 : pptList.length - 1
+}
 // ppt点击
 function onClickPPT(ppt: PptType) {
   videoJsPlayer?.currentTime(ppt.point)
@@ -80,7 +85,12 @@ function toggleSidebar() {
     </div>
     <div class="course-player-bd">
       <div class="course-player-main" v-loading="loading">
-        <CoursePlayerVideo :chapterList="chapterList" :key="sectionId" @updateResource="onUpdateResource" />
+        <CoursePlayerVideo
+          :chapterList="chapterList"
+          :key="sectionId"
+          @updateResource="onUpdateResource"
+          @timeupdate="onTimeUpdate"
+        />
         <el-tabs>
           <el-tab-pane label="课件">
             <CoursePlayerResourceList :list="detail.coursewares" />
@@ -104,7 +114,12 @@ function toggleSidebar() {
       </div>
       <div class="course-player-aside" :class="{ 'is-hidden': !sidebarVisible }">
         <div class="course-player-aside__inner">
-          <CoursePlayerChapter :chapterList="chapterList" :pptList="pptList" @clickPPT="onClickPPT" />
+          <CoursePlayerChapter
+            :chapterList="chapterList"
+            :pptList="pptList"
+            :pptIndex="pptIndex"
+            @clickPPT="onClickPPT"
+          />
         </div>
         <div class="toggle-button" :class="{ 'is-hidden': !sidebarVisible }" @click="toggleSidebar">
           <el-icon>