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

package/lib/components/VideoRecordButton.js

@@ -1,32 +1,37 @@
+import { c as _c } from "react/compiler-runtime";
 import React, { useCallback, useState } from 'react';
 import { Modal, Pressable, StyleSheet } from 'react-native';
+import Animated, { Easing, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useAnimatedPresence } from '../hooks/useAnimatedPresence';
 import { useThemedStyles } from '../hooks/useTheme';
+import { getExpoDevice, getExpoImagePicker } from '../optional';
 import { Icon } from './Icon';
 import { CameraIcon } from './MediaControls';
-import { VideoNoteRecorder, isVisionCameraAvailable, isVisionCameraNativeReady } from './VideoNoteRecorder';
-// Optional camera-roll/launcher fallback. Resolved through a try/catch require.
-let imagePicker = null;
-try {
-    imagePicker = require('expo-image-picker');
-}
-catch {
-    imagePicker = null;
-}
+import { VideoNoteRecorder } from './VideoNoteRecorder';
+import { isVisionCameraAvailable, isVisionCameraNativeReady } from './visionCamera';
+
+// Optional camera-roll/launcher fallback. Resolved through the optional-peer registry (`src/optional`).
+const imagePicker = getExpoImagePicker();
+
 // Optional expo-device, used only to detect a simulator/emulator. The system
 // camera (UIImagePickerController) throws an uncaught native exception on the
 // iOS simulator ("No available types for source 1") that can't be caught in JS,
 // so we skip launching it there and surface an error instead of crashing.
-let device = null;
-try {
-    device = require('expo-device');
-}
-catch {
-    device = null;
-}
+const device = getExpoDevice();
+const RECORDER_FADE_IN = {
+  duration: 250,
+  easing: Easing.out(Easing.cubic),
+  reduceMotion: ReduceMotion.System
+};
+const RECORDER_FADE_OUT = {
+  duration: 200,
+  easing: Easing.out(Easing.quad),
+  reduceMotion: ReduceMotion.System
+};
 export const isVideoRecordingAvailable = isVisionCameraAvailable || !!imagePicker?.launchCameraAsync;
 /**
  * Camera button for video messages. Prefers react-native-vision-camera for a
- * Telegram-style round video note recorder; falls back to expo-image-picker's
+ * Round video note recorder; falls back to expo-image-picker's
  * system camera. Only rendered when one of those is installed.
  *
  * Note the two backends produce different messages: the round recorder sends
@@ -34,84 +39,208 @@ export const isVideoRecordingAvailable = isVisionCameraAvailable || !!imagePicke
  * fallback sends a plain `{ video }` full-frame clip, because a rectangular
  * capture would crop badly into a circle.
  */
