movius-chats 1.3.13 → 1.4.0

package/src/components/VoiceRecorder/LongPressRecording.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { ChevronUpIcon } from '../../assets/Icons/ChevronUpIcon';
+import { LockIcon } from '../../assets/Icons/LockIcon';
+import { MicrophoneIcon } from '../../assets/Icons/MicrophoneIcon';
+import { formatDuration } from '../../utils/datefunc';
+import { RecordingUIProps, VoiceRecorderStyleOverrides } from '../../types';
+
+interface LongPressRecordingProps {
+  duration: number;
+  /** Current horizontal drag offset (negative = sliding left to cancel) */
+  slideX: number;
+  containerHeight?: number;
+  fontFamily?: string;
+  voiceRecorderStyles?: VoiceRecorderStyleOverrides;
+  recordingUIProps?: RecordingUIProps;
+}
+
+export const LongPressRecording: React.FC<LongPressRecordingProps> = ({
+  duration,
+  slideX,
+  containerHeight = 50,
+  fontFamily,
+  voiceRecorderStyles,
+  recordingUIProps,
+}) => {
+  const micPulseColor = recordingUIProps?.micPulseColor ?? '#ef4444';
+  const cancelTextColor = recordingUIProps?.cancelTextColor ?? '#6b7280';
+
+  // ── Mic breathing ─────────────────────────────────────────────────────────
+  const micScale = useSharedValue(1);
+  useEffect(() => {
+    micScale.value = withRepeat(
+      withSequence(
+        withTiming(1.28, { duration: 700, easing: Easing.inOut(Easing.ease) }),
+        withTiming(1, { duration: 700, easing: Easing.inOut(Easing.ease) })
+      ),
+      -1,
+      false
+    );
+  }, []);
+
+  // ── "Slide to cancel" text oscillation ───────────────────────────────────
+  const slideTextX = useSharedValue(0);
+  useEffect(() => {
+    slideTextX.value = withRepeat(
+      withSequence(
+        withTiming(-8, { duration: 600, easing: Easing.inOut(Easing.ease) }),
+        withTiming(0, { duration: 600, easing: Easing.inOut(Easing.ease) })
+      ),
+      -1,
+      false
+    );
+  }, []);
+
+  // ── Chevron bounce ────────────────────────────────────────────────────────
+  const chevronY = useSharedValue(0);
+  useEffect(() => {
+    chevronY.value = withRepeat(
+      withSequence(
+        withTiming(-5, { duration: 450, easing: Easing.inOut(Easing.ease) }),
+        withTiming(0, { duration: 450, easing: Easing.inOut(Easing.ease) })
+      ),
+      -1,
+      false
+    );
+  }, []);
+
+  // ── Lock open/close ───────────────────────────────────────────────────────
+  const lockScale = useSharedValue(0.8);
+  useEffect(() => {
+    lockScale.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 550, easing: Easing.out(Easing.ease) }),
+        withTiming(0.8, { duration: 550, easing: Easing.in(Easing.ease) })
+      ),
+      -1,
+      false
+    );
+  }, []);
+
+  const micStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: micScale.value }],
+  }));
+
+  // Fade + shift the "slide to cancel" text as user drags left
+  const cancelProgress = Math.min(1, Math.abs(Math.min(0, slideX)) / 70);
+
+  const slideTextStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: slideTextX.value }],
+    opacity: 1 - cancelProgress,
+  }));
+
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: chevronY.value }],
+  }));
+
+  const lockStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: lockScale.value }],
+  }));
+
+  const micSize = containerHeight * 0.5;
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: containerHeight,
+          paddingHorizontal: 8,
+        },
+        voiceRecorderStyles?.container,
+      ]}
+    >
+      {/* ── Animated mic (breathing) ── */}
+      <Animated.View
+        style={[
+          micStyle,
+          {
+            width: containerHeight,
+            height: containerHeight,
+            borderRadius: containerHeight / 2,
+            backgroundColor: `${micPulseColor}22`,
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+          voiceRecorderStyles?.micButton,
+        ]}
+      >
+        <MicrophoneIcon
+          style={{ width: micSize, height: micSize }}
+          color={micPulseColor}
+        />
+      </Animated.View>
+
+      {/* ── Timer ── */}
+      <Text
+        style={[
+          {
+            fontSize: 15,
+            fontWeight: '600',
+            color: '#374151',
+            marginLeft: 8,
+            fontFamily,
+          },
+          voiceRecorderStyles?.timer,
+        ]}
+      >
+        {formatDuration(duration)}
+      </Text>
+
+      {/* ── "Slide to cancel" text ── */}
+      <Animated.View
+        style={[slideTextStyle, { flex: 1, alignItems: 'center' }]}
+      >
+        <Text
+          style={[
+            {
+              fontSize: 14,
+              color: cancelTextColor,
+              fontFamily,
+            },
+            voiceRecorderStyles?.slideText,
+          ]}
+        >
+          {'< Slide to cancel'}
+        </Text>
+      </Animated.View>
+
+      {/* ── Lock + Chevron column ── */}
+      <View
+        style={[
+          { alignItems: 'center', marginRight: 4 },
+          voiceRecorderStyles?.lockContainer,
+        ]}
+      >
+        <Animated.View style={lockStyle}>
+          <LockIcon style={{ width: 18, height: 18 }} color="#6b7280" />
+        </Animated.View>
+        <Animated.View style={chevronStyle}>
+          <ChevronUpIcon style={{ width: 18, height: 18 }} color="#6b7280" />
+        </Animated.View>
+      </View>
+    </View>
+  );
+};

