fix(meeting): 修复会议室学生网格布局计算逻辑
- 修正 gridRows 和 gridCols 计算函数的命名与逻辑错误 - 调整学生人数与网格行列数的对应关系 - 添加 16:9 宽高比设置以统一视频显示比例 - 优化控制台日志输出的代码格式 - 修复加入会议时对已存在用户的处理逻辑
This commit is contained in:
@ -149,29 +149,33 @@
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据学生人数计算宫格排数(最多 4 排)
|
||||
*/
|
||||
const gridRows = computed(() => {
|
||||
const count = studentUsers.value.length;
|
||||
if (count <= 1) {
|
||||
return 1;
|
||||
}
|
||||
if (count <= 4) {
|
||||
return 2;
|
||||
}
|
||||
if (count <= 10) {
|
||||
return 3;
|
||||
}
|
||||
return 4;
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据学生人数与排数计算列数
|
||||
* 根据学生人数计算宫格列数
|
||||
* - 1 个学生:全屏 (1 列)
|
||||
* - 2~4 个学生:2 列
|
||||
* - 5~9 个学生:3 列
|
||||
* - 10 个以上:4 列
|
||||
*/
|
||||
const gridCols = computed(() => {
|
||||
const count = studentUsers.value.length;
|
||||
const rows = gridRows.value || 1;
|
||||
return Math.max(1, Math.ceil(count / rows));
|
||||
if (count <= 1) {
|
||||
return 1; // 1 个学生,全屏显示
|
||||
}
|
||||
if (count <= 4) {
|
||||
return 2; // 2~4 个学生,2 列
|
||||
}
|
||||
if (count <= 9) {
|
||||
return 3; // 5~9 个学生,3 列
|
||||
}
|
||||
return 4; // 10 个以上,4 列
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据学生人数与列数计算排数
|
||||
*/
|
||||
const gridRows = computed(() => {
|
||||
const count = studentUsers.value.length;
|
||||
const cols = gridCols.value || 1;
|
||||
return Math.max(1, Math.ceil(count / cols));
|
||||
});
|
||||
|
||||
type MeetingWsPacket = Parameters<ServerToClientEvents['message']>[0];
|
||||
@ -452,6 +456,7 @@
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
border-radius: 16px;
|
||||
aspect-ratio: 16 / 9; // 设置 16:9 比例
|
||||
}
|
||||
|
||||
.player-wrapper {
|
||||
|
||||
@ -579,7 +579,10 @@
|
||||
await meeting.initAndJoin(roomData);
|
||||
// ✅ 加入后先检查是否有已存在的远程用户
|
||||
const existingUsers = meeting.client.value?.remoteUsers || [];
|
||||
console.log('[学生端] 加入会议,已存在的远程用户:', existingUsers.map(u => u.uid));
|
||||
console.log(
|
||||
'[学生端] 加入会议,已存在的远程用户:',
|
||||
existingUsers.map((u) => u.uid)
|
||||
);
|
||||
|
||||
// 等待 DOM 更新后再尝试播放视频
|
||||
await nextTick();
|
||||
@ -587,7 +590,7 @@
|
||||
ensurePrimaryVideoPlaying(primaryUid.value);
|
||||
ensurePrimaryVideoPlaying(secondaryUid.value);
|
||||
// 如果有已存在的用户,也检查一下
|
||||
existingUsers.forEach(user => {
|
||||
existingUsers.forEach((user) => {
|
||||
ensurePrimaryVideoPlaying(user.uid);
|
||||
});
|
||||
}, 500);
|
||||
@ -652,7 +655,10 @@
|
||||
await meeting.initAndJoin(roomData);
|
||||
// ✅ 加入后先检查是否有已存在的远程用户
|
||||
const existingUsers = meeting.client.value?.remoteUsers || [];
|
||||
console.log('[学生端] 加入会议,已存在的远程用户:', existingUsers.map(u => u.uid));
|
||||
console.log(
|
||||
'[学生端] 加入会议,已存在的远程用户:',
|
||||
existingUsers.map((u) => u.uid)
|
||||
);
|
||||
|
||||
// 等待 DOM 更新后再尝试播放视频
|
||||
await nextTick();
|
||||
@ -660,7 +666,7 @@
|
||||
ensurePrimaryVideoPlaying(primaryUid.value);
|
||||
ensurePrimaryVideoPlaying(secondaryUid.value);
|
||||
// 如果有已存在的用户,也检查一下
|
||||
existingUsers.forEach(user => {
|
||||
existingUsers.forEach((user) => {
|
||||
ensurePrimaryVideoPlaying(user.uid);
|
||||
});
|
||||
}, 500);
|
||||
|
||||
Reference in New Issue
Block a user