feat: Nicer audio message design and send duration

This commit is contained in:
Krille Fear 2021-10-27 16:53:31 +02:00
parent 288160d852
commit 699b99bcf8
3 changed files with 77 additions and 60 deletions

View File

@ -356,22 +356,26 @@ class ChatController extends State<Chat> {
void voiceMessageAction() async { void voiceMessageAction() async {
if (await Record().hasPermission() == false) return; if (await Record().hasPermission() == false) return;
final result = await showDialog<String>( final result = await showDialog<Map>(
context: context, context: context,
useRootNavigator: false, useRootNavigator: false,
builder: (c) => const RecordingDialog(), builder: (c) => const RecordingDialog(),
); );
if (result == null) return; if (result == null) return;
final audioFile = File(result); final audioFile = File(result['path']);
// as we already explicitly say send in the recording dialog, final file = MatrixAudioFile(
// we do not need the send file dialog anymore. We can just send this straight away. bytes: audioFile.readAsBytesSync(),
name: audioFile.path,
);
await showFutureLoadingDialog( await showFutureLoadingDialog(
context: context, context: context,
future: () => room.sendFileEvent( future: () =>
MatrixAudioFile( room.sendFileEvent(file, inReplyTo: replyEvent, extraContent: {
bytes: audioFile.readAsBytesSync(), name: audioFile.path), 'info': {
inReplyTo: replyEvent, ...file.info,
), 'duration': result['duration'],
}
}),
); );
setState(() { setState(() {
replyEvent = null; replyEvent = null;

View File

@ -133,8 +133,10 @@ class _RecordingDialogState extends State<RecordingDialog> {
onPressed: () async { onPressed: () async {
_recorderSubscription?.cancel(); _recorderSubscription?.cancel();
await _audioRecorder.stop(); await _audioRecorder.stop();
Navigator.of(context, rootNavigator: false) Navigator.of(context, rootNavigator: false).pop<Map>({
.pop<String>(_recordedPath); 'path': _recordedPath,
'duration': _duration.inMilliseconds,
});
}, },
child: Text(L10n.of(context).send.toUpperCase()), child: Text(L10n.of(context).send.toUpperCase()),
), ),

View File

@ -36,7 +36,7 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
StreamSubscription onPlayerStateChanged; StreamSubscription onPlayerStateChanged;
StreamSubscription onPlayerError; StreamSubscription onPlayerError;
String statusText = '00:00'; String statusText;
double currentPosition = 0; double currentPosition = 0;
double maxPosition = 0; double maxPosition = 0;
@ -128,60 +128,71 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
} }
} }
static const double buttonSize = 36;
String get _durationString {
final durationInt = widget.event.content
.tryGetMap<String, dynamic>('info')
?.tryGet<int>('duration');
if (durationInt == null) return null;
final duration = Duration(milliseconds: durationInt);
return '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Row( statusText ??= _durationString ?? '00:00';
mainAxisSize: MainAxisSize.min, return Padding(
children: <Widget>[ padding: const EdgeInsets.symmetric(horizontal: 6.0),
SizedBox( child: Row(
width: 30, mainAxisSize: MainAxisSize.min,
child: status == AudioPlayerStatus.downloading children: <Widget>[
? const CircularProgressIndicator.adaptive(strokeWidth: 2) SizedBox(
: IconButton( width: buttonSize,
icon: Icon( height: buttonSize,
audioPlayer.state == PlayerState.PLAYING child: status == AudioPlayerStatus.downloading
? Icons.pause_outlined ? CircularProgressIndicator(strokeWidth: 2, color: widget.color)
: Icons.play_arrow_outlined, : InkWell(
color: widget.color, borderRadius: BorderRadius.circular(64),
child: Material(
color: widget.color.withAlpha(64),
borderRadius: BorderRadius.circular(64),
child: Icon(
audioPlayer.state == PlayerState.PLAYING
? Icons.pause_outlined
: Icons.play_arrow_outlined,
color: widget.color,
),
),
onLongPress: () => widget.event.saveFile(context),
onTap: () {
if (status == AudioPlayerStatus.downloaded) {
_playAction();
} else {
_downloadAction();
}
},
), ),
tooltip: audioPlayer.state == PlayerState.PLAYING
? L10n.of(context).audioPlayerPause
: L10n.of(context).audioPlayerPlay,
onPressed: () {
if (status == AudioPlayerStatus.downloaded) {
_playAction();
} else {
_downloadAction();
}
},
),
),
Expanded(
child: Slider(
activeColor: Theme.of(context).colorScheme.secondaryVariant,
inactiveColor: widget.color.withAlpha(64),
value: currentPosition,
onChanged: (double position) =>
audioPlayer.seek(Duration(milliseconds: position.toInt())),
max: status == AudioPlayerStatus.downloaded ? maxPosition : 0,
min: 0,
), ),
), Expanded(
Text( child: Slider(
statusText, activeColor: Theme.of(context).colorScheme.secondaryVariant,
style: TextStyle( inactiveColor: widget.color.withAlpha(64),
color: widget.color, value: currentPosition,
onChanged: (double position) =>
audioPlayer.seek(Duration(milliseconds: position.toInt())),
max: status == AudioPlayerStatus.downloaded ? maxPosition : 0,
min: 0,
),
), ),
), Text(
const SizedBox(width: 8), statusText,
IconButton( style: TextStyle(
icon: Icon( color: widget.color,
Icons.download_outlined, ),
color: widget.color,
), ),
onPressed: () => widget.event.saveFile(context), ],
), ),
],
); );
} }
} }