fix #323

lib/src/localization/app_de.arb

@@ -829,5 +829,7 @@
     "inProcess": "Wird verarbeitet",
     "draftMessage": "Entwurf",
     "exportMemories": "Memories exportieren (Beta)",
-    "importMemories": "Memories importieren (Beta)"
+    "importMemories": "Memories importieren (Beta)",
+    "voiceMessageSlideToCancel": "Zum Abbrechen ziehen",
+    "voiceMessageCancel": "Abbrechen"
 }

lib/src/localization/app_en.arb

@@ -607,5 +607,7 @@
   "inProcess": "In process",
   "draftMessage": "Draft",
   "exportMemories": "Export memories (Beta)",
-  "importMemories": "Import memories (Beta)"
+  "importMemories": "Import memories (Beta)",
+  "voiceMessageSlideToCancel": "Slide to cancel",
+  "voiceMessageCancel": "Cancel"
 }

lib/src/localization/generated/app_localizations.dart

@@ -2749,6 +2749,18 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Import memories (Beta)'**
   String get importMemories;
+
+  /// No description provided for @voiceMessageSlideToCancel.
+  ///
+  /// In en, this message translates to:
+  /// **'Slide to cancel'**
+  String get voiceMessageSlideToCancel;
+
+  /// No description provided for @voiceMessageCancel.
+  ///
+  /// In en, this message translates to:
+  /// **'Cancel'**
+  String get voiceMessageCancel;
 }
 
 class _AppLocalizationsDelegate

lib/src/localization/generated/app_localizations_de.dart

@@ -1516,4 +1516,10 @@ class AppLocalizationsDe extends AppLocalizations {
 
   @override
   String get importMemories => 'Memories importieren (Beta)';
+
+  @override
+  String get voiceMessageSlideToCancel => 'Zum Abbrechen ziehen';
+
+  @override
+  String get voiceMessageCancel => 'Abbrechen';
 }

lib/src/localization/generated/app_localizations_en.dart

@@ -1506,4 +1506,10 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get importMemories => 'Import memories (Beta)';
+
+  @override
+  String get voiceMessageSlideToCancel => 'Slide to cancel';
+
+  @override
+  String get voiceMessageCancel => 'Cancel';
 }

lib/src/views/chats/chat_messages_components/entries/chat_audio_entry.dart

@@ -84,11 +84,6 @@ class ChatAudioEntry extends StatelessWidget {
                           path: mediaService.tempPath.path,
                           message: message,
                         )
-                      : (mediaService.originalPath.existsSync())
-                          ? InChatAudioPlayer(
-                              path: mediaService.originalPath.path,
-                              message: message,
-                            )
                       : Container()
                 else
                   MessageSendStateIcon([message], [mediaService.mediaFile]),
@@ -138,14 +133,22 @@ class _InChatAudioPlayerState extends State<InChatAudioPlayer> {
       }
     });
 
