@ethora/chat-component-rn 26.9.0 → 26.10.0

package/src/components/RoomComponents/SwipeableRoomRow.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import ReanimatedSwipeable, {
   type SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable';
-import { LeaveIcon, ReportIcon } from '../../assets/icons';
+import { BellIcon, BellOffIcon, LeaveIcon, ReportIcon } from '../../assets/icons';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import type { ChatTheme } from '../../theme/theme';
@@ -25,25 +25,35 @@ export const closeOpenRoomRow = (): void => {
 interface SwipeableRoomRowProps {
   /** Identifies the row to the host's callbacks. */
   roomJid: string;
+  /** The chat's notifications are off: the action offers to turn them on. */
+  muted?: boolean;
+  /** Mute / unmute, as in the chat profile. No handler → no button. */
+  onToggleMute?: (roomJid: string) => void;
   onReport: (roomJid: string) => void;
   onLeave: (roomJid: string) => void;
   children: React.ReactNode;
 }
 
 /**
- * A room-list row that slides left to show Report and Leave behind it,
+ * A room-list row that slides left to show Mute, Report and Leave behind it,
  * the way chats do in the big messengers. A tap on an action folds the
  * row back first, so the list is tidy under whatever the action opens.
  */
 const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
   roomJid,
+  muted = false,
+  onToggleMute,
   onReport,
   onLeave,
   children,
 }) => {
   const theme = useTheme();
   const t = useT();
-  const styles = useMemo(() => createStyles(theme), [theme]);
+  const actionCount = onToggleMute ? 3 : 2;
+  const styles = useMemo(
+    () => createStyles(theme, actionCount),
+    [theme, actionCount]
+  );
   const ref = useRef<SwipeableMethods>(null);
 
   const onWillOpen = useCallback(() => {
@@ -65,6 +75,29 @@ const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
   const renderRightActions = useCallback(
     () => (
       <View style={styles.actions}>
+        {onToggleMute ? (
+          // The ACTION a tap performs, as in the web client: a muted chat
+          // (the crossed bell on its row) offers "Unmute" with a plain bell,
+          // any other offers "Mute" with the crossed one.
+          <TouchableOpacity
+            testID={`room-action-mute-${roomJid.split('@')[0]}`}
+            accessibilityRole="button"
+            accessibilityLabel={t(muted ? 'action.unmute' : 'action.mute')}
+            accessibilityState={{ checked: muted }}
+            activeOpacity={0.8}
+            style={[styles.action, { backgroundColor: theme.icon }]}
+            onPress={() => act(onToggleMute)}
+          >
+            {muted ? (
+              <BellIcon color={theme.textOnPrimary} width={22} height={22} />
+            ) : (
+              <BellOffIcon color={theme.textOnPrimary} width={22} height={22} />
+            )}
+            <Text style={styles.label}>
+              {t(muted ? 'action.unmute' : 'action.mute')}
+            </Text>
+          </TouchableOpacity>
+        ) : null}
         <TouchableOpacity
           testID={`room-action-report-${roomJid.split('@')[0]}`}
           accessibilityRole="button"
@@ -89,7 +122,7 @@ const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
         </TouchableOpacity>
       </View>
     ),
-    [act, onLeave, onReport, roomJid, styles, t, theme]
+    [act, muted, onLeave, onReport, onToggleMute, roomJid, styles, t, theme]
   );
 
   return (
@@ -113,11 +146,11 @@ const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
 
 export default SwipeableRoomRow;
 
-const createStyles = (theme: ChatTheme) =>
+const createStyles = (theme: ChatTheme, actionCount: number) =>
   StyleSheet.create({
     actions: {
       flexDirection: 'row',
-      width: ROOM_ACTION_WIDTH * 2,
+      width: ROOM_ACTION_WIDTH * actionCount,
     },
     action: {
       width: ROOM_ACTION_WIDTH,

package/src/components/Thread/ThreadHeader.tsx

@@ -8,6 +8,7 @@ import { CloseIcon } from '../../assets/icons';
 import { useDispatch } from 'react-redux';
 import { setCloseActiveMessage } from '../../roomStore/roomsSlice';
 import { View } from 'react-native';
+import { useT } from '../../i18n/useT';
 
 interface ThreadHeaderProps {
   chatJID: string;
@@ -15,6 +16,7 @@ interface ThreadHeaderProps {
 
 const ThreadHeader: FC<ThreadHeaderProps> = ({ chatJID }) => {
   const dispatch = useDispatch();
+  const t = useT();
 
   const handleCloseThread = () => {
     dispatch(setCloseActiveMessage({ chatJID: chatJID }));
@@ -23,7 +25,7 @@ const ThreadHeader: FC<ThreadHeaderProps> = ({ chatJID }) => {
   return (
     <ChatContainerHeader>
       <View style={{ display: 'flex', gap: 8 }}>
-        <ChatContainerHeaderLabel>Thread</ChatContainerHeaderLabel>
+        <ChatContainerHeaderLabel>{t('thread.title')}</ChatContainerHeaderLabel>
       </View>
 
       <View style={{ display: 'flex', gap: 16 }}>

package/src/components/Thread/ThreadWrapper.tsx

@@ -17,6 +17,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { IMessage, User } from '../../types/types';
 import type { RootState } from '../../roomStore';
+import Loader from '../styled/Loader';
+import { useT } from '../../i18n/useT';
+import { parseMessageReference } from '../../helpers/parseMessageReference';
 import SendInput from '../styled/SendInput';
 import { useXmppClient } from '../../context/xmppProvider';
 import MessageList from '../MainComponents/MessageList';
@@ -29,7 +32,6 @@ import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
-import { useT } from '../../i18n/useT';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { KeyboardInputDock } from '../MainComponents/KeyboardInputDock';
 import {
@@ -44,6 +46,8 @@ import {
   PUSH,
 } from '../MainComponents/RoomStack';
 
+export const THREAD_HISTORY_PAGE_SIZE = 15;
+
 interface ThreadWrapperProps {
   activeMessage: IMessage;
   user: User;
@@ -146,23 +150,85 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
     [close, windowWidth, x]
   );
 
-  // Thread history IS the room's history (replies live in the room).
+  // Thread history IS the room's history (replies live in the room). Reads
+  // the LATEST room state at call time (no stale closure), pages by the
+  // server cursor like the main list does, and stops at the thread's parent:
+  // every reply is newer than the message it answers.
+  const parentTs = Number(activeMessage.id);
+  // One page request at a time, and never the same page twice: a page that
+  // returns only reactions or receipts leaves the cursor where it was, and
+  // repeating it would loop forever.
+  const inFlightRef = useRef(false);
+  const lastRequestKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    lastRequestKeyRef.current = null;
+  }, [roomJid, activeMessage.id]);
+
   const loadMoreMessages = useCallback(
     async (chatJID: string, max: number, idOfMessageBefore?: number) => {
-      if (isLoadingMore) {return;}
-      if (reduxStore.getState().rooms.rooms?.[chatJID]?.historyComplete) {return;}
+      if (!client || inFlightRef.current) {return;}
+      const current = reduxStore.getState().rooms.rooms?.[chatJID];
+      if (!current || current.historyComplete) {return;}
+
+      const cursor = current.messageStats?.firstMessageTimestamp;
+      const hint =
+        typeof idOfMessageBefore === 'number' &&
+        Number.isFinite(idOfMessageBefore)
+          ? idOfMessageBefore
+          : undefined;
+      const candidates = [cursor, hint].filter(
+        (n): n is number => typeof n === 'number' && Number.isFinite(n)
+      );
+      const before = candidates.length ? Math.min(...candidates) : undefined;
+      if (before === undefined) {return;}
+      if (Number.isFinite(parentTs) && before <= parentTs) {return;}
+
+      const requestKey = `${chatJID}|${before}`;
+      if (requestKey === lastRequestKeyRef.current) {return;}
+
+      inFlightRef.current = true;
+      lastRequestKeyRef.current = requestKey;
       setIsLoadingMore(true);
       try {
-        await client?.getHistoryStanza(chatJID, max, idOfMessageBefore);
-      } catch (err) {
-        console.warn('getHistoryStanza failed', err);
+        await client.getHistoryStanza(chatJID, max, before).catch((err: unknown) => {
+          // Let the same page be retried later.
+          lastRequestKeyRef.current = null;
+          console.warn('getHistoryStanza failed', err);
+        });
       } finally {
+        inFlightRef.current = false;
         setIsLoadingMore(false);
       }
     },
-    [client, isLoadingMore, reduxStore]
+    [client, reduxStore, parentTs]
   );
 
+  // Replies of this parent already in the store.
+  const replyCount = useMemo(() => {
+    let n = 0;
+    for (const m of room?.messages ?? []) {
+      if (
+        m.isReply === 'true' &&
+        parseMessageReference(m.mainMessage)?.id === activeMessage.id
+      ) {
+        n += 1;
+      }
+    }
+    return n;
+  }, [room?.messages, activeMessage.id]);
+
+  // Opening a thread whose parent is older than the loaded window: the list
+  // has no replies to scroll, so nothing would ask for history. Keep paging
+  // until the cursor reaches the parent (or the archive ends).
+  const cursor = room?.messageStats?.firstMessageTimestamp;
+  const historyComplete = Boolean(room?.historyComplete);
+  useEffect(() => {
+    if (historyComplete || isLoadingMore) {return;}
+    if (!Number.isFinite(parentTs)) {return;}
+    if (typeof cursor !== 'number' || cursor <= parentTs) {return;}
+    loadMoreMessages(roomJid, THREAD_HISTORY_PAGE_SIZE, cursor);
+  }, [cursor, historyComplete, isLoadingMore, parentTs, roomJid, loadMoreMessages]);
+
   const sendMessage = useCallback(
     (message: string) => {
       sendMs(message, roomJid, true, isChecked, createMainMessageForThread(activeMessage));
@@ -172,7 +238,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
 
   const sendMedia = useCallback(
     (data: any, type: string) => {
-      sendMessageMedia(
+      return sendMessageMedia(
         data,
         type,
         roomJid,
@@ -219,7 +285,19 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
           style={[styles.fill, { backgroundColor: theme.surface }]}
         >
           <View style={[styles.fill, { backgroundColor: theme.chatBackground }]}>
-            <ModalHeaderComponent headerTitle={t('thread.title')} handleCloseModal={close} />
+            <ModalHeaderComponent
+              headerTitle={t('thread.title')}
+              handleCloseModal={close}
+            />
+            {isLoadingMore && replyCount === 0 && (
+              <View
+                testID="thread-history-loader"
+                pointerEvents="none"
+                style={styles.historyLoader}
+              >
+                <Loader size={24} color={theme.primary} />
+              </View>
+            )}
             <MessageList
               loadMoreMessages={loadMoreMessages}
               CustomMessage={CustomMessageComponent}
@@ -333,6 +411,14 @@ const styles = StyleSheet.create({
   fill: {
     flex: 1,
   },
+  historyLoader: {
+    position: 'absolute',
+    top: 72,
+    left: 0,
+    right: 0,
+    zIndex: 2,
+    alignItems: 'center',
+  },
   dock: {
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,

package/src/components/styled/AudioDecoderHost.tsx

@@ -0,0 +1,351 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
+import { WAVEFORM_RESOLUTION } from '../../helpers/audioWaveform';
+
+/**
+ * One hidden WebView, shared by every voice message, used as an audio
+ * DECODER (never as a player):
+ *   • `decodeAudioData` is the only API on iOS that understands the WebM /
+ *     Ogg Opus the web client records, and it works on a suspended
+ *     AudioContext — decoding needs no user gesture.
+ *   • On both platforms it is also how a bubble gets its waveform: RN has
+ *     no PCM access to a file, the WebView does, so the bars are computed
+ *     there with the same curve the web client uses.
+ * Playing audio OUT of a WebView is gated behind an in-page gesture an RN
+ * tap cannot supply, so when a playable copy is needed the page re-encodes
+ * the PCM to WAV and ships it back; expo-audio plays that natively.
+ *
+ * Jobs run one at a time (each holds a whole clip in memory), and the
+ * WebView is mounted only while there is work, then dropped after a while.
+ */
+
+// Largest WAV we ship back over the bridge. Voice messages are a couple
+// hundred KB of WAV; this only guards against a multi-minute attachment.
+export const MAX_DECODE_BYTES = 25 * 1024 * 1024;
+const JOB_TIMEOUT_MS = 20000;
+const IDLE_UNMOUNT_MS = 30000;
+
+export interface DecodedClip {
+  durationMillis: number;
+  /** 0..1 bars, `WAVEFORM_RESOLUTION` of them. */
+  peaks: number[];
+  /** Only when asked for: the clip as a playable 16-bit WAV. */
+  wavBase64?: string;
+}
+
+interface Job {
+  id: number;
+  base64: string;
+  wantWav: boolean;
+  resolve: (clip: DecodedClip) => void;
+  reject: (error: Error) => void;
+}
+
+const queue: Job[] = [];
+let nextId = 1;
+let hosts = 0;
+const listeners = new Set<() => void>();
+const notify = () => listeners.forEach((fn) => fn());
+
+/**
+ * Decode a clip (base64 of the file as downloaded) to its waveform and
+ * length, plus a WAV copy when `wantWav`. Rejects when no host is mounted,
+ * the format cannot be decoded, or it takes too long.
+ */
+export const decodeAudioClip = (
+  base64: string,
+  { wantWav = false }: { wantWav?: boolean } = {}
+): Promise<DecodedClip> =>
+  new Promise((resolve, reject) => {
+    if (hosts === 0) {
+      reject(new Error('audio_decoder_unavailable'));
+      return;
+    }
+    queue.push({ id: nextId++, base64, wantWav, resolve, reject });
+    notify();
+  });
+
+const 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 BARS = ${WAVEFORM_RESOLUTION};
+        var MIN_BAR = 0.08;
+        var post = function (payload) {
+          if (window.ReactNativeWebView) {
+            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
+          }
+        };
+        var ctx = null;
+        // Same curve as buildWaveformPeaks in helpers/audioWaveform.ts.
+        var peaksOf = function (samples) {
+          var bucket = Math.floor(samples.length / BARS);
+          var out = [];
+          var i;
+          if (bucket < 1) { for (i = 0; i < BARS; i += 1) { out.push(MIN_BAR); } return out; }
+          var rms = [];
+          for (i = 0; i < BARS; i += 1) {
+            var sum = 0;
+            for (var j = i * bucket; j < (i + 1) * bucket; j += 1) { sum += samples[j] * samples[j]; }
+            rms.push(Math.sqrt(sum / bucket));
+          }
+          var sorted = rms.slice().sort(function (a, b) { return a - b; });
+          var ref = sorted[Math.floor(sorted.length * 0.95)] || sorted[sorted.length - 1] || 0;
+          for (i = 0; i < BARS; i += 1) {
+            if (ref <= 0) { out.push(MIN_BAR); continue; }
+            var scaled = Math.sqrt(Math.min(rms[i] / ref, 1));
+            out.push(Math.min(1, MIN_BAR + scaled * (1 - MIN_BAR)));
+          }
+          return out;
+        };
+        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);
+        };
+        var fail = function (id, message) { post({ type: 'error', id: id, message: message }); };
+        window.__decodeAudio = function (id, base64, wantWav) {
+          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 result = {
+                    type: 'decoded',
+                    id: id,
+                    durationMillis: Math.floor(decoded.duration * 1000),
+                    peaks: peaksOf(decoded.getChannelData(0))
+                  };
+                  if (wantWav) {
+                    var wav = encodeWav(decoded);
+                    if (wav.byteLength > MAX_WAV) { fail(id, 'audio_too_long'); return; }
+                    result.wavBase64 = abToBase64(wav);
+                  }
+                  post(result);
+                } catch (e) {
+                  fail(id, 'encode_failed:' + (e && e.message ? e.message : e));
+                }
+              },
+              function (err) {
+                fail(id, 'decode_failed:' + (err && err.message ? err.message : err));
+              }
+            );
+          } catch (e) {
+            fail(id, 'load_failed:' + (e && e.message ? e.message : e));
+          }
+        };
+        post({ type: 'bridge_ready' });
+      })();
+    </script>
+  </body>
+</html>`;
+
+type DecoderMessage =
+  | { type: 'bridge_ready' }
+  | {
+      type: 'decoded';
+      id: number;
+      durationMillis: number;
+      peaks: number[];
+      wavBase64?: string;
+    }
+  | { type: 'error'; id: number; message?: string };
+
+/**
+ * Mounted once near the SDK root (ReduxWrapper). Renders nothing until a
+ * voice message asks for a decode.
+ */
+export const AudioDecoderHost: React.FC = () => {
+  const [mounted, setMounted] = useState(false);
+  const webViewRef = useRef<WebView | null>(null);
+  const readyRef = useRef(false);
+  const activeRef = useRef<Job | null>(null);
+  const jobTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const pump = useCallback(() => {
+    if (activeRef.current) {return;}
+    const job = queue.shift();
+    if (!job) {
+      // Nothing left: let the WebView go after a quiet spell.
+      if (idleTimerRef.current) {clearTimeout(idleTimerRef.current);}
+      idleTimerRef.current = setTimeout(() => {
+        if (!activeRef.current && !queue.length) {
+          readyRef.current = false;
+          setMounted(false);
+        }
+      }, IDLE_UNMOUNT_MS);
+      return;
+    }
+    if (idleTimerRef.current) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+    if (!readyRef.current || !webViewRef.current) {
+      // Not up yet: put it back and wait for bridge_ready.
+      queue.unshift(job);
+      setMounted(true);
+      return;
+    }
+    activeRef.current = job;
+    jobTimerRef.current = setTimeout(() => {
+      finish(job.id, undefined, new Error('audio_decode_timeout'));
+    }, JOB_TIMEOUT_MS);
+    webViewRef.current.injectJavaScript(
+      `window.__decodeAudio(${job.id}, ${JSON.stringify(job.base64)}, ${
+        job.wantWav ? 'true' : 'false'
+      }); true;`
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const finish = useCallback(
+    (id: number, clip?: DecodedClip, error?: Error) => {
+      const job = activeRef.current;
+      if (!job || job.id !== id) {return;}
+      activeRef.current = null;
+      if (jobTimerRef.current) {
+        clearTimeout(jobTimerRef.current);
+        jobTimerRef.current = null;
+      }
+      if (clip) {job.resolve(clip);}
+      else {job.reject(error ?? new Error('audio_decode_failed'));}
+      pump();
+    },
+    [pump]
+  );
+
+  useEffect(() => {
+    hosts += 1;
+    listeners.add(pump);
+    pump();
+    return () => {
+      hosts -= 1;
+      listeners.delete(pump);
+      if (jobTimerRef.current) {clearTimeout(jobTimerRef.current);}
+      if (idleTimerRef.current) {clearTimeout(idleTimerRef.current);}
+      const active = activeRef.current;
+      activeRef.current = null;
+      active?.reject(new Error('audio_decoder_unmounted'));
+      if (hosts === 0) {
+        queue.splice(0).forEach((job) =>
+          job.reject(new Error('audio_decoder_unmounted'))
+        );
+      }
+    };
+  }, [pump]);
+
+  const onMessage = (event: WebViewMessageEvent) => {
+    let payload: DecoderMessage;
+    try {
+      payload = JSON.parse(event.nativeEvent.data) as DecoderMessage;
+    } catch {
+      return;
+    }
+    if (payload.type === 'bridge_ready') {
+      readyRef.current = true;
+      pump();
+      return;
+    }
+    if (payload.type === 'decoded') {
+      finish(payload.id, {
+        durationMillis: payload.durationMillis,
+        peaks: payload.peaks,
+        wavBase64: payload.wavBase64,
+      });
+      return;
+    }
+    finish(payload.id, undefined, new Error(payload.message || 'audio_decode_failed'));
+  };
+
+  if (!mounted) {return null;}
+  return (
+    <View style={styles.host} pointerEvents="none">
+      <WebView
+        ref={webViewRef}
+        source={{ html: DECODER_HTML }}
+        originWhitelist={['*']}
+        onMessage={onMessage}
+        // iOS can kill the web content process under memory pressure:
+        // fail the clip in flight and start a fresh page for the rest.
+        onContentProcessDidTerminate={() => {
+          readyRef.current = false;
+          const active = activeRef.current;
+          if (active) {
+            finish(active.id, undefined, new Error('audio_decoder_crashed'));
+          }
+          webViewRef.current?.reload();
+        }}
+        javaScriptEnabled
+        domStorageEnabled={false}
+        scrollEnabled={false}
+        pointerEvents="none"
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        style={styles.webView}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  host: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+    opacity: 0,
+  },
+  webView: {
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});