@kesha-antonov/react-native-chat 4.2.0 → 4.3.0

package/lib/components/ReplyPreview.js

@@ -1,16 +1,21 @@
 import React, { useEffect } from 'react';
 import { Image, Pressable, StyleSheet, Text, View, } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, interpolate, runOnJS, } from 'react-native-reanimated';
-import { useColorScheme } from '../hooks/useColorScheme';
+import { useLabels } from '../hooks/useLabels';
+import { useThemedStyles } from '../hooks/useTheme';
+import { formatLabel } from '../i18n';
+import { Icon } from './Icon';
+import { CloseIcon, PencilIcon, ReplyArrowIcon } from './MediaControls';
 const ANIMATION_DURATION = 200;
 const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
 const DEFAULT_HEIGHT = 68;
-const styles = StyleSheet.create({
+const createStyles = (theme) => StyleSheet.create({
     borderIndicator: {
-        backgroundColor: '#0084ff',
-        borderTopLeftRadius: 4,
-        height: '100%',
-        width: 4,
+        backgroundColor: theme.colors.accent,
+        borderRadius: 2,
+        width: 3,
+        alignSelf: 'stretch',
+        marginVertical: 8,
     },
     clearButton: {
         alignItems: 'center',
@@ -22,23 +27,25 @@ const styles = StyleSheet.create({
     clearButtonText: {
         fontSize: 18,
         fontWeight: '600',
+        color: theme.colors.placeholder,
     },
+    // Flush banner: full-bleed inside the bar, sharing the bar background with a
+    // bottom hairline, so it reads as the composer growing a header.
     container: {
-        borderRadius: 8,
         flexDirection: 'row',
-        marginBottom: 8,
-        marginHorizontal: 10,
+        alignItems: 'center',
         overflow: 'hidden',
+        paddingHorizontal: theme.spacing.screenEdge,
+        backgroundColor: theme.colors.inputBarBackground,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: theme.colors.separator,
     },
-    containerDark: {
-        backgroundColor: '#2c2c2e',
-    },
-    containerLight: {
-        backgroundColor: '#e9e9eb',
+    leadingIcon: {
+        marginRight: 8,
     },
     content: {
         flex: 1,
-        paddingHorizontal: 10,
+        paddingHorizontal: 8,
         paddingVertical: 8,
     },
     image: {
@@ -53,15 +60,10 @@ const styles = StyleSheet.create({
     },
     text: {
         fontSize: 14,
-    },
-    textDark: {
-        color: '#fff',
-    },
-    textLight: {
-        color: '#333',
+        color: theme.colors.inputText,
     },
     username: {
-        color: '#0084ff',
+        color: theme.colors.accent,
         fontSize: 13,
         fontWeight: '600',
         marginBottom: 2,
@@ -70,9 +72,9 @@ const styles = StyleSheet.create({
         overflow: 'hidden',
     },
 });
-export function ReplyPreview({ replyMessage, onClearReply, containerStyle, textStyle, imageStyle, }) {
-    const colorScheme = useColorScheme();
-    const isDark = colorScheme === 'dark';
+export function ReplyPreview({ replyMessage, onClearReply, mode = 'reply', containerStyle, textStyle, imageStyle, }) {
+    const styles = useThemedStyles(createStyles);
+    const labels = useLabels();
     const animationProgress = useSharedValue(0);
     const contentHeight = useSharedValue(DEFAULT_HEIGHT);
     // Animate in on mount
@@ -95,18 +97,17 @@ export function ReplyPreview({ replyMessage, onClearReply, containerStyle, textS
     const wrapperAnimatedStyle = useAnimatedStyle(() => {
         const height = interpolate(animationProgress.value, [0, 1], [0, contentHeight.value]);
         const opacity = interpolate(animationProgress.value, [0, 0.5, 1], [0, 0.5, 1]);
-        const translateY = interpolate(animationProgress.value, [0, 1], [10, 0]);
         return {
             height,
             opacity,
-            transform: [{ translateY }],
         };
     });
     const displayName = replyMessage.user?.name || 'Unknown';
+    const accent = styles.username.color;
+    const title = mode === 'edit' ? labels.editing : formatLabel(labels.replyingTo, { name: displayName });
     return (<Animated.View style={[styles.wrapper, wrapperAnimatedStyle]}>
       <View style={[
             styles.container,
-            isDark ? styles.containerDark : styles.containerLight,
             containerStyle,
         ]} onLayout={e => {
             const newHeight = e.nativeEvent.layout.height + 8;
@@ -116,17 +117,21 @@ export function ReplyPreview({ replyMessage, onClearReply, containerStyle, textS
                 easing: ANIMATION_EASING,
             });
         }}>
+        <View style={styles.leadingIcon}>
+          {mode === 'edit'
+            ? <Icon name='pencil' color={accent} size={18} fallback={<PencilIcon color={accent} size={18}/>}/>
+            : <Icon name='reply' color={accent} size={18} fallback={<ReplyArrowIcon color={accent} size={18}/>}/>}
+        </View>
         <View style={styles.borderIndicator}/>
         <View style={styles.content}>
           <View style={styles.row}>
             {replyMessage.image && (<Image source={{ uri: replyMessage.image }} style={[styles.image, imageStyle]}/>)}
             <View style={{ flex: 1 }}>
               <Text style={styles.username} numberOfLines={1}>
-                Replying to {displayName}
+                {title}
               </Text>
               {replyMessage.text && (<Text style={[
                 styles.text,
-                isDark ? styles.textDark : styles.textLight,
                 textStyle,
             ]} numberOfLines={2}>
                   {replyMessage.text}
@@ -135,12 +140,7 @@ export function ReplyPreview({ replyMessage, onClearReply, containerStyle, textS
           </View>
         </View>
         <Pressable style={styles.clearButton} onPress={handleClear} hitSlop={8}>
-          <Text style={[
-            styles.clearButtonText,
-            isDark ? styles.textDark : styles.textLight,
-        ]}>
-            ×
-          </Text>
+          <Icon name='close' color={styles.clearButtonText.color} size={16} fallback={<CloseIcon color={styles.clearButtonText.color} size={16}/>}/>
         </Pressable>
       </View>
     </Animated.View>);

package/lib/components/ReplyPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReplyPreview.js","sourceRoot":"","sources":["../../src/components/ReplyPreview.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ReplyPreview.js","sourceRoot":"","sources":["../../src/components/ReplyPreview.tsx"],"names":[],"mappings":"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"}

package/lib/components/SendIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SendIconProps {
+    color?: string;
+    /** Overall icon box size; the glyph scales to fit. Defaults to 20. */
+    size?: number;
+}
+/**
+ * Dependency-free fallback send glyph (used when react-native-svg is not
+ * installed; otherwise the Lucide "send" icon is rendered via the Icon
+ * resolver). A triangle tilted to point up-and-to-the-right.
+ */
+export declare const SendIcon: ({ color, size }: SendIconProps) => React.JSX.Element;
+//# sourceMappingURL=SendIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.d.ts","sourceRoot":"","sources":["../../src/components/SendIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,iBAA+B,aAAa,sBAQpE,CAAA"}

package/lib/components/SendIcon.js

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+/**
+ * Dependency-free fallback send glyph (used when react-native-svg is not
+ * installed; otherwise the Lucide "send" icon is rendered via the Icon
+ * resolver). A triangle tilted to point up-and-to-the-right.
+ */
+export const SendIcon = ({ color = '#fff', size = 20 }) => {
+    const styles = useMemo(() => createStyles(color, size), [color, size]);
+    return (<View style={styles.container}>
+      <View style={styles.triangle}/>
+    </View>);
+};
+const createStyles = (color, size) => {
+    const side = size * 0.82;
+    return StyleSheet.create({
+        container: {
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: [{ rotate: '-45deg' }],
+        },
+        triangle: {
+            width: 0,
+            height: 0,
+            borderTopWidth: side / 2,
+            borderBottomWidth: side / 2,
+            borderLeftWidth: side,
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderLeftColor: color,
+            marginLeft: size * 0.16,
+        },
+    });
+};
+//# sourceMappingURL=SendIcon.js.map

package/lib/components/SendIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.js","sourceRoot":"","sources":["../../src/components/SendIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAQ/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,GAAG,EAAE,EAAiB,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;IAEtE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAC/B;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAExB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;SAClC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,cAAc,EAAE,IAAI,GAAG,CAAC;YACxB,iBAAiB,EAAE,IAAI,GAAG,CAAC;YAC3B,eAAe,EAAE,IAAI;YACrB,cAAc,EAAE,aAAa;YAC7B,iBAAiB,EAAE,aAAa;YAChC,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,IAAI,GAAG,IAAI;SACxB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/lib/components/Ticks.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface TicksProps {
+    /** Render a double check (delivered / read) instead of a single check (sent). */
+    double?: boolean;
+    color: string;
+    /** Visual height of a single check; defaults to 9. */
+    size?: number;
+}
+/**
+ * Telegram-style delivery ticks: one check = sent, double check = delivered/read.
+ * Color the read state with the accent (or a brighter shade on colored bubbles).
+ */
+export declare const Ticks: ({ double, color, size }: TicksProps) => React.JSX.Element;
+export interface PendingClockProps {
+    color: string;
+    size?: number;
+}
+/**
+ * A minimal clock-outline icon for the "pending" (sending) state, replacing the
+ * old "🕓" emoji. The hands rotate continuously while the message is sending,
+ * mirroring Telegram's spinning clock. Respects the system reduce-motion
+ * setting (the hands simply hold still).
+ */
+export declare const PendingClock: ({ color, size }: PendingClockProps) => React.JSX.Element;
+//# sourceMappingURL=Ticks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ticks.d.ts","sourceRoot":"","sources":["../../src/components/Ticks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AA2BjD,MAAM,WAAW,UAAU;IACzB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,GAAI,yBAAqC,UAAU,sBASpE,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,iBAAsB,iBAAiB,sBA0BnE,CAAA"}

package/lib/components/Ticks.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { Easing, ReduceMotion, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+/**
+ * A single checkmark drawn with two borders rotated 45deg - no SVG dependency.
+ * Replaces the old literal "✓" glyph so the tick is crisp at any size and color.
+ */
+const Check = ({ color, size, style }) => {
+    const styles = useMemo(() => createCheckStyles(color, size), [color, size]);
+    return <View style={[styles.check, style]}/>;
+};
+/**
+ * Telegram-style delivery ticks: one check = sent, double check = delivered/read.
+ * Color the read state with the accent (or a brighter shade on colored bubbles).
+ */
+export const Ticks = ({ double = false, color, size = 9 }) => {
+    const styles = useMemo(() => createTicksStyles(size), [size]);
+    return (<View style={styles.row}>
+      <Check color={color} size={size}/>
+      {double && <Check color={color} size={size} style={styles.secondCheck}/>}
+    </View>);
+};
+/**
+ * A minimal clock-outline icon for the "pending" (sending) state, replacing the
+ * old "🕓" emoji. The hands rotate continuously while the message is sending,
+ * mirroring Telegram's spinning clock. Respects the system reduce-motion
+ * setting (the hands simply hold still).
+ */
+export const PendingClock = ({ color, size = 11 }) => {
+    const styles = useMemo(() => createClockStyles(color, size), [color, size]);
+    const rotation = useSharedValue(0);
+    useEffect(() => {
+        rotation.value = withRepeat(withTiming(360, { duration: 1200, easing: Easing.linear, reduceMotion: ReduceMotion.System }), -1, false);
+        return () => cancelAnimation(rotation);
+    }, [rotation]);
+    const handsStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+    return (<View style={styles.face}>
+      <Animated.View style={[styles.hands, StyleSheet.absoluteFill, handsStyle]}>
+        <View style={styles.minuteHand}/>
+        <View style={styles.hourHand}/>
+      </Animated.View>
+    </View>);
+};
+const createCheckStyles = (color, size) => {
+    const thickness = Math.max(1.5, Math.round(size * 0.16));
+    return StyleSheet.create({
+        check: {
+            width: size * 0.55,
+            height: size,
+            borderColor: color,
+            borderRightWidth: thickness,
+            borderBottomWidth: thickness,
+            transform: [{ rotate: '45deg' }],
+        },
+    });
+};
+const createTicksStyles = (size) => StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: size + 2,
+    },
+    secondCheck: {
+        marginLeft: -size * 0.35,
+    },
+});
+const createClockStyles = (color, size) => {
+    const hand = Math.max(1, Math.round(size * 0.09));
+    return StyleSheet.create({
+        face: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderColor: color,
+            borderWidth: hand,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        hands: {
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        minuteHand: {
+            position: 'absolute',
+            width: hand,
+            height: size * 0.32,
+            backgroundColor: color,
+            bottom: '50%',
+        },
+        hourHand: {
+            position: 'absolute',
+            height: hand,
+            width: size * 0.24,
+            backgroundColor: color,
+            left: '50%',
+        },
+    });
+};
+//# sourceMappingURL=Ticks.js.map

package/lib/components/Ticks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ticks.js","sourceRoot":"","sources":["../../src/components/Ticks.tsx"],"names":[],"mappings":"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"}

package/lib/components/VideoNoteOverlay.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface VideoNoteOverlayProps {
+    /** Diameter of the note this overlays. */
+    size: number;
+    /** Playback position, 0..1. */
+    progress: number;
+    isMuted: boolean;
+    isPlaying: boolean;
+}
+/**
+ * Chrome drawn *on* a round video note: the progress ring sweeping its edge, a
+ * mute badge while it is silent, and a stop target once it is playing.
+ *
+ * The duration is deliberately not here - Telegram renders it under the circle
+ * on the chat background, so it lives in `MessageVideo` beside the note.
+ *
+ * Non-interactive: the note's own press target handles taps.
+ */
+export declare function VideoNoteOverlay({ size, progress, isMuted, isPlaying, }: VideoNoteOverlayProps): React.JSX.Element;
+/** Duration and unwatched dot, rendered under the note on the chat background. */
+export declare function VideoNoteMeta({ duration, isWatched, }: {
+    duration?: number;
+    isWatched: boolean;
+}): React.JSX.Element | null;
+//# sourceMappingURL=VideoNoteOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoNoteOverlay.d.ts","sourceRoot":"","sources":["../../src/components/VideoNoteOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAwCtC,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAE,EAChC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,qBAwCvB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAE,EAC7B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;CACnB,4BAUA"}

package/lib/components/VideoNoteOverlay.js

@@ -0,0 +1,151 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { CloseIcon } from './MediaControls';
+// Optional SVG, used to draw the circular progress ring. When absent the note
+// still plays, just without the ring - the same optional-require pattern the
+// recorder uses.
+let Svg = null;
+let SvgCircle = null;
+try {
+    const svg = require('react-native-svg');
+    Svg = svg.Svg ?? svg.default;
+    SvgCircle = svg.Circle;
+}
+catch {
+    Svg = null;
+    SvgCircle = null;
+}
+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.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+};
+/** A speaker glyph, crossed through when muted. */
+const SpeakerIcon = ({ size = 14, isMuted }) => {
+    const styles = useMemo(() => createSpeakerStyles(size), [size]);
+    return (<View style={styles.wrapper}>
+      <View style={styles.body}/>
+      <View style={styles.cone}/>
+      {isMuted && <View style={styles.slash}/>}
+    </View>);
+};
+/**
+ * Chrome drawn *on* a round video note: the progress ring sweeping its edge, a
+ * mute badge while it is silent, and a stop target once it is playing.
+ *
+ * The duration is deliberately not here - Telegram renders it under the circle
+ * on the chat background, so it lives in `MessageVideo` beside the note.
+ *
+ * Non-interactive: the note's own press target handles taps.
+ */
+export function VideoNoteOverlay({ size, progress, isMuted, isPlaying, }) {
+    const stroke = 3;
+    const radius = size / 2 - stroke / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clamped = Math.max(0, Math.min(1, progress));
+    return (<View style={StyleSheet.absoluteFill} pointerEvents='none'>
+      {SvgCircle && clamped > 0 && (<Svg width={size} height={size} style={StyleSheet.absoluteFill}>
+          {/* Only the elapsed arc, no track - matching Telegram. */}
+          <SvgCircle cx={size / 2} cy={size / 2} r={radius} stroke='#FFFFFF' strokeWidth={stroke} fill='none' strokeLinecap='round' strokeDasharray={circumference} strokeDashoffset={circumference * (1 - clamped)} transform={`rotate(-90 ${size / 2} ${size / 2})`}/>
+        </Svg>)}
+
+      {isPlaying
+            ? (
+            // Playing: a stop target in the middle, as Telegram shows.
+            <View style={styles.centerBadge}>
+            <CloseIcon color='#fff' size={18}/>
+          </View>)
+            : isMuted && (<View style={styles.muteBadge}>
+            <SpeakerIcon isMuted size={14}/>
+          </View>)}
+    </View>);
+}
+/** Duration and unwatched dot, rendered under the note on the chat background. */
+export function VideoNoteMeta({ duration, isWatched, }) {
+    if (duration == null)
+        return null;
+    return (<View style={styles.metaRow}>
+      <Text style={styles.metaText}>{formatTime(duration)}</Text>
+      {!isWatched && <View style={styles.unwatchedDot}/>}
+    </View>);
+}
+const styles = StyleSheet.create({
+    centerBadge: {
+        position: 'absolute',
+        alignSelf: 'center',
+        top: '50%',
+        marginTop: -22,
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: 'rgba(0, 0, 0, 0.45)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    muteBadge: {
+        position: 'absolute',
+        bottom: 16,
+        alignSelf: 'center',
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: 'rgba(0, 0, 0, 0.45)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginTop: 6,
+        alignSelf: 'center',
+    },
+    metaText: {
+        fontSize: 13,
+        color: 'rgba(0, 0, 0, 0.45)',
+        fontVariant: ['tabular-nums'],
+    },
+    // Telegram marks a note you have not played yet with a small accent dot.
+    unwatchedDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: '#3390EC',
+    },
+});
+const createSpeakerStyles = (size) => StyleSheet.create({
+    wrapper: {
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    body: {
+        width: size * 0.3,
+        height: size * 0.42,
+        backgroundColor: '#FFFFFF',
+    },
+    cone: {
+        width: 0,
+        height: 0,
+        borderTopWidth: size * 0.42,
+        borderBottomWidth: size * 0.42,
+        borderRightWidth: size * 0.34,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderRightColor: '#FFFFFF',
+        transform: [{ rotate: '180deg' }],
+    },
+    slash: {
+        position: 'absolute',
+        width: size * 1.1,
+        height: 1.5,
+        borderRadius: 1,
+        backgroundColor: '#FFFFFF',
+        transform: [{ rotate: '-45deg' }],
+    },
+});
+//# sourceMappingURL=VideoNoteOverlay.js.map

package/lib/components/VideoNoteOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoNoteOverlay.js","sourceRoot":"","sources":["../../src/components/VideoNoteOverlay.tsx"],"names":[],"mappings":"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"}

package/lib/components/VideoNoteRecorder.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IMessage, VideoRecordingProps } from '../Models';
+export declare const isVisionCameraAvailable: boolean;
+export declare const isVisionCameraNativeReady: boolean;
+export interface VideoNoteRecorderProps<TMessage extends IMessage = IMessage> {
+    config?: VideoRecordingProps;
+    onClose: () => void;
+    onSend?: (message: Partial<TMessage>, shouldResetInputToolbar: boolean) => void;
+}
+/**
+ * Telegram-style round video note recorder: records the front camera into a
+ * circular preview. When react-native-vision-camera's native module is missing
+ * (a simulator, or a binary built before the dependency was added) it shows an
+ * unavailable state with the shutter disabled rather than fabricating a note.
+ * The two paths are separate components so the vision-camera hooks are only ever
+ * called when the native module is present (no crash, stable hook order).
+ */
+export declare function VideoNoteRecorder<TMessage extends IMessage = IMessage>(props: VideoNoteRecorderProps<TMessage>): React.JSX.Element;
+//# sourceMappingURL=VideoNoteRecorder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoNoteRecorder.d.ts","sourceRoot":"","sources":["../../src/components/VideoNoteRecorder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAOhF,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AA2BzD,eAAO,MAAM,uBAAuB,SAAyB,CAAA;AAO7D,eAAO,MAAM,yBAAyB,SASlC,CAAA;AA0BJ,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ;IAC1E,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,CACP,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC1B,uBAAuB,EAAE,OAAO,KAC7B,IAAI,CAAA;CACV;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACpE,KAAK,EAAE,sBAAsB,CAAC,QAAQ,CAAC,qBAKxC"}