Merge branch 'iteration-20240407-stat' into dev

src/views/courseware-play/component/audio-item/index.tsx

@@ -49,7 +49,8 @@ export default defineComponent({
       dragStatus: false, // 是否开始拖动
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any,
-      afterMa3: true
+      afterMa3: true,
+      count: 0
     });
     const canvasRef: any = ref();
     const audioRef: any = ref();
@@ -58,14 +59,27 @@ export default defineComponent({
     watch(
       () => props.show,
       val => {
+        data.count = 0;
         if (val) {
-          // onToggleAudio();
+          // data.count = 0;
+          // audioRef.value.src = item.value.content;
+          onToggleAudio();
         } else {
           audioRef.value.pause();
+          // audioRef.value.src = '';
           data.playState = 'pause';
+          // data.vudio = null;
         }
       }
     );
+    // watch(
+    //   () => props.item,
+    //   () => {
+    //     // data.count = 0;
+    //     // audioRef.value.src = item.value.content;
+    //     onToggleAudio();
+    //   }
+    // );
     watch(
       () => props.pageVisibility,
       val => {
@@ -79,9 +93,19 @@ export default defineComponent({
     // 切换音频播放
     const onToggleAudio = () => {
       if (audioRef.value.paused) {
-        onInit(audioRef.value, canvasRef.value);
         audioRef.value.play();
         data.playState = 'play';
+        //
+        nextTick(() => {
+          // onInit(audioRef.value, canvasRef.value);
+          // setTimeout(() => {
+          //   onInit(audioRef.value, canvasRef.value);
+          // }, 100);
+          // console.log(data.vudio, 'data.vudio');
+          // if (data.vudio) {
+          //   data.vudio.dance();
+          // }
+        });
       } else {
         audioRef.value.pause();
         data.playState = 'pause';
@@ -89,33 +113,56 @@ export default defineComponent({
     };
 
     const onInit = (audio: undefined, canvas: undefined) => {
-      if (!data.vudio) {
-        const rect = contetRef.value.getBoundingClientRect() || {
-          width: 200,
-          height: 200
-        };
-        data.vudio = new Vudio(audio, canvas, {
-          effect: 'waveform',
-          accuracy: 128,
-          width: rect.width,
-          height: rect.height,
-          waveform: {
-            maxHeight: 160,
-            color: [
-              [0, '#44D1FF'],
-              [0.5, '#44D1FF'],
-              [0.5, '#198CFE'],
-              [1, '#198CFE']
-            ],
-            prettify: false
-          }
-        });
-        data.vudio.dance();
+      if (!data.vudio && data.count > 1) {
+        console.log(data.vudio, 'data.vudio');
+        try {
+          const rect = contetRef.value.getBoundingClientRect() || {
+            width: 200,
+            height: 200
+          };
+
+          data.vudio = new Vudio(audio, canvas, {
+            effect: 'waveform',
+            accuracy: 128,
+            width: rect.width,
+            height: rect.height,
+            waveform: {
+              maxHeight: 160,
+              color: [
+                [0, '#44D1FF'],
+                [0.5, '#44D1FF'],
+                [0.5, '#198CFE'],
+                [1, '#198CFE']
+              ],
+              prettify: false
+            }
+          });
+          data.vudio.dance();
+        } catch (e) {
+          console.log(e, 'e');
+        }
+      } else {
       }
     };
     /** 加载成功 */
     const onLoadedmetadata = () => {
-      data.duration = audioRef.value.duration;
+      data.duration = audioRef.value?.duration;
+      // onInit(audioRef.value, canvasRef.value);
+      if (props.item.autoPlay && audioRef.value && props.show) {
+        // data.vudio = null;
+        // data.count = 0;
+        onToggleAudio();
+      }
+
+      // if (audioRef.value) {
+      //   audioRef.value.stop = () => {
+      //     audioRef.value?.pause();
+      //   };
+      //   audioRef.value.onPlay = () => {
+      //     audioRef.value?.play();
+      //     onInit(audioRef.value, canvasRef.value);
+      //   };
+      // }
     };
 
     /** 改变播放时间 */
@@ -172,10 +219,13 @@ export default defineComponent({
               onLoadedmetadata={onLoadedmetadata}
               onTimeupdate={() => {
                 if (data.timer && data.playState === 'pause') return;
-
+                if (data.count <= 1) {
+                  data.count += 1;
+                  onInit(audioRef.value, canvasRef.value);
+                }
                 // 开始拖动时也不能更新
                 if (data.dragStatus) return;
-                data.currentTime = audioRef.value.currentTime;
+                data.currentTime = audioRef.value?.currentTime;
               }}
               onError={() => {
                 console.log('error');

src/views/courseware-play/component/video-item/index.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
     watch(
       () => props.show,
       val => {
-        onToggleAudio('pause');
+        onToggleAudio(val ? 'play' : 'pause');
       }
     );
     watch(
@@ -122,6 +122,27 @@ export default defineComponent({
       }, 300);
     };
 
+    let videoTimer = null as any;
+    let videoTimerErrorCount = 0;
+    const handlePlayVideo = () => {
+      if (videoTimerErrorCount > 5) {
+        return;
+      }
+      clearTimeout(videoTimer);
+      nextTick(() => {
+        videoItem.value?.play().catch((err: any) => {
+          // console.log('🚀 ~ err:', err)
+          videoTimer = setTimeout(() => {
+            if (err?.message?.includes('play()')) {
+              // emit('play');
+            }
+            handlePlayVideo();
+          }, 1000);
+        });
+      });
+      videoTimerErrorCount++;
+    };
+
     const __init = () => {
       if (videoItem.value) {
         // console.log(videoItem.value);
@@ -136,6 +157,15 @@ export default defineComponent({
           data.duration = videoItem.value.duration();
 
           emit('canplay', videoItem.value);
+
+          if (item.value.autoPlay && videoItem.value) {
+            // videoItem.value?.play()
+            nextTick(() => {
+              videoTimerErrorCount = 0;
+              videoItem.value.currentTime(0);
+              nextTick(handlePlayVideo);
+            });
+          }
         });
         // 视频开始播放
         videoItem.value.on('play', () => {
@@ -180,15 +210,20 @@ export default defineComponent({
     watch(
       () => props.item,
       () => {
+        console.log(props.item, 'watch ---- item');
+        videoItem.value.pause();
         videoItem.value.currentTime(0);
-        __init();
-        data.playState = 'pause';
+        if (item.value?.id) {
+          __init();
+          data.playState = 'pause';
+        } else {
+          videoItem.value.pause();
+        }
       }
     );
     watch(
       () => props.showModel,
       () => {
-        console.log(props.showModel, 'showModel');
         data.speedControl = false;
       }
     );

src/views/courseware-play/index.tsx

@@ -319,7 +319,7 @@ export default defineComponent({
           ...m,
           iframeRef: null,
           videoEle: null,
-          autoPlay: false, //加载完成是否自动播放
+          autoPlay: data.currentCourse.autoPlay || false, //加载完成是否自动播放
           isprepare: false, // 视频是否加载完成
           isRender: false // 是否渲染了
         };
@@ -1348,14 +1348,16 @@ export default defineComponent({
             }}
           />
         </Popup>
+        {showSelectCourseware.value && (
+          <SelectCoursewarePop
+            list={data.coursewareList}
+            kjId={data.kjId}
+            onClose={() => {
+              showSelectCourseware.value = false;
+            }}
+            onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
+        )}
         {showMember.value && (
-          // <SelectCoursewarePop
-          //   list={data.coursewareList}
-          //   kjId={data.kjId}
-          //   onClose={() => {
-          //     showSelectCourseware.value = false;
-          //   }}
-          //   onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
           <SelectCoursewareMember
             onClose={() => {
               showSelectCourseware.value = false;

src/views/tenantAllData/index.module.less

@@ -351,7 +351,7 @@
 
 
 .popSearchList {
-  width: 128px;
+  width: 138px;
   background: #FFFFFF;
   box-shadow: 0 2px 12px 0px rgba(50, 50, 51, 0.12);
   padding: 0 8px;
@@ -361,10 +361,8 @@
   .popSearchItem {
     overflow: hidden;
 
-
-
-
     .popSearchItemChild {
+      text-align: center;
       margin: 5px 0;
       padding: 6px 14px;
       font-size: 14px;