vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,301 +0,0 @@
-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

@@ -1,373 +0,0 @@
-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>
-  );
-}