Merge branch 'iteration_0307' into jenkins

src/views/coursewarePlay/component/video-play.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, nextTick, onMounted, onUnmounted, toRefs, watch } from 'vue'
 import 'plyr/dist/plyr.css'
 import Plyr from 'plyr'
 import { ref } from 'vue'
@@ -123,7 +123,7 @@ export default defineComponent({
           if (!item.value.autoPlay && !item.value.isprepare && videoItem.value) {
             // 加载完成后,取消静音播放
             videoItem.value.pause()
-            console.log(videoItem.value.paused, 'video status')
+            console.log(videoItem.value?.paused, 'video status')
           }
           changePlayBtn('')
           emit('togglePlay', videoItem.value?.paused)
@@ -138,11 +138,11 @@ export default defineComponent({
         })
         videoItem.value.once('loadedmetadata', (e: Event) => {
           changePlayBtn('play')
+          videoItem.value.currentTime = 0
           if (item.value.autoPlay && videoItem.value) {
             videoItem.value.play()
           }
           emit('loadedmetadata', videoItem.value)
-          videoItem.value.currentTime = 0
         })
         videoItem.value.on('timeupdate', (e: Event) => {
           // console.log(videoItem.value?.currentTime, '111')
@@ -161,10 +161,18 @@ export default defineComponent({
       () => props.isActive,
       (val) => {
         if (!val) {
+          console.log(props.isActive, 'isActive')
           videoItem.value?.pause()
         }
       }
     )
+
+    // onUnmounted(() => {
+    //   if (videoItem.value) {
+    //     videoItem.value?.pause()
+    //     videoItem.value?.destroy()
+    //   }
+    // })
     return () => (
       <div class={styles.videoWrap}>
         <video

src/views/coursewarePlay/index.module.less

@@ -122,6 +122,8 @@
   position: absolute;
   left: 0;
   top: 0;
+  right: 0;
+  bottom: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
@@ -369,4 +371,4 @@
 
 .popupMore {
   background: rgba(0, 0, 0, 0.8);
-}
+}

src/views/coursewarePlay/index.tsx

@@ -245,7 +245,7 @@ export default defineComponent({
         }
       }
 
-      console.log(list, 'list')
+      // console.log(list, 'list')
 
       let _firstIndex = list.findIndex(
         (n: any) =>
@@ -254,7 +254,7 @@ export default defineComponent({
       _firstIndex = _firstIndex > -1 ? _firstIndex : 0
       const item = list[_firstIndex]
 
-      console.log(_firstIndex, '_firstIndex', route.query.kId, 'route.query.kId', item)
+      // console.log(_firstIndex, '_firstIndex', route.query.kId, 'route.query.kId', item)
       // 是否自动播放
       if (activeData.isAutoPlay) {
         item.autoPlay = true
@@ -447,8 +447,10 @@ export default defineComponent({
         const activeItem = data.itemList[i]
 
         if (activeItem.type === 'VIDEO') {
-          activeItem.videoEle?.pause()
-          activeItem.videoEle?.stop()
+          if (popupData.activeIndex !== i) {
+            activeItem.videoEle?.pause()
+            activeItem.videoEle?.stop()
+          }
         }
         // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
@@ -503,7 +505,7 @@ export default defineComponent({
       if (item && item.type === 'VIDEO') {
         const videoEle: HTMLVideoElement = item.videoEle
         if (videoEle) {
-          if (videoEle.paused) {
+          if (videoEle?.paused) {
             closeToast()
             videoEle.play()
           } else {
@@ -730,8 +732,10 @@ export default defineComponent({
           >
             <div class={styles.wraps}>
               {data.itemList.map((m: any, mIndex: number) => {
-                const isRender = Math.abs(popupData.activeIndex - mIndex) < 4
+                const isRender = Math.abs(popupData.activeIndex - mIndex) < 3
                 const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 2
+                // const isRender = Math.abs(popupData.activeIndex - mIndex) < 2;
+                //   const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
                 // if (isRender) {
                 //   m.isRender = true
                 // }