feat: Recording dialog with displaying amplitude

2022-01-01 14:17:31 +01:00 · 2022-01-01 14:17:31 +01:00 · 964515d76c
parent 0c4d1ec3f8
commit 964515d76c
4 changed files with 149 additions and 74 deletions
--- a/lib/pages/chat/chat.dart
+++ b/lib/pages/chat/chat.dart
@ -422,6 +422,10 @@ class ChatController extends State<Chat> {
          'duration': result.duration,
        },
        'org.matrix.msc3245.voice': {},
+        'org.matrix.msc1767.audio': {
+          'duration': result.duration,
+          'waveform': result.waveform,
+        },
      }),
    );
    setState(() {
--- a/lib/pages/chat/events/audio_player.dart
+++ b/lib/pages/chat/events/audio_player.dart
@ -1,3 +1,5 @@
+//@dart=2.12
+
 import 'dart:async';
 import 'dart:io';

@ -8,6 +10,7 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:matrix/matrix.dart';
 import 'package:path_provider/path_provider.dart';

+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/utils/sentry_controller.dart';
 import '../../../utils/matrix_sdk_extensions.dart/event_extension.dart';

@ -15,9 +18,9 @@ class AudioPlayerWidget extends StatefulWidget {
  final Color color;
  final Event event;

-  static String currentId;
+  static String? currentId;

-  const AudioPlayerWidget(this.event, {this.color = Colors.black, Key key})
+  const AudioPlayerWidget(this.event, {this.color = Colors.black, Key? key})
      : super(key: key);

  @override
@ -30,16 +33,16 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
  AudioPlayerStatus status = AudioPlayerStatus.notDownloaded;
  final AudioPlayer audioPlayer = AudioPlayer();

-  StreamSubscription onAudioPositionChanged;
-  StreamSubscription onDurationChanged;
-  StreamSubscription onPlayerStateChanged;
-  StreamSubscription onPlayerError;
+  StreamSubscription? onAudioPositionChanged;
+  StreamSubscription? onDurationChanged;
+  StreamSubscription? onPlayerStateChanged;
+  StreamSubscription? onPlayerError;

-  String statusText;
-  double currentPosition = 0;
+  String? statusText;
+  int currentPosition = 0;
  double maxPosition = 0;

-  File audioFile;
+  File? audioFile;

  @override
  void dispose() {
@ -60,6 +63,7 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
    try {
      final matrixFile =
          await widget.event.downloadAndDecryptAttachmentCached();
+      if (matrixFile == null) throw ('Download failed');
      final tempDir = await getTemporaryDirectory();
      final fileName =
          widget.event.content.tryGet<String>('filename') ?? matrixFile.name;
@ -86,7 +90,7 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
      if (AudioPlayerWidget.currentId != null) {
        if (audioPlayer.state != PlayerState.STOPPED) {
          await audioPlayer.stop();
-          setState(() => null);
+          setState(() {});
        }
      }
      AudioPlayerWidget.currentId = widget.event.eventId;
@ -105,30 +109,31 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
          setState(() {
            statusText =
                '${state.inMinutes.toString().padLeft(2, '0')}:${(state.inSeconds % 60).toString().padLeft(2, '0')}';
-            currentPosition = state.inMilliseconds.toDouble();
+            currentPosition =
+                ((state.inMilliseconds.toDouble() / maxPosition) * 100).round();
          });
        });
        onDurationChanged ??= audioPlayer.onDurationChanged.listen((max) =>
            setState(() => maxPosition = max.inMilliseconds.toDouble()));
-        onPlayerStateChanged ??= audioPlayer.onPlayerStateChanged
-            .listen((_) => setState(() => null));
+        onPlayerStateChanged ??=
+            audioPlayer.onPlayerStateChanged.listen((_) => setState(() {}));
        onPlayerError ??= audioPlayer.onPlayerError.listen((e) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
-              content: Text(L10n.of(context).oopsSomethingWentWrong),
+              content: Text(L10n.of(context)!.oopsSomethingWentWrong),
            ),
          );
          SentryController.captureException(e, StackTrace.current);
        });

-        await audioPlayer.play(audioFile.path);
+        await audioPlayer.play(audioFile!.path);
        break;
    }
  }

  static const double buttonSize = 36;

