fix: audio recordings fixes and performance improvements (#3514)

## 🎯 Goal

This PR fixes several SDK side audio bugs and interaction issues around
voice recordings and audio attachments.

The main change is a (long overdue) rewrite of our audio playing
management so that it no longer relies on `react-native-video` for
`stream-chat-react-native`. The main rationale' was the fact that it
would appear the specific format we use was not seekable at all (and no
way to force `react-native-video` to seek with
`AdtsExtractor.FLAG_ENABLE_CONSTANT_BITRATE_SEEKING_ALWAYS`, at least
that I know of). In addition to that, using `react-native-nitro-sound`
is much more stable and performant.

Additionally, this PR also includes:

- a complete rewrite of how our waveform component works
(`WaveProgressBar`)
  - smoother waveform playback/drag behavior in `WaveProgressBar`
  - fixed drag crash caused by incorrect `worklet` usage
  - fixed seek release oscillation in audio attachments
  - improved drag hit area
  - fixed thumb tail overshoot
  - reduced idle waveform rendering cost
  - stabilized duration label width to avoid layout churn
  - fixed Android native speed change  while paused starting playback
- fixed Expo iOS seek by converting ms to seconds in the Expo audio
adapter


## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

examples/ExpoMessaging/plugins/keyboardInsetMainActivityListener.js

@@ -4,6 +4,7 @@ const requiredImports = [
   'import android.os.Build',
   'import android.os.Bundle',
   'import android.view.View',
+  'import androidx.core.graphics.Insets',
   'import androidx.core.view.ViewCompat',
   'import androidx.core.view.WindowInsetsCompat',
   'import androidx.core.view.updatePadding',
@@ -13,19 +14,22 @@ const customInsetHandler = `
     if (Build.VERSION.SDK_INT >= 35) {
         val rootView = findViewById<View>(android.R.id.content)
 
+        val initial = Insets.of(
+            rootView.paddingLeft,
+            rootView.paddingTop,
+            rootView.paddingRight,
+            rootView.paddingBottom
+        )
+
         ViewCompat.setOnApplyWindowInsetsListener(rootView) { view, insets ->
-            val bars = insets.getInsets(
-                WindowInsetsCompat.Type.systemBars()
-                        or WindowInsetsCompat.Type.displayCutout()
-                        or WindowInsetsCompat.Type.ime()
-            )
+            val ime = insets.getInsets(WindowInsetsCompat.Type.ime())
             rootView.updatePadding(
-                left = bars.left,
-                top = bars.top,
-                right = bars.right,
-                bottom = bars.bottom
+                left = initial.left,
+                top = initial.top,
+                right = initial.right,
+                bottom = initial.bottom + ime.bottom
             )
-            WindowInsetsCompat.CONSUMED
+            insets
         }
     }
 `;

package/expo-package/src/optionalDependencies/Sound.ts

@@ -138,8 +138,8 @@ class ExpoAudioSoundAdapter {
   };
 
   // eslint-disable-next-line require-await
-  setPositionAsync: SoundReturnType['setPositionAsync'] = async (seconds) => {
-    this.player.seekTo(seconds);
+  setPositionAsync: SoundReturnType['setPositionAsync'] = async (millis) => {
+    await this.player.seekTo(millis / 1000);
   };
 
   // eslint-disable-next-line require-await

package/native-package/src/optionalDependencies/Audio.ts

@@ -136,7 +136,7 @@ class _Audio {
   };
   startPlayer = async (uri, _, onPlaybackStatusUpdate) => {
     try {
-      const playback = await audioRecorderPlayer.startPlayer(uri);
+      await audioRecorderPlayer.startPlayer(uri);
       audioRecorderPlayer.addPlayBackListener((status) => {
         onPlaybackStatusUpdate(status);
       });