vibefast-cli 1.1.3 → 1.2.1

package/recipes/audio-recorder-supabase/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>
+  );
+}

package/recipes/audio-recorder-supabase/apps/native/src/features/audio-recorder/components/audio-waveform.tsx

@@ -0,0 +1,270 @@
+import { Canvas, RoundedRect } from '@shopify/react-native-skia';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { PanResponder, StyleSheet, View, type ViewStyle } from 'react-native';
+
+export interface AudioWaveformProps {
+  data?: number[]; // Audio amplitude data
+  isPlaying?: boolean;
+  progress?: number; // 0-100
+  onSeek?: (position: number) => void;
+  onSeekStart?: () => void;
+  onSeekEnd?: () => void;
+  style?: ViewStyle & { className?: string };
+  height?: number;
+  barCount?: number;
+  barWidth?: number;
+  barGap?: number;
+  activeColor?: string;
+  inactiveColor?: string;
+  animated?: boolean;
+  showProgress?: boolean;
+  interactive?: boolean; // New prop to enable seeking
+}
+
+export function AudioWaveform({
+  data,
+  isPlaying = false,
+  progress = 0,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  style,
+  height = 60,
+  barCount = 50,
+  barWidth = 3,
+  barGap = 2,
+  activeColor,
+  inactiveColor,
+  animated = true,
+  showProgress = false,
+  interactive = false,
+}: AudioWaveformProps) {
+  const finalActiveColor = activeColor || 'hsl(0, 84.2%, 60.2%)'; // destructive
+  const finalInactiveColor = inactiveColor || 'hsl(215.4, 16.3%, 56.9%)'; // textMuted
+
+  // Generate sample data if none provided
+  const waveformData = useMemo(
+    () => data || generateSampleWaveform(barCount),
+    [data, barCount],
+  );
+
+  // Internal display data used for drawing (allows lightweight animation without many Animated.Values)
+  const [displayData, setDisplayData] = useState<number[]>(() => {
+    const base = waveformData;
+    return Array.from({ length: barCount }, (_, i) => base[i] || 0.2);
+  });
+
+  // Container ref for measuring dimensions
+  const containerRef = useRef<View>(null);
+  const containerWidth = useRef(0);
+
+  // Calculate total width including gaps
+  const totalWidth = barCount * barWidth + (barCount - 1) * barGap;
+
+  // Calculate progress line position more accurately
+  // const getProgressLinePosition = () => {
+  //   const progressRatio = Math.max(0, Math.min(100, progress)) / 100;
+
+  //   if (progressRatio === 0) return 0;
+  //   if (progressRatio === 1) return totalWidth - 1; // Slight offset to keep within bounds
+
+  //   // Calculate which bar the progress falls on
+  //   const exactBarPosition = progressRatio * barCount;
+  //   const barIndex = Math.floor(exactBarPosition);
+  //   const barProgress = exactBarPosition - barIndex;
+
+  //   // Calculate position accounting for bars and gaps
+  //   let position = barIndex * (barWidth + barGap);
+  //   position += barProgress * barWidth;
+
+  //   // Ensure we don't exceed the waveform width
+  //   return Math.min(position, totalWidth - 1);
+  // };
+
+  // Update display data when incoming data changes (real-time recorder case)
+  useEffect(() => {
+    if (data && !animated) {
+      setDisplayData(() =>
+        Array.from({ length: barCount }, (_, i) => data[i] || 0.2),
+      );
+    }
+  }, [data, animated, barCount]);
+
+  // Enhanced animation system for smooth playback
+  useEffect(() => {
+    if (isPlaying && animated && !showProgress) {
+      let raf: number;
+      const tick = () => {
+        const t = Date.now() / 600; // slower phase
+        setDisplayData((prev) =>
+          prev.map((_, i) => {
+            const base = waveformData[i] || 0.2;
+            const variation = 0.9 + Math.sin(t + i * 0.15) * 0.1;
+            return Math.max(0.1, Math.min(1, base * variation));
+          }),
+        );
+        raf = requestAnimationFrame(tick);
+      };
+      raf = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [isPlaying, animated, showProgress, waveformData]);
+
+  // Pan responder for seeking
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => {
+        console.log(
+          'AudioWaveform: onStartShouldSetPanResponder, interactive:',
+          interactive,
+        );
+        return interactive;
+      },
+      onMoveShouldSetPanResponder: () => {
+        console.log(
+          'AudioWaveform: onMoveShouldSetPanResponder, interactive:',
+          interactive,
+        );
+        return interactive;
+      },
+      onMoveShouldSetPanResponderCapture: () => interactive,
+      onPanResponderGrant: (evt) => {
+        if (!interactive) return;
+        console.log(
+          'AudioWaveform: PanResponder grant, locationX:',
+          evt.nativeEvent.locationX,
+        );
+        onSeekStart?.();
+        handleSeek(evt.nativeEvent.locationX);
+      },
+      onPanResponderMove: (evt) => {
+        if (!interactive) return;
+        handleSeek(evt.nativeEvent.locationX);
+      },
+      onPanResponderRelease: () => {
+        if (!interactive) return;
+        console.log('AudioWaveform: PanResponder release');
+        onSeekEnd?.();
+      },
+      onPanResponderTerminate: () => {
+        if (!interactive) return;
+        onSeekEnd?.();
+      },
+    }),
+  ).current;
+
+  const handleSeek = (x: number) => {
+    if (!interactive || !onSeek) return;
+
+    console.log(
+      'AudioWaveform: handleSeek called with x:',
+      x,
+      'totalWidth:',
+      totalWidth,
+    );
+    const clampedX = Math.max(0, Math.min(totalWidth, x));
+    const seekPercentage = (clampedX / totalWidth) * 100;
+    console.log('AudioWaveform: seeking to percentage:', seekPercentage);
+    onSeek(seekPercentage);
+  };
+
+  // Removed unused handleBarPress helper to satisfy lint rules
+
+  const onLayout = (event: any) => {
+    containerWidth.current = event.nativeEvent.layout.width;
+  };
+
+  const bars = useMemo(() => {
+    const progressRatio = progress / 100;
+    return Array.from({ length: barCount }, (_, index) => {
+      const barProgress = (index + 0.5) / barCount;
+      const isActive = showProgress ? barProgress <= progressRatio : true;
+      const isPast = showProgress ? barProgress > progressRatio : false;
+      let opacity = 1;
+      if (showProgress && isPast) {
+        const distance = barProgress - progressRatio;
+        opacity = Math.max(0.3, 1 - distance * 2);
+      }
+      const heightPx = 4 + (height * 0.9 - 4) * (displayData[index] || 0.2);
+      const x = index * (barWidth + barGap);
+      const y = (height - heightPx) / 2;
+      const color = isActive ? finalActiveColor : finalInactiveColor;
+      return {
+        x,
+        y,
+        width: barWidth,
+        height: heightPx,
+        color,
+        opacity,
+      } as const;
+    });
+  }, [
+    barCount,
+    barGap,
+    barWidth,
+    height,
+    displayData,
+    finalActiveColor,
+    finalInactiveColor,
+    showProgress,
+    progress,
+  ]);
+
+  return (
+    <View
+      style={[styles.container, { height }, style]}
+      onLayout={onLayout}
+      ref={containerRef}
+    >
+      <View
+        style={[styles.waveform, { width: totalWidth }]}
+        {...(interactive ? panResponder.panHandlers : {})}
+      >
+        <Canvas style={{ width: totalWidth, height }}>
+          {bars.map((b, idx) => (
+            <RoundedRect
+              key={idx}
+              x={b.x}
+              y={b.y}
+              width={b.width}
+              height={b.height}
+              color={b.color}
+              opacity={b.opacity}
+              r={b.width / 2}
+            />
+          ))}
+        </Canvas>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  waveform: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  barContainer: {},
+  bar: {},
+  progressLine: {},
+  touchOverlay: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+  },
+});
+
+// Helper to generate sample data
+function generateSampleWaveform(count: number): number[] {
+  return Array.from({ length: count }, (_, i) => {
+    const base = Math.sin((i / count) * Math.PI * 4) * 0.3 + 0.4;
+    const noise = (Math.random() - 0.5) * 0.2;
+    return Math.max(0.1, Math.min(1, base + noise));
+  });
+}

package/recipes/audio-recorder-supabase/apps/native/src/features/audio-recorder/components/index.ts

@@ -0,0 +1,4 @@
+export * from './audio-player';
+export * from './audio-recorder';
+export * from './audio-waveform';
+export * from './recording-list';