-  String get _durationString {
+  String? get _durationString {
    final durationInt = widget.event.content
        .tryGetMap<String, dynamic>('info')
        ?.tryGet<int>('duration');
@ -137,9 +142,30 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
    return '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
  }

+  List<int> get waveform {
+    final eventWaveForm = widget.event.content
+        .tryGetMap<String, dynamic>('org.matrix.msc1767.audio')
+        ?.tryGetList<int>('waveform');
+    if (eventWaveForm == null) {
+      return List<int>.filled(100, 500);
+    }
+    while (eventWaveForm.length < 100) {
+      for (var i = 0; i < eventWaveForm.length; i = i + 2) {
+        eventWaveForm.insert(i, eventWaveForm[i]);
+      }
+    }
+    var i = 0;
+    final step = (eventWaveForm.length / 100).round();
+    while (eventWaveForm.length > 100) {
+      eventWaveForm.removeAt(i);
+      i = (i + step) % 100;
+    }
+    return eventWaveForm;
+  }
+
  @override
  Widget build(BuildContext context) {
-    statusText ??= _durationString ?? '00:00';
+    final statusText = this.statusText ??= _durationString ?? '00:00';
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 6.0),
      child: Row(
@ -172,21 +198,40 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
                    },
                  ),
          ),
+          const SizedBox(width: 8),
          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,
+            child: Row(
+              children: [
+                for (var i = 0; i < 100; i++)
+                  Expanded(
+                    child: InkWell(
+                      onTap: () => audioPlayer.seek(Duration(
+                          milliseconds: (maxPosition / 100).round() * i)),
+                      child: Opacity(
+                        opacity: currentPosition > i ? 1 : 0.5,
+                        child: Container(
+                            margin: const EdgeInsets.only(left: 2),
+                            decoration: BoxDecoration(
+                              color: Theme.of(context).colorScheme.primary,
+                              borderRadius:
+                                  BorderRadius.circular(AppConfig.borderRadius),
+                            ),
+                            height: 64 * (waveform[i] / 1024)),
+                      ),
+                    ),
+                  )
+              ],
            ),
          ),
