372 lines
12 KiB
Dart
372 lines
12 KiB
Dart
import 'package:easy_localization/easy_localization.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:gap/gap.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:island/pods/chat/call.dart';
|
|
import 'package:island/pods/network.dart';
|
|
import 'package:island/widgets/alert.dart';
|
|
import 'package:island/widgets/chat/call_participant_tile.dart';
|
|
import 'package:island/widgets/content/sheet.dart';
|
|
import 'package:material_symbols_icons/symbols.dart';
|
|
import 'package:styled_widget/styled_widget.dart';
|
|
import 'package:flutter_webrtc/flutter_webrtc.dart';
|
|
|
|
class CallControlsBar extends HookConsumerWidget {
|
|
const CallControlsBar({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final callState = ref.watch(callNotifierProvider);
|
|
final callNotifier = ref.read(callNotifierProvider.notifier);
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
|
|
child: Wrap(
|
|
alignment: WrapAlignment.center,
|
|
runSpacing: 16,
|
|
spacing: 16,
|
|
children: [
|
|
_buildCircularButtonWithDropdown(
|
|
context: context,
|
|
ref: ref,
|
|
icon:
|
|
callState.isCameraEnabled ? Icons.videocam : Icons.videocam_off,
|
|
onPressed: () => callNotifier.toggleCamera(),
|
|
backgroundColor: const Color(0xFF424242),
|
|
hasDropdown: true,
|
|
deviceType: 'videoinput',
|
|
),
|
|
_buildCircularButton(
|
|
icon:
|
|
callState.isScreenSharing
|
|
? Icons.stop_screen_share
|
|
: Icons.screen_share,
|
|
onPressed: () => callNotifier.toggleScreenShare(context),
|
|
backgroundColor: const Color(0xFF424242),
|
|
),
|
|
_buildCircularButtonWithDropdown(
|
|
context: context,
|
|
ref: ref,
|
|
icon: callState.isMicrophoneEnabled ? Icons.mic : Icons.mic_off,
|
|
onPressed: () => callNotifier.toggleMicrophone(),
|
|
backgroundColor: const Color(0xFF424242),
|
|
hasDropdown: true,
|
|
deviceType: 'audioinput',
|
|
),
|
|
_buildCircularButton(
|
|
icon:
|
|
callState.isSpeakerphone
|
|
? Symbols.mobile_speaker
|
|
: Symbols.ear_sound,
|
|
onPressed: () => callNotifier.toggleSpeakerphone(),
|
|
backgroundColor: const Color(0xFF424242),
|
|
),
|
|
_buildCircularButton(
|
|
icon: Icons.call_end,
|
|
onPressed:
|
|
() => showModalBottomSheet(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
useRootNavigator: true,
|
|
builder:
|
|
(innerContext) => Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
ListTile(
|
|
leading: const Icon(Symbols.logout, fill: 1),
|
|
title: Text('callLeave').tr(),
|
|
onTap: () {
|
|
callNotifier.disconnect();
|
|
Navigator.of(context).pop();
|
|
Navigator.of(innerContext).pop();
|
|
},
|
|
),
|
|
ListTile(
|
|
leading: const Icon(Symbols.call_end, fill: 1),
|
|
iconColor: Colors.red,
|
|
title: Text('callEnd').tr(),
|
|
onTap: () async {
|
|
callNotifier.disconnect();
|
|
final apiClient = ref.watch(apiClientProvider);
|
|
try {
|
|
showLoadingModal(context);
|
|
await apiClient.delete(
|
|
'/sphere/chat/realtime/${callNotifier.roomId}',
|
|
);
|
|
callNotifier.dispose();
|
|
if (context.mounted) {
|
|
Navigator.of(context).pop();
|
|
Navigator.of(innerContext).pop();
|
|
}
|
|
} catch (err) {
|
|
showErrorAlert(err);
|
|
} finally {
|
|
if (context.mounted) hideLoadingModal(context);
|
|
}
|
|
},
|
|
),
|
|
Gap(MediaQuery.of(context).padding.bottom),
|
|
],
|
|
),
|
|
),
|
|
backgroundColor: const Color(0xFFE53E3E),
|
|
iconColor: Colors.white,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildCircularButton({
|
|
required IconData icon,
|
|
required VoidCallback onPressed,
|
|
required Color backgroundColor,
|
|
Color? iconColor,
|
|
}) {
|
|
return Container(
|
|
width: 56,
|
|
height: 56,
|
|
decoration: BoxDecoration(color: backgroundColor, shape: BoxShape.circle),
|
|
child: IconButton(
|
|
icon: Icon(icon, color: iconColor ?? Colors.white, size: 24),
|
|
onPressed: onPressed,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildCircularButtonWithDropdown({
|
|
required BuildContext context,
|
|
required WidgetRef ref,
|
|
required IconData icon,
|
|
required VoidCallback onPressed,
|
|
required Color backgroundColor,
|
|
required bool hasDropdown,
|
|
Color? iconColor,
|
|
String? deviceType, // 'videoinput' or 'audioinput'
|
|
}) {
|
|
return Stack(
|
|
children: [
|
|
Container(
|
|
width: 56,
|
|
height: 56,
|
|
decoration: BoxDecoration(
|
|
color: backgroundColor,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(icon, color: iconColor ?? Colors.white, size: 24),
|
|
onPressed: onPressed,
|
|
),
|
|
),
|
|
if (hasDropdown && deviceType != null)
|
|
Positioned(
|
|
bottom: 4,
|
|
right: 4,
|
|
child: GestureDetector(
|
|
onTap: () => _showDeviceSelectionDialog(context, ref, deviceType),
|
|
child: Container(
|
|
width: 16,
|
|
height: 16,
|
|
decoration: BoxDecoration(
|
|
color: backgroundColor.withOpacity(0.8),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.3),
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: Icon(
|
|
Icons.arrow_drop_down,
|
|
color: Colors.white,
|
|
size: 12,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Future<void> _showDeviceSelectionDialog(
|
|
BuildContext context,
|
|
WidgetRef ref,
|
|
String deviceType,
|
|
) async {
|
|
try {
|
|
final devices = await navigator.mediaDevices.enumerateDevices();
|
|
final filteredDevices =
|
|
devices.where((device) {
|
|
if (deviceType == 'videoinput') {
|
|
return device.kind == 'videoinput';
|
|
} else if (deviceType == 'audioinput') {
|
|
return device.kind == 'audioinput';
|
|
}
|
|
return false;
|
|
}).toList();
|
|
|
|
if (!context.mounted) return;
|
|
|
|
showModalBottomSheet(
|
|
context: context,
|
|
builder: (BuildContext dialogContext) {
|
|
return SheetScaffold(
|
|
titleText:
|
|
deviceType == 'videoinput'
|
|
? 'selectCamera'.tr()
|
|
: 'selectMicrophone'.tr(),
|
|
child: ListView.builder(
|
|
itemCount: filteredDevices.length,
|
|
itemBuilder: (context, index) {
|
|
final device = filteredDevices[index];
|
|
return ListTile(
|
|
title: Text(
|
|
device.label.isNotEmpty
|
|
? device.label
|
|
: '${'device'.tr()} ${index + 1}',
|
|
),
|
|
onTap: () {
|
|
Navigator.of(dialogContext).pop();
|
|
_switchDevice(context, ref, device, deviceType);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
);
|
|
} catch (e) {
|
|
showErrorAlert(e);
|
|
}
|
|
}
|
|
|
|
Future<void> _switchDevice(
|
|
BuildContext context,
|
|
WidgetRef ref,
|
|
MediaDeviceInfo device,
|
|
String deviceType,
|
|
) async {
|
|
try {
|
|
final callNotifier = ref.read(callNotifierProvider.notifier);
|
|
if (callNotifier.webrtcManager == null) return;
|
|
|
|
if (deviceType == 'videoinput') {
|
|
await callNotifier.webrtcManager!.switchCamera(device.deviceId);
|
|
} else if (deviceType == 'audioinput') {
|
|
await callNotifier.webrtcManager!.switchMicrophone(device.deviceId);
|
|
}
|
|
|
|
if (context.mounted) {
|
|
showSnackBar(
|
|
'switchedTo'.tr(
|
|
args: [device.label.isNotEmpty ? device.label : 'device'],
|
|
),
|
|
);
|
|
}
|
|
} catch (err) {
|
|
showErrorAlert(err);
|
|
}
|
|
}
|
|
}
|
|
|
|
class CallOverlayBar extends HookConsumerWidget {
|
|
const CallOverlayBar({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final callState = ref.watch(callNotifierProvider);
|
|
final callNotifier = ref.read(callNotifierProvider.notifier);
|
|
// Only show if connected and not on the call screen
|
|
if (!callState.isConnected) return const SizedBox.shrink();
|
|
|
|
final lastSpeaker =
|
|
callNotifier.participants.isNotEmpty
|
|
? callNotifier.participants.first
|
|
: null;
|
|
|
|
final actionButtonStyle = ButtonStyle(
|
|
minimumSize: const MaterialStatePropertyAll(Size(24, 24)),
|
|
);
|
|
|
|
return GestureDetector(
|
|
child: Card(
|
|
margin: EdgeInsets.zero,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Expanded(
|
|
child: Row(
|
|
children: [
|
|
Builder(
|
|
builder: (context) {
|
|
if (lastSpeaker == null) {
|
|
return const CircularProgressIndicator();
|
|
}
|
|
return SizedBox(
|
|
width: 40,
|
|
height: 40,
|
|
child: SpeakingRippleAvatar(
|
|
live: lastSpeaker,
|
|
size: 36,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
const Gap(8),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'@${lastSpeaker?.participant.identity ?? 'Unknown'}',
|
|
),
|
|
Text(
|
|
formatDuration(callState.duration),
|
|
style: Theme.of(context).textTheme.bodySmall,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: Icon(
|
|
callState.isMicrophoneEnabled ? Icons.mic : Icons.mic_off,
|
|
),
|
|
onPressed: () {
|
|
callNotifier.toggleMicrophone();
|
|
},
|
|
style: actionButtonStyle,
|
|
),
|
|
IconButton(
|
|
icon: Icon(
|
|
callState.isCameraEnabled ? Icons.videocam : Icons.videocam_off,
|
|
),
|
|
onPressed: () {
|
|
callNotifier.toggleCamera();
|
|
},
|
|
style: actionButtonStyle,
|
|
),
|
|
IconButton(
|
|
icon: Icon(
|
|
callState.isScreenSharing
|
|
? Icons.stop_screen_share
|
|
: Icons.screen_share,
|
|
),
|
|
onPressed: () {
|
|
callNotifier.toggleScreenShare(context);
|
|
},
|
|
style: actionButtonStyle,
|
|
),
|
|
],
|
|
).padding(all: 16),
|
|
),
|
|
onTap: () {
|
|
context.pushNamed(
|
|
'chatCall',
|
|
pathParameters: {'id': callNotifier.roomId!},
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|