Merge branch 'iteration-20250327-light' into online

public/roll-call/css/index.css

@@ -61,17 +61,23 @@ a {
 #menu {
   position: absolute;
   bottom: 50px;
-  width: 100%;
+  left: 100px;
+  right: 100px;
   text-align: center;
 }
+#menu  div {
+  display: inline-block;
+}
 #menu.menuRight{
-  display: flex;
-  padding: 0 100px;
-  flex-direction: row-reverse;
+  /* display: flex; */
+  /* right: 100px; */
+  /* flex-direction: row-reverse; */
+  text-align: right;
 }
 #menu.menuLeft{
-  display: flex;
-  padding: 0 100px;
+  /* display: flex; */
+  /* left: 100px; */
+  text-align: left;
 }
 .bss {
   height: 100vh;

public/roll-call/index.html

@@ -31,12 +31,18 @@
       <div class="pageTitle"></div>
       <div v-if="platform!=='modal'"  class="iconBack" @click.stop="onBack()"></div>
       <div id="menu" :class="[platform==='modal'?(imagePos==='right'?'menuRight':'menuLeft'):'']">
-        <div id="table" :class="tableIndex <= 1 ? 'disabled' : ''" v-show="!animationStatus"
+        <div v-if="platform==='modal' && imagePos==='right'" key="btns">
+          <div v-if="platform==='modal'" id="backBtn" @click.stop="onBack()"></div>
+          <div id="sphere" v-show="animationStatus" @click.stop="closes()"></div>
+          <div id="table" :class="tableIndex <= 1 ? 'disabled' : ''" v-show="!animationStatus"
           @click.stop="start()"></div>
-        <div id="sphere" v-show="animationStatus" @click.stop="closes()"></div>
-        <div v-if="platform==='modal'" id="backBtn" @click.stop="onBack()"></div>
-        <!-- <button id="reset" style="margin-left:40px;" @click="resets()">照片墙</button> -->
-        <!-- <button id="lists" @click="listShow = true">中奖名单</button> -->
+        </div>
+        <div v-else key="btns">
+          <div id="table" :class="tableIndex <= 1 ? 'disabled' : ''" v-show="!animationStatus"
+          @click.stop="start()"></div>
+          <div id="sphere" v-show="animationStatus" @click.stop="closes()"></div>
+          <div v-if="platform==='modal'" id="backBtn" @click.stop="onBack()"></div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -59,7 +59,11 @@ export default defineComponent({
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any,
       afterMa3: true,
-      count: 0
+      count: 0,
+
+      // 添加缓冲状态标识
+      isBuffering: false,
+      bufferTimeout: null as any
     });
     const canvasRef: any = ref();
     const audioRef: any = ref();
@@ -81,6 +85,12 @@ export default defineComponent({
           data.playState = 'pause';
           // data.vudio = null;
         }
+
+        if (!props.show) {
+          // 去掉检测加载缓存
+          data.isBuffering = false;
+          data.bufferTimeout && clearTimeout(data.bufferTimeout)
+        }
       }
     );
     // watch(
