💄 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/app_bar_leading.dart';
import 'package:solian/widgets/chat/call/call_controls.dart'; import 'package:solian/widgets/chat/call/call_controls.dart';
import 'package:solian/widgets/chat/call/call_participant.dart'; import 'package:solian/widgets/chat/call/call_participant.dart';
import 'package:livekit_client/livekit_client.dart' as livekit;
class CallScreen extends StatefulWidget { class CallScreen extends StatefulWidget {
const CallScreen({super.key}); const CallScreen({super.key});
@ -161,31 +162,30 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns, crossAxisCount: columns,
childAspectRatio: tileWidth / tileHeight, childAspectRatio: tileWidth / tileHeight,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
), ),
itemCount: math.max(0, call.participantTracks.length), itemCount: math.max(0, call.participantTracks.length),
itemBuilder: (BuildContext context, int index) { itemBuilder: (BuildContext context, int index) {
final track = call.participantTracks[index]; final track = call.participantTracks[index];
return Padding( return Card(
padding: const EdgeInsets.all(16), child: ClipRRect(
child: Card( borderRadius: const BorderRadius.all(Radius.circular(8)),
child: ClipRRect( child: InteractiveParticipantWidget(
borderRadius: const BorderRadius.all(Radius.circular(8)), color: Theme.of(context).colorScheme.surfaceContainerHigh,
child: InteractiveParticipantWidget( participant: track,
color: Theme.of(context).colorScheme.surfaceContainerHigh, onTap: () {
participant: track, if (track.participant.sid !=
onTap: () { call.focusTrack.value?.participant.sid) {
if (track.participant.sid != call.changeFocusTrack(track);
call.focusTrack.value?.participant.sid) { }
call.changeFocusTrack(track); },
}
},
),
), ),
), ),
); );
}, },
), ),
); ).paddingAll(8);
}); });
} }
@ -246,8 +246,77 @@ class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
height: 64, height: 64,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ 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( IconButton(
icon: _layoutMode == 0 icon: _layoutMode == 0
? const Icon(Icons.view_list) ? 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( Expanded(

View File

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