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

package/lib/components/WaveformPlayer/styles.d.ts

@@ -0,0 +1,257 @@
+import { ChatTheme } from '../../Theme';
+export declare const ROW_PADDING_H = 8;
+export declare const barStyles: Readonly<{
+    row: {
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        overflow: "hidden";
+    };
+    bar: {
+        width: number;
+        borderRadius: number;
+    };
+    line: {
+        flex: number;
+        height: number;
+        borderRadius: number;
+    };
+    clip: {
+        position: "absolute";
+        top: number;
+        left: number;
+        height: number;
+        overflow: "hidden";
+    };
+    clipContent: {
+        position: "absolute";
+        top: number;
+    };
+    burn: {
+        height: number;
+        overflow: "hidden";
+    };
+}>;
+declare const makeStyles: (theme: ChatTheme, position: "left" | "right") => Readonly<{
+    glyphColor: {
+        color: string;
+    };
+    colors: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    bubble: {
+        backgroundColor: string;
+    };
+    transcriptionColor: {
+        color: string;
+    };
+    container: {
+        maxWidth: string;
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+    };
+    waveformRow: {
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    transcribeSlot: {
+        width: number;
+        alignItems: "flex-end";
+    };
+    transcription: {
+        paddingHorizontal: number;
+    };
+    metaSpacer: {
+        paddingBottom: number;
+    };
+    playCircle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    playCircleLoading: {
+        opacity: number;
+    };
+    column: {
+        flex: number;
+        minHeight: number;
+        justifyContent: "space-between";
+    };
+    waveform: {
+        flex: number;
+        height: number;
+    };
+    timeRow: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    time: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+        fontVariant: "tabular-nums"[];
+    };
+    dotSlot: {
+        marginLeft: number;
+    };
+}>;
+export type WaveformPlayerStyles = ReturnType<typeof makeStyles>;
+export declare const createLeftStyles: (theme: ChatTheme) => Readonly<{
+    glyphColor: {
+        color: string;
+    };
+    colors: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    bubble: {
+        backgroundColor: string;
+    };
+    transcriptionColor: {
+        color: string;
+    };
+    container: {
+        maxWidth: string;
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+    };
+    waveformRow: {
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    transcribeSlot: {
+        width: number;
+        alignItems: "flex-end";
+    };
+    transcription: {
+        paddingHorizontal: number;
+    };
+    metaSpacer: {
+        paddingBottom: number;
+    };
+    playCircle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    playCircleLoading: {
+        opacity: number;
+    };
+    column: {
+        flex: number;
+        minHeight: number;
+        justifyContent: "space-between";
+    };
+    waveform: {
+        flex: number;
+        height: number;
+    };
+    timeRow: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    time: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+        fontVariant: "tabular-nums"[];
+    };
+    dotSlot: {
+        marginLeft: number;
+    };
+}>;
+export declare const createRightStyles: (theme: ChatTheme) => Readonly<{
+    glyphColor: {
+        color: string;
+    };
+    colors: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    bubble: {
+        backgroundColor: string;
+    };
+    transcriptionColor: {
+        color: string;
+    };
+    container: {
+        maxWidth: string;
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+    };
+    waveformRow: {
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    transcribeSlot: {
+        width: number;
+        alignItems: "flex-end";
+    };
+    transcription: {
+        paddingHorizontal: number;
+    };
+    metaSpacer: {
+        paddingBottom: number;
+    };
+    playCircle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    playCircleLoading: {
+        opacity: number;
+    };
+    column: {
+        flex: number;
+        minHeight: number;
+        justifyContent: "space-between";
+    };
+    waveform: {
+        flex: number;
+        height: number;
+    };
+    timeRow: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    time: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+        fontVariant: "tabular-nums"[];
+    };
+    dotSlot: {
+        marginLeft: number;
+    };
+}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/WaveformPlayer/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformPlayer/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAcvC,eAAO,MAAM,aAAa,IAAI,CAAA;AAE9B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCpB,CAAA;AAEF,QAAA,MAAM,UAAU,GAAI,OAAO,SAAS,EAAE,UAAU,MAAM,GAAG,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgF/D,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA;AAEhE,eAAO,MAAM,gBAAgB,GAAI,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAA;AAC/E,eAAO,MAAM,iBAAiB,GAAI,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+B,CAAA"}

