stream-chat-react-native-core 6.3.1 → 6.4.0-beta.2

package/lib/commonjs/components/Attachment/AudioAttachment.js

@@ -12,8 +12,10 @@ var _reactNative = require("react-native");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _duration = _interopRequireDefault(require("dayjs/plugin/duration"));
 var _contexts = require("../../contexts");
+var _useAudioPlayer2 = require("../../hooks/useAudioPlayer");
 var _icons = require("../../icons");
 var _native = require("../../native");
+var _types = require("../../types/types");
 var _getTrimmedAttachmentTitle = require("../../utils/getTrimmedAttachmentTitle");
 var _ProgressControl = require("../ProgressControl/ProgressControl");
 var _WaveProgressBar = require("../ProgressControl/WaveProgressBar");
@@ -24,19 +26,14 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 _dayjs["default"].extend(_duration["default"]);
 var AudioAttachment = function AudioAttachment(props) {
-  var _item$duration;
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(1.0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+    currentSpeed = _useState2[0],
+    setCurrentSpeed = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    progressControlTextWidth = _useState4[0],
-    setProgressControlTextWidth = _useState4[1];
-  var _useState5 = (0, _react.useState)(1.0),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    currentSpeed = _useState6[0],
-    setCurrentSpeed = _useState6[1];
+    audioFinished = _useState4[0],
+    setAudioFinished = _useState4[1];
   var soundRef = _react["default"].useRef(null);
   var _props$hideProgressBa = props.hideProgressBar,
     hideProgressBar = _props$hideProgressBa === void 0 ? false : _props$hideProgressBa,
@@ -47,104 +44,155 @@ var AudioAttachment = function AudioAttachment(props) {
     _props$showSpeedSetti = props.showSpeedSettings,
     showSpeedSettings = _props$showSpeedSetti === void 0 ? false : _props$showSpeedSetti,
     testID = props.testID;
+  var _useAudioPlayer = (0, _useAudioPlayer2.useAudioPlayer)({
+      soundRef: soundRef
+    }),
+    changeAudioSpeed = _useAudioPlayer.changeAudioSpeed,
+    pauseAudio = _useAudioPlayer.pauseAudio,
+    playAudio = _useAudioPlayer.playAudio,
+    seekAudio = _useAudioPlayer.seekAudio;
+  var isExpoCLI = _native.SDK === 'stream-chat-expo';
+  var isVoiceRecording = item.type === _types.FileTypes.VoiceRecording;
   var handleLoad = function handleLoad(payload) {
-    onLoad(item.id, item.duration || payload.duration);
+    if (isVoiceRecording && item.duration) {
+      onLoad(item.id, item.duration);
+    } else {
+      onLoad(item.id, item.duration || payload.duration);
+    }
   };
   var handleProgress = function handleProgress(data) {
-    if (data.currentTime <= data.seekableDuration) {
-      onProgress(item.id, data.currentTime);
+    var currentTime = data.currentTime,
+      seekableDuration = data.seekableDuration;
+    if (isVoiceRecording && item.duration) {
+      if (currentTime < item.duration && !audioFinished) {
+        onProgress(item.id, currentTime / item.duration);
+      } else {
+        setAudioFinished(true);
+      }
+    } else {
+      if (currentTime < seekableDuration && !audioFinished) {
+        onProgress(item.id, currentTime / seekableDuration);
+      } else {
+        setAudioFinished(true);
+      }
     }
   };
-  var handleEnd = function handleEnd() {
-    onPlayPause(item.id, true);
-    onProgress(item.id, item.duration, true);
+  var onSeek = function onSeek(seekResponse) {
+    setAudioFinished(false);
+    onProgress(item.id, seekResponse.currentTime / item.duration);
   };
   var handlePlayPause = function () {
-    var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(isPausedStatusAvailable) {
+    var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!soundRef.current) {
-              _context.next = 20;
-              break;
-            }
-            if (!(isPausedStatusAvailable === undefined)) {
-              _context.next = 19;
-              break;
-            }
-            if (item.progress === 1) {
-              if (soundRef.current.seek) soundRef.current.seek(0);
-              if (soundRef.current.setPositionAsync) soundRef.current.setPositionAsync(0);
-            }
             if (!item.paused) {
-              _context.next = 13;
+              _context.next = 7;
               break;
             }
-            if (!soundRef.current.playAsync) {
-              _context.next = 7;
+            if (!isExpoCLI) {
+              _context.next = 4;
               break;
             }
-            _context.next = 7;
-            return soundRef.current.playAsync();
+            _context.next = 4;
+            return playAudio();
+          case 4:
+            onPlayPause(item.id, false);
+            _context.next = 11;
+            break;
           case 7:
-            if (!soundRef.current.setProgressUpdateIntervalAsync) {
+            if (!isExpoCLI) {
               _context.next = 10;
               break;
             }
             _context.next = 10;
-            return soundRef.current.setProgressUpdateIntervalAsync(60);
+            return pauseAudio();
           case 10:
-            onPlayPause(item.id, false);
-            _context.next = 17;
-            break;
-          case 13:
-            if (!soundRef.current.pauseAsync) {
-              _context.next = 16;
-              break;
-            }
-            _context.next = 16;
-            return soundRef.current.pauseAsync();
-          case 16:
             onPlayPause(item.id, true);
-          case 17:
-            _context.next = 20;
-            break;
-          case 19:
-            onPlayPause(item.id, isPausedStatusAvailable);
-          case 20:
+          case 11:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function handlePlayPause(_x) {
+    return function handlePlayPause() {
       return _ref.apply(this, arguments);
     };
   }();
-  var handleProgressDrag = function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(position) {
-      var _soundRef$current, _soundRef$current2;
+  var handleEnd = function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            onProgress(item.id, position);
-            if ((_soundRef$current = soundRef.current) != null && _soundRef$current.seek) soundRef.current.seek(position);
-            if (!((_soundRef$current2 = soundRef.current) != null && _soundRef$current2.setPositionAsync)) {
-              _context2.next = 5;
-              break;
-            }
-            _context2.next = 5;
-            return soundRef.current.setPositionAsync(position * 1000);
-          case 5:
+            setAudioFinished(false);
+            _context2.next = 3;
+            return pauseAudio();
+          case 3:
+            onPlayPause(item.id, true);
+            _context2.next = 6;
+            return seekAudio(0);
+          case 6:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
-    return function handleProgressDrag(_x2) {
+    return function handleEnd() {
       return _ref2.apply(this, arguments);
     };
   }();
+  var dragStart = function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!isExpoCLI) {
+              _context3.next = 3;
+              break;
+            }
+            _context3.next = 3;
+            return pauseAudio();
+          case 3:
+            onPlayPause(item.id, true);
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function dragStart() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var dragProgress = function dragProgress(progress) {
+    onProgress(item.id, progress);
+  };
+  var dragEnd = function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4(progress) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return seekAudio(progress * item.duration);
+          case 2:
+            if (!isExpoCLI) {
+              _context4.next = 5;
+              break;
+            }
+            _context4.next = 5;
+            return playAudio();
+          case 5:
+            onPlayPause(item.id, false);
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function dragEnd(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
   var onPlaybackStatusUpdate = function onPlaybackStatusUpdate(playbackStatus) {
     if (!playbackStatus.isLoaded) {
       if (playbackStatus.error) {
@@ -155,48 +203,65 @@ var AudioAttachment = function AudioAttachment(props) {
         positionMillis = playbackStatus.positionMillis;
       if (item.duration === 0) {
         onLoad(item.id, durationMillis / 1000);
+      } else {
+        if (isVoiceRecording && item.duration) {
+          onLoad(item.id, item.duration);
+        } else {
+          onLoad(item.id, durationMillis / 1000);
+        }
       }
       if (playbackStatus.isPlaying) {
-        onProgress(item.id, positionMillis / 1000);
+        if (isVoiceRecording && item.duration) {
+          if (positionMillis <= item.duration * 1000) {
+            onProgress(item.id, positionMillis / (item.duration * 1000));
+          }
+        } else {
+          if (positionMillis <= durationMillis) {
+            onProgress(item.id, positionMillis / durationMillis);
+          }
+        }
       } else {}
       if (playbackStatus.isBuffering) {}
       if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
+        onProgress(item.id, 1);
         handleEnd();
       }
     }
   };
   (0, _react.useEffect)(function () {
-    if (_native.Sound.Player === null) {
+    if (isExpoCLI) {
       var initiateSound = function () {
-        var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
-          return _regenerator["default"].wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
+        var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+          return _regenerator["default"].wrap(function _callee5$(_context5) {
+            while (1) switch (_context5.prev = _context5.next) {
               case 0:
                 if (!(item && item.file && item.file.uri)) {
-                  _context3.next = 4;
+                  _context5.next = 4;
                   break;
                 }
-                _context3.next = 3;
+                _context5.next = 3;
                 return _native.Sound.initializeSound({
                   uri: item.file.uri
-                }, {}, onPlaybackStatusUpdate);
+                }, {
+                  progressUpdateIntervalMillis: 100
+                }, onPlaybackStatusUpdate);
               case 3:
-                soundRef.current = _context3.sent;
+                soundRef.current = _context5.sent;
               case 4:
               case "end":
-                return _context3.stop();
+                return _context5.stop();
             }
-          }, _callee3);
+          }, _callee5);
         }));
         return function initiateSound() {
-          return _ref3.apply(this, arguments);
+          return _ref5.apply(this, arguments);
         };
       }();
       initiateSound();
     }
     return function () {
-      var _soundRef$current3;
-      if ((_soundRef$current3 = soundRef.current) != null && _soundRef$current3.stopAsync && soundRef.current.unloadAsync) {
+      var _soundRef$current;
+      if ((_soundRef$current = soundRef.current) != null && _soundRef$current.stopAsync && soundRef.current.unloadAsync) {
         soundRef.current.stopAsync();
         soundRef.current.unloadAsync();
       }
@@ -204,109 +269,84 @@ var AudioAttachment = function AudioAttachment(props) {
   }, []);
   (0, _react.useEffect)(function () {
     var initalPlayPause = function () {
-      var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+      var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
-              if (!soundRef.current) {
-                _context4.next = 13;
+              if (isExpoCLI) {
+                _context6.next = 2;
                 break;
               }
+              return _context6.abrupt("return");
+            case 2:
               if (!item.paused) {
-                _context4.next = 7;
-                break;
-              }
-              if (!soundRef.current.pauseAsync) {
-                _context4.next = 5;
+                _context6.next = 7;
                 break;
               }
-              _context4.next = 5;
-              return soundRef.current.pauseAsync();
+              _context6.next = 5;
+              return pauseAudio();
             case 5:
-              _context4.next = 13;
+              _context6.next = 9;
               break;
             case 7:
-              if (!soundRef.current.playAsync) {
-                _context4.next = 10;
-                break;
-              }
-              _context4.next = 10;
-              return soundRef.current.playAsync();
-            case 10:
-              if (!soundRef.current.setProgressUpdateIntervalAsync) {
-                _context4.next = 13;
-                break;
-              }
-              _context4.next = 13;
-              return soundRef.current.setProgressUpdateIntervalAsync(60);
-            case 13:
+              _context6.next = 9;
+              return playAudio();
+            case 9:
             case "end":
-              return _context4.stop();
+              return _context6.stop();
           }
-        }, _callee4);
+        }, _callee6);
       }));
       return function initalPlayPause() {
-        return _ref4.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }();
     if (!_native.Sound.Player) {
       initalPlayPause();
     }
-  }, [item.paused]);
+  }, [item.paused, isExpoCLI, pauseAudio, playAudio]);
   var onSpeedChangeHandler = function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             if (!(currentSpeed === 2.0)) {
-              _context5.next = 7;
+              _context7.next = 6;
               break;
             }
             setCurrentSpeed(1.0);
