add record player to the recorder

lib/controllers/api_routes/urls.dart

@@ -102,7 +102,7 @@ class URLs {
 
   // employee
   static get getEmployees => "$_baseUrl/Lookups/GetLookup?lookupEnum=33"; // get
-  static get getEngineers => "$_baseUrl/Account/GetUserByRoleValue?value=R-6"; // get
+  static get getEngineers => "$_baseUrl/Account/GetUserByRoleValue?value=R-6"; // get /// TODO : we also need to send the asset id
 
   // pentry
   static get getPentry => "$_baseUrl/return/pentry/details"; // get

lib/views/widgets/sound/record_sound.dart

@@ -12,15 +12,17 @@ import 'package:test_sa/extensions/context_extension.dart';
 import 'package:test_sa/extensions/int_extensions.dart';
 import 'package:test_sa/extensions/text_extensions.dart';
 import 'package:test_sa/extensions/widget_extensions.dart';
+import 'package:test_sa/views/widgets/sound/sound_player.dart';
 
 import '../../../new_views/app_style/app_color.dart';
 import '../../../new_views/common_widgets/app_text_form_field.dart';
 
 class RecordSound extends StatefulWidget {
   final Function(String) onRecord;
+  final Function(String) onStop;
   final bool enabled;
 
-  const RecordSound({Key key, @required this.onRecord, this.enabled = true}) : super(key: key);
+  const RecordSound({Key key, @required this.onRecord, this.onStop, this.enabled = true}) : super(key: key);
 
   @override
   State<RecordSound> createState() => _RecordSoundState();
@@ -31,6 +33,7 @@ class _RecordSoundState extends State<RecordSound> {
 
   bool _recorderIsOpened = false;
   bool _recording = false;
+  bool _played = false;
   String _record;
   Artboard _rive;
   Timer _timer;
@@ -96,7 +99,11 @@ class _RecordSoundState extends State<RecordSound> {
     }
     _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
       setState(() {
-        _timeController.text = ((timer?.tick ?? 0) / 60)?.toStringAsFixed(2);
+        String recordTime = ((timer?.tick ?? 0) / 60)?.toStringAsFixed(2)?.replaceFirst(".", ":");
+        if (recordTime.length == 4 || recordTime.length == 7) {
+          recordTime = "0$recordTime";
+        }
+        _timeController.text = recordTime;
       });
     });
     _rive.addController(SimpleAnimation('recording'));
@@ -149,29 +156,36 @@ class _RecordSoundState extends State<RecordSound> {
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
-      alignment: AlignmentDirectional.centerEnd,
+    return Column(
       children: [
-        AppTextFormField(
-          enable: false,
-          controller: _timeController,
-          labelText: context.translation.recordVoice,
-          initialValue: (_timeController?.text?.isEmpty ?? true) ? "00:00" : _timeController?.text,
-          suffixIcon: (_recording ? "record".toLottieAsset(height: 24) : (_record != null ? "trash" : "mic").toSvgAsset(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20, height: 24))
-              .paddingOnly(end: 16),
+        Stack(
+          alignment: AlignmentDirectional.centerEnd,
+          children: [
+            AppTextFormField(
+              enable: false,
+              controller: _timeController,
+              labelText: context.translation.recordVoice,
+              initialValue: (_timeController?.text?.isEmpty ?? true) ? "00:00" : _timeController?.text,
+              suffixIcon:
+                  (_recording ? "record".toLottieAsset(height: 24) : (_record != null ? "trash" : "mic").toSvgAsset(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20, height: 24))
+                      .paddingOnly(end: 16),
+            ),
+            SizedBox(height: 50.toScreenHeight, width: 50.toScreenWidth).onPress(() {
+              if (_recording) {
+                _stopRecording();
+              } else if (_record != null) {
+                _timeController?.text = "00:00";
+                widget.onRecord(null);
+                _record = null;
+                setState(() {});
+              } else {
+                _startRecording();
+              }
+            }),
+          ],
         ),
-        SizedBox(height: 50.toScreenHeight, width: 50.toScreenWidth).onPress(() {
-          if (_recording) {
-            _stopRecording();
-          } else if (_record != null) {
-            _timeController?.text = "00:00";
-            widget.onRecord(null);
-            _record = null;
-            setState(() {});
-          } else {
-            _startRecording();
-          }
-        })
+        if (_record != null) 8.height,
+        if (_record != null) ASoundPlayer(audio: _record),
       ],
     );
   }

lib/views/widgets/sound/sound_player.dart

@@ -3,9 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:test_sa/extensions/widget_extensions.dart';
 import 'package:test_sa/new_views/app_style/app_color.dart';
 import 'package:test_sa/new_views/app_style/app_text_style.dart';
-import 'package:test_sa/views/app_style/sizing.dart';
-
-import '../../app_style/colors.dart';
 
 class ASoundPlayer extends StatefulWidget {
   final String audio;
@@ -31,7 +28,7 @@ class _ASoundPlayerState extends State<ASoundPlayer> {
       width: 48,
       height: 48,
       decoration: ShapeDecoration(
-        color: Colors.white,
+        color: Theme.of(context).cardColor,
         shape: RoundedRectangleBorder(
           side: const BorderSide(width: 1, color: Color(0xFFEAF1F4)),
           borderRadius: BorderRadius.circular(32),
@@ -39,7 +36,7 @@ class _ASoundPlayerState extends State<ASoundPlayer> {
       ),
       child: Icon(
         icon,
-        color: const Color(0xff163A51).withOpacity(0.5),
+        color: Theme.of(context).primaryColor,
       ),
     ).onPress(onpress);
   }
@@ -182,7 +179,7 @@ class _ASoundPlayerState extends State<ASoundPlayer> {
                   value: _audioPosition?.inMilliseconds?.toDouble() ?? 0.0,
                   min: 0,
                   max: _audioTime?.inMilliseconds?.toDouble() ?? 60.0,
-                  activeColor: AppColor.primary70,
+                  activeColor: Theme.of(context).primaryColor,
                   inactiveColor: AppColor.neutral30,
                   onChangeStart: (value) {
                     _sliderMoving = true;