package/src/components/VoiceRecorder/NormalRecording.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { PaperPlaneIcon } from '../../assets/Icons/PaperPlaneIcon';
+import { PauseIcon } from '../../assets/Icons/PauseIcon';
+import { PlayIcon } from '../../assets/Icons/PlayIcon';
+import { TrashIcon } from '../../assets/Icons/TrashIcon';
+import { formatDuration } from '../../utils/datefunc';
+import {
+  RecordingUIProps,
+  VoiceRecorderStyleOverrides,
+} from '../../types';
+import { WaveformAnimation } from './WaveformAnimation';
+
+interface NormalRecordingProps {
+  isRecording: boolean;
+  isPaused: boolean;
+  duration: number;
+  onCancel: () => void;
+  onSend: () => void;
+  onPause: () => void;
+  onResume: () => void;
+  containerHeight?: number;
+  fontFamily?: string;
+  sendButtonColor?: string;
+  sendIconColor?: string;
+  enablePauseResume?: boolean;
+  voiceRecorderStyles?: VoiceRecorderStyleOverrides;
+  recordingUIProps?: RecordingUIProps;
+}
+
+export const NormalRecording: React.FC<NormalRecordingProps> = ({
+  isRecording,
+  isPaused,
+  duration,
+  onCancel,
+  onSend,
+  onPause,
+  onResume,
+  containerHeight = 50,
+  fontFamily,
+  sendButtonColor = '#16a34a',
+  sendIconColor = '#ffffff',
+  enablePauseResume = true,
+  voiceRecorderStyles,
+  recordingUIProps,
+}) => {
+  const waveColor = recordingUIProps?.waveformColor ?? 'rgba(0,0,0,0.45)';
+  const cancelColor = recordingUIProps?.cancelTextColor ?? '#ef4444';
+  const timerColor = '#374151';
+  const bg = recordingUIProps?.recordingBackground ?? 'transparent';
+  const timerTextStyle = recordingUIProps?.timerTextStyle;
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: containerHeight,
+          paddingHorizontal: 4,
+          backgroundColor: bg,
+          gap: 8,
+        },
+        voiceRecorderStyles?.container,
+      ]}
+    >
+      {/* ── Cancel / Trash ── */}
+      <Pressable
+        onPress={onCancel}
+        style={[
+          {
+            width: containerHeight,
+            height: containerHeight,
+            borderRadius: containerHeight / 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: `${cancelColor}18`,
+          },
+          voiceRecorderStyles?.trashButton,
+        ]}
+        hitSlop={6}
+      >
+        <TrashIcon
+          style={{ width: containerHeight * 0.44, height: containerHeight * 0.44 }}
+          color={cancelColor}
+        />
+      </Pressable>
+
+      {/* ── Timer ── */}
+      <Text
+        style={[
+          {
+            fontSize: 15,
+            fontWeight: '600',
+            color: timerColor,
+            minWidth: 40,
+            fontFamily,
+          },
+          voiceRecorderStyles?.timer,
+          timerTextStyle,
+        ]}
+      >
+        {formatDuration(duration)}
+      </Text>
+
+      {/* ── Waveform ── */}
+      <WaveformAnimation
+        isActive={isRecording && !isPaused}
+        color={waveColor}
+        height={Math.round(containerHeight * 0.52)}
+        style={[{ flex: 1 }, voiceRecorderStyles?.waveform]}
+      />
+
+      {/* ── Pause / Resume ── */}
+      {enablePauseResume && (
+        <Pressable
+          onPress={isPaused ? onResume : onPause}
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 18,
+            backgroundColor: 'rgba(0,0,0,0.08)',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          hitSlop={6}
+        >
+          {isPaused ? (
+            <PlayIcon style={{ width: 18, height: 18 }} color="#374151" />
+          ) : (
+            <PauseIcon style={{ width: 18, height: 18 }} color="#374151" />
+          )}
+        </Pressable>
+      )}
+
+      {/* ── Send ── */}
+      <Pressable
+        onPress={onSend}
+        style={{
+          width: containerHeight,
+          height: containerHeight,
+          borderRadius: containerHeight / 2,
+          backgroundColor: sendButtonColor,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        hitSlop={4}
+      >
+        <PaperPlaneIcon
+          style={{ width: containerHeight * 0.44, height: containerHeight * 0.44 }}
+          color={sendIconColor}
+        />
+      </Pressable>
+    </View>
+  );
+};