-            if (!(soundRef.current && soundRef.current.setRateAsync)) {
-              _context5.next = 5;
-              break;
-            }
-            _context5.next = 5;
-            return soundRef.current.setRateAsync(1.0);
-          case 5:
-            _context5.next = 19;
+            _context7.next = 4;
+            return changeAudioSpeed(1.0);
+          case 4:
+            _context7.next = 16;
             break;
-          case 7:
+          case 6:
             if (!(currentSpeed === 1.0)) {
-              _context5.next = 14;
+              _context7.next = 12;
               break;
             }
             setCurrentSpeed(1.5);
-            if (!(soundRef.current && soundRef.current.setRateAsync)) {
-              _context5.next = 12;
-              break;
-            }
-            _context5.next = 12;
-            return soundRef.current.setRateAsync(1.5);
-          case 12:
-            _context5.next = 19;
+            _context7.next = 10;
+            return changeAudioSpeed(1.5);
+          case 10:
+            _context7.next = 16;
             break;
-          case 14:
+          case 12:
             if (!(currentSpeed === 1.5)) {
-              _context5.next = 19;
+              _context7.next = 16;
               break;
             }
             setCurrentSpeed(2.0);
-            if (!(soundRef.current && soundRef.current.setRateAsync)) {
-              _context5.next = 19;
-              break;
-            }
-            _context5.next = 19;
-            return soundRef.current.setRateAsync(2.0);
-          case 19:
+            _context7.next = 16;
+            return changeAudioSpeed(2.0);
+          case 16:
           case "end":
