vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/features/audio-recorder/components/audio-player.tsx

@@ -0,0 +1,301 @@
+import {
+  type AudioSource,
+  useAudioPlayer,
+  useAudioPlayerStatus,
+} from 'expo-audio';
+import { useCallback, useEffect, useState } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { tv } from 'tailwind-variants';
+
+import { Button, Icon, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+// import { Progress } from '@/components/ui/progress';
+import { AudioWaveform } from './audio-waveform';
+
+const audioPlayerStyles = tv({
+  slots: {
+    container: 'm-2 rounded-2xl p-4',
+    waveformContainer: 'mb-3 items-center',
+    progressBarContainer: 'mb-3 px-1',
+    timerContainer: 'mb-3 flex-row items-center justify-between',
+    timerText: 'font-mono text-sm text-muted',
+    controlsContainer: 'mt-2 flex-row items-center justify-center gap-4',
+    controlButton: 'size-14',
+    playPauseButton: 'size-16 rounded-full',
+    loadingContainer: 'items-center p-2',
+    loadingText: 'text-muted',
+  },
+  variants: {
+    shrinked: {
+      true: {
+        container: 'm-0 rounded-2xl p-2',
+        waveformContainer: 'mb-0 items-center',
+        progressBarContainer: 'mb-0 px-1',
+        timerContainer: 'mb-0 flex-row items-center justify-between',
+        controlsContainer: 'mt-0 flex-row items-center justify-center gap-2',
+      },
+    },
+  },
+});
+
+export interface AudioPlayerProps {
+  source: AudioSource;
+  shrinked?: boolean;
+  style?: ViewStyle & { className?: string };
+  showControls?: boolean;
+  showWaveform?: boolean;
+  showTimer?: boolean;
+  showProgressBar?: boolean;
+  autoPlay?: boolean;
+  onPlaybackStatusUpdate?: (status: any) => void;
+  // Custom sizing props for compact mode
+  waveformHeight?: number;
+  waveformBarCount?: number;
+  waveformBarWidth?: number;
+  waveformBarGap?: number;
+  controlButtonSize?: number;
+  playButtonSize?: number;
+}
+
+export function AudioPlayer({
+  source,
+  style,
+  shrinked = false,
+  showControls = true,
+  showWaveform = true,
+  showTimer = true,
+  // showProgressBar = true,
+  autoPlay = false,
+  onPlaybackStatusUpdate,
+  // Custom sizing with defaults
+  waveformHeight = 80,
+  waveformBarCount = 60,
+  waveformBarWidth = 4,
+  waveformBarGap = 1.5,
+  controlButtonSize = 24,
+  playButtonSize = 28,
+}: AudioPlayerProps) {
+  const {
+    container,
+    waveformContainer,
+    // progressBarContainer,
+    timerContainer,
+    timerText,
+    controlsContainer,
+    controlButton,
+    playPauseButton,
+    loadingContainer,
+    loadingText,
+  } = audioPlayerStyles({ shrinked });
+  const theme = useThemeConfig();
+  const player = useAudioPlayer(source);
+  const status = useAudioPlayerStatus(player);
+  const [duration, setDuration] = useState(0);
+  const [position, setPosition] = useState(0);
+  const [isSeeking, setIsSeeking] = useState(false);
+
+  // Enhanced waveform data - more bars for smoother visualization
+  const [waveformData] = useState<number[]>(
+    Array.from({ length: 60 }, (_, i) => {
+      // Create more varied and realistic waveform pattern
+      const base1 = Math.sin((i / 60) * Math.PI * 6) * 0.4 + 0.5;
+      const base2 = Math.sin((i / 60) * Math.PI * 2.5) * 0.3 + 0.4;
+      const noise = (Math.random() - 0.5) * 0.25;
+      const peak = Math.random() < 0.15 ? Math.random() * 0.4 : 0; // Occasional peaks
+      return Math.max(0.15, Math.min(0.95, (base1 + base2) / 2 + noise + peak));
+    }),
+  );
+
+  useEffect(() => {
+    if (autoPlay && player.isLoaded && !player.playing) {
+      player.play();
+    }
+  }, [autoPlay, player]);
+
+  useEffect(() => {
+    if (!isSeeking && status?.isLoaded) {
+      setDuration(status.duration || 0);
+      setPosition(status.currentTime || 0);
+
+      if (status.didJustFinish && status.duration > 0) {
+        player.seekTo(0);
+        player.pause();
+      }
+
+      onPlaybackStatusUpdate?.(status);
+    }
+  }, [status, isSeeking, player, onPlaybackStatusUpdate]);
+
+  const handlePlayPause = () => {
+    if (player.playing) {
+      player.pause();
+    } else {
+      player.play();
+    }
+  };
+
+  const handleBackFiveSeconds = () => {
+    const newPosition = Math.max(0, position - 5);
+    seekToPosition(newPosition);
+  };
+
+  const handleRestart = () => {
+    seekToPosition(0);
+  };
+
+  // Unified seeking function
+  const seekToPosition = useCallback(
+    (newPosition: number) => {
+      if (player.isLoaded && duration > 0) {
+        const clampedPosition = Math.max(0, Math.min(duration, newPosition));
+        player.seekTo(clampedPosition);
+        setPosition(clampedPosition);
+      }
+    },
+    [player, duration],
+  );
+
+  // Handle waveform seeking
+  const handleWaveformSeek = useCallback(
+    (seekPercentage: number) => {
+      if (duration > 0) {
+        const newPosition = (seekPercentage / 100) * duration;
+        seekToPosition(newPosition);
+      }
+    },
+    [duration, seekToPosition],
+  );
+
+  // Handle progress bar seeking
+  // const handleProgressSeek = useCallback(
+  //   (progressValue: number) => {
+  //     if (duration > 0) {
+  //       const newPosition = (progressValue / 100) * duration;
+  //       seekToPosition(newPosition);
+  //     }
+  //   },
+  //   [duration, seekToPosition]
+  // );
+
+  // Handle seeking start/end for smooth updates
+  const handleSeekStart = useCallback(() => {
+    setIsSeeking(true);
+  }, []);
+
+  const handleSeekEnd = useCallback(() => {
+    setIsSeeking(false);
+  }, []);
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const progressPercentage = duration > 0 ? (position / duration) * 100 : 0;
+
+  return (
+    <View className={container({ class: style?.className })}>
+      {/* Waveform Visualization with seeking capability */}
+      {showWaveform && (
+        <View className={waveformContainer()}>
+          <AudioWaveform
+            data={waveformData}
+            isPlaying={player.playing}
+            progress={progressPercentage}
+            onSeek={handleWaveformSeek}
+            onSeekStart={handleSeekStart}
+            onSeekEnd={handleSeekEnd}
+            height={waveformHeight}
+            barCount={waveformBarCount}
+            barWidth={waveformBarWidth}
+            barGap={waveformBarGap}
+            animated={true}
+            showProgress={true}
+            interactive={true} // Enable seeking
+          />
+        </View>
+      )}
+
+      {/* Interactive Progress Bar */}
+      {/* {showProgressBar && (
+        <View className={progressBarContainer()}>
+          <Progress
+            value={progressPercentage}
+            onValueChange={handleProgressSeek}
+            onSeekStart={handleSeekStart}
+            onSeekEnd={handleSeekEnd}
+            style={{ height: 8 }}
+            indicatorClassName="bg-destructive"
+          />
+        </View>
+      )} */}
+
+      {/* Timer Display */}
+      {showTimer && (
+        <View className={timerContainer()}>
+          <Text className={timerText()}>{formatTime(position)}</Text>
+          <Text className={timerText()}>{formatTime(duration)}</Text>
+        </View>
+      )}
+
+      {/* Playback Controls */}
+      {showControls && (
+        <View className={controlsContainer()}>
+          {/* Back 5s Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className={controlButton()}
+            onPress={handleBackFiveSeconds}
+            disabled={!player.isLoaded}
+          >
+            <Icon name="refresh" size={controlButtonSize} />
+          </Button>
+
+          {/* Play/Pause Button */}
+          <Button
+            variant="default"
+            size="icon"
+            className={playPauseButton()}
+            onPress={handlePlayPause}
+            disabled={!player.isLoaded}
+          >
+            {player.playing ? (
+              <Icon
+                name="pause"
+                size={playButtonSize}
+                color={theme.colors.background}
+              />
+            ) : (
+              <Icon
+                name="play"
+                size={playButtonSize}
+                color={theme.colors.background}
+              />
+            )}
+          </Button>
+
+          {/* Stop Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className={controlButton()}
+            onPress={handleRestart}
+            disabled={!player.isLoaded}
+          >
+            <Icon name="stop" size={controlButtonSize} />
+          </Button>
+        </View>
+      )}
+
+      {/* Loading State */}
+      {!player.isLoaded && (
+        <View className={loadingContainer()}>
+          <Text className={loadingText()}>Loading audio...</Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/2/apps/native/src/features/audio-recorder/components/audio-recorder.tsx

@@ -0,0 +1,373 @@
+import {
+  AudioModule,
+  type RecordingOptions,
+  RecordingPresets,
+  setAudioModeAsync,
+  useAudioRecorder,
+  useAudioRecorderState,
+} from 'expo-audio';
+import { getInfoAsync } from 'expo-file-system/legacy';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Alert, Animated, View, type ViewStyle } from 'react-native';
+
+import { Button, Icon, Text } from '@/components/ui';
+import colors from '@/components/ui/colors';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { AudioPlayer } from './audio-player';
+import { AudioWaveform } from './audio-waveform';
+
+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 theme = useThemeConfig();
+  const recordingOptions =
+    customRecordingOptions ||
+    (quality === 'high'
+      ? RecordingPresets.HIGH_QUALITY
+      : RecordingPresets.LOW_QUALITY);
+
+  const recorder = useAudioRecorder(recordingOptions);
+  const [permissionGranted, setPermissionGranted] = useState(false);
+  // Use recorder state duration instead of custom interval
+  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),
+  );
+
+  // Animation values
+  const recordingPulse = useRef(new Animated.Value(1)).current;
+
+  // 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' }],
+          );
+        }
+        // Make sure the OS session is configured for recording & playback in silent mode
+        await setAudioModeAsync({
+          allowsRecording: true,
+          playsInSilentMode: true,
+        });
+      } catch (error) {
+        console.error('Error requesting permissions:', error);
+        setPermissionGranted(false);
+      }
+    })();
+  }, []);
+
+  // Recording pulse animation
+  useEffect(() => {
+    if (isRecording) {
+      const pulse = Animated.loop(
+        Animated.sequence([
+          Animated.timing(recordingPulse, {
+            toValue: 1.2,
+            duration: 600,
+            useNativeDriver: true,
+          }),
+          Animated.timing(recordingPulse, {
+            toValue: 1,
+            duration: 600,
+            useNativeDriver: true,
+          }),
+        ]),
+      );
+      pulse.start();
+
+      return () => pulse.stop();
+    }
+    recordingPulse.setValue(1);
+  }, [isRecording, recordingPulse]);
+
+  const recState = useAudioRecorderState(recorder, 100); // updates ~every 100ms, includes time & metering
+  const durationSeconds = recState.durationMillis / 1000;
+
+  // Real-time waveform updates during recording
+  useEffect(() => {
+    if (!isRecording) {
+      setWaveformData(Array.from({ length: 30 }, () => 0.2));
+      return;
+    }
+    // Use metering from recorder state when available, otherwise simulate
+    const db = typeof recState.metering === 'number' ? recState.metering : null;
+    const level =
+      db !== null
+        ? Math.max(0.1, Math.min(1.0, (db + 50) / 50))
+        : 0.35 + (Math.random() - 0.5) * 0.25; // slightly more varied fallback
+
+    setWaveformData((prev) => [...prev.slice(1), level]);
+  }, [
+    isRecording,
+    recState.metering,
+    recState.canRecord,
+    recState.durationMillis,
+    recState.isRecording,
+  ]);
+
+  // No custom duration interval; rely on recState.durationMillis
+
+  const handleStopRecording = useCallback(async () => {
+    try {
+      console.log('Stopping recording...');
+      setIsRecording(false);
+
+      await recorder.stop();
+      const uri = recorder.uri;
+      console.log('Recording stopped, URI:', uri);
+
+      if (uri) {
+        // === START DEBUG CODE ===
+        try {
+          const fileInfo = await getInfoAsync(uri);
+          console.log('Recorded File Info:', fileInfo);
+          if (fileInfo.exists && fileInfo.size === 0) {
+            Alert.alert(
+              'Debug Info',
+              'The recording was created but is empty (0 bytes). This is likely still a permissions issue.',
+            );
+          }
+        } catch (e) {
+          console.error("Couldn't get file info", e);
+        }
+        // === END DEBUG CODE ===
+
+        setRecordingUri(uri);
+        onRecordingComplete?.(uri);
+      }
+
+      onRecordingStop?.();
+    } catch (error) {
+      console.error('Error stopping recording:', error);
+      Alert.alert('Error', 'Failed to stop recording. Please try again.');
+    }
+  }, [recorder, onRecordingComplete, onRecordingStop]);
+
+  // Auto-stop recording when max duration is reached
+  useEffect(() => {
+    if (maxDuration && durationSeconds >= maxDuration && isRecording) {
+      handleStopRecording();
+    }
+  }, [durationSeconds, maxDuration, isRecording, handleStopRecording]);
+
+  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);
+
+      // Enable metering in recording options
+      const meteringOptions = {
+        ...recordingOptions,
+        isMeteringEnabled: true,
+      };
+
+      await recorder.prepareToRecordAsync(meteringOptions);
+      recorder.record();
+
+      onRecordingStart?.();
+      console.log('Recording started successfully');
+    } catch (error) {
+      console.error('Error starting recording:', error);
+      setIsRecording(false);
+      // nothing to stop here; using recState
+      Alert.alert('Error', 'Failed to start 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);
+          },
+        },
+      ],
+    );
+  };
+
+  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
+        className="items-center rounded-lg bg-secondary p-2 pt-28"
+        style={style}
+      >
+        <Text className="text-text text-center">
+          Microphone permission is required to record audio.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      className="items-center rounded-lg bg-secondary p-2 pt-28"
+      style={style}
+    >
+      {recordingUri && !isRecording ? (
+        <View className="items-center">
+          <AudioPlayer
+            key={recordingUri} // Force fresh mount on new recording
+            source={{ uri: recordingUri }}
+            showControls={true}
+            showWaveform={true}
+            showTimer={true}
+            autoPlay={false}
+            onPlaybackStatusUpdate={(status) => {
+              console.log('Playback status:', status);
+            }}
+          />
+          <View className="flex-row items-center gap-3">
+            <Button
+              variant="outline"
+              size="icon"
+              onPress={handleDeleteRecording}
+              className="size-12"
+            >
+              <Icon name="trash" size={20} color={theme.colors.foreground} />
+            </Button>
+
+            <Button
+              variant="default"
+              size="slim"
+              onPress={handleSaveRecording}
+              className="rounded-2xl bg-green-600 px-8 dark:bg-green-600"
+            >
+              <Text className="text-white">Save</Text>
+            </Button>
+          </View>
+        </View>
+      ) : (
+        <View className="w-full">
+          {/* Recording Status */}
+          <View className="h-9 flex-row items-center justify-center">
+            {isRecording && (
+              <View className="flex-row items-center">
+                <Icon name="ellipse" size={8} color={colors.danger[500]} />
+                <Text className="ml-2 text-danger-500">Recording</Text>
+              </View>
+            )}
+          </View>
+
+          {/* Waveform Visualization */}
+          {showWaveform && (
+            <View className="mb-2 items-center">
+              <AudioWaveform
+                data={waveformData}
+                isPlaying={false}
+                progress={0}
+                height={80}
+                barCount={30}
+                barWidth={6}
+                barGap={2}
+                activeColor={isRecording ? '#EF4444' : '#6b7280'} //
+                inactiveColor="#444444"
+                animated={false}
+              />
+            </View>
+          )}
+          {/* Timer */}
+          {showTimer && (
+            <View className="mb-2 items-center">
+              <Text
+                className={`font-mono ${isRecording ? 'text-danger-500' : 'text-text'}`}
+              >
+                {formatTime(durationSeconds)}
+              </Text>
+              {maxDuration && (
+                <Text className="text-muted">
+                  Max: {formatTime(maxDuration)}
+                </Text>
+              )}
+            </View>
+          )}
+
+          {/* Controls */}
+          <View className="mb-3 items-center">
+            {!isRecording && !recordingUri && (
+              <Animated.View style={{ transform: [{ scale: recordingPulse }] }}>
+                <Button
+                  variant="default"
+                  onPress={handleStartRecording}
+                  className="size-20 rounded-full bg-danger-500"
+                >
+                  <Icon name="mic" size={36} color={theme.colors.background} />
+                </Button>
+              </Animated.View>
+            )}
+
+            {isRecording && (
+              <Button
+                variant="default"
+                onPress={handleStopRecording}
+                className="size-20 rounded-full bg-danger-500"
+              >
+                <Icon name="stop" size={36} color={theme.colors.background} />
+              </Button>
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}