@kesha-antonov/react-native-chat 5.0.1 → 6.0.1

package/lib/MessageAudio.js

@@ -1,126 +1,666 @@
-import React, { useCallback } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Icon } from './components/Icon';
+import { useRaiseToListen } from './components/earpiece';
 import { MediaCard } from './components/MediaCard';
-import { PauseIcon, PlayIcon } from './components/MediaControls';
 import { getMediaPalette } from './components/mediaPalette';
+import { claimPlayback, releasePlayback, useNotePlaybackOptions, usePlaybackRate, usePlaylistEntry, useReportNowPlaying } from './components/mediaPlayback';
+import { suppressPressAfterHold } from './components/messagePress';
+import { UnreadDot } from './components/NoteIndicators';
+import { PlayPauseIcon } from './components/PlayPauseIcon';
+import { TranscribeButton, TranscriptionText, useTranscription } from './components/TranscribeButton';
+import { useViewOnce } from './components/viewOnce';
+import { ViewOnceBadge } from './components/ViewOnceBadge';
+import { TRANSCRIBE_SLOT_WIDTH, VOICE_BUTTON_SIZE, VOICE_COLUMN_GAP, VOICE_META_HEIGHT, VOICE_ROW_PADDING_V, VOICE_TIME_FONT_SIZE, WAVEFORM_HEIGHT, formatVoiceDuration, isFreshOutgoingNote, voiceContentWidth } from './components/voiceWaveform';
 import { WaveformPlayer, isWaveformAvailable } from './components/WaveformPlayer';
 import { useThemedStyles } from './hooks/useTheme';
-// Optional inline player. Resolved through a try/catch require so the bundle
+import { getExpoAudio } from './optional';
+// Optional inline player. Resolved through the optional-peer registry (`src/optional`) so the bundle
 // works whether or not the consumer installed `expo-audio` (Metro treats
 // try/catch-wrapped requires as optional dependencies). When present, audio
 // messages get a real play/pause control with a progress bar; otherwise they
 // fall back to a tappable MediaCard that opens the audio in the system player.
-let expoAudio = null;
-try {
-    expoAudio = require('expo-audio');
-}
-catch {
-    expoAudio = null;
-}
+const expoAudio = getExpoAudio();
 const isExpoAudioAvailable = !!(expoAudio?.useAudioPlayer && expoAudio?.useAudioPlayerStatus);
-const formatTime = (seconds) => {
-    if (!Number.isFinite(seconds) || seconds < 0)
-        seconds = 0;
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-};
+
 // Only mounted when expo-audio resolved, so the hooks below always run in a
 // stable order.
