dchain/client-app/components/chat/VideoCircleRecorder.tsx

/**
 * VideoCircleRecorder — full-screen Modal для записи круглого видео-
 * сообщения (Telegram-style).
 *
 * UX:
 *   1. Открывается Modal с CameraView (по умолчанию front-camera).
 *   2. Превью — круглое (аналогично VideoCirclePlayer).
 *   3. Большая красная кнопка внизу: tap-to-start, tap-to-stop.
 *   4. Максимум 15 секунд — авто-стоп.
 *   5. По stop'у возвращаем attachment { kind:'video', circle:true, uri, duration }.
 *   6. Свайп вниз / close-icon → cancel (без отправки).
 */
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Pressable, Modal, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { CameraView, useCameraPermissions, useMicrophonePermissions } from 'expo-camera';

import type { Attachment } from '@/lib/types';

export interface VideoCircleRecorderProps {
  visible: boolean;
  onClose: () => void;
  onFinish: (att: Attachment) => void;
}

const MAX_DURATION_SEC = 15;

function formatClock(sec: number): string {
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${String(s).padStart(2, '0')}`;
}

export function VideoCircleRecorder({ visible, onClose, onFinish }: VideoCircleRecorderProps) {
  const insets = useSafeAreaInsets();
  const camRef = useRef<CameraView>(null);

  const [camPerm, requestCam] = useCameraPermissions();
  const [micPerm, requestMic] = useMicrophonePermissions();

  const [recording, setRecording] = useState(false);
  const [elapsed, setElapsed]     = useState(0);
  const startedAt = useRef(0);
  const facing: 'front' | 'back' = 'front';

  // Timer + auto-stop at MAX_DURATION_SEC
  useEffect(() => {
    if (!recording) return;
    const t = setInterval(() => {
      const s = Math.floor((Date.now() - startedAt.current) / 1000);
      setElapsed(s);
      if (s >= MAX_DURATION_SEC) stopAndSend();
    }, 250);
    return () => clearInterval(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [recording]);

  // Permissions on mount of visible
  useEffect(() => {
    if (!visible) {
      setRecording(false);
      setElapsed(0);
      return;
    }
    (async () => {
      if (!camPerm?.granted) await requestCam();
      if (!micPerm?.granted) await requestMic();
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible]);

  const start = async () => {
    if (!camRef.current || recording) return;
    try {
      startedAt.current = Date.now();
      setElapsed(0);
      setRecording(true);
      // recordAsync блокируется до stopRecording или maxDuration
      const result = await camRef.current.recordAsync({ maxDuration: MAX_DURATION_SEC });
      setRecording(false);
      if (!result?.uri) return;
      const seconds = Math.max(1, Math.floor((Date.now() - startedAt.current) / 1000));
      onFinish({
        kind:     'video',
        circle:   true,
        uri:      result.uri,
        duration: seconds,
        mime:     'video/mp4',
      });
      onClose();
    } catch (e: any) {
      setRecording(false);
      Alert.alert('Recording failed', e?.message ?? 'Unknown error');
    }
  };

  const stopAndSend = () => {
    if (!recording) return;
    camRef.current?.stopRecording();
    // recordAsync promise выше resolve'нется с uri → onFinish
  };

  const cancel = () => {
    if (recording) {
      camRef.current?.stopRecording();
    }
    onClose();
  };

  const permOK = camPerm?.granted && micPerm?.granted;

  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={cancel}>
      <View
        style={{
          flex: 1,
          backgroundColor: '#000000',
          paddingTop: insets.top,
          paddingBottom: Math.max(insets.bottom, 12),
        }}
      >
        {/* Header */}
        <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
          <Pressable
            onPress={cancel}
            hitSlop={10}
            style={{
              width: 36, height: 36, borderRadius: 18,
              backgroundColor: 'rgba(255,255,255,0.08)',
              alignItems: 'center', justifyContent: 'center',
            }}
          >
            <Ionicons name="close" size={20} color="#ffffff" />
          </Pressable>
          <Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', flex: 1, textAlign: 'center' }}>
            Video message
          </Text>
          <View style={{ width: 36 }} />
        </View>

        {/* Camera */}
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }}>
          {permOK ? (
            <View
              style={{
                width: '85%',
                aspectRatio: 1,
                maxWidth: 360, maxHeight: 360,
                borderRadius: 9999,
                overflow: 'hidden',
                backgroundColor: '#0a0a0a',
                borderWidth: recording ? 3 : 0,
                borderColor: '#f4212e',
              }}
            >
              <CameraView
                ref={camRef}
                style={{ flex: 1 }}
                facing={facing}
                mode="video"
              />
            </View>
          ) : (
            <View style={{ alignItems: 'center', paddingHorizontal: 24 }}>
              <Ionicons name="videocam-off-outline" size={42} color="#8b8b8b" />
              <Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginTop: 12 }}>
                Permissions needed
              </Text>
              <Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 4, textAlign: 'center' }}>
                Camera + microphone access are required to record a video message.
              </Text>
            </View>
          )}

          {/* Timer */}
          {recording && (
            <Text
              style={{
                color: '#f4212e',
                fontSize: 14, fontWeight: '700',
                marginTop: 14,
              }}
            >
              ● {formatClock(elapsed)} / {formatClock(MAX_DURATION_SEC)}
            </Text>
          )}
        </View>

        {/* Record / Stop button */}
        <View style={{ alignItems: 'center', paddingBottom: 16 }}>
          <Pressable
            onPress={recording ? stopAndSend : start}
            disabled={!permOK}
            style={({ pressed }) => ({
              width: 72, height: 72, borderRadius: 36,
              backgroundColor: !permOK ? '#1a1a1a' : recording ? '#f4212e' : '#1d9bf0',
              alignItems: 'center', justifyContent: 'center',
              opacity: pressed ? 0.85 : 1,
              borderWidth: 4,
              borderColor: 'rgba(255,255,255,0.2)',
            })}
          >
            <Ionicons
              name={recording ? 'stop' : 'videocam'}
              size={30}
              color="#ffffff"
            />
          </Pressable>
          <Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 10 }}>
            {recording ? 'Tap to stop & send' : permOK ? 'Tap to record' : 'Grant permissions'}
          </Text>
        </View>
      </View>
    </Modal>
  );
}