-    _playerController.onCurrentDurationChanged.listen((duration) {
+    _playerController.onPlayerStateChanged.listen((a) async {
+      if (a == PlayerState.initialized) {
+        _displayDuration =
+            await _playerController.getDuration(DurationType.max);
+        _maxDuration = _displayDuration;
+        setState(() {});
+      }
+    });
+
+    _playerController.onCurrentDurationChanged.listen((duration) async {
       if (mounted) {
         setState(() {
           _displayDuration = _maxDuration - duration;
         });
       }
     });
-    initAsync();
   }
 
   @override
@@ -154,13 +157,6 @@ class _InChatAudioPlayerState extends State<InChatAudioPlayer> {
     super.dispose();
   }
 
-  Future<void> initAsync() async {
-    _displayDuration = await _playerController.getDuration(DurationType.max);
-    _maxDuration = _displayDuration;
-    if (!mounted) return;
-    setState(() {});
-  }
-
   bool _isPlaying = false;
 
   @override

lib/src/views/chats/chat_messages_components/message_input.dart

@@ -15,6 +15,7 @@ import 'package:twonly/src/services/api/mediafiles/upload.service.dart';
 import 'package:twonly/src/services/api/messages.dart';
 import 'package:twonly/src/utils/misc.dart';
 import 'package:twonly/src/views/camera/camera_send_to_view.dart';
+import 'package:twonly/src/views/chats/chat_messages_components/entries/chat_audio_entry.dart';
 
 class MessageInput extends StatefulWidget {
   const MessageInput({
@@ -41,6 +42,10 @@ class _MessageInputState extends State<MessageInput> {
   late final RecorderController recorderController;
   final bool isApple = Platform.isIOS;
   bool _emojiShowing = false;
+  bool _audioRecordingLock = false;
+  int _currentDuration = 0;
+  double _cancelSlideOffset = 0;
+  Offset _recordingOffset = Offset.zero;
   RecordingState _recordingState = RecordingState.none;
 
   Future<void> _sendMessage() async {
@@ -72,11 +77,17 @@ class _MessageInputState extends State<MessageInput> {
   void dispose() {
     widget.textFieldFocus.removeListener(_handleTextFocusChange);
     widget.textFieldFocus.dispose();
+    recorderController.dispose();
     super.dispose();
   }
 
   void _initializeControllers() {
     recorderController = RecorderController();
+    recorderController.onCurrentDuration.listen((duration) {
+      setState(() {
+        _currentDuration = duration.inMilliseconds;
+      });
+    });
   }
 
   void _handleTextFocusChange() {
@@ -87,9 +98,37 @@ class _MessageInputState extends State<MessageInput> {
     }
   }
 
+  Future<void> _startAudioRecording() async {
+    if (!await Permission.microphone.isGranted) {
+      final statuses = await [
+        Permission.microphone,
+      ].request();
+      if (statuses[Permission.microphone]!.isPermanentlyDenied) {
+        await openAppSettings();
+        return;
+      }
+      if (!await Permission.microphone.isGranted) {
+        return;
+      }
+    }
+    setState(() {
+      _recordingState = RecordingState.recording;
+    });
+    await HapticFeedback.heavyImpact();
+    final audioTmpPath =
+        '${(await getApplicationCacheDirectory()).path}/recording.m4a';
+    unawaited(
+      recorderController.record(
+        path: audioTmpPath,
+      ),
+    );
+  }
+
   Future<void> _stopAudioRecording() async {
     await HapticFeedback.heavyImpact();
     setState(() {
+      _audioRecordingLock = false;
+      _cancelSlideOffset = 0;
       _recordingState = RecordingState.none;
     });
 
@@ -114,6 +153,19 @@ class _MessageInputState extends State<MessageInput> {
     );
   }
 
+  Future<void> _cancelAudioRecording() async {
+    setState(() {
+      _audioRecordingLock = false;
+      _cancelSlideOffset = 0;
+      _recordingState = RecordingState.none;
+    });
+    final path = await recorderController.stop();
+    if (path == null) return;
+    if (File(path).existsSync()) {
+      File(path).deleteSync();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -169,27 +221,53 @@ class _MessageInputState extends State<MessageInput> {
                         ),
                       Expanded(
                         child: (_recordingState == RecordingState.recording)
-                            ? AudioWaveforms(
+                            ? Row(
-                                enableGesture: true,
+                                children: [
-                                size: Size(
+                                  const Padding(
-                                  MediaQuery.of(context).size.width / 2,
+                                    padding: EdgeInsets.only(
-                                  50,
+                                      top: 14,
+                                      bottom: 14,
+                                      left: 12,
+                                      right: 8,
                                     ),
-                                recorderController: recorderController,
+                                    child: FaIcon(
-                                waveStyle: WaveStyle(
+                                      FontAwesomeIcons.microphone,
-                                  waveColor: isDarkMode(context)
+                                      size: 20,
-                                      ? Colors.white
+                                      color: Colors.red,
-                                      : Colors.black,
-                                  extendWaveform: true,
-                                  showMiddleLine: false,
                                     ),
-                                decoration: BoxDecoration(
-                                  borderRadius: BorderRadius.circular(12),
-                                  color: context.color.surfaceContainer,
                                   ),
-                                padding: const EdgeInsets.only(left: 18),
+                                  const SizedBox(width: 10),
-                                margin:
+                                  Text(
-                                    const EdgeInsets.symmetric(horizontal: 15),
+                                    formatMsToMinSec(
+                                      _currentDuration,
+                                    ),
+                                    style: const TextStyle(
+                                      color: Colors.white,
+                                      fontSize: 12,
+                                    ),
+                                  ),
+                                  if (!_audioRecordingLock) ...[
+                                    SizedBox(
+                                      width: (100 - _cancelSlideOffset) % 101,
+                                    ),
+                                    Text(
+                                        context.lang.voiceMessageSlideToCancel),
+                                  ] else ...[
+                                    Expanded(
+                                      child: Container(),
+                                    ),
+                                    GestureDetector(
+                                      onTap: _cancelAudioRecording,
+                                      child: Text(
+                                        context.lang.voiceMessageCancel,
+                                        style: const TextStyle(
+                                          color: Colors.red,
+                                        ),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 20)
+                                  ],
+                                ],
                               )
                             : TextField(
                                 controller: _textFieldController,
@@ -220,47 +298,84 @@ class _MessageInputState extends State<MessageInput> {
                       ),
                       if (_textFieldController.text == '')
                         GestureDetector(
-                          onLongPressStart: (a) async {
+                          onLongPressMoveUpdate: (details) {
-                            if (!await Permission.microphone.isGranted) {
+                            if (_audioRecordingLock) return;
-                              final statuses = await [
+                            if (_recordingOffset.dy -
-                                Permission.microphone,
+                                    details.localPosition.dy >=
-                              ].request();
+                                100) {
-                              if (statuses[Permission.microphone]!
+                              HapticFeedback.heavyImpact();
-                                  .isPermanentlyDenied) {
-                                await openAppSettings();
-                                return;
-                              }
-                              if (!await Permission.microphone.isGranted) {
-                                return;
-                              }
-                            }
                               setState(() {
-                              _recordingState = RecordingState.recording;
+                                _audioRecordingLock = true;
                               });
-                            await HapticFeedback.heavyImpact();
-                            final audioTmpPath =
-                                '${(await getApplicationCacheDirectory()).path}/recording.m4a';
-                            unawaited(
-                              recorderController.record(
-                                path: audioTmpPath,
-                              ),
-                            );
-                          },
-                          onLongPressCancel: () async {
-                            final path = await recorderController.stop();
-                            if (path == null) return;
-                            if (File(path).existsSync()) {
-                              File(path).deleteSync();
                             }
-                            setState(() {
+                            if (_recordingOffset.dx -
+                                        details.localPosition.dx >=
+                                    90 &&
+                                _recordingState == RecordingState.recording) {
                               _recordingState = RecordingState.none;
+                              HapticFeedback.heavyImpact();
+                              _cancelAudioRecording();
+                            }
+
+                            setState(() {
+                              final a = _recordingOffset.dx -
+                                  details.localPosition.dx;
+                              if (a > 0 && a <= 90) {
+                                _cancelSlideOffset = _recordingOffset.dx -
+                                    details.localPosition.dx;
+                              }
                             });
                           },
-                          onLongPressEnd: (a) => _stopAudioRecording(),
+                          onLongPressStart: (a) {
+                            _recordingOffset = a.localPosition;
+                            _startAudioRecording();
+                          },
+                          onLongPressCancel: _cancelAudioRecording,
+                          onLongPressEnd: (a) {
+                            if (_recordingState != RecordingState.recording) {
+                              return;
+                            }
+                            if (!_audioRecordingLock) {
+                              _stopAudioRecording();
+                            }
+                          },
                           child: Stack(
                             clipBehavior: Clip.none,
                             children: [
-                              if (_recordingState == RecordingState.recording)
+                              if (_recordingState == RecordingState.recording &&
+                                  !_audioRecordingLock)
+                                Positioned.fill(
+                                  top: -120,
+                                  left: -5,
+                                  child: Align(
+                                    alignment: AlignmentGeometry.topCenter,
+                                    child: Container(
+                                      padding: const EdgeInsets.only(top: 13),
+                                      height: 60,
+                                      decoration: BoxDecoration(
+                                        borderRadius: BorderRadius.circular(90),
+                                        color: Colors.black,
+                                      ),
+                                      child: const Center(
+                                        child: Column(
+                                          children: [
+                                            FaIcon(
+                                              FontAwesomeIcons.lock,
+                                              size: 16,
+                                            ),
+                                            SizedBox(height: 5),
+                                            FaIcon(
+                                              FontAwesomeIcons.angleUp,
+                                              size: 16,
+                                            ),
+                                          ],
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              if (_recordingState == RecordingState.recording &&
+                                  !_audioRecordingLock)
                                 Positioned.fill(
                                   top: -20,
                                   left: -25,
@@ -275,6 +390,7 @@ class _MessageInputState extends State<MessageInput> {
                                     height: 60,
                                   ),
                                 ),
+                              if (!_audioRecordingLock)
                                 ColoredBox(
                                   color: Colors.transparent,
                                   child: Padding(
@@ -306,14 +422,15 @@ class _MessageInputState extends State<MessageInput> {
                   ),
                 ),
               ),
-              if (_textFieldController.text != '')
+              if (_textFieldController.text != '' || _audioRecordingLock)
                 IconButton(
                   padding: const EdgeInsets.all(15),
                   icon: FaIcon(
                     color: context.color.primary,
                     FontAwesomeIcons.solidPaperPlane,
                   ),
-                  onPressed: _sendMessage,
+                  onPressed:
+                      _audioRecordingLock ? _stopAudioRecording : _sendMessage,
                 )
               else
                 IconButton(

lib/src/views/components/media_view_sizing.dart

@@ -48,7 +48,7 @@ class _MediaViewSizingState extends State<MediaViewSizing> {
     Widget imageChild = Align(
       alignment: Alignment.topCenter,
       child: SizedBox(
-        height: availableHeight,
+        // height: availableHeight,
         child: AspectRatio(
           aspectRatio: 9 / 16,
           child: ClipRRect(