-          Text(
-            statusText,
-            style: TextStyle(
-              color: widget.color,
+          const SizedBox(width: 8),
+          Container(
+            alignment: Alignment.centerRight,
+            width: 42,
+            child: Text(
+              statusText,
+              style: TextStyle(
+                color: widget.color,
+              ),
            ),
          ),
        ],
--- a/lib/pages/chat/recording_dialog.dart
+++ b/lib/pages/chat/recording_dialog.dart
@ -1,3 +1,5 @@
+//@dart=2.12
+
 import 'dart:async';

 import 'package:flutter/cupertino.dart';
@ -8,13 +10,14 @@ import 'package:path_provider/path_provider.dart';
 import 'package:record/record.dart';
 import 'package:wakelock/wakelock.dart';

+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/utils/sentry_controller.dart';

 class RecordingDialog extends StatefulWidget {
  static const String recordingFileType = 'm4a';
  const RecordingDialog({
-    Key key,
+    Key? key,
  }) : super(key: key);

  @override
@ -22,13 +25,13 @@ class RecordingDialog extends StatefulWidget {
 }

 class _RecordingDialogState extends State<RecordingDialog> {
-  Timer _recorderSubscription;
+  Timer? _recorderSubscription;
  Duration _duration = Duration.zero;

  bool error = false;
-  String _recordedPath;
+  String? _recordedPath;
  final _audioRecorder = Record();
-  Amplitude _amplitude;
+  final List<double> amplitudeTimeline = [];

  static const int bitRate = 64000;
  static const double samplingRate = 22050.0;
@ -55,7 +58,10 @@ class _RecordingDialogState extends State<RecordingDialog> {
      _recorderSubscription?.cancel();
      _recorderSubscription =
          Timer.periodic(const Duration(milliseconds: 100), (_) async {
-        _amplitude = await _audioRecorder.getAmplitude();
+        final amplitude = await _audioRecorder.getAmplitude();
+        var value = 100 + amplitude.current * 2;
+        value = value < 1 ? 1 : value;
+        amplitudeTimeline.add(value);
        setState(() {
          _duration += const Duration(milliseconds: 100);
        });
@ -83,52 +89,64 @@ class _RecordingDialogState extends State<RecordingDialog> {
  void _stopAndSend() async {
    _recorderSubscription?.cancel();
    await _audioRecorder.stop();
-    Navigator.of(context, rootNavigator: false)
-        .pop<RecordingResult>(RecordingResult(
-      path: _recordedPath,
-      duration: _duration.inMilliseconds,
-    ));
+    final path = _recordedPath;
+    if (path == null) throw ('Recording failed!');
+    final step = amplitudeTimeline.length < 100
+        ? 1
+        : (amplitudeTimeline.length / 100).round();
+    final waveform = <int>[];
+    for (var i = 0; i < amplitudeTimeline.length; i += step) {
+      waveform.add((amplitudeTimeline[i] / 100 * 1024).round());
+    }
+    Navigator.of(context, rootNavigator: false).pop<RecordingResult>(
+      RecordingResult(
+        path: path,
+        duration: _duration.inMilliseconds,
+        waveform: waveform,
+      ),
+    );
  }

  @override
  Widget build(BuildContext context) {
    const maxDecibalWidth = 64.0;
-    final decibalWidth =
-        ((_amplitude == null || _amplitude.current == double.negativeInfinity
-                        ? 0
-                        : 1 / _amplitude.current / _amplitude.max)
-                    .abs() +
-                2) *
-            (maxDecibalWidth / 4).toDouble();
    final time =
        '${_duration.inMinutes.toString().padLeft(2, '0')}:${(_duration.inSeconds % 60).toString().padLeft(2, '0')}';
    final content = error
-        ? Text(L10n.of(context).oopsSomethingWentWrong)
+        ? Text(L10n.of(context)!.oopsSomethingWentWrong)
        : Row(
-            children: <Widget>[
+            children: [
              Container(
-                width: maxDecibalWidth,
-                height: maxDecibalWidth,
-                alignment: Alignment.center,
-                child: AnimatedContainer(
-                  duration: const Duration(milliseconds: 100),
-                  width: decibalWidth,
-                  height: decibalWidth,
-                  decoration: BoxDecoration(
-                    color: Colors.red,
-                    borderRadius: BorderRadius.circular(decibalWidth),
-                  ),
+                width: 16,
+                height: 16,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(32),
+                  color: Colors.red,
                ),
              ),
-              const SizedBox(width: 8),
              Expanded(
-                child: Text(
-                  '${L10n.of(context).recording}: $time',
-                  style: const TextStyle(
-                    fontSize: 18,
+                child: Center(
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: amplitudeTimeline.reversed
+                        .take(26)
+                        .toList()
+                        .reversed
+                        .map((amplitude) => Container(
+                            margin: const EdgeInsets.only(left: 2),
+                            width: 4,
+                            decoration: BoxDecoration(
+                              color: Theme.of(context).colorScheme.primary,
+                              borderRadius:
+                                  BorderRadius.circular(AppConfig.borderRadius),
+                            ),
+                            height: maxDecibalWidth * (amplitude / 100)))
+                        .toList(),
                  ),
                ),
              ),
+              Text(time),
            ],
          );
    if (PlatformInfos.isCupertinoStyle) {
@ -138,17 +156,20 @@ class _RecordingDialogState extends State<RecordingDialog> {
          CupertinoDialogAction(
            onPressed: () => Navigator.of(context, rootNavigator: false).pop(),
            child: Text(
-              L10n.of(context).cancel.toUpperCase(),
+              L10n.of(context)!.cancel.toUpperCase(),
              style: TextStyle(
-                color:
-                    Theme.of(context).textTheme.bodyText2.color.withAlpha(150),
+                color: Theme.of(context)
+                    .textTheme
+                    .bodyText2
+                    ?.color
+                    ?.withAlpha(150),
              ),
            ),
          ),
          if (error != true)
            CupertinoDialogAction(
              onPressed: _stopAndSend,
-              child: Text(L10n.of(context).send.toUpperCase()),
+              child: Text(L10n.of(context)!.send.toUpperCase()),
            ),
        ],
      );
@ -159,9 +180,10 @@ class _RecordingDialogState extends State<RecordingDialog> {
        TextButton(
          onPressed: () => Navigator.of(context, rootNavigator: false).pop(),
          child: Text(
-            L10n.of(context).cancel.toUpperCase(),
+            L10n.of(context)!.cancel.toUpperCase(),
            style: TextStyle(
-              color: Theme.of(context).textTheme.bodyText2.color.withAlpha(150),
+              color:
+                  Theme.of(context).textTheme.bodyText2?.color?.withAlpha(150),
            ),
          ),
        ),
@ -171,7 +193,7 @@ class _RecordingDialogState extends State<RecordingDialog> {
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
-                Text(L10n.of(context).send.toUpperCase()),
+                Text(L10n.of(context)!.send.toUpperCase()),
                const SizedBox(width: 4),
                const Icon(Icons.send_outlined, size: 15),
              ],
@ -185,20 +207,24 @@ class _RecordingDialogState extends State<RecordingDialog> {
 class RecordingResult {
  final String path;
  final int duration;
+  final List<int> waveform;

  const RecordingResult({
-    @required this.path,
-    @required this.duration,
+    required this.path,
+    required this.duration,
+    required this.waveform,
  });

  factory RecordingResult.fromJson(Map<String, dynamic> json) =>
      RecordingResult(
        path: json['path'],
        duration: json['duration'],
+        waveform: List<int>.from(json['waveform']),
      );

  Map<String, dynamic> toJson() => {
        'path': path,
        'duration': duration,
+        'waveform': waveform,
      };
 }
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -61,7 +61,7 @@ dependencies:
  qr_code_scanner: ^0.6.1
  qr_flutter: ^4.0.0
  receive_sharing_intent: ^1.4.5
-  record: ^3.0.0
+  record: ^3.0.2
  salomon_bottom_bar: ^3.1.0
  scroll_to_index: ^2.1.0
  sentry: ^6.0.1