Browse Source

✨ feat(classroom): 优化视频区域显示逻辑

- 新增hideVideoAreaIfNoStreams方法,用于检查视频流状态
- 在取消订阅摄像头流后调用隐藏检查
- 在取消订阅屏幕分享流后调用隐藏检查
- 当没有视频流时自动隐藏视频区域
yourname 6 months ago
parent
commit
adf25eaf12
1 changed files with 11 additions and 0 deletions
  1. 11 0
      src/client/mobile/components/Classroom/useClassroom.ts

+ 11 - 0
src/client/mobile/components/Classroom/useClassroom.ts

@@ -593,6 +593,8 @@ export const useClassroom = ({ user }:{ user : User }) => {
           console.log(`取消订阅用户 ${userId} 的视频流`);
           showSystemMessage(`取消订阅用户 ${getUserNameByIdSync(userId)} 的视频流`);
           removeRemoteVideo(userId, 'camera');
+          // 如果没有其他视频流,隐藏视频区域
+          hideVideoAreaIfNoStreams();
           break;
           
         case 2: // 订阅中
@@ -656,6 +658,8 @@ export const useClassroom = ({ user }:{ user : User }) => {
           console.log(`取消订阅用户 ${userId} 的屏幕分享流`);
           showSystemMessage(`取消订阅用户 ${getUserNameByIdSync(userId)} 的屏幕分享流`);
           removeRemoteVideo(userId, 'screen');
+          // 如果没有其他视频流,隐藏视频区域
+          hideVideoAreaIfNoStreams();
           break;
           
         case 2: // 订阅中
@@ -1516,6 +1520,13 @@ export const useClassroom = ({ user }:{ user : User }) => {
     }
   };
 
+  // 检查如果没有视频流则隐藏视频区域
+  const hideVideoAreaIfNoStreams = () => {
+    if (!aliRtcEngine.current) return;
+    
+    setShowVideo(false);
+  };
+
   const answerHandUp = async (studentId: string): Promise<void> => {
     if (!imMessageManager.current || !classId || role !== Role.Teacher) return;