kynjal-cli 2.0.6 → 3.1.0-alpha.44

package/dist/templates/components/ui/audio-recorder.tsx

@@ -1,476 +0,0 @@
-import { AudioPlayer } from '@/components/ui/audio-player';
-import { AudioWaveform } from '@/components/ui/audio-waveform';
-import { Button } from '@/components/ui/button';
-import { Text } from '@/components/ui/text';
-import { useColor } from '@/hooks/useColor';
-import { BORDER_RADIUS } from '@/theme/globals';
-import {
-  AudioModule,
-  RecordingOptions,
-  RecordingPresets,
-  useAudioRecorder,
-} from 'expo-audio';
-import { Circle, Download, Mic, Square, Trash2 } from 'lucide-react-native';
-import React, { useEffect, useRef, useState } from 'react';
-import { Alert, Platform, StyleSheet, View, ViewStyle } from 'react-native';
-import Animated, {
-  cancelAnimation,
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming,
-} from 'react-native-reanimated';
-
-export interface AudioRecorderProps {
-  style?: ViewStyle;
-  quality?: 'high' | 'low';
-  showWaveform?: boolean;
-  showTimer?: boolean;
-  maxDuration?: number; // in seconds
-  onRecordingComplete?: (uri: string) => void;
-  onRecordingStart?: () => void;
-  onRecordingStop?: () => void;
-  customRecordingOptions?: RecordingOptions;
-}
-
-export function AudioRecorder({
-  style,
-  quality = 'high',
-  showWaveform = true,
-  showTimer = true,
-  maxDuration,
-  onRecordingComplete,
-  onRecordingStart,
-  onRecordingStop,
-  customRecordingOptions,
-}: AudioRecorderProps) {
-  const recordingOptions =
-    customRecordingOptions ||
-    (quality === 'high'
-      ? RecordingPresets.HIGH_QUALITY
-      : RecordingPresets.LOW_QUALITY);
-
-  const recorder = useAudioRecorder(recordingOptions);
-  const [permissionGranted, setPermissionGranted] = useState(false);
-  const [duration, setDuration] = useState(0);
-  const [recordingUri, setRecordingUri] = useState<string | null>(null);
-  const [isRecording, setIsRecording] = useState(false);
-
-  // Waveform data for real-time visualization
-  const [waveformData, setWaveformData] = useState<number[]>(
-    Array.from({ length: 30 }, () => 0.2)
-  );
-
-  // Theme colors
-  const primaryColor = useColor('primary');
-  const secondaryColor = useColor('secondary');
-  const textColor = useColor('text');
-  const mutedColor = useColor('textMuted');
-  const redColor = useColor('red');
-  const greenColor = useColor('green');
-
-  // Animation values using react-native-reanimated
-  const recordingPulse = useSharedValue(1);
-  const durationInterval = useRef<number | null>(null);
-  const meteringInterval = useRef<number | null>(null);
-
-  // Request permissions on mount
-  useEffect(() => {
-    (async () => {
-      try {
-        const status = await AudioModule.requestRecordingPermissionsAsync();
-        setPermissionGranted(status.granted);
-
-        if (!status.granted) {
-          Alert.alert(
-            'Permission Required',
-            'Please grant microphone permission to record audio.',
-            [{ text: 'OK' }]
-          );
-        }
-      } catch (error) {
-        console.error('Error requesting permissions:', error);
-        setPermissionGranted(false);
-      }
-    })();
-  }, []);
-
-  // Recording pulse animation using react-native-reanimated
-  useEffect(() => {
-    if (isRecording) {
-      // Start the pulse animation
-      recordingPulse.value = withRepeat(
-        withTiming(1.2, { duration: 600, easing: Easing.inOut(Easing.ease) }),
-        -1, // Infinite loop
-        true // Reverse the animation (yoyo effect)
-      );
-    } else {
-      // Stop the animation and reset the scale
-      cancelAnimation(recordingPulse);
-      recordingPulse.value = withTiming(1, { duration: 300 });
-    }
-
-    return () => {
-      // Ensure animation is cancelled on unmount
-      cancelAnimation(recordingPulse);
-    };
-  }, [isRecording, recordingPulse]);
-
-  // Create animated style for the record button
-  const animatedRecordButtonStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ scale: recordingPulse.value }],
-    };
-  });
-
-  // Real-time waveform updates during recording
-  useEffect(() => {
-    if (isRecording) {
-      meteringInterval.current = setInterval(async () => {
-        try {
-          // Try to get metering data from recorder
-          const status = recorder.getStatus();
-          let level = 0.3; // Default fallback level
-
-          if (status && typeof status.metering === 'number') {
-            // Convert dB to normalized value (typical range -160 to 0 dB)
-            const dbLevel = status.metering;
-            level = Math.max(0.1, Math.min(1.0, (dbLevel + 50) / 50));
-          } else {
-            // Generate more realistic simulated audio levels
-            const time = Date.now() / 1000;
-            const baseLevel = 0.3 + Math.sin(time * 2) * 0.2; // Sine wave base
-            const variation = (Math.random() - 0.5) * 0.4; // Random variation
-            const spike = Math.random() < 0.1 ? Math.random() * 0.3 : 0; // Occasional spikes
-            level = Math.max(0.1, Math.min(0.9, baseLevel + variation + spike));
-          }
-
-          // Update waveform data by shifting array and adding new value
-          setWaveformData((prevData) => {
-            const newData = [...prevData.slice(1), level];
-            return newData;
-          });
-        } catch (error) {
-          console.log('Using simulated audio data');
-          // Fallback to realistic simulated data
-          const time = Date.now() / 1000;
-          const baseLevel = 0.4 + Math.sin(time * 3) * 0.2;
-          const noise = (Math.random() - 0.5) * 0.3;
-          const level = Math.max(0.15, Math.min(0.85, baseLevel + noise));
-
-          setWaveformData((prevData) => [...prevData.slice(1), level]);
-        }
-      }, 80); // Update every 80ms for smooth animation
-
-      return () => {
-        if (meteringInterval.current) {
-          clearInterval(meteringInterval.current);
-          meteringInterval.current = null;
-        }
-      };
-    } else {
-      // Reset to quiet state when not recording
-      setWaveformData(Array.from({ length: 30 }, () => 0.2));
-
-      if (meteringInterval.current) {
-        clearInterval(meteringInterval.current);
-        meteringInterval.current = null;
-      }
-    }
-  }, [isRecording, recorder]);
-
-  // Auto-stop recording when max duration is reached
-  useEffect(() => {
-    if (maxDuration && duration >= maxDuration && isRecording) {
-      handleStopRecording();
-    }
-  }, [duration, maxDuration, isRecording]);
-
-  const startDurationTimer = () => {
-    setDuration(0);
-    durationInterval.current = setInterval(() => {
-      setDuration((prev) => prev + 0.1);
-    }, 100);
-  };
-
-  const stopDurationTimer = () => {
-    if (durationInterval.current) {
-      clearInterval(durationInterval.current);
-      durationInterval.current = null;
-    }
-  };
-
-  const handleStartRecording = async () => {
-    if (!permissionGranted) {
-      Alert.alert(
-        'Permission Required',
-        'Microphone permission is required to record audio.'
-      );
-      return;
-    }
-
-    try {
-      console.log('Starting recording...');
-      setRecordingUri(null);
-      setIsRecording(true);
-      startDurationTimer();
-
-      // Enable metering in recording options
-      const meteringOptions = {
-        ...recordingOptions,
-        isMeteringEnabled: true,
-      };
-
-      await recorder.prepareToRecordAsync(meteringOptions);
-      await recorder.record();
-
-      onRecordingStart?.();
-      console.log('Recording started successfully');
-    } catch (error) {
-      console.error('Error starting recording:', error);
-      setIsRecording(false);
-      stopDurationTimer();
-      Alert.alert('Error', 'Failed to start recording. Please try again.');
-    }
-  };
-
-  const handleStopRecording = async () => {
-    try {
-      console.log('Stopping recording...');
-      setIsRecording(false);
-      stopDurationTimer();
-
-      await recorder.stop();
-      const uri = recorder.uri;
-      console.log('Recording stopped, URI:', uri);
-
-      if (uri) {
-        setRecordingUri(uri);
-        onRecordingComplete?.(uri);
-      }
-
-      onRecordingStop?.();
-    } catch (error) {
-      console.error('Error stopping recording:', error);
-      Alert.alert('Error', 'Failed to stop recording. Please try again.');
-    }
-  };
-
-  const handleDeleteRecording = () => {
-    Alert.alert(
-      'Delete Recording',
-      'Are you sure you want to delete this recording?',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        {
-          text: 'Delete',
-          style: 'destructive',
-          onPress: () => {
-            setRecordingUri(null);
-            setDuration(0);
-          },
-        },
-      ]
-    );
-  };
-
-  const handleSaveRecording = () => {
-    if (recordingUri && onRecordingComplete) {
-      onRecordingComplete(recordingUri);
-    }
-  };
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    const centisecs = Math.floor((seconds % 1) * 100);
-    return `${mins}:${secs.toString().padStart(2, '0')}.${centisecs
-      .toString()
-      .padStart(2, '0')}`;
-  };
-
-  if (!permissionGranted) {
-    return (
-      <View
-        style={[styles.container, { backgroundColor: secondaryColor }, style]}
-      >
-        <Text variant='body' style={{ color: textColor, textAlign: 'center' }}>
-          Microphone permission is required to record audio.
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View
-      style={[styles.container, { backgroundColor: secondaryColor }, style]}
-    >
-      {recordingUri && !isRecording ? (
-        <View style={{ alignItems: 'center' }}>
-          <AudioPlayer
-            source={{ uri: recordingUri }}
-            showControls={true}
-            showWaveform={true}
-            showTimer={true}
-            autoPlay={false}
-          />
-          <View style={styles.playbackControls}>
-            <Button
-              variant='outline'
-              size='icon'
-              onPress={handleDeleteRecording}
-              style={styles.controlButton}
-            >
-              <Trash2 size={20} color={redColor} />
-            </Button>
-
-            <Button
-              variant='default'
-              onPress={handleSaveRecording}
-              style={[styles.saveButton, { backgroundColor: greenColor }]}
-            >
-              <Download size={20} color='white' />
-              <Text style={{ color: 'white', marginLeft: 8 }}>Save</Text>
-            </Button>
-          </View>
-        </View>
-      ) : (
-        <View>
-          {/* Recording Status */}
-          {isRecording ? (
-            <View style={styles.recordingStatus}>
-              <View style={styles.recordingIndicator}>
-                <Circle size={8} color={redColor} fill={redColor} />
-                <Text
-                  variant='caption'
-                  style={{ color: redColor, marginLeft: 8 }}
-                >
-                  Recording
-                </Text>
-              </View>
-            </View>
-          ) : (
-            <View style={{ height: 36 }} />
-          )}
-          {/* Waveform Visualization */}
-          {showWaveform && (
-            <View style={styles.waveformContainer}>
-              <AudioWaveform
-                data={waveformData}
-                isPlaying={false} // Disable built-in animation
-                progress={0}
-                height={60}
-                barCount={30}
-                barWidth={4}
-                barGap={2}
-                activeColor={isRecording ? redColor : primaryColor}
-                inactiveColor={mutedColor}
-                animated={false} // Disable built-in animation to use real-time data
-              />
-            </View>
-          )}
-          {/* Timer */}
-          {showTimer && (
-            <View style={styles.timerContainer}>
-              <Text
-                variant='title'
-                style={{
-                  color: isRecording ? redColor : textColor,
-                  fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-                }}
-              >
-                {formatTime(duration)}
-              </Text>
-              {maxDuration && (
-                <Text variant='caption' style={{ color: mutedColor }}>
-                  Max: {formatTime(maxDuration)}
-                </Text>
-              )}
-            </View>
-          )}
-
-          {/* Controls */}
-          <View style={styles.controlsContainer}>
-            {!isRecording && !recordingUri && (
-              <Animated.View style={animatedRecordButtonStyle}>
-                <Button
-                  variant='default'
-                  size='lg'
-                  onPress={handleStartRecording}
-                  style={[styles.recordButton, { backgroundColor: redColor }]}
-                >
-                  <Mic size={32} color='white' />
-                </Button>
-              </Animated.View>
-            )}
-
-            {isRecording && (
-              <Button
-                variant='default'
-                size='lg'
-                onPress={handleStopRecording}
-                style={[styles.stopButton, { backgroundColor: redColor }]}
-              >
-                <Square size={32} fill='white' color='white' />
-              </Button>
-            )}
-          </View>
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: BORDER_RADIUS,
-    padding: 20,
-    alignItems: 'center',
-  },
-  recordingStatus: {
-    height: 36,
-  },
-  recordingIndicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  waveformContainer: {
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  timerContainer: {
-    alignItems: 'center',
-    marginBottom: 20,
-  },
-  controlsContainer: {
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  recordButton: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-  },
-  stopButton: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-  },
-  playbackControls: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 16,
-    marginTop: 16,
-  },
-  controlButton: {
-    width: 48,
-    height: 48,
-  },
-  saveButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 24,
-  },
-});