-            return _context5.stop();
+            return _context7.stop();
         }
-      }, _callee5);
+      }, _callee7);
     }));
     return function onSpeedChangeHandler() {
-      return _ref5.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var _useTheme = (0, _contexts.useTheme)(),
@@ -329,8 +369,13 @@ var AudioAttachment = function AudioAttachment(props) {
     static_white = _useTheme$theme$color.static_white,
     white = _useTheme$theme$color.white,
     filenameText = _useTheme$theme.messageInput.fileUploadPreview.filenameText;
-  var progressValueInSeconds = item.duration * item.progress;
-  var progressDuration = progressValueInSeconds ? progressValueInSeconds / 3600 >= 1 ? _dayjs["default"].duration(progressValueInSeconds, 'second').format('HH:mm:ss') : _dayjs["default"].duration(progressValueInSeconds, 'second').format('mm:ss') : _dayjs["default"].duration((_item$duration = item.duration) != null ? _item$duration : 0, 'second').format('mm:ss');
+  var progressValueInSeconds = (0, _react.useMemo)(function () {
+    return item.duration * item.progress;
+  }, [item.duration, item.progress]);
+  var progressDuration = (0, _react.useMemo)(function () {
+    var _item$duration;
+    return progressValueInSeconds ? progressValueInSeconds / 3600 >= 1 ? _dayjs["default"].duration(progressValueInSeconds, 'second').format('HH:mm:ss') : _dayjs["default"].duration(progressValueInSeconds, 'second').format('mm:ss') : _dayjs["default"].duration((_item$duration = item.duration) != null ? _item$duration : 0, 'second').format('mm:ss');
+  }, [progressValueInSeconds, item.duration]);
   return (0, _jsxRuntime.jsxs)(_reactNative.View, {
     accessibilityLabel: "audio-attachment-preview",
     style: [styles.container, {
@@ -338,30 +383,27 @@ var AudioAttachment = function AudioAttachment(props) {
       borderColor: grey_whisper
     }, container],
     testID: testID,
-    children: [(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      accessibilityLabel: "Play Pause Button",
-      onPress: function onPress() {
-        return handlePlayPause();
-      },
-      style: [styles.playPauseButton, {
-        backgroundColor: static_white,
-        shadowColor: black
-      }, playPauseButton],
-      children: item.paused ? (0, _jsxRuntime.jsx)(_icons.Play, {
-        fill: static_black,
-        height: 32,
-        width: 32
-      }) : (0, _jsxRuntime.jsx)(_icons.Pause, {
-        fill: static_black,
-        height: 32,
-        width: 32
+    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.leftContainer, leftContainer],
+      children: (0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityLabel: "Play Pause Button",
+        onPress: handlePlayPause,
+        style: [styles.playPauseButton, {
+          backgroundColor: static_white,
+          shadowColor: black
+        }, playPauseButton],
+        children: item.paused ? (0, _jsxRuntime.jsx)(_icons.Play, {
+          fill: static_black,
+          height: 32,
+          width: 32
+        }) : (0, _jsxRuntime.jsx)(_icons.Pause, {
+          fill: static_black,
+          height: 32,
+          width: 32
+        })
       })
     }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
-      onLayout: function onLayout(_ref6) {
-        var nativeEvent = _ref6.nativeEvent;
-        setWidth(nativeEvent.layout.width);
-      },
-      style: [styles.leftContainer, leftContainer],
+      style: [styles.centerContainer],
       children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
         accessibilityLabel: "File Name",
         numberOfLines: 1,
@@ -375,20 +417,7 @@ var AudioAttachment = function AudioAttachment(props) {
         children: (0, _getTrimmedAttachmentTitle.getTrimmedAttachmentTitle)(item.file.name)
       }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.audioInfo,
-        children: [_native.Sound.Player && (0, _jsxRuntime.jsx)(_native.Sound.Player, {
-          onEnd: handleEnd,
-          onLoad: handleLoad,
-          onProgress: handleProgress,
-          paused: item.paused,
-          rate: currentSpeed,
-          soundRef: soundRef,
-          testID: "sound-player",
-          uri: item.file.uri
-        }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
-          onLayout: function onLayout(_ref7) {
-            var nativeEvent = _ref7.nativeEvent;
-            setProgressControlTextWidth(nativeEvent.layout.width);
-          },
+        children: [(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.progressDurationText, {
             color: grey_dark
           }, progressDurationText],
@@ -396,30 +425,36 @@ var AudioAttachment = function AudioAttachment(props) {
         }), !hideProgressBar && (0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.progressControlContainer, progressControlContainer],
           children: item.file.waveform_data ? (0, _jsxRuntime.jsx)(_WaveProgressBar.WaveProgressBar, {
-            amplitudesCount: 35,
-            onPlayPause: handlePlayPause,
-            onProgressDrag: function onProgressDrag(position) {
-              if (item.file.waveform_data) {
-                var progress = position / 30 * item.duration;
-                handleProgressDrag(progress);
-              }
-            },
+            amplitudesCount: 30,
+            onEndDrag: dragEnd,
+            onProgressDrag: dragProgress,
+            onStartDrag: dragStart,
             progress: item.progress,
             waveformData: item.file.waveform_data
           }) : (0, _jsxRuntime.jsx)(_ProgressControl.ProgressControl, {
             duration: item.duration,
             filledColor: accent_blue,
-            onPlayPause: handlePlayPause,
-            onProgressDrag: handleProgressDrag,
+            onEndDrag: dragEnd,
+            onProgressDrag: dragProgress,
+            onStartDrag: dragStart,
             progress: item.progress,
-            testID: "progress-control",
-            width: width - progressControlTextWidth
+            testID: "progress-control"
           })
         })]
+      }), _native.Sound.Player && (0, _jsxRuntime.jsx)(_native.Sound.Player, {
+        onEnd: handleEnd,
+        onLoad: handleLoad,
+        onProgress: handleProgress,
+        onSeek: onSeek,
+        paused: item.paused,
+        rate: currentSpeed,
+        soundRef: soundRef,
+        testID: "sound-player",
+        uri: item.file.uri
       })]
-    }), showSpeedSettings && (0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), showSpeedSettings ? (0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.rightContainer, rightContainer],
-      children: item.progress === 0 || item.progress === 1 ? (0, _jsxRuntime.jsx)(_icons.Audio, {
+      children: item.paused ? (0, _jsxRuntime.jsx)(_icons.Audio, {
         fill: '#ffffff'
       }) : (0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: onSpeedChangeHandler,
@@ -429,44 +464,46 @@ var AudioAttachment = function AudioAttachment(props) {
         }, speedChangeButton],
         children: (0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.speedChangeButtonText, speedChangeButtonText],
-          children: "x".concat(currentSpeed)
+          children: "x".concat(currentSpeed.toFixed(1))
         })
       })