-export function VideoRecordButton({ config, onSend, onTap, variant = 'inset', }) {
-    const styles = useThemedStyles(createStyles);
-    const [isRecorderOpen, setIsRecorderOpen] = useState(false);
-    const launchPicker = useCallback(async () => {
-        // expo-image-picker's system camera hard-crashes on a simulator/emulator
-        // (no camera hardware). Surface a catchable error instead of crashing.
-        if (device && device.isDevice === false) {
-            config?.onError?.(new Error('Camera is not available on a simulator/emulator. Use a physical device.'));
-            return;
+export function VideoRecordButton(t0) {
+  const $ = _c(32);
+  const {
+    config,
+    onSend,
+    onTap,
+    variant: t1
+  } = t0;
+  const variant = t1 === undefined ? "inset" : t1;
+  const styles = useThemedStyles(createStyles);
+  const [isRecorderOpen, setIsRecorderOpen] = useState(false);
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => setIsRecorderOpen(false);
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  const closeRecorder = t2;
+  const recorderOpacity = useSharedValue(0);
+  let t3;
+  if ($[1] !== recorderOpacity) {
+    t3 = () => {
+      recorderOpacity.set(withTiming(1, RECORDER_FADE_IN));
+    };
+    $[1] = recorderOpacity;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const animateIn = t3;
+  let t4;
+  if ($[3] !== recorderOpacity) {
+    t4 = onDone => {
+      recorderOpacity.set(withTiming(0, RECORDER_FADE_OUT, finished => {
+        if (finished) {
+          runOnJS(onDone)();
         }
-        try {
-            const permission = await imagePicker.requestCameraPermissionsAsync();
-            if (!permission?.granted) {
-                config?.onPermissionDenied?.();
-                return;
-            }
-            const mediaTypes = imagePicker.MediaTypeOptions?.Videos ?? ['videos'];
-            const result = await imagePicker.launchCameraAsync({
-                mediaTypes,
-                videoMaxDuration: config?.maxDuration ?? 60,
-                quality: 1,
-            });
-            const uri = result?.assets?.[0]?.uri;
-            if (!result?.canceled && uri)
-                onSend?.({ video: uri }, false);
+      }));
+    };
+    $[3] = recorderOpacity;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const animateOut = t4;
+  const {
+    isMounted: isRecorderMounted
+  } = useAnimatedPresence(isRecorderOpen, animateIn, animateOut);
+  const recorderStyle = useAnimatedStyle(() => ({
+    opacity: recorderOpacity.get()
+  }));
+  let t5;
+  if ($[5] !== config || $[6] !== onSend) {
+    t5 = async () => {
+      if (device && device.isDevice === false) {
+        config?.onError?.(new Error("Camera is not available on a simulator/emulator. Use a physical device."));
+        return;
+      }
+      await (async () => {
+        const permission = await imagePicker.requestCameraPermissionsAsync();
+        if (!permission?.granted) {
+          config?.onPermissionDenied?.();
+          return;
         }
-        catch (error) {
-            config?.onError?.(error);
+        const mediaTypes = imagePicker.MediaTypeOptions?.Videos ?? ["videos"];
+        const result = await imagePicker.launchCameraAsync({
+          mediaTypes,
+          videoMaxDuration: config?.maxDuration ?? 60,
+          quality: 1
+        });
+        const uri = result?.assets?.[0]?.uri;
+        if (!result?.canceled && uri) {
+          onSend?.({
+            video: uri
+          }, false);
         }
-    }, [config, onSend]);
-    // Gate on the *native* probe, not the JS require: a binary where the package
-    // is installed but not linked would otherwise open a recorder that can never
-    // capture, instead of falling back to the system camera.
-    const handlePress = useCallback(() => {
-        if (isVisionCameraNativeReady)
-            setIsRecorderOpen(true);
-        else if (imagePicker?.launchCameraAsync)
-            launchPicker();
-        else
-            setIsRecorderOpen(true);
-    }, [launchPicker]);
-    const isRound = variant === 'round';
-    return (<>
-      <Pressable 
-    // Sharing the slot with the mic: tap toggles back to voice, a long press
-    // opens the recorder - the same tap/hold split the mic uses.
-    onPress={onTap ?? handlePress} onLongPress={onTap ? handlePress : undefined} delayLongPress={180} accessibilityRole='button' accessibilityLabel={onTap ? 'switch to voice message' : 'record video message'} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} style={isRound ? styles.roundButton : styles.button}>
-        <Icon name='camera' color={isRound ? '#fff' : styles.iconColor.color} size={22} fallback={<CameraIcon color={isRound ? '#fff' : styles.iconColor.color} size={22}/>}/>
-      </Pressable>
-
-      {isVisionCameraAvailable && (<Modal visible={isRecorderOpen} 
-        // Transparent + fade so the recorder's scrim dims the conversation
-        // rather than replacing it, which is what Telegram shows.
-        transparent animationType='fade' onRequestClose={() => setIsRecorderOpen(false)} statusBarTranslucent>
-          {isRecorderOpen && (<VideoNoteRecorder config={config} onSend={onSend} onClose={() => setIsRecorderOpen(false)}/>)}
-        </Modal>)}
-    </>);
+      })().catch(error => {
+        config?.onError?.(error);
+      });
+    };
+    $[5] = config;
+    $[6] = onSend;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const launchPicker = t5;
+  let t6;
+  if ($[8] !== launchPicker) {
+    t6 = () => {
+      if (isVisionCameraNativeReady) {
+        setIsRecorderOpen(true);
+      } else {
+        if (imagePicker?.launchCameraAsync) {
+          launchPicker();
+        } else {
+          setIsRecorderOpen(true);
+        }
+      }
+    };
+    $[8] = launchPicker;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const handlePress = t6;
+  const isRound = variant === "round";
+  const t7 = onTap ?? handlePress;
+  const t8 = onTap ? handlePress : undefined;
+  const t9 = onTap ? "switch to voice message" : "record video message";
+  let t10;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      top: 8,
+      bottom: 8,
+      left: 8,
+      right: 8
+    };
+    $[10] = t10;
+  } else {
+    t10 = $[10];
+  }
+  const t11 = isRound ? styles.roundButton : styles.button;
+  const t12 = isRound ? "#fff" : styles.iconColor.color;
+  const t13 = isRound ? "#fff" : styles.iconColor.color;
+  let t14;
+  if ($[11] !== t13) {
+    t14 = <CameraIcon color={t13} size={22} />;
+    $[11] = t13;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  let t15;
+  if ($[13] !== t12 || $[14] !== t14) {
+    t15 = <Icon name="camera" color={t12} size={22} fallback={t14} />;
+    $[13] = t12;
+    $[14] = t14;
+    $[15] = t15;
+  } else {
+    t15 = $[15];
+  }
+  let t16;
+  if ($[16] !== t11 || $[17] !== t15 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+    t16 = <Pressable onPress={t7} onLongPress={t8} delayLongPress={180} accessibilityRole="button" accessibilityLabel={t9} hitSlop={t10} style={t11}>{t15}</Pressable>;
+    $[16] = t11;
+    $[17] = t15;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = t9;
+    $[21] = t16;
+  } else {
+    t16 = $[21];
+  }
+  let t17;
+  if ($[22] !== config || $[23] !== isRecorderMounted || $[24] !== isRecorderOpen || $[25] !== onSend || $[26] !== recorderStyle || $[27] !== styles.recorderLayer) {
+    t17 = isVisionCameraAvailable && <Modal visible={isRecorderMounted} transparent={true} animationType="none" onRequestClose={closeRecorder} statusBarTranslucent={true}>{isRecorderMounted && <Animated.View style={[styles.recorderLayer, recorderStyle]} pointerEvents={isRecorderOpen ? "auto" : "none"}><VideoNoteRecorder config={config} onSend={onSend} onClose={closeRecorder} /></Animated.View>}</Modal>;
+    $[22] = config;
+    $[23] = isRecorderMounted;
+    $[24] = isRecorderOpen;
+    $[25] = onSend;
+    $[26] = recorderStyle;
+    $[27] = styles.recorderLayer;
+    $[28] = t17;
+  } else {
+    t17 = $[28];
+  }
+  let t18;
+  if ($[29] !== t16 || $[30] !== t17) {
+    t18 = <>{t16}{t17}</>;
+    $[29] = t16;
+    $[30] = t17;
+    $[31] = t18;
+  } else {
+    t18 = $[31];
+  }
+  return t18;
 }
-const createStyles = (theme) => StyleSheet.create({
-    // Inset camera control, bottom-aligned inside the field group.
-    button: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingBottom: 8,
-    },
-    // Carries the themed icon color (StyleSheet keeps it out of JSX).
-    iconColor: {
-        color: theme.colors.incomingMeta,
-    },
-    // Right-slot form: matches the mic/send circle so the swap doesn't shift the row.
-    roundButton: {
-        width: theme.sendButton.size,
-        height: theme.sendButton.size,
-        borderRadius: theme.radii.sendButton,
-        backgroundColor: theme.colors.accent,
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'center',
-    },
+const createStyles = theme => StyleSheet.create({
+  recorderLayer: {
+    flex: 1
+  },
+  // Inset camera control, bottom-aligned inside the field group.
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 8
+  },
+  // Carries the themed icon color (StyleSheet keeps it out of JSX).
+  iconColor: {
+    color: theme.colors.incomingMeta
+  },
+  // Right-slot form: matches the mic/send circle so the swap doesn't shift the row.
+  roundButton: {
+    width: theme.sendButton.size,
+    height: theme.sendButton.size,
+    borderRadius: theme.radii.sendButton,
+    backgroundColor: theme.colors.accent,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center'
+  }
 });
 //# sourceMappingURL=VideoRecordButton.js.map

package/lib/components/VideoRecordButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRecordButton.js","sourceRoot":"","sources":["../../src/components/VideoRecordButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoRecordButton.js","names":["React","useCallback","useState","Modal","Pressable","StyleSheet","Animated","Easing","ReduceMotion","runOnJS","useAnimatedStyle","useSharedValue","withTiming","useAnimatedPresence","useThemedStyles","getExpoDevice","getExpoImagePicker","Icon","CameraIcon","VideoNoteRecorder","isVisionCameraAvailable","isVisionCameraNativeReady","imagePicker","device","RECORDER_FADE_IN","duration","easing","out","cubic","reduceMotion","System","RECORDER_FADE_OUT","quad","isVideoRecordingAvailable","launchCameraAsync","VideoRecordButton","t0","$","_c","config","onSend","onTap","variant","t1","undefined","styles","createStyles","isRecorderOpen","setIsRecorderOpen","t2","Symbol","for","closeRecorder","recorderOpacity","t3","set","animateIn","t4","onDone","finished","animateOut","isMounted","isRecorderMounted","recorderStyle","opacity","get","t5","isDevice","onError","Error","permission","requestCameraPermissionsAsync","granted","onPermissionDenied","mediaTypes","MediaTypeOptions","Videos","result","videoMaxDuration","maxDuration","quality","uri","assets","canceled","video","catch","error","launchPicker","t6","handlePress","isRound","t7","t8","t9","t10","top","bottom","left","right","t11","roundButton","button","t12","iconColor","color","t13","t14","t15","t16","t17","recorderLayer","t18","theme","create","flex","alignItems","justifyContent","paddingBottom","colors","incomingMeta","width","sendButton","size","height","borderRadius","radii","backgroundColor","accent","alignSelf"],"sources":["../../src/components/VideoRecordButton.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { Modal, Pressable, StyleSheet } from 'react-native'\nimport Animated, {\n  Easing,\n  ReduceMotion,\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { useAnimatedPresence } from '../hooks/useAnimatedPresence'\nimport { useThemedStyles } from '../hooks/useTheme'\nimport { IMessage, VideoRecordingProps } from '../Models'\nimport { getExpoDevice, getExpoImagePicker } from '../optional'\nimport { ChatTheme } from '../Theme'\nimport { Icon } from './Icon'\nimport { CameraIcon } from './MediaControls'\nimport { VideoNoteRecorder } from './VideoNoteRecorder'\nimport { isVisionCameraAvailable, isVisionCameraNativeReady } from './visionCamera'\n\n// Optional camera-roll/launcher fallback. Resolved through the optional-peer registry (`src/optional`).\nconst imagePicker = getExpoImagePicker()\n\n// Optional expo-device, used only to detect a simulator/emulator. The system\n// camera (UIImagePickerController) throws an uncaught native exception on the\n// iOS simulator (\"No available types for source 1\") that can't be caught in JS,\n// so we skip launching it there and surface an error instead of crashing.\nconst device = getExpoDevice()\n\nconst RECORDER_FADE_IN = { duration: 250, easing: Easing.out(Easing.cubic), reduceMotion: ReduceMotion.System }\nconst RECORDER_FADE_OUT = { duration: 200, easing: Easing.out(Easing.quad), reduceMotion: ReduceMotion.System }\n\nexport const isVideoRecordingAvailable = isVisionCameraAvailable || !!imagePicker?.launchCameraAsync\n\nexport interface VideoRecordButtonProps<TMessage extends IMessage = IMessage> {\n  config?: VideoRecordingProps\n  onSend?: (\n    message: Partial<TMessage>,\n    shouldResetInputToolbar: boolean\n  ) => void\n  /**\n   * Single tap on the button. Set when the control shares the right slot with\n   * the mic: a tap switches back to voice, a hold opens the recorder.\n   */\n  onTap?: () => void\n  /**\n   * `inset` (default) is the small glyph inside the composer field; `round` is\n   * the filled accent circle that occupies the right slot beside it.\n   */\n  variant?: 'inset' | 'round'\n}\n\n/**\n * Camera button for video messages. Prefers react-native-vision-camera for a\n * Round video note recorder; falls back to expo-image-picker's\n * system camera. Only rendered when one of those is installed.\n *\n * Note the two backends produce different messages: the round recorder sends\n * `{ video, videoNote: true }` (a circular note), while the system-camera\n * fallback sends a plain `{ video }` full-frame clip, because a rectangular\n * capture would crop badly into a circle.\n */\nexport function VideoRecordButton<TMessage extends IMessage = IMessage> ({\n  config,\n  onSend,\n  onTap,\n  variant = 'inset',\n}: VideoRecordButtonProps<TMessage>) {\n  const styles = useThemedStyles(createStyles)\n  const [isRecorderOpen, setIsRecorderOpen] = useState(false)\n  const closeRecorder = useCallback(() => setIsRecorderOpen(false), [])\n\n  // Fades rather than replaces the conversation; the\n  // recorder stays mounted until it has faded out.\n  const recorderOpacity = useSharedValue(0)\n  const animateIn = useCallback(() => {\n    recorderOpacity.set(withTiming(1, RECORDER_FADE_IN))\n  }, [recorderOpacity])\n  const animateOut = useCallback((onDone: () => void) => {\n    recorderOpacity.set(withTiming(0, RECORDER_FADE_OUT, finished => {\n      if (finished)\n        runOnJS(onDone)()\n    }))\n  }, [recorderOpacity])\n  const { isMounted: isRecorderMounted } = useAnimatedPresence(isRecorderOpen, animateIn, animateOut)\n  const recorderStyle = useAnimatedStyle(() => ({ opacity: recorderOpacity.get() }))\n\n  const launchPicker = useCallback(async () => {\n    // expo-image-picker's system camera hard-crashes on a simulator/emulator\n    // (no camera hardware). Surface a catchable error instead of crashing.\n    if (device && device.isDevice === false) {\n      config?.onError?.(new Error('Camera is not available on a simulator/emulator. Use a physical device.'))\n      return\n    }\n\n    // `.catch` rather than try/catch: the compiler cannot lower the optional chains inside a `try`.\n    await (async () => {\n      const permission = await imagePicker.requestCameraPermissionsAsync()\n      if (!permission?.granted) {\n        config?.onPermissionDenied?.()\n        return\n      }\n\n      const mediaTypes = imagePicker.MediaTypeOptions?.Videos ?? ['videos']\n\n      const result = await imagePicker.launchCameraAsync({\n        mediaTypes,\n        videoMaxDuration: config?.maxDuration ?? 60,\n        quality: 1,\n      })\n\n      const uri = result?.assets?.[0]?.uri\n      if (!result?.canceled && uri)\n        onSend?.({ video: uri } as Partial<TMessage>, false)\n    })().catch(error => {\n      config?.onError?.(error)\n    })\n  }, [config, onSend])\n\n  // Gate on the *native* probe, not the JS require: a binary where the package\n  // is installed but not linked would otherwise open a recorder that can never\n  // capture, instead of falling back to the system camera.\n  const handlePress = useCallback(() => {\n    if (isVisionCameraNativeReady)\n      setIsRecorderOpen(true)\n    else if (imagePicker?.launchCameraAsync)\n      launchPicker()\n    else\n      setIsRecorderOpen(true)\n  }, [launchPicker])\n\n  const isRound = variant === 'round'\n\n  return (\n    <>\n      <Pressable\n        // Sharing the slot with the mic: tap toggles back to voice, a long press\n        // opens the recorder - the same tap/hold split the mic uses.\n        onPress={onTap ?? handlePress}\n        onLongPress={onTap ? handlePress : undefined}\n        delayLongPress={180}\n        accessibilityRole='button'\n        accessibilityLabel={onTap ? 'switch to voice message' : 'record video message'}\n        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}\n        style={isRound ? styles.roundButton : styles.button}\n      >\n        <Icon\n          name='camera'\n          color={isRound ? '#fff' : styles.iconColor.color}\n          size={22}\n          fallback={<CameraIcon color={isRound ? '#fff' : styles.iconColor.color} size={22} />}\n        />\n      </Pressable>\n\n      {isVisionCameraAvailable && (\n        <Modal\n          visible={isRecorderMounted}\n          // Transparent so the recorder's scrim dims the conversation rather\n          // than replacing it.\n          transparent\n          animationType='none'\n          onRequestClose={closeRecorder}\n          statusBarTranslucent\n        >\n          {isRecorderMounted && (\n            <Animated.View\n              style={[styles.recorderLayer, recorderStyle]}\n              pointerEvents={isRecorderOpen ? 'auto' : 'none'}\n            >\n              <VideoNoteRecorder<TMessage>\n                config={config}\n                onSend={onSend}\n                onClose={closeRecorder}\n              />\n            </Animated.View>\n          )}\n        </Modal>\n      )}\n    </>\n  )\n}\n\nconst createStyles = (theme: ChatTheme) => StyleSheet.create({\n  recorderLayer: {\n    flex: 1,\n  },\n  // Inset camera control, bottom-aligned inside the field group.\n  button: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingBottom: 8,\n  },\n  // Carries the themed icon color (StyleSheet keeps it out of JSX).\n  iconColor: {\n    color: theme.colors.incomingMeta,\n  },\n  // Right-slot form: matches the mic/send circle so the swap doesn't shift the row.\n  roundButton: {\n    width: theme.sendButton.size,\n    height: theme.sendButton.size,\n    borderRadius: theme.radii.sendButton,\n    backgroundColor: theme.colors.accent,\n    alignItems: 'center',\n    justifyContent: 'center',\n    alignSelf: 'center',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ViewOnceBadge.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * The view-once marker: a small disc in the button's
+ * color at the play button's lower right, cut out of it by a thin ring of the
+ * bubble's color, holding a "1" in a ring that is solid on its left half and
+ * dashed on its right. Drawn here, not copied.
+ * Lay it over the play button; it does not take touches.
+ */
+export declare function ViewOnceBadge({ isVisible, color, glyphColor, cutColor, offset, }: {
+    isVisible: boolean;
+    /** The play button's fill. */
+    color: string;
+    /** The play glyph's color, used for the "1". */
+    glyphColor: string;
+    /** The bubble behind the button, for the ring cut around the badge. */
+    cutColor: string;
+    /**
+     * How far right and down of the button's centre the badge sits: 16 on a
+     * voice note, 18 on a round one (`drawRadialProgress`'s `cx + dp(18)`).
+     */
+    offset?: number;
+}): React.JSX.Element;
+//# sourceMappingURL=ViewOnceBadge.d.ts.map

package/lib/components/ViewOnceBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewOnceBadge.d.ts","sourceRoot":"","sources":["../../src/components/ViewOnceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAuBxC;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAE,EAC7B,SAAS,EACT,KAAK,EACL,UAAU,EACV,QAAQ,EACR,MAA+B,GAChC,EAAE;IACD,SAAS,EAAE,OAAO,CAAA;IAClB,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,UAAU,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,qBAoCA"}

package/lib/components/ViewOnceBadge.js

@@ -0,0 +1,233 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { EASE_OUT_QUINT } from '../motion';
+import { VIEW_ONCE_BADGE_CUT, VIEW_ONCE_BADGE_OFFSET, VIEW_ONCE_BADGE_SIZE, VIEW_ONCE_RING_SIZE, VOICE_BUTTON_SIZE } from './voiceWaveform';
+
+// The badge shrinks away over 320ms as playback starts.
+const SCALE_MS = 320;
+const RING_STROKE = 1.5;
+const OUTER = VIEW_ONCE_BADGE_SIZE + 2 * VIEW_ONCE_BADGE_CUT;
+
+/**
+ * The view-once marker: a small disc in the button's
+ * color at the play button's lower right, cut out of it by a thin ring of the
+ * bubble's color, holding a "1" in a ring that is solid on its left half and
+ * dashed on its right. Drawn here, not copied.
+ * Lay it over the play button; it does not take touches.
+ */
+export function ViewOnceBadge(t0) {
+  const $ = _c(34);
+  const {
+    isVisible,
+    color,
+    glyphColor,
+    cutColor,
+    offset: t1
+  } = t0;
+  const offset = t1 === undefined ? VIEW_ONCE_BADGE_OFFSET : t1;
+  const scale = useSharedValue(isVisible ? 1 : 0);
+  let t2;
+  let t3;
+  if ($[0] !== isVisible || $[1] !== scale) {
+    t2 = () => {
+      scale.value = withTiming(isVisible ? 1 : 0, {
+        duration: SCALE_MS,
+        easing: EASE_OUT_QUINT
+      });
+    };
+    t3 = [isVisible, scale];
+    $[0] = isVisible;
+    $[1] = scale;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[4] !== scale) {
+    t4 = () => () => cancelAnimation(scale);
+    t5 = [scale];
+    $[4] = scale;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useEffect(t4, t5);
+  const centre = VOICE_BUTTON_SIZE / 2 + offset;
+  const t6 = centre - OUTER / 2;
+  const t7 = centre - OUTER / 2;
+  let t8;
+  if ($[7] !== t6 || $[8] !== t7) {
+    t8 = {
+      left: t6,
+      top: t7
+    };
+    $[7] = t6;
+    $[8] = t7;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const position = t8;
+  const style = useAnimatedStyle(() => ({
+    opacity: scale.value > 0.01 ? 1 : 0,
+    transform: [{
+      scale: scale.value
+    }]
+  }));
+  const t9 = !isVisible;
+  const t10 = isVisible ? "auto" : "no-hide-descendants";
+  let t11;
+  if ($[10] !== color || $[11] !== cutColor) {
+    t11 = {
+      backgroundColor: color,
+      borderColor: cutColor
+    };
+    $[10] = color;
+    $[11] = cutColor;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  let t12;
+  if ($[13] !== position || $[14] !== style || $[15] !== t11) {
+    t12 = [styles.badge, position, t11, style];
+    $[13] = position;
+    $[14] = style;
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = [styles.half, styles.left];
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== glyphColor) {
+    t14 = <View style={t13}><View style={[styles.circle, {
+        borderColor: glyphColor
+      }]} /></View>;
+    $[18] = glyphColor;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  let t15;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = [styles.half, styles.right];
+    $[20] = t15;
+  } else {
+    t15 = $[20];
+  }
+  let t16;
+  if ($[21] !== glyphColor) {
+    t16 = <View style={t15}><View style={[styles.circle, styles.circleRight, styles.dashed, {
+        borderColor: glyphColor
+      }]} /></View>;
+    $[21] = glyphColor;
+    $[22] = t16;
+  } else {
+    t16 = $[22];
+  }
+  let t17;
+  if ($[23] !== glyphColor) {
+    t17 = <Text style={[styles.one, {
+      color: glyphColor
+    }]}>1</Text>;
+    $[23] = glyphColor;
+    $[24] = t17;
+  } else {
+    t17 = $[24];
+  }
+  let t18;
+  if ($[25] !== t14 || $[26] !== t16 || $[27] !== t17) {
+    t18 = <View style={styles.ring}>{t14}{t16}{t17}</View>;
+    $[25] = t14;
+    $[26] = t16;
+    $[27] = t17;
+    $[28] = t18;
+  } else {
+    t18 = $[28];
+  }
+  let t19;
+  if ($[29] !== t10 || $[30] !== t12 || $[31] !== t18 || $[32] !== t9) {
+    t19 = <Animated.View pointerEvents="none" testID="view-once-badge" accessibilityElementsHidden={t9} importantForAccessibility={t10} style={t12}>{t18}</Animated.View>;
+    $[29] = t10;
+    $[30] = t12;
+    $[31] = t18;
+    $[32] = t9;
+    $[33] = t19;
+  } else {
+    t19 = $[33];
+  }
+  return t19;
+}
+const styles = StyleSheet.create({
+  badge: {
+    position: 'absolute',
+    width: OUTER,
+    height: OUTER,
+    borderRadius: OUTER / 2,
+    borderWidth: VIEW_ONCE_BADGE_CUT,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  ring: {
+    width: VIEW_ONCE_RING_SIZE,
+    height: VIEW_ONCE_RING_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  half: {
+    position: 'absolute',
+    top: 0,
+    width: VIEW_ONCE_RING_SIZE / 2,
+    height: VIEW_ONCE_RING_SIZE,
+    overflow: 'hidden'
+  },
+  left: {
+    left: 0
+  },
+  right: {
+    left: VIEW_ONCE_RING_SIZE / 2
+  },
+  circle: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: VIEW_ONCE_RING_SIZE,
+    height: VIEW_ONCE_RING_SIZE,
+    borderRadius: VIEW_ONCE_RING_SIZE / 2,
+    borderWidth: RING_STROKE
+  },
+  circleRight: {
+    left: -VIEW_ONCE_RING_SIZE / 2
+  },
+  dashed: {
+    borderStyle: 'dashed'
+  },
+  // A 10-size digit, nudged a third of a point left and down.
+  one: {
+    fontSize: 9,
+    lineHeight: 11,
+    fontWeight: '700',
+    includeFontPadding: false,
+    transform: [{
+      translateX: -0.33
+    }, {
+      translateY: 0.33
+    }]
+  }
+});
+//# sourceMappingURL=ViewOnceBadge.js.map