Solian/lib/screens/channel/call/call.dart

390 lines
14 KiB
Dart
Raw Normal View History

2024-06-02 07:08:11 +00:00
import 'dart:async';
2024-06-01 12:18:25 +00:00
import 'dart:math' as math;
import 'package:async/async.dart';
2024-06-01 12:18:25 +00:00
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
2024-06-01 12:18:25 +00:00
import 'package:get/get.dart';
2024-07-23 17:17:41 +00:00
import 'package:solian/providers/call.dart';
2024-06-22 15:59:11 +00:00
import 'package:solian/theme.dart';
import 'package:solian/widgets/app_bar_leading.dart';
2024-06-01 12:18:25 +00:00
import 'package:solian/widgets/chat/call/call_controls.dart';
import 'package:solian/widgets/chat/call/call_participant.dart';
2024-08-06 15:23:02 +00:00
import 'package:livekit_client/livekit_client.dart' as livekit;
2024-06-01 12:18:25 +00:00
class CallScreen extends StatefulWidget {
final bool hideAppBar;
final bool isExpandable;
const CallScreen({
super.key,
this.hideAppBar = false,
this.isExpandable = false,
});
2024-06-01 12:18:25 +00:00
@override
State<CallScreen> createState() => _CallScreenState();
}
class _CallScreenState extends State<CallScreen> with TickerProviderStateMixin {
2024-08-02 10:49:28 +00:00
int _layoutMode = 0;
bool _showControls = true;
CancelableOperation? _hideControlsOperation;
late final AnimationController _controlsAnimationController =
AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
late final Animation<double> _controlsAnimation = CurvedAnimation(
parent: _controlsAnimationController,
curve: Curves.fastOutSlowIn,
);
2024-08-02 10:49:28 +00:00
void _switchLayout() {
if (_layoutMode < 1) {
setState(() => _layoutMode++);
} else {
setState(() => _layoutMode = 0);
}
}
void _toggleControls() {
if (_showControls) {
setState(() => _showControls = false);
_controlsAnimationController.animateTo(0);
_hideControlsOperation?.cancel();
} else {
setState(() => _showControls = true);
_controlsAnimationController.animateTo(1);
_planAutoHideControls();
}
}
void _planAutoHideControls() {
_hideControlsOperation = CancelableOperation.fromFuture(
Future.delayed(const Duration(seconds: 3), () {
if (!mounted) return;
if (_showControls) _toggleControls();
}),
);
}
2024-08-02 10:49:28 +00:00
Widget _buildListLayout() {
final ChatCallProvider call = Get.find();
2024-08-02 13:12:37 +00:00
return Obx(
() => Stack(
children: [
Container(
color: Theme.of(context).colorScheme.surfaceContainer,
child: call.focusTrack.value != null
? InteractiveParticipantWidget(
isFixedAvatar: false,
participant: call.focusTrack.value!,
onTap: () {},
)
: const SizedBox.shrink(),
2024-08-02 13:12:37 +00:00
),
Positioned(
left: 0,
right: 0,
top: 0,
child: SizedBox(
height: 128,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: math.max(0, call.participantTracks.length),
itemBuilder: (BuildContext context, int index) {
final track = call.participantTracks[index];
if (track.participant.sid ==
call.focusTrack.value?.participant.sid) {
return Container();
}
2024-08-02 10:49:28 +00:00
2024-08-02 13:12:37 +00:00
return Padding(
padding: const EdgeInsets.only(top: 8, left: 8),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: InteractiveParticipantWidget(
isFixedAvatar: true,
width: 120,
height: 120,
color: Theme.of(context).cardColor,
participant: track,
onTap: () {
if (track.participant.sid !=
call.focusTrack.value?.participant.sid) {
call.changeFocusTrack(track);
}
},
),
2024-08-02 10:49:28 +00:00
),
2024-08-02 13:12:37 +00:00
);
},
),
2024-08-02 10:49:28 +00:00
),
),
2024-08-02 13:12:37 +00:00
],
),
2024-08-02 10:49:28 +00:00
);
}
Widget _buildGridLayout() {
final ChatCallProvider call = Get.find();
2024-08-02 13:12:37 +00:00
return LayoutBuilder(builder: (context, constraints) {
double screenWidth = constraints.maxWidth;
double screenHeight = constraints.maxHeight;
2024-08-02 10:49:28 +00:00
2024-08-02 13:12:37 +00:00
int columns = (math.sqrt(call.participantTracks.length)).ceil();
int rows = (call.participantTracks.length / columns).ceil();
2024-08-02 10:49:28 +00:00
2024-08-02 13:12:37 +00:00
double tileWidth = screenWidth / columns;
double tileHeight = screenHeight / rows;
2024-08-02 10:49:28 +00:00
2024-08-02 13:12:37 +00:00
return Obx(
() => GridView.builder(
2024-08-02 10:49:28 +00:00
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
childAspectRatio: tileWidth / tileHeight,
2024-08-06 15:23:02 +00:00
crossAxisSpacing: 8,
mainAxisSpacing: 8,
2024-08-02 10:49:28 +00:00
),
itemCount: math.max(0, call.participantTracks.length),
itemBuilder: (BuildContext context, int index) {
final track = call.participantTracks[index];
2024-08-06 15:23:02 +00:00
return Card(
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: InteractiveParticipantWidget(
color: Theme.of(context).colorScheme.surfaceContainerHigh,
participant: track,
onTap: () {
if (track.participant.sid !=
call.focusTrack.value?.participant.sid) {
call.changeFocusTrack(track);
}
},
2024-08-02 10:49:28 +00:00
),
),
);
},
2024-08-02 13:12:37 +00:00
),
2024-08-06 15:23:02 +00:00
).paddingAll(8);
2024-08-02 13:12:37 +00:00
});
2024-08-02 10:49:28 +00:00
}
2024-06-01 12:18:25 +00:00
@override
void initState() {
super.initState();
2024-06-02 07:43:42 +00:00
Future.delayed(Duration.zero, () {
Get.find<ChatCallProvider>()
..setupRoom()
..enableDurationUpdater();
_planAutoHideControls();
});
}
@override
void dispose() {
_controlsAnimationController.dispose();
super.dispose();
2024-06-01 12:18:25 +00:00
}
@override
Widget build(BuildContext context) {
final ChatCallProvider ctrl = Get.find();
2024-06-01 12:18:25 +00:00
return Material(
color: Theme.of(context).colorScheme.surface,
2024-06-02 07:08:11 +00:00
child: Scaffold(
appBar: widget.hideAppBar
? null
: AppBar(
leading: AppBarLeadingButton.adaptive(context),
centerTitle: true,
toolbarHeight: SolianTheme.toolbarHeight(context),
title: Obx(
() => RichText(
textAlign: TextAlign.center,
text: TextSpan(children: [
TextSpan(
text: 'call'.tr,
style: Theme.of(context).textTheme.titleLarge,
),
const TextSpan(text: '\n'),
TextSpan(
text: ctrl.lastDuration.value,
style: Theme.of(context).textTheme.bodySmall,
),
]),
),
),
2024-06-01 12:18:25 +00:00
),
2024-06-02 07:08:11 +00:00
body: SafeArea(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
2024-08-02 13:12:37 +00:00
child: Column(
children: [
SizeTransition(
sizeFactor: _controlsAnimation,
axis: Axis.vertical,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 64,
child: Row(
2024-08-06 15:23:02 +00:00
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
2024-08-02 13:12:37 +00:00
children: [
2024-08-06 15:23:02 +00:00
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: [
Obx(() {
return Row(
children: [
Text(
2024-08-19 17:19:18 +00:00
call.channel.value?.name ??
'unknown'.tr,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
const Gap(6),
Text(call.lastDuration.value)
],
);
}),
2024-08-06 15:23:02 +00:00
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 Gap(6),
2024-08-06 15:23:02 +00:00
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),
],
),
],
),
);
}),
Row(
children: [
if (widget.isExpandable)
IconButton(
icon: const Icon(Icons.fullscreen),
onPressed: () {
ctrl.gotoScreen(context);
},
),
IconButton(
icon: _layoutMode == 0
? const Icon(Icons.view_list)
: const Icon(Icons.grid_view),
onPressed: () {
_switchLayout();
},
),
],
2024-08-02 13:12:37 +00:00
),
],
2024-08-06 15:23:02 +00:00
).paddingOnly(left: 20, right: 16),
),
2024-08-02 13:12:37 +00:00
),
Expanded(
child: Material(
color: Theme.of(context).colorScheme.surfaceContainerLow,
2024-08-02 10:49:28 +00:00
child: Builder(
builder: (context) {
switch (_layoutMode) {
case 1:
return _buildGridLayout();
default:
return _buildListLayout();
}
},
2024-06-02 07:08:11 +00:00
),
2024-06-01 12:18:25 +00:00
),
2024-08-02 13:12:37 +00:00
),
if (ctrl.room.localParticipant != null)
2024-08-02 13:12:37 +00:00
SizeTransition(
sizeFactor: _controlsAnimation,
axis: Axis.vertical,
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: ControlsWidget(
ctrl.room,
ctrl.room.localParticipant!,
2024-08-02 10:49:28 +00:00
),
),
2024-08-02 13:12:37 +00:00
),
],
2024-06-02 07:08:11 +00:00
),
onTap: () {
_toggleControls();
},
2024-06-01 12:18:25 +00:00
),
),
),
);
}
2024-06-02 07:43:42 +00:00
@override
void deactivate() {
Get.find<ChatCallProvider>().disableDurationUpdater();
2024-06-02 07:43:42 +00:00
super.deactivate();
}
@override
void activate() {
Get.find<ChatCallProvider>().enableDurationUpdater();
2024-06-02 07:43:42 +00:00
super.activate();
}
2024-06-01 12:18:25 +00:00
}