This commit is contained in:
zhutao
2025-11-21 18:21:47 +08:00
parent 9c94ee31fd
commit 5784a0a5d4
32 changed files with 734 additions and 441 deletions

View File

@@ -1,5 +1,7 @@
import 'package:app/pages/student/room/viewmodel/stu_room_vm.dart';
import 'package:app/widgets/room/file_drawer.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:remixicon/remixicon.dart';
@@ -23,31 +25,41 @@ class _BottomBarState extends State<BottomBar> {
color: Color(0xff232426),
),
height: 70,
child: Row(
children: [
BarItem(
title: "摄像头",
icon: RemixIcons.video_on_fill,
),
BarItem(
title: "麦克风",
icon: RemixIcons.mic_off_fill,
),
BarItem(
title: "已静音",
icon: RemixIcons.volume_mute_fill,
isOff: true,
),
BarItem(
title: "举手",
icon: RemixIcons.hand,
),
BarItem(
title: "拍照",
icon: RemixIcons.upload_2_fill,
onTap: _handShowFile,
),
],
child: Consumer<StuRoomVM>(
builder: (context,vm,_) {
//摄像头开关
return Row(
children: [
BarItem(
title: "摄像头",
icon: vm.cameraOpen ? RemixIcons.video_on_fill : RemixIcons.video_off_fill,
isOff: !vm.cameraOpen,
onTap: vm.changeCameraSwitch,
),
BarItem(
title: "麦克风",
icon: vm.micOpen ? RemixIcons.mic_fill : RemixIcons.mic_off_fill,
isOff: !vm.micOpen,
onTap: vm.changeMicSwitch,
),
BarItem(
title: "声音",
icon: vm.speakerOpen ? RemixIcons.volume_up_fill : RemixIcons.volume_mute_fill,
isOff: !vm.speakerOpen,
onTap: vm.changeSpeakerSwitch,
),
BarItem(
title: "举手",
icon: RemixIcons.hand,
),
BarItem(
title: "拍照",
icon: RemixIcons.upload_2_fill,
onTap: _handShowFile,
),
],
);
}
),
);
}

View File