-const ExpoAudioPlayer = ({ uri, position }) => {
-    const player = expoAudio.useAudioPlayer(uri);
-    const status = expoAudio.useAudioPlayerStatus(player);
-    const styles = useThemedStyles(position === 'right' ? createRightStyles : createLeftStyles);
-    const isPlaying = !!status?.playing;
-    const duration = status?.duration ?? 0;
-    const currentTime = status?.currentTime ?? 0;
-    const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
-    const togglePlayback = useCallback(() => {
-        if (status?.playing) {
-            player.pause();
-        }
-        else {
-            if (status?.didJustFinish || (duration > 0 && currentTime >= duration))
-                player.seekTo(0);
-            player.play();
-        }
-    }, [player, status, duration, currentTime]);
-    return (<View style={styles.audioRow}>
-      <Pressable onPress={togglePlayback} accessibilityRole='button' accessibilityLabel={isPlaying ? 'pause' : 'play'} style={styles.playCircle}>
-        {isPlaying
-            ? <Icon name='pause' color={styles.glyphColor.color} size={14} fallback={<PauseIcon color={styles.glyphColor.color} size={14}/>}/>
-            : <Icon name='play' color={styles.glyphColor.color} size={14} fallback={<PlayIcon color={styles.glyphColor.color} size={14}/>}/>}
-      </Pressable>
-      <View style={styles.track}>
-        {/* progress fill width is a runtime value, so it stays inline */}
-        <View style={[styles.trackFill, { width: `${progress * 100}%` }]}/>
-      </View>
-      <Text style={styles.time}>
-        {formatTime(currentTime > 0 ? currentTime : duration)}
-      </Text>
-    </View>);
+const ExpoAudioPlayer = t0 => {
+  const $ = _c(140);
+  const {
+    uri,
+    position,
+    messageId,
+    isMediaUnread,
+    duration: durationProp,
+    message,
+    isViewOnce: t1,
+    transcription
+  } = t0;
+  const isViewOnce = t1 === undefined ? false : t1;
+  const player = expoAudio.useAudioPlayer(uri);
+  const status = expoAudio.useAudioPlayerStatus(player);
+  const styles = useThemedStyles(position === "right" ? createRightStyles : createLeftStyles);
+  const playerId = useId();
+  const rate = usePlaybackRate();
+  const isPlaying = !!status?.playing;
+  const duration = status?.duration || durationProp || 0;
+  const currentTime = status?.currentTime ?? 0;
+  const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
+  const {
+    markReadRef,
+    onTranscribe,
+    onViewOnceEnd
+  } = useNotePlaybackOptions(messageId);
+  const transcribe = useTranscription(message, messageId, transcription, onTranscribe);
+  const viewOnce = useViewOnce(message, messageId, isViewOnce, onViewOnceEnd);
+  const [isHeard, setIsHeard] = useState(false);
+  let t2;
+  if ($[0] !== player) {
+    t2 = () => {
+      try {
+        player.pause();
+      } catch {}
+    };
+    $[0] = player;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const pause = t2;
+  let t3;
+  if ($[2] !== pause || $[3] !== player || $[4] !== viewOnce) {
+    t3 = reason => {
+      pause();
+      if (reason === "replaced") {
+        try {
+          player.seekTo(0);
+        } catch {}
+        viewOnce.onEnd();
+      }
+    };
+    $[2] = pause;
+    $[3] = player;
+    $[4] = viewOnce;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const onStop = t3;
+  let t4;
+  if ($[6] !== isMediaUnread || $[7] !== markReadRef || $[8] !== onStop || $[9] !== player || $[10] !== playerId || $[11] !== position || $[12] !== rate || $[13] !== viewOnce) {
+    t4 = fromStart => {
+      if (!viewOnce.onStart()) {
+        return;
+      }
+      if (fromStart) {
+        player.seekTo(0);
+      }
+      player.setPlaybackRate?.(rate);
+      player.play();
+      claimPlayback(playerId, onStop);
+      if (position === "left" && isMediaUnread) {
+        setIsHeard(true);
+        markReadRef.current();
+      }
+    };
+    $[6] = isMediaUnread;
+    $[7] = markReadRef;
+    $[8] = onStop;
+    $[9] = player;
+    $[10] = playerId;
+    $[11] = position;
+    $[12] = rate;
+    $[13] = viewOnce;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  const play = t4;
+  let t5;
+  if ($[15] !== currentTime || $[16] !== duration || $[17] !== pause || $[18] !== play || $[19] !== status?.didJustFinish || $[20] !== status?.playing) {
+    t5 = () => {
+      if (status?.playing) {
+        pause();
+      } else {
+        play(!!status?.didJustFinish || duration > 0 && currentTime >= duration);
+      }
+    };
+    $[15] = currentTime;
+    $[16] = duration;
+    $[17] = pause;
+    $[18] = play;
+    $[19] = status?.didJustFinish;
+    $[20] = status?.playing;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const togglePlayback = t5;
+  let t6;
+  if ($[22] !== play) {
+    t6 = () => play(true);
+    $[22] = play;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  const onEndedRef = usePlaylistEntry(messageId, t6);
+  const viewOnceEndRef = useRef(viewOnce.onEnd);
+  let t7;
+  if ($[24] !== viewOnce.onEnd) {
+    t7 = () => {
+      viewOnceEndRef.current = viewOnce.onEnd;
+    };
+    $[24] = viewOnce.onEnd;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  useLayoutEffect(t7);
+  const didFinish = !!status?.didJustFinish;
+  let t8;
+  let t9;
+  if ($[26] !== didFinish || $[27] !== onEndedRef || $[28] !== playerId) {
+    t8 = () => {
+      if (!didFinish) {
+        return;
+      }
+      releasePlayback(playerId);
+      viewOnceEndRef.current();
+      onEndedRef.current();
+    };
+    t9 = [didFinish, playerId, onEndedRef];
+    $[26] = didFinish;
+    $[27] = onEndedRef;
+    $[28] = playerId;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t8 = $[29];
+    t9 = $[30];
+  }
+  useEffect(t8, t9);
+  let t10;
+  let t11;
+  if ($[31] !== player || $[32] !== rate) {
+    t10 = () => {
+      player.setPlaybackRate?.(rate);
+    };
+    t11 = [player, rate];
+    $[31] = player;
+    $[32] = rate;
+    $[33] = t10;
+    $[34] = t11;
+  } else {
+    t10 = $[33];
+    t11 = $[34];
+  }
+  useEffect(t10, t11);
+  let t12;
+  let t13;
+  if ($[35] !== playerId) {
+    t12 = () => () => releasePlayback(playerId);
+    t13 = [playerId];
+    $[35] = playerId;
+    $[36] = t12;
+    $[37] = t13;
+  } else {
+    t12 = $[36];
+    t13 = $[37];
+  }
+  useEffect(t12, t13);
+  let t14;
+  if ($[38] !== onStop || $[39] !== playerId) {
+    t14 = () => {
+      onStop("replaced");
+      releasePlayback(playerId);
+    };
+    $[38] = onStop;
+    $[39] = playerId;
+    $[40] = t14;
+  } else {
+    t14 = $[40];
+  }
+  const stopFromBar = t14;
+  const isCurrent = isPlaying || currentTime > 0;
+  useReportNowPlaying(messageId, "voice", isCurrent, isPlaying, togglePlayback, stopFromBar);
+  const isUnread = position === "left" && !!isMediaUnread && !isHeard;
+  let t15;
+  if ($[41] !== currentTime) {
+    t15 = () => currentTime;
+    $[41] = currentTime;
+    $[42] = t15;
+  } else {
+    t15 = $[42];
+  }
+  let t16;
+  if ($[43] !== isPlaying || $[44] !== play) {
+    t16 = fromStart_0 => {
+      if (fromStart_0 || !isPlaying) {
+        play(fromStart_0);
+      }
+    };
+    $[43] = isPlaying;
+    $[44] = play;
+    $[45] = t16;
+  } else {
+    t16 = $[45];
+  }
+  let t17;
+  if ($[46] !== isCurrent || $[47] !== pause || $[48] !== t15 || $[49] !== t16) {
+    t17 = {
+      isCurrent,
+      getPositionSeconds: t15,
+      listen: t16,
+      pause
+    };
+    $[46] = isCurrent;
+    $[47] = pause;
+    $[48] = t15;
+    $[49] = t16;
+    $[50] = t17;
+  } else {
+    t17 = $[50];
+  }
+  useRaiseToListen(t17);
+  const fill = viewOnce.isSpent ? 0 : isViewOnce ? viewOnce.hasStarted ? 1 - progress : 1 : progress;
+  const isPlayDisabled = viewOnce.isSpent;
+  const t18 = styles.container;
+  const t19 = position === "right";
+  let t20;
+  if ($[51] !== duration || $[52] !== t19) {
+    t20 = voiceContentWidth(duration, t19);
+    $[51] = duration;
+    $[52] = t19;
+    $[53] = t20;
+  } else {
+    t20 = $[53];
+  }
+  let t21;
+  if ($[54] !== t20) {
+    t21 = {
+      width: t20
+    };
+    $[54] = t20;
+    $[55] = t21;
+  } else {
+    t21 = $[55];
+  }
+  let t22;
+  if ($[56] !== styles.container || $[57] !== t21) {
+    t22 = [t18, t21];
+    $[56] = styles.container;
+    $[57] = t21;
+    $[58] = t22;
+  } else {
+    t22 = $[58];
+  }
+  const t23 = styles.audioRow;
+  let t24;
+  if ($[59] !== isPlayDisabled) {
+    t24 = {
+      disabled: isPlayDisabled
+    };
+    $[59] = isPlayDisabled;
+    $[60] = t24;
+  } else {
+    t24 = $[60];
+  }
+  const t25 = isPlaying ? "pause" : "play";
+  const t26 = isViewOnce ? "plays once" : undefined;
+  const t27 = isPlayDisabled && styles.playCircleDisabled;
+  let t28;
+  if ($[61] !== styles.playCircle || $[62] !== t27) {
+    t28 = [styles.playCircle, t27];
+    $[61] = styles.playCircle;
+    $[62] = t27;
+    $[63] = t28;
+  } else {
+    t28 = $[63];
+  }
+  let t29;
+  if ($[64] !== isPlaying || $[65] !== styles.glyphColor.color) {
+    t29 = <PlayPauseIcon isPlaying={isPlaying} color={styles.glyphColor.color} size={18} />;
+    $[64] = isPlaying;
+    $[65] = styles.glyphColor.color;
+    $[66] = t29;
+  } else {
+    t29 = $[66];
+  }
+  let t30;
+  if ($[67] !== isPlayDisabled || $[68] !== t24 || $[69] !== t25 || $[70] !== t26 || $[71] !== t28 || $[72] !== t29 || $[73] !== togglePlayback) {
+    t30 = <Pressable onPress={togglePlayback} {...suppressPressAfterHold} disabled={isPlayDisabled} accessibilityRole="button" accessibilityState={t24} accessibilityLabel={t25} accessibilityHint={t26} style={t28}>{t29}</Pressable>;
+    $[67] = isPlayDisabled;
+    $[68] = t24;
+    $[69] = t25;
+    $[70] = t26;
+    $[71] = t28;
+    $[72] = t29;
+    $[73] = togglePlayback;
+    $[74] = t30;
+  } else {
+    t30 = $[74];
+  }
+  let t31;
+  if ($[75] !== isViewOnce || $[76] !== styles.bubble || $[77] !== styles.glyphColor.color || $[78] !== styles.playCircle || $[79] !== viewOnce.hasStarted) {
+    t31 = isViewOnce && <ViewOnceBadge isVisible={!viewOnce.hasStarted} color={styles.playCircle.backgroundColor} glyphColor={styles.glyphColor.color} cutColor={styles.bubble.backgroundColor} />;
+    $[75] = isViewOnce;
+    $[76] = styles.bubble;
+    $[77] = styles.glyphColor.color;
+    $[78] = styles.playCircle;
+    $[79] = viewOnce.hasStarted;
+    $[80] = t31;
+  } else {
+    t31 = $[80];
+  }
+  let t32;
+  if ($[81] !== t30 || $[82] !== t31) {
+    t32 = <View>{t30}{t31}</View>;
+    $[81] = t30;
+    $[82] = t31;
+    $[83] = t32;
+  } else {
+    t32 = $[83];
+  }
+  const t33 = styles.column;
+  const t34 = `${fill * 100}%`;
+  let t35;
+  if ($[84] !== t34) {
+    t35 = {
+      width: t34
+    };
+    $[84] = t34;
+    $[85] = t35;
+  } else {
+    t35 = $[85];
+  }
+  let t36;
+  if ($[86] !== styles.trackFill || $[87] !== t35) {
+    t36 = <View style={[styles.trackFill, t35]} />;
+    $[86] = styles.trackFill;
+    $[87] = t35;
+    $[88] = t36;
+  } else {
+    t36 = $[88];
+  }
+  let t37;
+  if ($[89] !== styles.track || $[90] !== t36) {
+    t37 = <View style={styles.track}>{t36}</View>;
+    $[89] = styles.track;
+    $[90] = t36;
+    $[91] = t37;
+  } else {
+    t37 = $[91];
+  }
+  let t38;
+  if ($[92] !== styles.trackArea || $[93] !== t37) {
+    t38 = <View style={styles.trackArea}>{t37}</View>;
+    $[92] = styles.trackArea;
+    $[93] = t37;
+    $[94] = t38;
+  } else {
+    t38 = $[94];
+  }
+  let t39;
+  if ($[95] !== styles.playCircle || $[96] !== styles.transcribeSlot || $[97] !== transcribe.isLoading || $[98] !== transcribe.isOpen || $[99] !== transcribe.isVisible || $[100] !== transcribe.onPress) {
+    t39 = transcribe.isVisible && <View style={styles.transcribeSlot}><TranscribeButton isOpen={transcribe.isOpen} isLoading={transcribe.isLoading} onPress={transcribe.onPress} color={styles.playCircle.backgroundColor} /></View>;
+    $[95] = styles.playCircle;
+    $[96] = styles.transcribeSlot;
+    $[97] = transcribe.isLoading;
+    $[98] = transcribe.isOpen;
+    $[99] = transcribe.isVisible;
+    $[100] = transcribe.onPress;
+    $[101] = t39;
+  } else {
+    t39 = $[101];
+  }
+  let t40;
+  if ($[102] !== styles.trackRow || $[103] !== t38 || $[104] !== t39) {
+    t40 = <View style={styles.trackRow}>{t38}{t39}</View>;
+    $[102] = styles.trackRow;
+    $[103] = t38;
+    $[104] = t39;
+    $[105] = t40;
+  } else {
+    t40 = $[105];
+  }
+  const t41 = styles.timeRow;
+  const t42 = styles.time;
+  const t43 = isCurrent ? currentTime : duration;
+  let t44;
+  if ($[106] !== t43) {
+    t44 = formatVoiceDuration(t43);
+    $[106] = t43;
+    $[107] = t44;
+  } else {
+    t44 = $[107];
+  }
+  let t45;
+  if ($[108] !== styles.time || $[109] !== t44) {
+    t45 = <Text style={t42}>{t44}</Text>;
+    $[108] = styles.time;
+    $[109] = t44;
+    $[110] = t45;
+  } else {
+    t45 = $[110];
+  }
+  let t46;
+  if ($[111] !== isUnread || $[112] !== styles.unreadDot.backgroundColor) {
+    t46 = <UnreadDot isVisible={isUnread} color={styles.unreadDot.backgroundColor} />;
+    $[111] = isUnread;
+    $[112] = styles.unreadDot.backgroundColor;
+    $[113] = t46;
+  } else {
+    t46 = $[113];
+  }
+  let t47;
+  if ($[114] !== styles.dotSlot || $[115] !== t46) {
+    t47 = <View style={styles.dotSlot}>{t46}</View>;
+    $[114] = styles.dotSlot;
+    $[115] = t46;
+    $[116] = t47;
+  } else {
+    t47 = $[116];
+  }
+  let t48;
+  if ($[117] !== styles.timeRow || $[118] !== t45 || $[119] !== t47) {
+    t48 = <View style={t41}>{t45}{t47}</View>;
+    $[117] = styles.timeRow;
+    $[118] = t45;
+    $[119] = t47;
+    $[120] = t48;
+  } else {
+    t48 = $[120];
+  }
+  let t49;
+  if ($[121] !== styles.column || $[122] !== t40 || $[123] !== t48) {
+    t49 = <View style={t33}>{t40}{t48}</View>;
+    $[121] = styles.column;
+    $[122] = t40;
+    $[123] = t48;
+    $[124] = t49;
+  } else {
+    t49 = $[124];
+  }
+  let t50;
+  if ($[125] !== styles.audioRow || $[126] !== t32 || $[127] !== t49) {
+    t50 = <View style={t23}>{t32}{t49}</View>;
+    $[125] = styles.audioRow;
+    $[126] = t32;
+    $[127] = t49;
+    $[128] = t50;
+  } else {
+    t50 = $[128];
+  }
+  let t51;
+  if ($[129] !== styles.metaSpacer || $[130] !== styles.transcription || $[131] !== styles.transcriptionColor || $[132] !== transcribe.isOpen || $[133] !== transcribe.isVisible || $[134] !== transcription) {
+    t51 = transcribe.isVisible && <View style={[styles.transcription, transcribe.isOpen && styles.metaSpacer]}><TranscriptionText text={transcription} isOpen={transcribe.isOpen} color={styles.transcriptionColor.color} /></View>;
+    $[129] = styles.metaSpacer;
+    $[130] = styles.transcription;
+    $[131] = styles.transcriptionColor;
+    $[132] = transcribe.isOpen;
+    $[133] = transcribe.isVisible;
+    $[134] = transcription;
+    $[135] = t51;
+  } else {
+    t51 = $[135];
+  }
+  let t52;
+  if ($[136] !== t22 || $[137] !== t50 || $[138] !== t51) {
+    t52 = <View style={t22}>{t50}{t51}</View>;
+    $[136] = t22;
+    $[137] = t50;
+    $[138] = t51;
+    $[139] = t52;
+  } else {
+    t52 = $[139];
+  }
+  return t52;
 };
-export function MessageAudio({ currentMessage, position = 'left', containerStyle, audioStyle, }) {
-    const uri = currentMessage?.audio;
-    if (!uri)
-        return null;
-    return (<View style={[styles.container, containerStyle]}>
-      {isWaveformAvailable
-            ? <WaveformPlayer uri={uri} position={position} duration={currentMessage?.duration}/>
-            : isExpoAudioAvailable
-                ? <ExpoAudioPlayer uri={uri} position={position}/>
-                : <MediaCard kind='audio' uri={uri} position={position} style={audioStyle}/>}
-    </View>);
+export function MessageAudio(t0) {
+  const $ = _c(10);
+  const {
+    currentMessage,
+    position: t1,
+    containerStyle,
+    audioStyle
+  } = t0;
+  const position = t1 === undefined ? "left" : t1;
+  const uri = currentMessage?.audio;
+  if (!uri) {
+    return null;
+  }
+  let t2;
+  if ($[0] !== containerStyle) {
+    t2 = [styles.container, containerStyle];
+    $[0] = containerStyle;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== audioStyle || $[3] !== currentMessage || $[4] !== position || $[5] !== uri) {
+    t3 = isWaveformAvailable ? <WaveformPlayer uri={uri} position={position} duration={currentMessage?.duration} messageId={currentMessage?._id} isMediaUnread={currentMessage?.isMediaUnread} animateAppear={isFreshOutgoingNote(position, currentMessage?.createdAt)} message={currentMessage} isViewOnce={!!currentMessage?.isViewOnce} transcription={currentMessage?.transcription} /> : isExpoAudioAvailable ? <ExpoAudioPlayer uri={uri} position={position} messageId={currentMessage?._id} isMediaUnread={currentMessage?.isMediaUnread} duration={currentMessage?.duration} message={currentMessage} isViewOnce={!!currentMessage?.isViewOnce} transcription={currentMessage?.transcription} /> : <View style={styles.metaSpacer}><MediaCard kind="audio" uri={uri} position={position} style={audioStyle} /></View>;
+    $[2] = audioStyle;
+    $[3] = currentMessage;
+    $[4] = position;
+    $[5] = uri;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t2 || $[8] !== t3) {
+    t4 = <View style={t2}>{t3}</View>;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
 }
 const makeStyles = (theme, position) => {
-    const palette = getMediaPalette(theme, position);
-    return StyleSheet.create({
-        // Carries the glyph color out of JSX and into the stylesheet.
-        glyphColor: {
-            color: palette.glyph,
-        },
-        audioRow: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingVertical: 6,
-            paddingHorizontal: 8,
-            minWidth: 200,
-            gap: 10,
-        },
-        playCircle: {
-            width: 36,
-            height: 36,
-            borderRadius: 18,
-            backgroundColor: palette.control,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        track: {
-            flex: 1,
-            height: 3,
-            borderRadius: 2,
-            backgroundColor: palette.track,
-            overflow: 'hidden',
-        },
-        trackFill: {
-            height: 3,
-            borderRadius: 2,
-            backgroundColor: palette.progress,
-        },
-        time: {
-            fontSize: 12,
-            color: palette.meta,
-            minWidth: 34,
-            textAlign: 'right',
-        },
-    });
-};
-const createLeftStyles = (theme) => makeStyles(theme, 'left');
-const createRightStyles = (theme) => makeStyles(theme, 'right');
-const styles = StyleSheet.create({
+  const palette = getMediaPalette(theme, position);
+  return StyleSheet.create({
+    // Carries the glyph color out of JSX and into the stylesheet.
+    glyphColor: {
+      color: palette.glyph
+    },
+    bubble: {
+      backgroundColor: position === 'right' ? theme.colors.outgoingBubble : theme.colors.incomingBubble
+    },
+    transcriptionColor: {
+      color: position === 'right' ? theme.colors.outgoingText : theme.colors.incomingText
+    },
     container: {
-        overflow: 'hidden',
+      maxWidth: '100%'
+    },
+    audioRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingVertical: VOICE_ROW_PADDING_V,
+      paddingHorizontal: 8,
+      gap: VOICE_COLUMN_GAP
+    },
+    playCircle: {
+      width: VOICE_BUTTON_SIZE,
+      height: VOICE_BUTTON_SIZE,
+      borderRadius: VOICE_BUTTON_SIZE / 2,
+      backgroundColor: palette.control,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    playCircleDisabled: {
+      opacity: 0.5
+    },
+    // Laid out like the waveform player: the track where the waveform would
+    // be, level with the button's top, and the time under it.
+    column: {
+      flex: 1,
+      minHeight: VOICE_BUTTON_SIZE,
+      justifyContent: 'space-between'
     },
+    trackRow: {
+      height: WAVEFORM_HEIGHT,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    trackArea: {
+      flex: 1,
+      height: WAVEFORM_HEIGHT,
+      justifyContent: 'center'
+    },
+    transcribeSlot: {
+      width: TRANSCRIBE_SLOT_WIDTH,
+      alignItems: 'flex-end'
+    },
+    transcription: {
+      paddingHorizontal: 8
+    },
+    // The bubble lays its time over the note's bottom-right corner, so an
+    // open transcription leaves it a line of its own.
+    metaSpacer: {
+      paddingBottom: VOICE_META_HEIGHT
+    },
+    track: {
+      height: 3,
+      borderRadius: 2,
+      backgroundColor: palette.track,
+      overflow: 'hidden'
+    },
+    trackFill: {
+      height: 3,
+      borderRadius: 2,
+      backgroundColor: palette.progress
+    },
+    timeRow: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    time: {
+      fontSize: VOICE_TIME_FONT_SIZE,
+      lineHeight: VOICE_BUTTON_SIZE - WAVEFORM_HEIGHT,
+      color: palette.meta,
+      fontVariant: ['tabular-nums']
+    },
+    dotSlot: {
+      marginLeft: 3
+    },
+    unreadDot: {
+      backgroundColor: palette.progress
+    }
+  });
+};
+const createLeftStyles = theme => makeStyles(theme, 'left');
+const createRightStyles = theme => makeStyles(theme, 'right');
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  },
+  metaSpacer: {
+    paddingBottom: VOICE_META_HEIGHT
+  }
 });
 //# sourceMappingURL=MessageAudio.js.map