💄 Better call ui

This commit is contained in:
LittleSheep 2024-08-06 23:23:02 +08:00
parent 73982f48d6
commit de00a20eee
2 changed files with 91 additions and 18 deletions

View File

@ -9,6 +9,7 @@ import 'package:solian/theme.dart';
import 'package:solian/widgets/app_bar_leading.dart';
import 'package:solian/widgets/chat/call/call_controls.dart';
import 'package:solian/widgets/chat/call/call_participant.dart';
import 'package:livekit_client/livekit_client.dart' as livekit;
class CallScreen extends StatefulWidget {
const CallScreen({super.key});
@ -161,13 +162,13 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
childAspectRatio: tileWidth / tileHeight,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: math.max(0, call.participantTracks.length),
itemBuilder: (BuildContext context, int index) {
final track = call.participantTracks[index];
return Padding(
padding: const EdgeInsets.all(16),
child: Card(
return Card(
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: InteractiveParticipantWidget(
@ -181,11 +182,10 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
},
),
),
),
);
},
),
);
).paddingAll(8);
});
}
@ -246,8 +246,77 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
width: MediaQuery.of(context).size.width,
height: 64,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Expanded(child: SizedBox()),
Builder(builder: (context) {
final call = Get.find<ChatCallProvider>();
final connectionQuality =
call.room.localParticipant?.connectionQuality ??
livekit.ConnectionQuality.unknown;
return Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(call.room.serverRegion ?? 'unknown'),
const SizedBox(width: 6),
Text(call.room.serverVersion ?? 'unknown')
],
),
Row(
children: [
Text(
{
livekit.ConnectionState.disconnected:
'callStatusDisconnected'.tr,
livekit.ConnectionState.connected:
'callStatusConnected'.tr,
livekit.ConnectionState.connecting:
'callStatusConnecting'.tr,
livekit.ConnectionState.reconnecting:
'callStatusReconnecting'.tr,
}[call.room.connectionState]!,
),
const SizedBox(width: 6),
if (connectionQuality !=
livekit.ConnectionQuality.unknown)
Icon(
{
livekit.ConnectionQuality.excellent:
Icons.signal_cellular_alt,
livekit.ConnectionQuality.good:
Icons.signal_cellular_alt_2_bar,
livekit.ConnectionQuality.poor:
Icons.signal_cellular_alt_1_bar,
}[connectionQuality],
color: {
livekit.ConnectionQuality.excellent:
Colors.green,
livekit.ConnectionQuality.good:
Colors.orange,
livekit.ConnectionQuality.poor:
Colors.red,
}[connectionQuality],
size: 16,
)
else
const SizedBox(
width: 12,
height: 12,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2,
),
).paddingAll(3),
],
),
],
),
);
}),
IconButton(
icon: _layoutMode == 0
? const Icon(Icons.view_list)
@ -257,7 +326,7 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
},
),
],
).paddingSymmetric(horizontal: 10),
).paddingOnly(left: 20, right: 16),
),
),
Expanded(

View File

@ -333,4 +333,8 @@ const i18nSimplifiedChinese = {
'readMore': '阅读更多',
'attachmentUnload': '附件未加载',
'attachmentUnloadCaption': '为了节省流量,本附件未自动加载,点一下来开始加载。',
'callStatusConnected': '已连接',
'callStatusDisconnected': '已断开',
'callStatusConnecting': '连接中',
'callStatusReconnected': '重连中',
};