@@ -1,37 +1,83 @@
import 'dart:async';
import 'package:app/utils/time.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:remixicon/remixicon.dart';
class TopBar extends StatelessWidget implements PreferredSizeWidget {
import '../viewmodel/stu_room_vm.dart';
class TopBar extends StatefulWidget implements PreferredSizeWidget {
final bool showOther;
final void Function()? onOther;
const TopBar({super.key, this.showOther = false, this.onOther});
const TopBar({
super.key,
this.showOther = false,
this.onOther,
});
@override
State<TopBar> createState() => _TopBarState();
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
class _TopBarState extends State<TopBar> {
Timer? _timer;
int seconds = 0;
late DateTime startTime;
@override
void initState() {
super.initState();
final vm = context.read<StuRoomVM>();
startTime = parseTime(vm.roomInfo.startTime);
_timer = Timer.periodic(const Duration(seconds: 1), (_) {
final diff = DateTime.now().difference(startTime).inSeconds;
setState(() {
seconds = diff < 0 ? 0 : diff;
});
});
}
/// 你若想外面主动停,可以暴露这个方法
void stopTimer() {
_timer?.cancel();
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final vm = context.read<StuRoomVM>();
return AppBar(
foregroundColor: Colors.white,
titleTextStyle: TextStyle(color: Colors.white, fontSize: 18),
backgroundColor: Color(0xff232426),
titleTextStyle: const TextStyle(color: Colors.white, fontSize: 18),
backgroundColor: const Color(0xff232426),
centerTitle: true,
title: Column(
children: [
Text("会议"),
Text(vm.roomInfo.roomName),
Text(
"01:12",
style: TextStyle(fontSize: 12, color: Colors.white24),
formatSeconds(seconds),
style: const TextStyle(fontSize: 12, color: Colors.white24),
),
],
),
actions: [
IconButton(
onPressed: onOther,
icon: Icon(showOther ? RemixIcons.team_fill : RemixIcons.team_line),
onPressed: widget.onOther,
icon: Icon(widget.showOther ? RemixIcons.team_fill : RemixIcons.team_line),
),
],
);
}
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

View File

@@ -1,5 +1,9 @@
import 'package:app/pages/student/room/viewmodel/stu_room_vm.dart';
import 'package:app/providers/user_store.dart';
import 'package:app/request/dto/room/room_info_dto.dart';
import 'package:app/widgets/base/transition/slide_hide.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'controls/bottom_bar.dart';
import 'controls/top_bar.dart';
@@ -7,7 +11,9 @@ import 'video/student_video_list.dart';
import 'video/teacher_video.dart';
class SRoomPage extends StatefulWidget {
const SRoomPage({super.key});
final RoomInfoDto roomInfo;
const SRoomPage({super.key, required this.roomInfo});
@override
State<SRoomPage> createState() => _SRoomPageState();
@@ -29,57 +35,63 @@ class _SRoomPageState extends State<SRoomPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
//底部控制显示
GestureDetector(
onTap: _toggleOverlay,
child: Container(color: Color(0xff2c3032)),
),
//老师视频画面
TeacherVideo(),
Positioned(
right: 0,
top: 0,
bottom: 0,
child: Visibility(
visible: _showOtherStudent,
child: StudentVideoList(),
UserStore userStore = context.read<UserStore>();
return ChangeNotifierProvider<StuRoomVM>(
create: (_) => StuRoomVM(
roomInfo: widget.roomInfo,
uid: userStore.userInfo!.id,
),
child: Scaffold(
body: Stack(
children: [
//底部控制显示
GestureDetector(
onTap: _toggleOverlay,
child: Container(color: Color(0xff2c3032)),
),
),
//老师视频画面
TeacherVideo(),
///控制栏
Positioned(
top: 0,
left: 0,
right: 0,
child: SlideHide(
direction: SlideDirection.up,
hide: !_controlsVisible,
child: TopBar(
showOther: _showOtherStudent,
onOther: () {
setState(() {
_showOtherStudent = !_showOtherStudent;
});
},
Positioned(
right: 0,
top: 0,
bottom: 0,
child: Visibility(
visible: _showOtherStudent,
child: StudentVideoList(),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: SlideHide(
direction: SlideDirection.down,
hide: !_controlsVisible,
child: BottomBar(),
///控制栏
Positioned(
top: 0,
left: 0,
right: 0,
child: SlideHide(
direction: SlideDirection.up,
hide: !_controlsVisible,
child: TopBar(
showOther: _showOtherStudent,
onOther: () {
setState(() {
_showOtherStudent = !_showOtherStudent;
});
},
),
),
),
),
],
Positioned(
bottom: 0,
left: 0,
right: 0,
child: SlideHide(
direction: SlideDirection.down,
hide: !_controlsVisible,
child: BottomBar(),
),
),
],
),
),
);
}

View File

@@ -1,24 +1,50 @@
import 'package:app/pages/student/room/viewmodel/stu_room_vm.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class StudentVideoList extends StatefulWidget {
class StudentVideoList extends StatelessWidget {
const StudentVideoList({super.key});
@override
State<StudentVideoList> createState() => _StudentVideoListState();
}
class _StudentVideoListState extends State<StudentVideoList> {
@override
Widget build(BuildContext context) {
final vm = context.watch<StuRoomVM>();
return SafeArea(
child: Container(
width: 250,
padding: EdgeInsets.only(bottom: 30),
child: ListView.separated(
padding: EdgeInsets.all(10),
itemCount: 8,
itemCount: vm.otherStuList.length,
itemBuilder: (context, index) {
return VideoItem();
final item = vm.otherStuList[index];
return Stack(
children: [
AspectRatio(
aspectRatio: 1.5 / 1,
child: Container(
decoration: BoxDecoration(
color: Color(0xff373c3e),
borderRadius: BorderRadius.circular(10),
),
),
),
Positioned(
bottom: 5,
left: 5,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 7, vertical: 3),
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(5),
),
child: Text(
item.userName,
style: TextStyle(fontSize: 12, color: Colors.white),
),
),
),
],
);
},
separatorBuilder: (context, index) => SizedBox(height: 15),
),
@@ -26,39 +52,3 @@ class _StudentVideoListState extends State<StudentVideoList> {
);
}
}
class VideoItem extends StatelessWidget {
const VideoItem({super.key});
@override
Widget build(BuildContext context) {
return Stack(
children: [
AspectRatio(
aspectRatio: 1.5 / 1,
child: Container(
decoration: BoxDecoration(
color: Color(0xff373c3e),
borderRadius: BorderRadius.circular(10),
),
),
),
Positioned(
bottom: 5,
left: 5,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 7, vertical: 3),
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(5),
),
child: Text(
"小红",
style: TextStyle(fontSize: 12, color: Colors.white),
),
),
),
],
);
}
}

View File

@@ -0,0 +1,133 @@
import 'dart:async';
import 'package:app/providers/user_store.dart';
import 'package:app/request/dto/room/room_info_dto.dart';
import 'package:app/request/dto/room/room_type_dto.dart';
import 'package:app/request/dto/room/room_user_dto.dart';
import 'package:app/request/dto/room/rtc_token_dto.dart';
import 'package:app/request/websocket/room_protocol.dart';
import 'package:app/request/websocket/room_websocket.dart';
import 'package:flutter/cupertino.dart';
import 'package:logger/logger.dart';
Logger log = Logger();
class StuRoomVM extends ChangeNotifier {
///房间信息
final RoomInfoDto roomInfo;
///房间开启状态,0没开始1进行中2已结束
int roomStatus = 0;
///其他学生列表,老师信息,自己信息
int uid;
List<RoomUserDto> otherStuList = [];
RoomUserDto? teacherInfo;
RoomUserDto? selfInfo;
///本人的摄像头、麦克风、扬声器状态是否打开了
bool get cameraOpen => selfInfo?.cameraStatus == 1;
bool get micOpen => selfInfo?.microphoneStatus == 1;
bool get speakerOpen => selfInfo?.speekerStatus == 1;
///ws管理
final RoomWebSocket _ws = RoomWebSocket();
StreamSubscription<RoomMessage>? _sub;
RtcTokenDto? get rtcToken => _ws.rtcToken;
StuRoomVM({required this.roomInfo, required this.uid}) {
_startRoom();
}
///开始链接房间
Future<void> _startRoom() async {
//如果socket的token没有先初始化
if (_ws.wsToken.isEmpty) {
await _ws.initToken(roomInfo.id);
}
//启动连接
await _ws.connect();
//
_sub = _ws.stream.listen((msg) {
//自习室人员变化,同时也设置房间是否开了
if (msg.event == RoomEvent.changeUser) {
final list = RoomUserDto.listFromJson(msg.data['user_list']);
onStudentChange(list);
onRoomStartStatus(RoomTypeDto.fromJson(msg.data['room_info']));
}
});
}
///学生人员变化事件,(如加入、退出、掉线)
void onStudentChange(List<RoomUserDto> list) {
List<RoomUserDto> newList = [];
for (var t in list) {
//设置老师
if (t.userType == 2) {
teacherInfo = t;
} else {
//要过滤自己,只要其他学生
if (t.userId != uid) {
newList.add(t);
} else {
selfInfo = t;
}
}
}
otherStuList = newList;
notifyListeners();
}
///设置房间开启状态
void onRoomStartStatus(RoomTypeDto roomInfo) {
roomStatus = roomInfo.roomStatus;
notifyListeners();
}
///控制摄像头开关
void changeCameraSwitch() {
bool isOpen = selfInfo!.cameraStatus == 1;
selfInfo!.cameraStatus = isOpen ? 0 : 1;
//发送指令
_ws.send(RoomCommand.studentActon, {
"mute_type": "camera",
"is_mute": isOpen ? 1 : 0,
});
notifyListeners();
}
///控制麦克风开关
void changeMicSwitch() {
bool isOpen = selfInfo!.microphoneStatus == 1;
selfInfo!.microphoneStatus = isOpen ? 0 : 1;
print(selfInfo!.microphoneStatus);
//发送指令
_ws.send(RoomCommand.studentActon, {
"mute_type": "microphone",
"is_mute": isOpen ? 1 : 0,
});
notifyListeners();
}
/// 控制扬声器开关
void changeSpeakerSwitch() {
bool isOpen = selfInfo!.speekerStatus == 1;
selfInfo!.speekerStatus = isOpen ? 0 : 1;
//发送指令
_ws.send(RoomCommand.studentActon, {
"mute_type": "speeker",
"is_mute": isOpen ? 1 : 0,
});
notifyListeners();
}
@override
void dispose() {
super.dispose();
_sub?.cancel();
_ws.dispose();
}
}