package/lib/components/WaveformPlayer/styles.js

@@ -0,0 +1,120 @@
+import { StyleSheet } from 'react-native';
+import { getMediaPalette } from '../mediaPalette';
+import { BAR_STEP, BAR_WIDTH, TRANSCRIBE_SLOT_WIDTH, VOICE_BUTTON_SIZE, VOICE_COLUMN_GAP, VOICE_META_HEIGHT, VOICE_ROW_PADDING_V, VOICE_TIME_FONT_SIZE, WAVEFORM_HEIGHT } from '../voiceWaveform';
+export const ROW_PADDING_H = 8;
+export const barStyles = StyleSheet.create({
+  row: {
+    height: WAVEFORM_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: BAR_STEP - BAR_WIDTH,
+    overflow: 'hidden'
+  },
+  bar: {
+    width: BAR_WIDTH,
+    borderRadius: BAR_WIDTH / 2
+  },
+  line: {
+    flex: 1,
+    height: BAR_WIDTH,
+    borderRadius: BAR_WIDTH / 2
+  },
+  clip: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: WAVEFORM_HEIGHT,
+    overflow: 'hidden'
+  },
+  clipContent: {
+    position: 'absolute',
+    top: 0
+  },
+  burn: {
+    height: WAVEFORM_HEIGHT,
+    overflow: 'hidden'
+  }
+});
+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
+    },
+    // Carries the bar colors: background = played, border = unplayed.
+    colors: {
+      backgroundColor: palette.progress,
+      borderColor: palette.track
+    },
+    // Carries the text colors of the bubble and the transcription.
+    bubble: {
+      backgroundColor: position === 'right' ? theme.colors.outgoingBubble : theme.colors.incomingBubble
+    },
+    transcriptionColor: {
+      color: position === 'right' ? theme.colors.outgoingText : theme.colors.incomingText
+    },
+    container: {
+      maxWidth: '100%'
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingVertical: VOICE_ROW_PADDING_V,
+      paddingHorizontal: ROW_PADDING_H,
+      gap: VOICE_COLUMN_GAP
+    },
+    waveformRow: {
+      height: WAVEFORM_HEIGHT,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    transcribeSlot: {
+      width: TRANSCRIBE_SLOT_WIDTH,
+      alignItems: 'flex-end'
+    },
+    transcription: {
+      paddingHorizontal: ROW_PADDING_H
+    },
+    metaSpacer: {
+      paddingBottom: VOICE_META_HEIGHT
+    },
+    playCircle: {
+      width: VOICE_BUTTON_SIZE,
+      height: VOICE_BUTTON_SIZE,
+      borderRadius: VOICE_BUTTON_SIZE / 2,
+      backgroundColor: palette.control,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    playCircleLoading: {
+      opacity: 0.5
+    },
+    // Waveform level with the button's top, time level with its bottom.
+    column: {
+      flex: 1,
+      minHeight: VOICE_BUTTON_SIZE,
+      justifyContent: 'space-between'
+    },
+    waveform: {
+      flex: 1,
+      height: WAVEFORM_HEIGHT
+    },
+    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
+    }
+  });
+};
+export const createLeftStyles = theme => makeStyles(theme, 'left');
+export const createRightStyles = theme => makeStyles(theme, 'right');
+//# sourceMappingURL=styles.js.map