-    })]
+    }) : null]
   });
 };
 exports.AudioAttachment = AudioAttachment;
 var styles = _reactNative.StyleSheet.create({
   audioInfo: {
     alignItems: 'center',
-    display: 'flex',
     flexDirection: 'row'
   },
+  centerContainer: {
+    flexGrow: 1
+  },
   container: {
     alignItems: 'center',
     borderRadius: 12,
     borderWidth: 1,
+    flex: 1,
     flexDirection: 'row',
-    paddingHorizontal: 8,
+    paddingLeft: 8,
+    paddingRight: 16,
     paddingVertical: 12
   },
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
-    paddingBottom: 12
+    marginBottom: 8
   },
   leftContainer: {
-    justifyContent: 'space-around',
-    marginHorizontal: 16,
-    width: '60%'
+    marginRight: 8
   },
   playPauseButton: {
     alignItems: 'center',
-    alignSelf: 'center',
     borderRadius: 50,
     elevation: 4,
     justifyContent: 'center',
-    padding: 2,
+    marginRight: 8,
+    padding: 4,
     shadowOffset: {
       height: 2,
       width: 0
@@ -474,13 +511,16 @@ var styles = _reactNative.StyleSheet.create({
     shadowOpacity: 0.23,
     shadowRadius: 2.62
   },
-  progressControlContainer: {},
+  progressControlContainer: {
+    flexGrow: 1,
+    justifyContent: 'center'
+  },
   progressDurationText: {
     fontSize: 12,
-    marginRight: 4
+    marginRight: 8
   },
   rightContainer: {
-    marginLeft: 'auto'
+    marginLeft: 16
   },
   speedChangeButton: {
     alignItems: 'center',
@@ -488,8 +528,8 @@ var styles = _reactNative.StyleSheet.create({
     borderRadius: 50,
     elevation: 4,
     justifyContent: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 5,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
     shadowOffset: {
       height: 2,
       width: 0
@@ -498,8 +538,7 @@ var styles = _reactNative.StyleSheet.create({
     shadowRadius: 2.62
   },
   speedChangeButtonText: {
-    fontSize: 12,
-    fontWeight: '500'
+    fontSize: 12
   }
 });
 AudioAttachment.displayName = 'AudioAttachment{messageInput{audioAttachment}}';