@ethora/chat-component-rn 26.9.0 → 26.10.0

package/lib/module/components/styled/AudioMessage.js

@@ -1,28 +1,31 @@
 "use strict";
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { withFileToken } from '../../helpers/secureFileUrl';
-import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator, Platform } from 'react-native';
+import { View, Pressable, Text, StyleSheet, ActivityIndicator, Platform } from 'react-native';
 import { createAudioPlayer, setAudioModeAsync } from 'expo-audio';
 import * as FileSystem from 'expo-file-system/legacy';
-import { WebView } from 'react-native-webview';
-import { PauseIcon, PlayIcon } from '../../assets/icons';
+import Svg, { Path, Rect } from 'react-native-svg';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import { getIosAudioPlaybackCacheExtension } from '../../helpers/mimeToExtension';
+import { MIN_BAR, formatClipTime, parseDurationSeconds, parseWaveForm, resamplePeaks } from '../../helpers/audioWaveform';
 import { pushLog as devPushLog } from '../../utils/devLogger';
+import { MAX_DECODE_BYTES, decodeAudioClip } from './AudioDecoderHost';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const formatTime = millis => {
-  const safe = Number.isFinite(millis) && millis > 0 ? millis : 0;
-  const totalSec = Math.floor(safe / 1000);
-  const min = Math.floor(totalSec / 60);
-  const sec = totalSec % 60;
-  return `${min}:${sec.toString().padStart(2, '0')}`;
-};
-// Largest payload we will pull into JS for decoding (input opus) and the
-// largest WAV we will ship back over the bridge (output PCM). Voice
-// messages are a few dozen KB / a couple hundred KB of WAV; these only
-// guard against a pathological multi-minute attachment.
-const MAX_DECODE_BYTES = 25 * 1024 * 1024;
+const SPEEDS = [1, 1.5, 2];
+const BAR_WIDTH = 3;
+const BAR_GAP = 2;
+const WAVE_HEIGHT = 24;
+
+/** Waveforms already worked out this session, by source URL. */
+const analysisCache = new Map();
+
+/**
+ * Only one voice note plays at a time, as in the messengers: starting one
+ * pauses whichever was playing.
+ */
+let pauseActive = null;
 const hashString = value => {
   let hash = 0;
   for (let i = 0; i < value.length; i += 1) {
@@ -131,142 +134,93 @@ const getContainerExtension = container => {
 // Everything else (mp3/m4a/aac/wav), and ALL of Android (ExoPlayer handles
 // Opus natively), plays straight through expo-audio.
 const requiresWebAudioDecode = container => Platform.OS === 'ios' && (container === 'webm' || container === 'ogg');
+const PlayGlyph = ({
+  color
+}) => /*#__PURE__*/_jsx(Svg, {
+  width: 26,
+  height: 26,
+  viewBox: "0 0 24 24",
+  children: /*#__PURE__*/_jsx(Path, {
+    d: "M7.5 5.2v13.6c0 .95 1.05 1.5 1.8.95l9.9-6.8c.65-.45.65-1.45 0-1.9L9.3 4.25c-.75-.55-1.8 0-1.8.95z",
+    fill: color
+  })
+});
+const PauseGlyph = ({
+  color
+}) => /*#__PURE__*/_jsxs(Svg, {
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  children: [/*#__PURE__*/_jsx(Rect, {
+    x: 6.5,
+    y: 5,
+    width: 4,
+    height: 14,
+    rx: 1.4,
+    fill: color
+  }), /*#__PURE__*/_jsx(Rect, {
+    x: 13.5,
+    y: 5,
+    width: 4,
+    height: 14,
+    rx: 1.4,
+    fill: color
+  })]
+});
 
-// The WebView is used ONLY as a decoder, never as a player. Two iOS facts
-// force this shape:
-//   • `decodeAudioData` is the only iOS API that understands WebM/Ogg Opus,
-//     and it works on a suspended AudioContext (decoding needs no gesture).
-//   • Playing audio OUT of a WebView — via AudioContext OR an <audio>
-//     element — is gated behind an in-page user gesture that an RN-side tap
-//     cannot supply, so both hang silently.
-// Therefore the page decodes Opus → PCM, re-encodes to a WAV blob, and ships
-// the bytes back to RN as base64. RN writes the WAV to cache and plays it
-// through expo-audio (native, no gesture limits, real play/pause/seek).
-const WEB_DECODER_HTML = `<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>html,body{margin:0;padding:0;width:1px;height:1px;overflow:hidden;background:transparent}</style>
-  </head>
-  <body>
-    <script>
-      (function () {
-        var MAX_WAV = ${MAX_DECODE_BYTES};
-        var post = function (payload) {
-          if (window.ReactNativeWebView) {
-            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
-          }
-        };
-        var ctx = null;
-        var encodeWav = function (buffer) {
-          var numCh = buffer.numberOfChannels;
-          var frames = buffer.length;
-          var sr = buffer.sampleRate;
-          var bytesLen = 44 + frames * numCh * 2;
-          var ab = new ArrayBuffer(bytesLen);
-          var view = new DataView(ab);
-          var off = 0;
-          var ws = function (s) { for (var i = 0; i < s.length; i += 1) { view.setUint8(off++, s.charCodeAt(i)); } };
-          var u32 = function (d) { view.setUint32(off, d, true); off += 4; };
-          var u16 = function (d) { view.setUint16(off, d, true); off += 2; };
-          ws('RIFF'); u32(bytesLen - 8); ws('WAVE');
-          ws('fmt '); u32(16); u16(1); u16(numCh); u32(sr); u32(sr * numCh * 2); u16(numCh * 2); u16(16);
-          ws('data'); u32(frames * numCh * 2);
-          var chans = [];
-          for (var c = 0; c < numCh; c += 1) { chans.push(buffer.getChannelData(c)); }
-          for (var f = 0; f < frames; f += 1) {
-            for (var c2 = 0; c2 < numCh; c2 += 1) {
-              var s = Math.max(-1, Math.min(1, chans[c2][f]));
-              view.setInt16(off, s < 0 ? s * 0x8000 : s * 0x7fff, true);
-              off += 2;
-            }
-          }
-          return ab;
-        };
-        var abToBase64 = function (ab) {
-          var bytes = new Uint8Array(ab);
-          var binary = '';
-          var chunk = 0x8000;
-          for (var i = 0; i < bytes.length; i += chunk) {
-            binary += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));
-          }
-          return window.btoa(binary);
-        };
-        window.__decodeAudio = function (base64) {
-          try {
-            if (!ctx) {
-              var Ctx = window.AudioContext || window.webkitAudioContext;
-              ctx = new Ctx();
-            }
-            var bin = window.atob(base64);
-            var len = bin.length;
-            var bytes = new Uint8Array(len);
-            for (var i = 0; i < len; i += 1) { bytes[i] = bin.charCodeAt(i); }
-            ctx.decodeAudioData(
-              bytes.buffer,
-              function (decoded) {
-                try {
-                  var wav = encodeWav(decoded);
-                  if (wav.byteLength > MAX_WAV) {
-                    post({ type: 'error', message: 'audio_too_long' });
-                    return;
-                  }
-                  post({
-                    type: 'decoded',
-                    durationMillis: Math.floor(decoded.duration * 1000),
-                    wavBase64: abToBase64(wav),
-                  });
-                } catch (e) {
-                  post({ type: 'error', message: 'encode_failed:' + (e && e.message ? e.message : e) });
-                }
-              },
-              function (err) {
-                post({ type: 'error', message: 'decode_failed:' + (err && err.message ? err.message : err) });
-              }
-            );
-          } catch (e) {
-            post({ type: 'error', message: 'load_failed:' + (e && e.message ? e.message : e) });
-          }
-        };
-        post({ type: 'bridge_ready' });
-      })();
-    </script>
-  </body>
-</html>`;
+/**
+ * A voice message the way the messengers draw it: a round play button,
+ * the clip's waveform filling in as it plays (tap it to jump), and its
+ * length — elapsed while playing — under the bars.
+ *
+ * The bars come from the sender's `waveForm` when there is one, otherwise
+ * from decoding the file in the shared decoder (AudioDecoderHost), which
+ * is also what makes the web client's WebM/Opus playable on iOS.
+ */
 const AudioMessage = ({
   src,
   mimeType,
   fileName,
-  originalName
+  originalName,
+  duration: durationProp,
+  waveForm,
+  isUser = false
 }) => {
   const theme = useTheme();
+  const t = useT();
   const soundRef = useRef(null);
-  // expo-audio delivers progress through an event subscription instead of
-  // expo-av's `onPlaybackStatusUpdate` callback argument, so the handle has
-  // to be held and removed alongside the player itself.
+  // expo-audio delivers progress through an event subscription, so the
+  // handle has to be held and removed alongside the player itself.
   const statusSubRef = useRef(null);
-  const webViewRef = useRef(null);
   const preparedRef = useRef(null);
-  const bridgeReadyRef = useRef(false);
-  const injectedRef = useRef(false);
+  const preparingRef = useRef(null);
   const didFinishRef = useRef(false);
   const unmountedRef = useRef(false);
   const loadingTimerRef = useRef(null);
+  // Where to start once the player is up (a tap on the bars before play).
+  const pendingSeekRef = useRef(null);
+  const rateRef = useRef(1);
+
+  // The file's identity without its (rotating) access token, so caches
+  // survive a token refresh.
+  const cacheKey = src.split(/[?#]/)[0] || src;
+  const metaPeaks = useMemo(() => parseWaveForm(waveForm), [waveForm]);
+  const metaDuration = parseDurationSeconds(durationProp) * 1000;
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [playbackError, setPlaybackError] = useState(false);
   const [position, setPosition] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [webViewEnabled, setWebViewEnabled] = useState(false);
-  const primaryColor = theme.primary;
-  const onPrimary = theme.textOnPrimary;
-  const trackStyle = {
-    backgroundColor: theme.border
-  };
-  const timeStyle = {
-    color: theme.textSecondary
-  };
+  const [duration, setDuration] = useState(metaDuration);
+  const [peaks, setPeaks] = useState(metaPeaks);
+  const [rate, setRate] = useState(1);
+  const [waveWidth, setWaveWidth] = useState(0);
+
+  // The brand colour from the config (the same tint as the composer's mic
+  // and send buttons), on own and others' bubbles alike.
+  const ink = theme.icon;
+  const buttonFill = ink;
+  const buttonGlyph = theme.textOnPrimary;
+  const metaColor = isUser ? theme.messageTextUser : theme.textSecondary;
   const clearLoadingGuard = () => {
     if (loadingTimerRef.current) {
       clearTimeout(loadingTimerRef.current);
@@ -276,8 +230,7 @@ const AudioMessage = ({
 
   // expo-audio players are native shared objects: they are NOT garbage
   // collected with the component, so every one we create has to be
-  // explicitly `remove()`d (expo-av's `unloadAsync` equivalent) and its
-  // status subscription torn down first.
+  // explicitly `remove()`d and its status subscription torn down first.
   const releasePlayer = () => {
     statusSubRef.current?.remove();
     statusSubRef.current = null;
@@ -296,6 +249,25 @@ const AudioMessage = ({
       }
     }
   };
+
+  // Stable for this bubble's lifetime: what another bubble calls to pause
+  // this one when it starts playing.
+  const pauseSelf = useRef(() => {
+    try {
+      soundRef.current?.pause();
+    } catch {
+      /* released */
+    }
+    if (!unmountedRef.current) {
+      setIsPlaying(false);
+    }
+  }).current;
+  const claimPlayback = () => {
+    if (pauseActive && pauseActive !== pauseSelf) {
+      pauseActive();
+    }
+    pauseActive = pauseSelf;
+  };
   const fail = reason => {
     clearLoadingGuard();
     if (unmountedRef.current) {
@@ -318,74 +290,76 @@ const AudioMessage = ({
   };
 
   // Hard ceiling on the loading spinner — whatever stalls (a hung network
-  // request, a WebView that never decodes, a player that never loads)
-  // the control resolves to an error state instead of spinning forever
-  // (the customer-reported "stuck spinner").
+  // request, a decode that never returns, a player that never loads) the
+  // control resolves to an error state instead of spinning forever.
   const armLoadingGuard = () => {
     clearLoadingGuard();
     loadingTimerRef.current = setTimeout(() => {
       if (!unmountedRef.current && !soundRef.current) {
         fail(new Error('audio_timeout'));
       }
-    }, 15000);
+    }, 25000);
   };
-  const prepareSource = async () => {
-    if (preparedRef.current) {
-      return preparedRef.current;
+  const cacheBase = () => FileSystem.cacheDirectory ? `${FileSystem.cacheDirectory}ethora-audio-${hashString(cacheKey)}` : null;
+  const sniff = async uri => {
+    try {
+      const head = await FileSystem.readAsStringAsync(uri, {
+        encoding: FileSystem.EncodingType.Base64,
+        position: 0,
+        length: 32
+      });
+      return detectContainer(decodeBase64Head(head, 16));
+    } catch {
+      return 'unknown';
     }
-    if (!/^https?:\/\//i.test(src)) {
-      const prepared = {
-        localUri: src,
-        container: 'unknown'
-      };
-      preparedRef.current = prepared;
-      return prepared;
+  };
+
+  // Download once (shared by the waveform and playback), sniff the real
+  // container, and give the cached file a real extension so AVFoundation /
+  // ExoPlayer pick the right demuxer instead of choking on an opaque
+  // `.blob` (the original `audio_timeout` cause).
+  const prepareSource = () => {
+    if (preparedRef.current) {
+      return Promise.resolve(preparedRef.current);
     }
-    const cacheDirectory = FileSystem.cacheDirectory;
-    if (!cacheDirectory) {
-      const prepared = {
-        localUri: src,
-        container: 'unknown'
-      };
-      preparedRef.current = prepared;
-      return prepared;
+    if (preparingRef.current) {
+      return preparingRef.current;
     }
-    const base = `${cacheDirectory}ethora-audio-${hashString(src)}`;
-    const part = `${base}.part`;
-    const partInfo = await FileSystem.getInfoAsync(part);
-    if (!partInfo.exists) {
-      const download = await withTimeout(FileSystem.downloadAsync(withFileToken(src), part), 12000, 'audio_download_timeout');
-      logAudioDebug('audio downloaded', {
-        src,
-        uri: download.status === 200 ? download.uri : undefined,
-        status: download.status
-      });
-      if (download.status !== 200) {
-        throw new Error(`audio_download_status_${download.status}`);
+    const run = async () => {
+      const base = cacheBase();
+      if (!/^https?:\/\//i.test(src) || !base) {
+        // Local file (the sender's own clip while it uploads).
+        return {
+          localUri: src,
+          container: await sniff(src)
+        };
       }
-    }
-    const head = await FileSystem.readAsStringAsync(part, {
-      encoding: FileSystem.EncodingType.Base64,
-      position: 0,
-      length: 32
-    });
-    const container = detectContainer(decodeBase64Head(head, 16));
-    let base64;
-    let localUri = part;
-    if (requiresWebAudioDecode(container)) {
-      // WebView-decode path: extension is irrelevant, we hand over the bytes.
-      const info = await FileSystem.getInfoAsync(part);
-      const size = 'size' in info ? info.size ?? 0 : 0;
-      if (size > MAX_DECODE_BYTES) {
-        throw new Error('audio_too_large_to_decode');
+      const wav = `${base}.wav`;
+      if ((await FileSystem.getInfoAsync(wav)).exists) {
+        return {
+          localUri: wav,
+          container: 'wav',
+          playable: true
+        };
+      }
+      const part = `${base}.part`;
+      if (!(await FileSystem.getInfoAsync(part)).exists) {
+        const download = await withTimeout(FileSystem.downloadAsync(withFileToken(src), part), 12000, 'audio_download_timeout');
+        if (download.status !== 200) {
+          await FileSystem.deleteAsync(part, {
+            idempotent: true
+          }).catch(() => {});
+          throw new Error(`audio_download_status_${download.status}`);
+        }
+      }
+      const container = await sniff(part);
+      if (requiresWebAudioDecode(container)) {
+        // Decoded to WAV before playing; the extension is irrelevant.
+        return {
+          localUri: part,
+          container
+        };
       }
-      base64 = await FileSystem.readAsStringAsync(part, {
-        encoding: FileSystem.EncodingType.Base64
-      });
-    } else {
-      // Native path: give the cached file a real extension so AVFoundation
-      // / ExoPlayer pick the right demuxer instead of choking on an opaque
-      // `.blob` (the original `audio_timeout` cause).
       const ext = container !== 'unknown' ? getContainerExtension(container) : getIosAudioPlaybackCacheExtension({
         mime: mimeType,
         fileName,
@@ -393,8 +367,7 @@ const AudioMessage = ({
         url: src
       });
       const finalUri = `${base}${ext}`;
-      const finalInfo = await FileSystem.getInfoAsync(finalUri);
-      if (finalInfo.exists) {
+      if ((await FileSystem.getInfoAsync(finalUri)).exists) {
         await FileSystem.deleteAsync(part, {
           idempotent: true
         }).catch(() => {});
@@ -404,42 +377,171 @@ const AudioMessage = ({
           to: finalUri
         });
       }
-      localUri = finalUri;
-    }
-    const prepared = {
-      localUri,
-      container,
-      base64
+      return {
+        localUri: finalUri,
+        container
+      };
     };
-    preparedRef.current = prepared;
-    logAudioDebug('audio prepared', {
-      src,
-      mimeType,
-      fileName,
-      originalName,
-      container,
-      platform: Platform.OS,
-      decode: requiresWebAudioDecode(container) ? 'web-audio' : 'native'
+    const pending = run().then(prepared => {
+      preparedRef.current = prepared;
+      preparingRef.current = null;
+      logAudioDebug('audio prepared', {
+        src,
+        container: prepared.container,
+        platform: Platform.OS
+      });
+      return prepared;
+    }, error => {
+      preparingRef.current = null;
+      throw error;
+    });
+    preparingRef.current = pending;
+    return pending;
+  };
+  const readBase64 = async uri => {
+    const info = await FileSystem.getInfoAsync(uri);
+    const size = 'size' in info ? info.size ?? 0 : 0;
+    if (size > MAX_DECODE_BYTES) {
+      throw new Error('audio_too_large_to_decode');
+    }
+    return FileSystem.readAsStringAsync(uri, {
+      encoding: FileSystem.EncodingType.Base64
     });
-    return prepared;
   };
-  const maybeInjectDecode = () => {
-    const base64 = preparedRef.current?.base64;
-    if (bridgeReadyRef.current && base64 && !injectedRef.current && webViewRef.current) {
-      injectedRef.current = true;
-      webViewRef.current.injectJavaScript(`window.__decodeAudio(${JSON.stringify(base64)}); true;`);
+  const remember = analysis => {
+    analysisCache.set(cacheKey, analysis);
+    const base = cacheBase();
+    if (base) {
+      FileSystem.writeAsStringAsync(`${base}.wave.json`, JSON.stringify(analysis)).catch(() => {});
+    }
+  };
+  const applyAnalysis = analysis => {
+    if (unmountedRef.current) {
+      return;
+    }
+    if (!metaPeaks && analysis.peaks.length) {
+      setPeaks(analysis.peaks);
+    }
+    if (analysis.durationMillis > 0) {
+      setDuration(current => current || analysis.durationMillis);
+    }
+  };
+
+  // Decode the clip once: its bars, its real length (MediaRecorder writes
+  // WebM without a duration header), and — where the native player cannot
+  // read it — a WAV copy to play.
+  const decodeClip = async prepared => {
+    const wantWav = requiresWebAudioDecode(prepared.container) && !prepared.playable;
+    const clip = await decodeAudioClip(await readBase64(prepared.localUri), {
+      wantWav
+    });
+    const analysis = {
+      peaks: clip.peaks,
+      durationMillis: clip.durationMillis
+    };
+    remember(analysis);
+    applyAnalysis(analysis);
+    const base = cacheBase();
+    if (clip.wavBase64 && base) {
+      const wavUri = `${base}.wav`;
+      await FileSystem.writeAsStringAsync(wavUri, clip.wavBase64, {
+        encoding: FileSystem.EncodingType.Base64
+      });
+      await FileSystem.deleteAsync(prepared.localUri, {
+        idempotent: true
+      }).catch(() => {});
+      preparedRef.current = {
+        localUri: wavUri,
+        container: 'wav',
+        playable: true
+      };
     }
+    return preparedRef.current ?? prepared;
   };
 
-  // expo-audio reports times in SECONDS (expo-av used milliseconds); the
-  // whole UI below is millisecond-based, so convert at this boundary and
-  // nowhere else.
+  // Full reset whenever the source changes (component reused for a new
+  // message / re-render with a different src).
+  const lastSrcRef = useRef(src);
+  useEffect(() => {
+    if (lastSrcRef.current === src) {
+      return;
+    }
+    lastSrcRef.current = src;
+    releasePlayer();
+    preparedRef.current = null;
+    preparingRef.current = null;
+    didFinishRef.current = false;
+    pendingSeekRef.current = null;
+    clearLoadingGuard();
+    setIsPlaying(false);
+    setIsLoading(false);
+    setPlaybackError(false);
+    setPosition(0);
+    setDuration(metaDuration);
+    setPeaks(metaPeaks);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src]);
+
+  // The waveform, as soon as the bubble shows: from the message itself,
+  // from this session's cache, from the disk cache, or by decoding.
+  useEffect(() => {
+    if (!src || metaPeaks && metaDuration > 0) {
+      return;
+    }
+    const cached = analysisCache.get(cacheKey);
+    if (cached) {
+      applyAnalysis(cached);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      const base = cacheBase();
+      if (base) {
+        try {
+          const stored = await FileSystem.readAsStringAsync(`${base}.wave.json`);
+          const parsed = JSON.parse(stored);
+          if (Array.isArray(parsed?.peaks)) {
+            analysisCache.set(cacheKey, parsed);
+            if (!cancelled) {
+              applyAnalysis(parsed);
+            }
+            return;
+          }
+        } catch {
+          /* not analysed yet */
+        }
+      }
+      try {
+        const prepared = await prepareSource();
+        if (cancelled) {
+          return;
+        }
+        await decodeClip(prepared);
+      } catch (error) {
+        // Not fatal: the bubble keeps flat bars and still plays.
+        logAudioDebug('audio waveform unavailable', {
+          src,
+          error: error instanceof Error ? error.message : String(error)
+        });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src]);
+
+  // expo-audio reports times in SECONDS; the UI is millisecond-based, so
+  // convert at this boundary and nowhere else.
   const onPlaybackStatusUpdate = status => {
-    if (!status.isLoaded) {
+    if (!status.isLoaded || unmountedRef.current) {
       return;
     }
     setPosition(Math.max(0, status.currentTime * 1000));
-    setDuration(status.duration > 0 ? status.duration * 1000 : 0);
+    // A WebM without a duration header reports 0 here: keep the decoded one.
+    if (status.duration > 0) {
+      setDuration(status.duration * 1000);
+    }
     setIsPlaying(status.playing);
     if (status.didJustFinish) {
       didFinishRef.current = true;
@@ -460,15 +562,13 @@ const AudioMessage = ({
     } catch {
       /* non-fatal — still plays through the ringer channel */
     }
-    // expo-audio has no awaitable `createAsync`: the player is constructed
-    // synchronously and loads in the background, reporting `isLoaded` via
-    // the status event. Wait for that first loaded status (same 12s budget
-    // expo-av's createAsync had) so the spinner still resolves to either
-    // real playback or the error state, never to a silent dead button.
+    // expo-audio has no awaitable create: the player loads in the
+    // background and reports `isLoaded` via the status event. Wait for it
+    // so the spinner resolves to real playback or the error state.
     const player = createAudioPlayer({
       uri: localUri
     }, {
-      updateInterval: 250
+      updateInterval: 100
     });
     let settleLoaded = null;
     const loaded = new Promise(resolve => {
@@ -495,81 +595,33 @@ const AudioMessage = ({
     }
     soundRef.current = player;
     statusSubRef.current = subscription;
+    if (rateRef.current !== 1) {
+      player.shouldCorrectPitch = true;
+      player.setPlaybackRate(rateRef.current);
+    }
+    const seek = pendingSeekRef.current;
+    pendingSeekRef.current = null;
+    if (seek !== null && player.duration > 0) {
+      await player.seekTo(seek * player.duration);
+    }
+    claimPlayback();
     player.play();
     clearLoadingGuard();
     setIsLoading(false);
     setPlaybackError(false);
     setIsPlaying(true);
-    logAudioDebug('native audio playback started', {
-      src,
-      container: preparedRef.current?.container,
-      localUri
-    });
-  };
-
-  // WebView finished decoding Opus → WAV: persist the WAV and play it
-  // natively. From here it is indistinguishable from any other native clip.
-  const onDecoded = async (durationMillis, wavBase64) => {
-    try {
-      const cacheDirectory = FileSystem.cacheDirectory || '';
-      const wavUri = `${cacheDirectory}ethora-audio-${hashString(src)}.wav`;
-      await FileSystem.writeAsStringAsync(wavUri, wavBase64, {
-        encoding: FileSystem.EncodingType.Base64
-      });
-      if (unmountedRef.current) {
-        return;
-      }
-      preparedRef.current = {
-        localUri: wavUri,
-        container: preparedRef.current?.container ?? 'webm'
-      };
-      if (durationMillis > 0) {
-        setDuration(durationMillis);
-      }
-      setWebViewEnabled(false); // decoder no longer needed
-      await startNativePlayback(wavUri);
-    } catch (error) {
-      fail(error);
-    }
-  };
-  const handleWebMessage = event => {
-    let payload;
-    try {
-      payload = JSON.parse(event.nativeEvent.data);
-    } catch {
-      return;
-    }
-    if (payload.type === 'bridge_ready') {
-      bridgeReadyRef.current = true;
-      maybeInjectDecode();
-      return;
-    }
-    if (payload.type === 'decoded') {
-      logAudioDebug('web audio decoded', {
-        src,
-        durationMillis: payload.durationMillis,
-        wavBytes: payload.wavBase64 ? payload.wavBase64.length : 0
-      });
-      void onDecoded(payload.durationMillis, payload.wavBase64);
-      return;
-    }
-    // type === 'error'
-    fail(new Error(payload.message || 'web_audio_error'));
   };
   const togglePlayback = async () => {
     if (!src) {
       return;
     }
 
-    // Already-loaded native sound (covers both native formats AND the
-    // decoded-WAV from the WebView path) → plain toggle.
+    // Already-loaded player → plain toggle.
     if (soundRef.current) {
       try {
-        // `play()` / `pause()` emit NO status event of their own (expo-av's
-        // playAsync/pauseAsync resolved with one). Playing state only ever
-        // reaches us through the periodic time observer, and that observer
-        // stops while paused — so without setting this here the button
-        // would latch on "pause" forever and never resume.
+        // `play()` / `pause()` emit no status event of their own, and the
+        // time observer stops while paused — so set the state here or the
+        // button latches on "pause" forever.
         if (isPlaying) {
           soundRef.current.pause();
           setIsPlaying(false);
@@ -578,6 +630,7 @@ const AudioMessage = ({
             await soundRef.current.seekTo(0);
             didFinishRef.current = false;
           }
+          claimPlayback();
           soundRef.current.play();
           setIsPlaying(true);
         }
@@ -587,22 +640,17 @@ const AudioMessage = ({
       return;
     }
 
-    // First tap → prepare (download + sniff) then route to the right engine.
+    // First tap → download (unless the waveform already did), decode where
+    // the native player cannot, then play.
     setPlaybackError(false);
     setIsLoading(true);
     armLoadingGuard();
     try {
-      const prepared = await withTimeout(prepareSource(), 14000, 'audio_prepare_timeout');
-      if (unmountedRef.current) {
-        return;
+      let prepared = await withTimeout(prepareSource(), 14000, 'audio_prepare_timeout');
+      if (requiresWebAudioDecode(prepared.container) && !prepared.playable) {
+        prepared = await decodeClip(prepared);
       }
-      if (requiresWebAudioDecode(prepared.container)) {
-        // Mount the decoder WebView; decoding + playback continue when the
-        // 'decoded' message arrives (→ onDecoded → startNativePlayback).
-        if (!webViewEnabled) {
-          setWebViewEnabled(true);
-        }
-        maybeInjectDecode();
+      if (unmountedRef.current) {
         return;
       }
       await startNativePlayback(prepared.localUri);
@@ -610,166 +658,191 @@ const AudioMessage = ({
       fail(error);
     }
   };
+
+  // A tap on the bars jumps there (and starts playing, as in Telegram).
+  const seekFromTap = event => {
+    if (!waveWidth || playbackError) {
+      return;
+    }
+    const ratio = Math.max(0, Math.min(1, event.nativeEvent.locationX / waveWidth));
+    const player = soundRef.current;
+    if (player && player.duration > 0) {
+      didFinishRef.current = false;
+      void player.seekTo(ratio * player.duration);
+      setPosition(ratio * player.duration * 1000);
+      if (!isPlaying) {
+        claimPlayback();
+        player.play();
+        setIsPlaying(true);
+      }
+      return;
+    }
+    if (isLoading) {
+      return;
+    }
+    pendingSeekRef.current = ratio;
+    void togglePlayback();
+  };
+  const cycleSpeed = () => {
+    const next = SPEEDS[(SPEEDS.indexOf(rate) + 1) % SPEEDS.length];
+    rateRef.current = next;
+    setRate(next);
+    const player = soundRef.current;
+    if (player) {
+      player.shouldCorrectPitch = true;
+      player.setPlaybackRate(next);
+    }
+  };
   useEffect(() => {
     unmountedRef.current = false;
     return () => {
       unmountedRef.current = true;
+      if (pauseActive === pauseSelf) {
+        pauseActive = null;
+      }
       clearLoadingGuard();
       releasePlayer();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // Full reset whenever the source changes (component reused for a new
-  // message / re-render with a different src).
-  useEffect(() => {
-    releasePlayer();
-    preparedRef.current = null;
-    bridgeReadyRef.current = false;
-    injectedRef.current = false;
-    didFinishRef.current = false;
-    clearLoadingGuard();
-    setIsPlaying(false);
-    setIsLoading(false);
-    setPlaybackError(false);
-    setPosition(0);
-    setDuration(0);
-    setWebViewEnabled(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [src]);
+  const onWaveLayout = event => {
+    const width = Math.floor(event.nativeEvent.layout.width);
+    if (width !== waveWidth) {
+      setWaveWidth(width);
+    }
+  };
+  const barCount = waveWidth ? Math.max(8, Math.floor((waveWidth + BAR_GAP) / (BAR_WIDTH + BAR_GAP))) : 0;
+  const bars = useMemo(() => barCount ? resamplePeaks(peaks ?? new Array(barCount).fill(MIN_BAR), barCount) : [], [peaks, barCount]);
   const progress = duration > 0 ? Math.min(1, position / duration) : 0;
+  const playedBars = Math.round(progress * bars.length);
+  const started = isPlaying || position > 0;
+  const timeLabel = playbackError ? t('media.audioUnavailable') : started ? formatClipTime(position) : duration > 0 ? formatClipTime(duration) : '';
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [webViewEnabled ? /*#__PURE__*/_jsx(View, {
-      style: styles.decoderHost,
-      pointerEvents: "none",
-      children: /*#__PURE__*/_jsx(WebView, {
-        ref: webViewRef,
-        source: {
-          html: WEB_DECODER_HTML
-        },
-        originWhitelist: ['*'],
-        onMessage: handleWebMessage,
-        javaScriptEnabled: true,
-        domStorageEnabled: false,
-        scrollEnabled: false,
-        pointerEvents: "none",
-        showsHorizontalScrollIndicator: false,
-        showsVerticalScrollIndicator: false,
-        style: styles.hiddenWebView
+    style: styles.container,
+    testID: "audio-message",
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: "audio-play-button",
+      accessibilityRole: "button",
+      accessibilityLabel: t(isPlaying ? 'media.audioPause' : 'media.audioPlay'),
+      style: ({
+        pressed
+      }) => [styles.playButton, {
+        backgroundColor: buttonFill,
+        opacity: pressed ? 0.85 : 1
+      }],
+      onPress: togglePlayback,
+      disabled: isLoading,
+      hitSlop: 6,
+      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: buttonGlyph
+      }) : isPlaying ? /*#__PURE__*/_jsx(PauseGlyph, {
+        color: buttonGlyph
+      }) : /*#__PURE__*/_jsx(PlayGlyph, {
+        color: buttonGlyph
       })
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: styles.container,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        testID: "audio-play-button",
-        accessibilityLabel: "audio-play-button",
-        style: [styles.playButton, {
-          backgroundColor: primaryColor
-        }],
-        onPress: togglePlayback,
-        disabled: isLoading,
-        activeOpacity: 0.85,
-        children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: onPrimary
-        }) : /*#__PURE__*/_jsx(View, {
-          style: styles.iconWrap,
-          children: isPlaying ? /*#__PURE__*/_jsx(PauseIcon, {
-            width: 18,
-            height: 18,
-            color: onPrimary
-          }) : /*#__PURE__*/_jsx(PlayIcon, {
-            width: 18,
-            height: 18,
-            color: onPrimary
-          })
-        })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.track,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        testID: "audio-waveform",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        onPress: seekFromTap,
+        onLayout: onWaveLayout,
+        style: styles.wave,
+        children: bars.map((value, index) => /*#__PURE__*/_jsx(View, {
+          style: [styles.bar, {
+            height: Math.max(BAR_WIDTH, Math.round(value * WAVE_HEIGHT)),
+            backgroundColor: ink,
+            opacity: index < playedBars ? 1 : 0.35
+          }]
+        }, index))
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.progressContainer,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.progressTrack, trackStyle],
-          children: /*#__PURE__*/_jsx(View, {
-            style: [styles.progressFill, {
-              width: `${progress * 100}%`,
-              backgroundColor: primaryColor
-            }]
+        style: styles.metaRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.time, {
+            color: metaColor
+          }],
+          numberOfLines: 1,
+          children: timeLabel
+        }), started && !playbackError ? /*#__PURE__*/_jsx(Pressable, {
+          testID: "audio-speed",
+          accessibilityRole: "button",
+          accessibilityLabel: t('media.audioSpeed'),
+          onPress: cycleSpeed,
+          hitSlop: 8,
+          style: [styles.speed, {
+            backgroundColor: ink
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.speedText, {
+              color: buttonGlyph
+            }],
+            children: `${rate}×`
           })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.progressRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.time, timeStyle],
-            children: playbackError ? 'Audio unavailable' : formatTime(position)
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.time, timeStyle],
-            children: !playbackError && duration > 0 ? formatTime(duration) : ''
-          })]
-        })]
+        }) : null]
       })]
     })]
   });
 };
 export default AudioMessage;
 const styles = StyleSheet.create({
-  root: {
-    position: 'relative'
-  },
-  decoderHost: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0,
-    overflow: 'hidden',
-    opacity: 0
-  },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    width: 260,
+    gap: 10,
+    // Media bubbles carry no padding of their own (images run edge to
+    // edge), so the player brings the text bubble's inset with it.
+    paddingTop: 10,
+    paddingLeft: 10,
+    paddingRight: 12,
+    width: 250,
     maxWidth: '100%'
   },
   playButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
+    width: 46,
+    height: 46,
+    borderRadius: 23,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  iconWrap: {
-    marginLeft: 1
-  },
-  progressContainer: {
+  track: {
     flex: 1,
-    gap: 6
+    gap: 4
   },
-  progressRow: {
+  wave: {
+    height: WAVE_HEIGHT,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  progressTrack: {
-    height: 6,
-    backgroundColor: '#D0D7E6',
-    borderRadius: 999,
+    alignItems: 'flex-end',
+    gap: BAR_GAP,
     overflow: 'hidden'
   },
-  hiddenWebView: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    opacity: 0
+  bar: {
+    width: BAR_WIDTH,
+    borderRadius: BAR_WIDTH / 2
   },
-  progressFill: {
-    height: '100%',
-    borderRadius: 999
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    minHeight: 16
   },
   time: {
     fontSize: 12,
-    color: '#667085',
-    fontWeight: '500'
+    lineHeight: 16,
+    fontVariant: ['tabular-nums'],
+    opacity: 0.85
+  },
+  speed: {
+    borderRadius: 8,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    opacity: 0.85
+  },
+  speedText: {
+    fontSize: 11,
+    lineHeight: 14,
+    fontWeight: '700'
   }
 });
 //# sourceMappingURL=AudioMessage.js.map