package/lib/components/WaveformPlayer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","getMediaPalette","BAR_STEP","BAR_WIDTH","TRANSCRIBE_SLOT_WIDTH","VOICE_BUTTON_SIZE","VOICE_COLUMN_GAP","VOICE_META_HEIGHT","VOICE_ROW_PADDING_V","VOICE_TIME_FONT_SIZE","WAVEFORM_HEIGHT","ROW_PADDING_H","barStyles","create","row","height","flexDirection","alignItems","gap","overflow","bar","width","borderRadius","line","flex","clip","position","top","left","clipContent","burn","makeStyles","theme","palette","glyphColor","color","glyph","colors","backgroundColor","progress","borderColor","track","bubble","outgoingBubble","incomingBubble","transcriptionColor","outgoingText","incomingText","container","maxWidth","paddingVertical","paddingHorizontal","waveformRow","transcribeSlot","transcription","metaSpacer","paddingBottom","playCircle","control","justifyContent","playCircleLoading","opacity","column","minHeight","waveform","timeRow","time","fontSize","lineHeight","meta","fontVariant","dotSlot","marginLeft","createLeftStyles","createRightStyles"],"sources":["../../../src/components/WaveformPlayer/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { ChatTheme } from '../../Theme'\nimport { getMediaPalette } from '../mediaPalette'\nimport {\n  BAR_STEP,\n  BAR_WIDTH,\n  TRANSCRIBE_SLOT_WIDTH,\n  VOICE_BUTTON_SIZE,\n  VOICE_COLUMN_GAP,\n  VOICE_META_HEIGHT,\n  VOICE_ROW_PADDING_V,\n  VOICE_TIME_FONT_SIZE,\n  WAVEFORM_HEIGHT,\n} from '../voiceWaveform'\n\nexport const ROW_PADDING_H = 8\n\nexport const barStyles = StyleSheet.create({\n  row: {\n    height: WAVEFORM_HEIGHT,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: BAR_STEP - BAR_WIDTH,\n    overflow: 'hidden',\n  },\n  bar: {\n    width: BAR_WIDTH,\n    borderRadius: BAR_WIDTH / 2,\n  },\n  line: {\n    flex: 1,\n    height: BAR_WIDTH,\n    borderRadius: BAR_WIDTH / 2,\n  },\n  clip: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    height: WAVEFORM_HEIGHT,\n    overflow: 'hidden',\n  },\n  clipContent: {\n    position: 'absolute',\n    top: 0,\n  },\n  burn: {\n    height: WAVEFORM_HEIGHT,\n    overflow: 'hidden',\n  },\n})\n\nconst makeStyles = (theme: ChatTheme, position: 'left' | 'right') => {\n  const palette = getMediaPalette(theme, position)\n\n  return StyleSheet.create({\n    // Carries the glyph color out of JSX and into the stylesheet.\n    glyphColor: {\n      color: palette.glyph,\n    },\n    // Carries the bar colors: background = played, border = unplayed.\n    colors: {\n      backgroundColor: palette.progress,\n      borderColor: palette.track,\n    },\n    // Carries the text colors of the bubble and the transcription.\n    bubble: {\n      backgroundColor: position === 'right' ? theme.colors.outgoingBubble : theme.colors.incomingBubble,\n    },\n    transcriptionColor: {\n      color: position === 'right' ? theme.colors.outgoingText : theme.colors.incomingText,\n    },\n    container: {\n      maxWidth: '100%',\n    },\n    row: {\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n      paddingVertical: VOICE_ROW_PADDING_V,\n      paddingHorizontal: ROW_PADDING_H,\n      gap: VOICE_COLUMN_GAP,\n    },\n    waveformRow: {\n      height: WAVEFORM_HEIGHT,\n      flexDirection: 'row',\n      alignItems: 'center',\n    },\n    transcribeSlot: {\n      width: TRANSCRIBE_SLOT_WIDTH,\n      alignItems: 'flex-end',\n    },\n    transcription: {\n      paddingHorizontal: ROW_PADDING_H,\n    },\n    metaSpacer: {\n      paddingBottom: VOICE_META_HEIGHT,\n    },\n    playCircle: {\n      width: VOICE_BUTTON_SIZE,\n      height: VOICE_BUTTON_SIZE,\n      borderRadius: VOICE_BUTTON_SIZE / 2,\n      backgroundColor: palette.control,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    playCircleLoading: {\n      opacity: 0.5,\n    },\n    // Waveform level with the button's top, time level with its bottom.\n    column: {\n      flex: 1,\n      minHeight: VOICE_BUTTON_SIZE,\n      justifyContent: 'space-between',\n    },\n    waveform: {\n      flex: 1,\n      height: WAVEFORM_HEIGHT,\n    },\n    timeRow: {\n      flexDirection: 'row',\n      alignItems: 'center',\n    },\n    time: {\n      fontSize: VOICE_TIME_FONT_SIZE,\n      lineHeight: VOICE_BUTTON_SIZE - WAVEFORM_HEIGHT,\n      color: palette.meta,\n      fontVariant: ['tabular-nums'],\n    },\n    dotSlot: {\n      marginLeft: 3,\n    },\n  })\n}\n\nexport type WaveformPlayerStyles = ReturnType<typeof makeStyles>\n\nexport const createLeftStyles = (theme: ChatTheme) => makeStyles(theme, 'left')\nexport const createRightStyles = (theme: ChatTheme) => makeStyles(theme, 'right')\n"],"mappings":"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","ignoreList":[]}

package/lib/components/WaveformPlayer/types.d.ts

@@ -0,0 +1,32 @@
+import { IMessage } from '../../Models';
+export interface WaveformPlayerProps {
+    uri: string;
+    position?: 'left' | 'right';
+    /**
+     * Length in seconds from the message, shown before the file has decoded so a
+     * note is labelled immediately instead of reading 00:00.
+     */
+    duration?: number;
+    /**
+     * Id of the message this note belongs to. Lets the chat start this note
+     * when the one above it finishes, so a run of notes plays as one.
+     */
+    messageId?: string | number;
+    /** Not played by its recipient yet: draws the unread dot. */
+    isMediaUnread?: boolean;
+    /**
+     * Grow the bars in once the waveform is ready, for a note
+     * that has just been sent. Read on mount only.
+     */
+    animateAppear?: boolean;
+    /**
+     * The message itself, handed to `mediaPlayback.onTranscribe` and
+     * `onViewOnceEnd`.
+     */
+    message?: IMessage;
+    /** A view-once voice note: plays a single time, cannot be seeked. */
+    isViewOnce?: boolean;
+    /** Text shown under the waveform once transcribed. */
+    transcription?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/WaveformPlayer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformPlayer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB"}

package/lib/components/WaveformPlayer/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/WaveformPlayer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/WaveformPlayer/types.ts"],"sourcesContent":["import { IMessage } from '../../Models'\n\nexport interface WaveformPlayerProps {\n  uri: string\n  position?: 'left' | 'right'\n  /**\n   * Length in seconds from the message, shown before the file has decoded so a\n   * note is labelled immediately instead of reading 00:00.\n   */\n  duration?: number\n  /**\n   * Id of the message this note belongs to. Lets the chat start this note\n   * when the one above it finishes, so a run of notes plays as one.\n   */\n  messageId?: string | number\n  /** Not played by its recipient yet: draws the unread dot. */\n  isMediaUnread?: boolean\n  /**\n   * Grow the bars in once the waveform is ready, for a note\n   * that has just been sent. Read on mount only.\n   */\n  animateAppear?: boolean\n  /**\n   * The message itself, handed to `mediaPlayback.onTranscribe` and\n   * `onViewOnceEnd`.\n   */\n  message?: IMessage\n  /** A view-once voice note: plays a single time, cannot be seeked. */\n  isViewOnce?: boolean\n  /** Text shown under the waveform once transcribed. */\n  transcription?: string\n}\n"],"mappings":"","ignoreList":[]}

package/lib/components/WaveformPlayer/useSendFlightReveal.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+interface SendFlightReveal {
+    playRef: React.RefObject<React.ComponentRef<typeof View> | null>;
+    onPlayLayout: () => void;
+    playRevealStyle: React.ComponentProps<typeof Animated.View>['style'];
+}
+/**
+ * The record circle flies into this play button when the note was just sent
+ * (`VoiceMessageEnterTransition`), and the button is not drawn until it has
+ * landed (`setEnterTransitionInProgress`). Hidden from the first frame, so it
+ * does not flash while it is measured.
+ */
+export declare const useSendFlightReveal: ({ appearOnMount, flightColor, flightIconColor, }: {
+    appearOnMount: boolean;
+    flightColor: string;
+    flightIconColor: string;
+}) => SendFlightReveal;
+export {};
+//# sourceMappingURL=useSendFlightReveal.d.ts.map

package/lib/components/WaveformPlayer/useSendFlightReveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSendFlightReveal.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformPlayer/useSendFlightReveal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,QAA0D,MAAM,yBAAyB,CAAA;AAWhG,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,CAAA;IAChE,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAA;CACrE;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,kDAIjC;IACD,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;CACxB,KAAG,gBAqDH,CAAA"}

package/lib/components/WaveformPlayer/useSendFlightReveal.js

@@ -0,0 +1,105 @@
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { SEND_FLIGHT_REVEAL_MS, SEND_FLIGHT_SAFETY_MS, isSendFlightExpected, landSendFlight, onSendFlightFinished } from '../sendFlight';
+import { VOICE_BUTTON_SIZE } from '../voiceWaveform';
+/**
+ * The record circle flies into this play button when the note was just sent
+ * (`VoiceMessageEnterTransition`), and the button is not drawn until it has
+ * landed (`setEnterTransitionInProgress`). Hidden from the first frame, so it
+ * does not flash while it is measured.
+ */
+export const useSendFlightReveal = t0 => {
+  const $ = _c(10);
+  const {
+    appearOnMount,
+    flightColor,
+    flightIconColor
+  } = t0;
+  const playRef = useRef(null);
+  const playReveal = useSharedValue(appearOnMount && isSendFlightExpected("voice") ? 0 : 1);
+  const hasLandedRef = useRef(false);
+  const flightCleanupRef = useRef(null);
+  let t1;
+  if ($[0] !== appearOnMount || $[1] !== flightColor || $[2] !== flightIconColor || $[3] !== playReveal) {
+    t1 = () => {
+      if (!appearOnMount || hasLandedRef.current) {
+        return;
+      }
+      hasLandedRef.current = true;
+      const node = playRef.current;
+      const reveal = () => {
+        playReveal.set(withTiming(1, {
+          duration: SEND_FLIGHT_REVEAL_MS
+        }));
+      };
+      if (!node) {
+        reveal();
+        return;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        const isLanded = width > 0 && landSendFlight("voice", {
+          x: x + width / 2,
+          y: y + height / 2,
+          radius: VOICE_BUTTON_SIZE / 2,
+          color: flightColor,
+          iconColor: flightIconColor
+        });
+        if (!isLanded) {
+          playReveal.set(1);
+          return;
+        }
+        const safety = setTimeout(() => {
+          off();
+          reveal();
+        }, SEND_FLIGHT_SAFETY_MS);
+        const off = onSendFlightFinished("voice", () => {
+          clearTimeout(safety);
+          reveal();
+        });
+        flightCleanupRef.current = () => {
+          clearTimeout(safety);
+          off();
+        };
+      });
+    };
+    $[0] = appearOnMount;
+    $[1] = flightColor;
+    $[2] = flightIconColor;
+    $[3] = playReveal;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const onPlayLayout = t1;
+  let t2;
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => () => flightCleanupRef.current?.();
+    t3 = [];
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  useEffect(t2, t3);
+  const playRevealStyle = useAnimatedStyle(() => ({
+    opacity: playReveal.get()
+  }));
+  let t4;
+  if ($[7] !== onPlayLayout || $[8] !== playRevealStyle) {
+    t4 = {
+      playRef,
+      onPlayLayout,
+      playRevealStyle
+    };
+    $[7] = onPlayLayout;
+    $[8] = playRevealStyle;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+};
+//# sourceMappingURL=useSendFlightReveal.js.map

package/lib/components/WaveformPlayer/useSendFlightReveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSendFlightReveal.js","names":["useCallback","useEffect","useRef","useAnimatedStyle","useSharedValue","withTiming","SEND_FLIGHT_REVEAL_MS","SEND_FLIGHT_SAFETY_MS","isSendFlightExpected","landSendFlight","onSendFlightFinished","VOICE_BUTTON_SIZE","useSendFlightReveal","t0","$","_c","appearOnMount","flightColor","flightIconColor","playRef","playReveal","hasLandedRef","flightCleanupRef","t1","current","node","reveal","set","duration","measureInWindow","x","y","width","height","isLanded","radius","color","iconColor","safety","setTimeout","off","clearTimeout","onPlayLayout","t2","t3","Symbol","for","playRevealStyle","opacity","get","t4"],"sources":["../../../src/components/WaveformPlayer/useSendFlightReveal.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react'\nimport { View } from 'react-native'\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'\n\nimport {\n  SEND_FLIGHT_REVEAL_MS,\n  SEND_FLIGHT_SAFETY_MS,\n  isSendFlightExpected,\n  landSendFlight,\n  onSendFlightFinished,\n} from '../sendFlight'\nimport { VOICE_BUTTON_SIZE } from '../voiceWaveform'\n\ninterface SendFlightReveal {\n  playRef: React.RefObject<React.ComponentRef<typeof View> | null>\n  onPlayLayout: () => void\n  playRevealStyle: React.ComponentProps<typeof Animated.View>['style']\n}\n\n/**\n * The record circle flies into this play button when the note was just sent\n * (`VoiceMessageEnterTransition`), and the button is not drawn until it has\n * landed (`setEnterTransitionInProgress`). Hidden from the first frame, so it\n * does not flash while it is measured.\n */\nexport const useSendFlightReveal = ({\n  appearOnMount,\n  flightColor,\n  flightIconColor,\n}: {\n  appearOnMount: boolean\n  flightColor: string\n  flightIconColor: string\n}): SendFlightReveal => {\n  const playRef = useRef<React.ComponentRef<typeof View>>(null)\n  const playReveal = useSharedValue(appearOnMount && isSendFlightExpected('voice') ? 0 : 1)\n  const hasLandedRef = useRef(false)\n  const flightCleanupRef = useRef<(() => void) | null>(null)\n\n  const onPlayLayout = useCallback(() => {\n    if (!appearOnMount || hasLandedRef.current)\n      return\n\n    hasLandedRef.current = true\n    const node = playRef.current\n    const reveal = () => {\n      playReveal.set(withTiming(1, { duration: SEND_FLIGHT_REVEAL_MS }))\n    }\n    if (!node) {\n      reveal()\n      return\n    }\n\n    node.measureInWindow((x, y, width, height) => {\n      const isLanded = width > 0 && landSendFlight('voice', {\n        x: x + width / 2,\n        y: y + height / 2,\n        radius: VOICE_BUTTON_SIZE / 2,\n        color: flightColor,\n        iconColor: flightIconColor,\n      })\n      if (!isLanded) {\n        playReveal.set(1)\n        return\n      }\n\n      const safety = setTimeout(() => {\n        off()\n        reveal()\n      }, SEND_FLIGHT_SAFETY_MS)\n      const off = onSendFlightFinished('voice', () => {\n        clearTimeout(safety)\n        reveal()\n      })\n      flightCleanupRef.current = () => {\n        clearTimeout(safety)\n        off()\n      }\n    })\n  }, [appearOnMount, playReveal, flightColor, flightIconColor])\n\n  useEffect(() => () => flightCleanupRef.current?.(), [])\n\n  const playRevealStyle = useAnimatedStyle(() => ({ opacity: playReveal.get() }))\n\n  return { playRef, onPlayLayout, playRevealStyle }\n}\n"],"mappings":";AAAA,SAAgBA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAE7D,SAAmBC,gBAAgB,EAAEC,cAAc,EAAEC,UAAU,QAAQ,yBAAyB;AAEhG,SACEC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,cAAc,EACdC,oBAAoB,QACf,eAAe;AACtB,SAASC,iBAAiB,QAAQ,kBAAkB;AAQpD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAC,aAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAL,EAQnC;EACC,MAAAM,OAAA,GAAgBjB,MAAM,CAAkC,IAAI,CAAC;EAC7D,MAAAkB,UAAA,GAAmBhB,cAAc,CAACY,aAA8C,IAA7BR,oBAAoB,CAAC,OAAO,CAAS,GAAtD,CAAsD,GAAtD,CAAsD,CAAC;EACzF,MAAAa,YAAA,GAAqBnB,MAAM,CAAC,KAAK,CAAC;EAClC,MAAAoB,gBAAA,GAAyBpB,MAAM,CAAsB,IAAI,CAAC;EAAA,IAAAqB,EAAA;EAAA,IAAAT,CAAA,QAAAE,aAAA,IAAAF,CAAA,QAAAG,WAAA,IAAAH,CAAA,QAAAI,eAAA,IAAAJ,CAAA,QAAAM,UAAA;IAEzBG,EAAA,GAAAA,CAAA;MAC/B,IAAI,CAACP,aAAqC,IAApBK,YAAY,CAAAG,OAAQ;QAAA;MAAA;MAG1CH,YAAY,CAAAG,OAAA,GAAW,IAAH;MACpB,MAAAC,IAAA,GAAaN,OAAO,CAAAK,OAAQ;MAC5B,MAAAE,MAAA,GAAeA,CAAA;QACbN,UAAU,CAAAO,GAAI,CAACtB,UAAU,CAAC,CAAC,EAAE;UAAAuB,QAAA,EAAYtB;QAAsB,CAAC,CAAC,CAAC;MAAA,CACnE;MACD,IAAI,CAACmB,IAAI;QACPC,MAAM,CAAC,CAAC;QAAA;MAAA;MAIVD,IAAI,CAAAI,eAAgB,CAAC,CAAAC,CAAA,EAAAC,CAAA,EAAAC,KAAA,EAAAC,MAAA;QACnB,MAAAC,QAAA,GAAiBF,KAAK,GAAG,CAMvB,IAN4BvB,cAAc,CAAC,OAAO,EAAE;UAAAqB,CAAA,EACjDA,CAAC,GAAGE,KAAK,GAAG,CAAC;UAAAD,CAAA,EACbA,CAAC,GAAGE,MAAM,GAAG,CAAC;UAAAE,MAAA,EACTxB,iBAAiB,GAAG,CAAC;UAAAyB,KAAA,EACtBnB,WAAW;UAAAoB,SAAA,EACPnB;QACb,CAAC,CAAC;QACF,IAAI,CAACgB,QAAQ;UACXd,UAAU,CAAAO,GAAI,CAAC,CAAC,CAAC;UAAA;QAAA;QAInB,MAAAW,MAAA,GAAeC,UAAU,CAAC;UACxBC,GAAG,CAAC,CAAC;UACLd,MAAM,CAAC,CAAC;QAAA,CACT,EAAEnB,qBAAqB,CAAC;QACzB,MAAAiC,GAAA,GAAY9B,oBAAoB,CAAC,OAAO,EAAE;UACxC+B,YAAY,CAACH,MAAM,CAAC;UACpBZ,MAAM,CAAC,CAAC;QAAA,CACT,CAAC;QACFJ,gBAAgB,CAAAE,OAAA,GAAW;UACzBiB,YAAY,CAACH,MAAM,CAAC;UACpBE,GAAG,CAAC,CAAC;QAAA,CAFiB;MAAA,CAIzB,CAAC;IAAA,CACH;IAAA1B,CAAA,MAAAE,aAAA;IAAAF,CAAA,MAAAG,WAAA;IAAAH,CAAA,MAAAI,eAAA;IAAAJ,CAAA,MAAAM,UAAA;IAAAN,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAxCD,MAAA4B,YAAA,GAAqBnB,EAwCwC;EAAA,IAAAoB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA9B,CAAA,QAAA+B,MAAA,CAAAC,GAAA;IAEnDH,EAAA,GAAAA,CAAA,KAAM,MAAMrB,gBAAgB,CAAAE,OAAY,GAAD,CAAC;IAAEoB,EAAA,KAAE;IAAA9B,CAAA,MAAA6B,EAAA;IAAA7B,CAAA,MAAA8B,EAAA;EAAA;IAAAD,EAAA,GAAA7B,CAAA;IAAA8B,EAAA,GAAA9B,CAAA;EAAA;EAAtDb,SAAS,CAAC0C,EAAwC,EAAEC,EAAE,CAAC;EAEvD,MAAAG,eAAA,GAAwB5C,gBAAgB,CAAC,OAAO;IAAA6C,OAAA,EAAW5B,UAAU,CAAA6B,GAAI,CAAC;EAAE,CAAC,CAAC,CAAC;EAAA,IAAAC,EAAA;EAAA,IAAApC,CAAA,QAAA4B,YAAA,IAAA5B,CAAA,QAAAiC,eAAA;IAExEG,EAAA;MAAA/B,OAAA;MAAAuB,YAAA;MAAAK;IAAyC,CAAC;IAAAjC,CAAA,MAAA4B,YAAA;IAAA5B,CAAA,MAAAiC,eAAA;IAAAjC,CAAA,MAAAoC,EAAA;EAAA;IAAAA,EAAA,GAAApC,CAAA;EAAA;EAAA,OAA1CoC,EAA0C;AAAA,CAClD","ignoreList":[]}

package/lib/components/WaveformPlayer/useVoicePlayback.d.ts

@@ -0,0 +1,39 @@
+import { RefObject } from 'react';
+import { SharedValue } from 'react-native-reanimated';
+interface ViewOnceGate {
+    onStart: () => boolean;
+    onEnd: () => void;
+}
+interface VoicePlaybackOptions {
+    playerId: string;
+    messageId: string | number | undefined;
+    position: 'left' | 'right';
+    isMediaUnread: boolean | undefined;
+    progress: SharedValue<number>;
+    isDragging: SharedValue<boolean>;
+    viewOnce: ViewOnceGate;
+    markReadRef: RefObject<() => void>;
+    setFailed: (failed: boolean) => void;
+    bufferRef: RefObject<any>;
+    sourceRef: RefObject<any>;
+    tickTimerRef: RefObject<ReturnType<typeof setInterval> | null>;
+    durationRef: RefObject<number>;
+    pendingPlayRef: RefObject<boolean>;
+    playFromRef: RefObject<(fraction: number) => void>;
+    stopRaf: () => void;
+}
+/**
+ * Plays, pauses and seeks a decoded note, keeps `progress` on the audio clock while it plays,
+ * and hands over to the next note when it ends.
+ */
+export declare const useVoicePlayback: ({ playerId, messageId, position, isMediaUnread, progress, isDragging, viewOnce, markReadRef, setFailed, bufferRef, sourceRef, tickTimerRef, durationRef, pendingPlayRef, playFromRef, stopRaf, }: VoicePlaybackOptions) => {
+    isPlaying: boolean;
+    shownProgress: number;
+    setShownProgress: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isCurrent: boolean;
+    isUnread: boolean;
+    togglePlayback: () => void;
+    commitSeek: (fraction: number) => void;
+};
+export {};
+//# sourceMappingURL=useVoicePlayback.d.ts.map

package/lib/components/WaveformPlayer/useVoicePlayback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVoicePlayback.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformPlayer/useVoicePlayback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAA;AAC5F,OAAO,EAAwB,WAAW,EAAc,MAAM,yBAAyB,CAAA;AAgBvF,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACtC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC7B,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAChC,QAAQ,EAAE,YAAY,CAAA;IACtB,WAAW,EAAE,SAAS,CAAC,MAAM,IAAI,CAAC,CAAA;IAClC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;IACzB,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;IACzB,YAAY,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,WAAW,CAAC,GAAG,IAAI,CAAC,CAAA;IAC9D,WAAW,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC9B,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAClC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,CAAA;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,kMAiB9B,oBAAoB;;;;;;;2BA6MqB,MAAM;CAoBjD,CAAA"}