package/src/components/VoiceRecorder/WaveformAnimation.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+const BAR_COUNT = 22;
+
+function randomBars(): number[] {
+  return Array.from({ length: BAR_COUNT }, () => 0.15 + Math.random() * 0.85);
+}
+
+interface WaveformAnimationProps {
+  isActive: boolean;
+  color?: string;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const WaveformAnimation: React.FC<WaveformAnimationProps> = ({
+  isActive,
+  color = 'rgba(0,0,0,0.45)',
+  height = 26,
+  style,
+}) => {
+  const [bars, setBars] = useState<number[]>(() =>
+    Array.from({ length: BAR_COUNT }, () => 0.3)
+  );
+
+  useEffect(() => {
+    if (!isActive) {
+      setBars(Array.from({ length: BAR_COUNT }, () => 0.3));
+      return;
+    }
+    const id = setInterval(() => setBars(randomBars()), 110);
+    return () => clearInterval(id);
+  }, [isActive]);
+
+  return (
+    <View
+      style={[
+        { flexDirection: 'row', alignItems: 'center', height, gap: 2 },
+        style,
+      ]}
+    >
+      {bars.map((amp, i) => (
+        <View
+          key={i}
+          style={{
+            flex: 1,
+            height: Math.max(3, Math.round(amp * height)),
+            borderRadius: 2,
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </View>
+  );
+};

package/src/hooks/useVoiceRecorder.ts

@@ -0,0 +1,206 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RecordingResult } from '../types';
+
+export type RecordingStatus = 'idle' | 'recording' | 'paused';
+
+interface UseVoiceRecorderOptions {
+  maxDuration?: number;
+  onRecordStart?: () => void;
+  onRecordEnd?: (result: RecordingResult) => void;
+}
+
+export function useVoiceRecorder({
+  maxDuration = 300,
+  onRecordStart,
+  onRecordEnd,
+}: UseVoiceRecorderOptions = {}) {
+  const [status, setStatus] = useState<RecordingStatus>('idle');
+  const [duration, setDuration] = useState(0);
+
+  const recordingRef = useRef<any>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const durationRef = useRef(0);
+
+  // Keep callback refs stable so the PanResponder (created once) always calls the latest version
+  const onRecordEndRef = useRef(onRecordEnd);
+  onRecordEndRef.current = onRecordEnd;
+  const onRecordStartRef = useRef(onRecordStart);
+  onRecordStartRef.current = onRecordStart;
+  const maxDurationRef = useRef(maxDuration);
+  maxDurationRef.current = maxDuration;
+
+  const stopTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const startTimer = useCallback(
+    (onMaxDuration: () => void) => {
+      stopTimer();
+      timerRef.current = setInterval(() => {
+        durationRef.current += 1;
+        setDuration(durationRef.current);
+        if (durationRef.current >= maxDurationRef.current) {
+          onMaxDuration();
+        }
+      }, 1000);
+    },
+    [stopTimer]
+  );
+
+  const startRecording = useCallback(async () => {
+    let Audio: any;
+    try {
+      Audio = require('expo-av').Audio;
+    } catch {
+      console.error(
+        '[movius-chats] Voice recording requires expo-av. ' +
+          'Install it with: bun add expo-av'
+      );
+      return;
+    }
+
+    try {
+      const { status: permStatus } = await Audio.requestPermissionsAsync();
+      if (permStatus !== 'granted') {
+        console.warn('[movius-chats] Microphone permission denied.');
+        return;
+      }
+
+      await Audio.setAudioModeAsync({
+        allowsRecordingIOS: true,
+        playsInSilentModeIOS: true,
+      });
+
+      const recording = new Audio.Recording();
+      await recording.prepareToRecordAsync(
+        Audio.RecordingOptionsPresets.HIGH_QUALITY
+      );
+      await recording.startAsync();
+
+      recordingRef.current = recording;
+      durationRef.current = 0;
+      setDuration(0);
+      setStatus('recording');
+
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      startTimer(() => stopRecording());
+
+      onRecordStartRef.current?.();
+    } catch (e) {
+      console.warn('[movius-chats] Failed to start recording:', e);
+    }
+  }, [startTimer]); // stopRecording defined below — used via ref
+
+  const pauseRecording = useCallback(async () => {
+    if (!recordingRef.current) return;
+    try {
+      await recordingRef.current.pauseAsync();
+      setStatus('paused');
+      stopTimer();
+    } catch (e) {
+      console.warn('[movius-chats] Failed to pause:', e);
+    }
+  }, [stopTimer]);
+
+  const resumeRecording = useCallback(async () => {
+    if (!recordingRef.current) return;
+    try {
+      await recordingRef.current.startAsync();
+      setStatus('recording');
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      startTimer(() => stopRecording());
+    } catch (e) {
+      console.warn('[movius-chats] Failed to resume:', e);
+    }
+  }, [startTimer]);
+
+  // Exposed as a stable ref so the timer callback (closed at creation) can call it
+  const stopRecordingImpl = useCallback(async (): Promise<RecordingResult | null> => {
+    const rec = recordingRef.current;
+    if (!rec) return null;
+
+    stopTimer();
+    recordingRef.current = null;
+    const capturedDuration = durationRef.current;
+    durationRef.current = 0;
+    setStatus('idle');
+    setDuration(0);
+
+    try {
+      await rec.stopAndUnloadAsync();
+      const uri = rec.getURI() as string | null;
+      if (!uri) return null;
+
+      let durMs = capturedDuration * 1000;
+      try {
+        const st = await rec.getStatusAsync();
+        if (st?.durationMillis) durMs = st.durationMillis;
+      } catch {}
+
+      const result: RecordingResult = {
+        uri,
+        duration: Math.max(1, Math.round(durMs / 1000)),
+        mimeType: 'audio/m4a',
+      };
+
+      onRecordEndRef.current?.(result);
+      return result;
+    } catch (e) {
+      console.warn('[movius-chats] Failed to stop recording:', e);
+      return null;
+    }
+  }, [stopTimer]);
+
+  // Stable ref so the timer closure can call the latest implementation
+  const stopRecordingRef = useRef(stopRecordingImpl);
+  stopRecordingRef.current = stopRecordingImpl;
+
+  const stopRecording = useCallback(
+    () => stopRecordingRef.current(),
+    []
+  );
+
+  const cancelRecording = useCallback(async () => {
+    const rec = recordingRef.current;
+    stopTimer();
+    recordingRef.current = null;
+    durationRef.current = 0;
+    setStatus('idle');
+    setDuration(0);
+
+    if (rec) {
+      try {
+        await rec.stopAndUnloadAsync();
+        const uri = rec.getURI() as string | null;
+        if (uri) {
+          try {
+            const { deleteAsync } = require('expo-file-system');
+            await deleteAsync(uri, { idempotent: true });
+          } catch {}
+        }
+      } catch {}
+    }
+  }, [stopTimer]);
+
+  useEffect(() => {
+    return () => {
+      stopTimer();
+      recordingRef.current?.stopAndUnloadAsync().catch(() => {});
+    };
+  }, [stopTimer]);
+
+  return {
+    status,
+    duration,
+    isRecording: status === 'recording',
+    isPaused: status === 'paused',
+    startRecording,
+    pauseRecording,
+    resumeRecording,
+    stopRecording,
+    cancelRecording,
+  };
+}