@@ -107,7 +117,7 @@ export default defineComponent({
         audioRef.value.play();
         data.playState = 'play';
         //
-        nextTick(() => {
+        // nextTick(() => {
           // onInit(audioRef.value, canvasRef.value);
           // setTimeout(() => {
           //   onInit(audioRef.value, canvasRef.value);
@@ -116,7 +126,7 @@ export default defineComponent({
           // if (data.vudio) {
           //   data.vudio.dance();
           // }
-        });
+        // });
       } else {
         audioRef.value.pause();
         data.playState = 'pause';
@@ -125,7 +135,7 @@ export default defineComponent({
 
     const onInit = (audio: undefined, canvas: undefined) => {
       if (!data.vudio && data.count > 1) {
-        console.log(data.vudio, 'data.vudio');
+        // console.log(data.vudio, 'data.vudio');
         try {
           const rect = contetRef.value.getBoundingClientRect() || {
             width: 200,
@@ -164,16 +174,6 @@ export default defineComponent({
         // data.count = 0;
         onToggleAudio();
       }
-
-      // if (audioRef.value) {
-      //   audioRef.value.stop = () => {
-      //     audioRef.value?.pause();
-      //   };
-      //   audioRef.value.onPlay = () => {
-      //     audioRef.value?.play();
-      //     onInit(audioRef.value, canvasRef.value);
-      //   };
-      // }
       emit('loadedmetadata', audioRef.value);
     };
 
@@ -184,7 +184,7 @@ export default defineComponent({
       data.timer = setTimeout(() => {
         audioRef.value.currentTime = val;
         data.timer = null;
-      }, 60);
+      }, 300);
     };
 
     /** 播放结束 */
@@ -462,8 +462,21 @@ export default defineComponent({
     const onChangeOnlineStatus = (val: any) => {
       if (val.type === 'online') {
         data.isOnline = true;
+
+        console.log(audioRef.value, 'audioRef.value')
+        if(audioRef.value) {
+          const currentTime = audioRef.value.currentTime;
+          audioRef.value.load()
+          audioRef.value.currentTime = currentTime || 0
+          audioRef.value.pause();
+          data.playState = 'pause';
+        }
       } else if (val.type === 'offline') {
         data.isOnline = false;
+
+        // 去掉检测加载缓存
+        data.isBuffering = false;
+        data.bufferTimeout && clearTimeout(data.bufferTimeout)
       }
     };
     onMounted(() => {
@@ -495,9 +508,29 @@ export default defineComponent({
                   onInit(audioRef.value, canvasRef.value);
                 }
                 // 开始拖动时也不能更新
-                if (data.dragStatus) return;
+                if (data.timer) return;
+                console.log('timeupdate');
                 data.currentTime = audioRef.value?.currentTime;
               }}
+              onWaiting={() => {
+                data.isBuffering = true;
+                data.bufferTimeout && clearTimeout(data.bufferTimeout);
+
+                // 设置缓冲超时检测（5秒）
+                data.bufferTimeout = setTimeout(() => {
+                  if (data.isBuffering && data.isOnline) {
+                    console.log('缓冲超时，暂停播放');
+                    audioRef.value.pause();
+                    data.playState = 'pause';
+                    showToast('网络连接不稳定，请检查网络后继续播放');
+                    audioRef.value.currentTime = audioRef.value.currentTime + 0.01;
+                  }
+                }, 15000);
+              }}
+              onCanplay={() => {
+                data.isBuffering = false;
+                data.bufferTimeout && clearTimeout(data.bufferTimeout); // 清除超时检测
+              }}
               onError={() => {
                 console.log('error');
                 audioRef.value.pause();
@@ -512,7 +545,8 @@ export default defineComponent({
               }}
               onEnded={onEnded}
               crossorigin="anonymous"
-              playsinline="false"></audio>
+              playsinline="false"
+              ></audio>
 
             {data.afterMa3 && (
               <div class={styles.tempVudio}>
@@ -539,7 +573,7 @@ export default defineComponent({
             <Slider
               step={0.01}
               class={styles.timeProgress}
-              v-model={data.currentTime}
+              modelValue={data.currentTime}
               max={data.duration}
               onUpdate:modelValue={val => {
                 handleChangeTime(val);

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

@@ -76,7 +76,11 @@ export default defineComponent({
       speedStyle: {
         left: '1px'
       },
-      defaultSpeed: 1 // 默认速度
+      defaultSpeed: 1, // 默认速度
+
+      // 添加缓冲状态标识
+      isBuffering: false,
+      bufferTimeout: null as any
     });
     const videoRef = ref();
     const contetRef = ref();
@@ -207,7 +211,27 @@ export default defineComponent({
           data.playState = 'play';
         });
 
+        videoItem.value.on('waiting', () => {
+          console.log('waiting')
+
+          data.isBuffering = true;
+          data.bufferTimeout && clearTimeout(data.bufferTimeout);
+
+          // 设置缓冲超时检测（5秒）
+          data.bufferTimeout = setTimeout(() => {
+            if (data.isBuffering && data.isOnline) {
+              console.log('缓冲超时，暂停播放');
+              videoItem.value.pause();
+              data.playState = 'pause';
+              showToast('网络连接不稳定，请检查网络后继续播放');
+              videoItem.value.currentTime(videoItem.value.currentTime() + 0.01);
+            }
+          }, 15000);
+        });
+
         videoItem.value.on('canplay', (e: any) => {
+          data.isBuffering = false;
+          data.bufferTimeout && clearTimeout(data.bufferTimeout); // 清除超时检测
           // console.log('canplay');
           data.duration = videoItem.value.duration();
           emit('canplay');
@@ -230,6 +254,9 @@ export default defineComponent({
       () => {
         videoItem.value.pause();
         videoItem.value.currentTime(0);
+        // 去掉检测加载缓存
+        data.isBuffering = false;
+        data.bufferTimeout && clearTimeout(data.bufferTimeout)
         if (item.value?.id) {
           __init();
           data.playState = 'pause';
@@ -499,8 +526,19 @@ export default defineComponent({
     const onChangeOnlineStatus = (val: any) => {
       if (val.type === 'online') {
         data.isOnline = true;
+        const currentTime = videoItem.value.currentTime();
+        videoItem.value.load();
+        videoItem.value.currentTime(currentTime);
+
+        setTimeout(() => {
+          onToggleAudio("pause");
+        }, 0);
       } else if (val.type === 'offline') {
         data.isOnline = false;
+
+        // 去掉检测加载缓存
+        data.isBuffering = false;
+        data.bufferTimeout && clearTimeout(data.bufferTimeout)
       }
     };
 

src/views/courseware-play/index.tsx

@@ -1292,7 +1292,6 @@ export default defineComponent({
                         showModel={activeData.model}
                         isEmtry={isEmtry}
                         onLoadedmetadata={(audioEle: any) => {
-                          console.log(audioEle, 'audioEle', m);
                           m.audioEle = audioEle;
                         }}
                         onEnded={() => {

src/views/tempo-practice/setting-modal/index.module.less

@@ -107,18 +107,19 @@
   z-index: 7;
 
   &::-webkit-scrollbar {
-    width: 4px;
+    // width: 4px;
+    display: none;
   }
 
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.2);
-  }
+  // &::-webkit-scrollbar-thumb {
+  //   border-radius: 10px;
+  //   background: rgba(0, 0, 0, 0.2);
+  // }
 
-  &::-webkit-scrollbar-track {
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0.1);
-  }
+  // &::-webkit-scrollbar-track {
+  //   border-radius: 0;
+  //   background: rgba(0, 0, 0, 0.1);
+  // }
 
   .iArrow {
     width: 14px;