1
This commit is contained in:
@@ -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,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
133
lib/pages/student/room/viewmodel/stu_room_vm.dart
Normal file
133
lib/pages/student/room/viewmodel/stu_room_vm.dart
Normal 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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user